diff --git a/.travis.yml b/.travis.yml
index f29a7ff8b5..27740b49d4 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -18,6 +18,19 @@ env:
     - LOGS_DIR=/tmp/logs
     - CY_KEY=4aa7a1c0-3a4f-444e-b324-6fc305a543a8
 
+#     test cypress smoke
+testSmokeCy: &testSmokeCy
+  script:
+    - ng serve --prod &
+    - $(npm bin)/wait-on http-get://localhost:4200/#
+    - npm run cy:run:smoke -- --record --key $CY_KEY --parallel --group $CI_THREAD_INDEX
+     # after all tests finish running we need
+     # to kill all background jobs (like "npm start &")
+    - kill $(jobs -p) || true
+
+testPostDeploy: &testPostDeploy
+  script: CYPRESS_baseUrl=$BASE_URL npm run cy:run:all -- --record --key $CY_KEY --parallel --group $CI_THREAD_INDEX --ci-build-id PostDeploy-$CI_THREAD_INDEX-$TRAVIS_BUILD_ID
+
 stages:
   - name: Testing
     if: ( branch = development AND type = push ) OR type = pull_request OR tag =~ ^v\d+
@@ -26,7 +39,7 @@ stages:
   - name: publish
     if: tag =~ ^v\d+
   - name: "post deploy testing"
-    if: branch = development AND type = push OR tag =~ ^v\d+
+    if:  branch = development AND type = push OR tag =~ ^v\d+
 
 before_install:
   - sh -e /etc/init.d/xvfb start
@@ -64,7 +77,6 @@ jobs:
       script: npm run lint-src
       name: "Lint"
       install: true
-
 #   test
     - script: npm run test-coverage
       name: "Test with current Angular version"
@@ -73,17 +85,18 @@ jobs:
       name: "Test with latest Angular version"
       env: NGV=latest
 #     env: NGV=next
-
-#     test cypress smoke
     - script:
-        - ng serve --prod &
-        - $(npm bin)/wait-on http-get://$URL
-        - npm run cy:run:smoke
-        # after all tests finish running we need
-        # to kill all background jobs (like "npm start &")
-        - kill $(jobs -p) || true
-      name: "Run cypress smoke testing"
-      env: URL=localhost:4200/#
+      name: "Cypress Smoke Tests 1t thread"
+      env: CI_THREAD_INDEX=3x-electron
+      <<: *testSmokeCy
+    - script:
+      name: "Cypress Smoke Tests 2d thread"
+      env: CI_THREAD_INDEX=3x-electron
+      <<: *testSmokeCy
+    - script:
+      name: "Cypress Smoke Tests 3d thread"
+      env: CI_THREAD_INDEX=3x-electron
+      <<: *testSmokeCy
 #    check prod build
     - script: npm run demo.ng-build
       name: "Check prod build with current Angular version"
@@ -155,24 +168,59 @@ jobs:
 
 #     test cypress full for herokuapp
     - stage: "post deploy testing"
-      name: "Run cypress to check SSR"
+#      name: "Run cypress to check SSR"
 #      env: URL=https://ngx-universal.herokuapp.com/#
-    - script: ./node_modules/.bin/cypress run --config integrationFolder=cypress/integration,baseUrl=https://ngx-universal.herokuapp.com/#/ --record --key $CY_KEY
-      name: "Cypress integration suit run on SSR "
-    - script: ./node_modules/.bin/cypress run --config integrationFolder=cypress/full,baseUrl=https://ngx-universal.herokuapp.com/#/ --record --key $CY_KEY
-      name: "Cypress full suit run on SSR "
+      script:
+      name: "Cypress suit run on SSR 1thread"
+      env:
+        - CI_THREAD_INDEX=3x-electron
+        - BASE_URL=https://ngx-universal.herokuapp.com/#/
+      <<: *testPostDeploy
+    - script:
+      name: "Cypress suit run on SSR 2thread"
+      env:
+        - CI_THREAD_INDEX=3x-electron
+        - BASE_URL=https://ngx-universal.herokuapp.com/#/
+      <<: *testPostDeploy
+    - script:
+      name: "Cypress suit run on SSR 3thread"
+      env:
+        - CI_THREAD_INDEX=3x-electron
+        - BASE_URL=https://ngx-universal.herokuapp.com/#/
+      <<: *testPostDeploy
 #     test cypress full for gh-pages
-    - script: ./node_modules/.bin/cypress run --config integrationFolder=cypress/integration,baseUrl=http://ngx-bootstrap-latest.surge.sh/#/ --record --key $CY_KEY
-      name: "Cypres integration run with @latest angular"
-    - script: ./node_modules/.bin/cypress run --config integrationFolder=cypress/full,baseUrl=http://ngx-bootstrap-latest.surge.sh/#/ --record --key $CY_KEY
-      name: "Cypres full run with @latest angular"
-#      env: URL=https://valor-software.com/ngx-bootstrap/#/
-    - script: ./node_modules/.bin/cypress run --config integrationFolder=cypress/integration,baseUrl=https://valor-software.com/ngx-bootstrap/#/ --record --key $CY_KEY
-      name: "Cypress integration on gh-pages after deploy"
+    - script:
+      name: "Cypress with @latest angular 1thread"
+      env:
+        - CI_THREAD_INDEX=3.1x-electron
+        - BASE_URL=http://ngx-bootstrap-latest.surge.sh/#/
+      <<: *testPostDeploy
+    - script:
+      name: "Cypress with @latest angular 2thread"
+      env:
+        - CI_THREAD_INDEX=3.1x-electron
+        - BASE_URL=http://ngx-bootstrap-latest.surge.sh/#/
+      <<: *testPostDeploy
+    - script:
+      name: "Cypress with @latest angular 3thread"
+      env:
+        - CI_THREAD_INDEX=3.1x-electron
+        - BASE_URL=http://ngx-bootstrap-latest.surge.sh/#/
+      <<: *testPostDeploy
+    - script:
+      name: "Cypress on gh-pages after deploy 1thread"
       if: tag =~ ^v\d+
-    - script: ./node_modules/.bin/cypress run --config integrationFolder=cypress/full,baseUrl=https://valor-software.com/ngx-bootstrap/#/ --record --key $CY_KEY
-      name: "Cypress full on gh-pages after deploy"
+      env:
+        - CI_THREAD_INDEX=3.2x-electron
+        - BASE_URL=https://valor-software.com/ngx-bootstrap/#/
+      <<: *testPostDeploy
+    - script:
+      name: "Cypress on gh-pages after deploy 2thread"
       if: tag =~ ^v\d+
+      env:
+        - CI_THREAD_INDEX=3.2x-electron
+        - BASE_URL=https://valor-software.com/ngx-bootstrap/#/
+      <<: *testPostDeploy
 
 cache:
   apt: true
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3038dcae94..785ece01b4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,49 @@
+<a name="3.3.0"></a>
+# [3.3.0](https://github.com/valor-software/ngx-bootstrap/compare/v3.2.0...v3.3.0) (2019-02-12)
+
+
+### Bug Fixes
+
+* **build:** use os specific path separator in npm run build.watch ([#4958](https://github.com/valor-software/ngx-bootstrap/issues/4958)) ([5e4183e](https://github.com/valor-software/ngx-bootstrap/commit/5e4183e))
+* **package:** decrease ts version in latest ng ([#5044](https://github.com/valor-software/ngx-bootstrap/issues/5044)) ([0e77f25](https://github.com/valor-software/ngx-bootstrap/commit/0e77f25))
+* **positioning:** fix on heroku also typeahead ([#5054](https://github.com/valor-software/ngx-bootstrap/issues/5054)) ([8d8836d](https://github.com/valor-software/ngx-bootstrap/commit/8d8836d))
+* **tabs:** adding tab content to DOM just if selected tab ([#1422](https://github.com/valor-software/ngx-bootstrap/issues/1422)) ([#4991](https://github.com/valor-software/ngx-bootstrap/issues/4991)) ([457c32a](https://github.com/valor-software/ngx-bootstrap/commit/457c32a))
+* **tests:** datepicker min-max demo - fix for weeks ([#5052](https://github.com/valor-software/ngx-bootstrap/issues/5052)) ([a2aaa80](https://github.com/valor-software/ngx-bootstrap/commit/a2aaa80))
+* **tests:** js heap out of memory, datepicker fixes ([#5048](https://github.com/valor-software/ngx-bootstrap/issues/5048)) ([235050e](https://github.com/valor-software/ngx-bootstrap/commit/235050e))
+* **tests:** rework tests accotding to new position service ([#5055](https://github.com/valor-software/ngx-bootstrap/issues/5055)) ([8a94917](https://github.com/valor-software/ngx-bootstrap/commit/8a94917))
+
+
+### Features
+
+* **datepicker:** Allow to disable specific dates ([#5046](https://github.com/valor-software/ngx-bootstrap/issues/5046)) ([5633d2d](https://github.com/valor-software/ngx-bootstrap/commit/5633d2d))
+* **positioning:** refactor positioning service ([#5027](https://github.com/valor-software/ngx-bootstrap/issues/5027)) ([66ae92d](https://github.com/valor-software/ngx-bootstrap/commit/66ae92d)), closes [#3303](https://github.com/valor-software/ngx-bootstrap/issues/3303) [#2993](https://github.com/valor-software/ngx-bootstrap/issues/2993) [#4470](https://github.com/valor-software/ngx-bootstrap/issues/4470)
+* **tests:** add full e2e coverage for DatePicker component ([#4951](https://github.com/valor-software/ngx-bootstrap/issues/4951)) ([fe2b29f](https://github.com/valor-software/ngx-bootstrap/commit/fe2b29f))
+* **tests:** added cypress tests parallelization ([#5003](https://github.com/valor-software/ngx-bootstrap/issues/5003)) ([e3396bb](https://github.com/valor-software/ngx-bootstrap/commit/e3396bb))
+* **typeahead:** add Input Property for selected First item in option list ([#4631](https://github.com/valor-software/ngx-bootstrap/issues/4631)) ([cd13a55](https://github.com/valor-software/ngx-bootstrap/commit/cd13a55)), closes [#3965](https://github.com/valor-software/ngx-bootstrap/issues/3965)
+
+
+
+<a name="3.2.0"></a>
+# [3.2.0](https://github.com/valor-software/ngx-bootstrap/compare/v3.1.4...v3.2.0) (2019-01-21)
+
+
+### Bug Fixes
+
+* **common:** prevent deprecated also fixed test (datepicker close on esc) for IE11 (souce tests) ([#4940](https://github.com/valor-software/ngx-bootstrap/issues/4940)) ([d338dbf](https://github.com/valor-software/ngx-bootstrap/commit/d338dbf))
+* **script:** fix latest script ([#5004](https://github.com/valor-software/ngx-bootstrap/issues/5004)) ([5f6a781](https://github.com/valor-software/ngx-bootstrap/commit/5f6a781))
+* **tests:** use prev safari version while latest doesnt work on sauce ([#5011](https://github.com/valor-software/ngx-bootstrap/issues/5011)) ([89f7265](https://github.com/valor-software/ngx-bootstrap/commit/89f7265))
+* **timepicker:** enable_disable timepicker in reactive forms ([#4563](https://github.com/valor-software/ngx-bootstrap/issues/4563)) ([ac55b08](https://github.com/valor-software/ngx-bootstrap/commit/ac55b08)), closes [#4055](https://github.com/valor-software/ngx-bootstrap/issues/4055)
+
+
+### Features
+
+* **css:** update bootstrap css to latest ([#4999](https://github.com/valor-software/ngx-bootstrap/issues/4999)) ([91b78e7](https://github.com/valor-software/ngx-bootstrap/commit/91b78e7))
+* **datepicker:** add catalan lang ([#4969](https://github.com/valor-software/ngx-bootstrap/issues/4969)) ([20fadbd](https://github.com/valor-software/ngx-bootstrap/commit/20fadbd)), closes [#4959](https://github.com/valor-software/ngx-bootstrap/issues/4959)
+* **datepicker:** Add directive for inline datepicker ([#3956](https://github.com/valor-software/ngx-bootstrap/issues/3956)) ([d9a89b4](https://github.com/valor-software/ngx-bootstrap/commit/d9a89b4)), closes [valor-software/ngx-bootstrap#3955](https://github.com/valor-software/ngx-bootstrap/issues/3955) [valor-software/ngx-bootstrap#3958](https://github.com/valor-software/ngx-bootstrap/issues/3958)
+* **tooltip:** add delay to config ([#4928](https://github.com/valor-software/ngx-bootstrap/issues/4928)) ([bcf93d4](https://github.com/valor-software/ngx-bootstrap/commit/bcf93d4)), closes [#4029](https://github.com/valor-software/ngx-bootstrap/issues/4029)
+
+
+
 <a name="3.2.0"></a>
 # [3.2.0](https://github.com/valor-software/ngx-bootstrap/compare/v3.1.4...v3.2.0) (2019-01-21)
 
diff --git a/README.md b/README.md
index 2ec75282ea..cdd4f5d32c 100644
--- a/README.md
+++ b/README.md
@@ -175,6 +175,9 @@ Please read central `ngx` modules [readme](https://github.com/valor-software/ng2
 Crossbrowser testing sponsored by [Saucelabs](https://saucelabs.com/)
 [<img src="https://saucelabs.com/content/images/circle-logo@2x.png" alt="Saucelabs" width="31" height="31">](https://saucelabs.com/)
 
+End-to-end testing sponsored by [Cypress](https://www.cypress.io/)
+[<img src="https://www.cypress.io/img/favicon.ico" alt="Cypress" width="31" height="31">](https://www.cypress.io/)
+
 ### License
 
 MIT
diff --git a/cypress.json b/cypress.json
index 0b9d55b000..35f360b4f1 100644
--- a/cypress.json
+++ b/cypress.json
@@ -2,5 +2,6 @@
   "baseUrl": "http://localhost:4200/#",
   "video": false,
   "projectId": "5mm2dy",
-  "responseTimeout": 60000
+  "responseTimeout": 60000,
+  "ignoreTestFiles": ["**/plugins/**.js", "**/support/**", "**/tsconfig.json"]
 }
diff --git a/cypress/full/accordion_page_spec.ts b/cypress/full/accordion_page_spec.ts
new file mode 100644
index 0000000000..6c694d9c81
--- /dev/null
+++ b/cypress/full/accordion_page_spec.ts
@@ -0,0 +1,431 @@
+import { AccordionPo } from '../support/accordion.po';
+
+describe('Accordion page test suite', () => {
+  const accordion = new AccordionPo();
+
+  beforeEach(() => accordion.navigateTo());
+
+  describe('Group opening event', () => {
+    const groupOpenEvent = accordion.exampleDemosArr.openEvent;
+
+    beforeEach(() => accordion.scrollToMenu('Group opening event'));
+
+    it(`example contains 3 accordion items, initially not expanded`, () => {
+      accordion.isAccordionLengthEqual(groupOpenEvent, 3);
+      accordion.isAccordionItemExpanded(groupOpenEvent, 0, false);
+      accordion.isAccordionItemExpanded(groupOpenEvent, 1, false);
+      accordion.isAccordionItemExpanded(groupOpenEvent, 2, false);
+      accordion.isItemContentVisible(groupOpenEvent, 0, false);
+      accordion.isItemContentVisible(groupOpenEvent, 1, false);
+      accordion.isItemContentVisible(groupOpenEvent, 2, false);
+    });
+
+    it(`when user click on item without event listener, item opened, in the browser console - nothing happens
+                   after click on item again, it closes and in the browser console - nothing happens`, () => {
+      accordion.createBrowserLogSpy().then(consoleSpy => {
+        accordion.clickOnAccordionGroup(groupOpenEvent, 0);
+        accordion.isAccordionItemExpanded(groupOpenEvent, 0, true);
+        accordion.isItemContentVisible(groupOpenEvent, 0, true);
+        accordion.isConsoleLogCalled(consoleSpy, false);
+        accordion.clickOnAccordionGroup(groupOpenEvent, 0);
+        accordion.isAccordionItemExpanded(groupOpenEvent, 0, false);
+        accordion.isItemContentVisible(groupOpenEvent, 0, false);
+        accordion.isConsoleLogCalled(consoleSpy, false);
+      });
+    });
+
+    it(`when user click on item with event listener, it opens and in the console - "Accordion has been opened"`, () => {
+      const openLog = 'Accordion has been opened';
+      accordion.createBrowserLogSpy().then(consoleSpy => {
+        accordion.isConsoleLogCalled(consoleSpy, false);
+        accordion.clickOnAccordionGroup(groupOpenEvent, 1);
+        accordion.isAccordionItemExpanded(groupOpenEvent, 1, true);
+        accordion.isItemContentVisible(groupOpenEvent, 1, true);
+        accordion.isConsoleLogCalled(consoleSpy, true, openLog);
+      });
+    });
+
+    it(`when user click on item again, it closes and in the console - "Accordion has been closed"`, () => {
+      const closeLog = 'Accordion has been closed';
+      accordion.clickOnAccordionGroup(groupOpenEvent, 1);
+      accordion.isAccordionItemExpanded(groupOpenEvent, 1, true);
+      accordion.isItemContentVisible(groupOpenEvent, 1, true);
+      accordion.createBrowserLogSpy().then(consoleSpy => {
+        accordion.clickOnAccordionGroup(groupOpenEvent, 1);
+        accordion.isAccordionItemExpanded(groupOpenEvent, 1, false);
+        accordion.isItemContentVisible(groupOpenEvent, 1, false);
+        accordion.isConsoleLogCalled(consoleSpy, true, closeLog);
+      });
+    });
+  });
+
+  describe('Custom HTML', () => {
+    const customHTML = accordion.exampleDemosArr.customHtml;
+
+    beforeEach(() => accordion.scrollToMenu('Custom HTML'));
+
+    it(`example contains 2 accordion items, initially not expanded, 1st have span with "Some HTML here" text,
+                   second item don't have any additional html with closed state`, () => {
+      accordion.isAccordionLengthEqual(customHTML, 2);
+      accordion.isAccordionItemExpanded(customHTML, 0, false);
+      accordion.isAccordionItemExpanded(customHTML, 1, false);
+      accordion.isItemContentVisible(customHTML, 0, false);
+      accordion.isItemContentVisible(customHTML, 1, false);
+      accordion.isAccordionItemContain(customHTML, accordion.additionalHtml, 0, 'Some HTML here', true);
+      accordion.isAccordionItemContain(customHTML, accordion.additionalHtml, 1, 'And some HTML here', false);
+    });
+
+    it(`when user click on the first item, it is opened and content shown
+                   after second click on item it is closed`, () => {
+      accordion.clickOnAccordionGroup(customHTML, 0);
+      accordion.isAccordionItemExpanded(customHTML, 0, true);
+      accordion.isAccordionItemExpanded(customHTML, 1, false);
+      accordion.isItemContentVisible(customHTML, 0, true);
+      accordion.isItemContentVisible(customHTML, 1, false);
+      accordion.clickOnAccordionGroup(customHTML, 0);
+      accordion.isAccordionItemExpanded(customHTML, 0, false);
+    });
+
+    it(`when user click on the second item, it is opened and there is a span with "And some HTML here"
+                   after second click on item it is closed`, () => {
+      accordion.clickOnAccordionGroup(customHTML, 1);
+      accordion.isAccordionItemExpanded(customHTML, 1, true);
+      accordion.isAccordionItemExpanded(customHTML, 0, false);
+      accordion.isItemContentVisible(customHTML, 1, true);
+      accordion.isItemContentVisible(customHTML, 0, false);
+      accordion.isAccordionItemContain(customHTML, accordion.additionalHtml, 1, 'And some HTML here', true);
+      accordion.clickOnAccordionGroup(customHTML, 1);
+      accordion.isAccordionItemExpanded(customHTML, 1, false);
+    });
+  });
+
+  describe('Disabled', () => {
+    const disabled = accordion.exampleDemosArr.disabled;
+
+    beforeEach(() => accordion.scrollToMenu('Disabled'));
+
+    it(`example contains 3 accordion items, initially not expanded and btn "Enable / Disable first panel"`, () => {
+      accordion.isAccordionLengthEqual(disabled, 3);
+      accordion.isAccordionItemExpanded(disabled, 0, false);
+      accordion.isAccordionItemExpanded(disabled, 1, false);
+      accordion.isAccordionItemExpanded(disabled, 2, false);
+      accordion.isItemContentVisible(disabled, 0, false);
+      accordion.isItemContentVisible(disabled, 1, false);
+      accordion.isItemContentVisible(disabled, 2, false);
+      accordion.isBtnTxtEqual(disabled, ' Enable / Disable first panel ');
+    });
+
+    it('when user click on "Enable/Disable first panel" button then the first item is not clickable', () => {
+      accordion.clickOnBtn(disabled);
+      accordion.clickOnAccordionGroup(disabled, 0);
+      accordion.isAccordionItemExpanded(disabled, 0, false);
+    });
+
+    it(`when user click on "Enable/Disable first panel" second time
+                   and click on first item, then item opened and user see content`, () => {
+      accordion.clickOnBtn(disabled);
+      accordion.clickOnBtn(disabled);
+      accordion.clickOnAccordionGroup(disabled, 0);
+      accordion.isAccordionItemExpanded(disabled, 0, true);
+      accordion.isItemContentVisible(disabled, 0, true);
+    });
+
+    it('when user click on "Enable/Disable first panel" third time then the first item is not clickable again', () => {
+      accordion.clickOnBtn(disabled);
+      accordion.clickOnBtn(disabled);
+      accordion.clickOnBtn(disabled);
+      accordion.clickOnAccordionGroup(disabled, 0);
+      accordion.isAccordionItemExpanded(disabled, 0, false);
+      accordion.isItemContentVisible(disabled, 0, false);
+    });
+
+    it('when user click on 2d and 3d item, they open and content inside shown', () => {
+      accordion.clickOnAccordionGroup(disabled, 1);
+      accordion.clickOnAccordionGroup(disabled, 2);
+      accordion.isAccordionItemExpanded(disabled, 1, true);
+      accordion.isAccordionItemExpanded(disabled, 2, true);
+      accordion.isItemContentVisible(disabled, 1, true);
+      accordion.isItemContentVisible(disabled, 2, true);
+    });
+  });
+
+  describe('Initially opened', () => {
+    const initiallyOpened = accordion.exampleDemosArr.initiallyOpened;
+
+    beforeEach(() => accordion.scrollToMenu('Initially opened'));
+
+    it(`example contains 3 accordion items, 2d initially expanded, other - not`, () => {
+      accordion.isAccordionLengthEqual(initiallyOpened, 3);
+      accordion.isAccordionItemExpanded(initiallyOpened, 0, false);
+      accordion.isAccordionItemExpanded(initiallyOpened, 1, true);
+      accordion.isAccordionItemExpanded(initiallyOpened, 2, false);
+      accordion.isItemContentVisible(initiallyOpened, 0, false);
+      accordion.isItemContentVisible(initiallyOpened, 1, true);
+      accordion.isItemContentVisible(initiallyOpened, 2, false);
+    });
+
+    it('when user click on 2d item, it should be closed', () => {
+      accordion.clickOnAccordionGroup(initiallyOpened, 1);
+      accordion.isAccordionItemExpanded(initiallyOpened, 1, false);
+      accordion.isItemContentVisible(initiallyOpened, 1, false);
+    });
+
+    it('when user click on 1t or 3d item, it should be opened', () => {
+      accordion.clickOnAccordionGroup(initiallyOpened, 0);
+      accordion.clickOnAccordionGroup(initiallyOpened, 2);
+      accordion.isAccordionItemExpanded(initiallyOpened, 0, true);
+      accordion.isAccordionItemExpanded(initiallyOpened, 2, true);
+      accordion.isItemContentVisible(initiallyOpened, 0, true);
+      accordion.isItemContentVisible(initiallyOpened, 2, true);
+    });
+
+    it('when user click on 2d item, it should be closed, after reload page, it become expanded', () => {
+      accordion.clickOnAccordionGroup(initiallyOpened, 1);
+      accordion.isAccordionItemExpanded(initiallyOpened, 1, false);
+      accordion.isItemContentVisible(initiallyOpened, 1, false);
+      cy.reload();
+      accordion.isAccordionItemExpanded(initiallyOpened, 1, true);
+      accordion.isItemContentVisible(initiallyOpened, 1, true);
+    });
+  });
+
+  describe('Dynamic accordion', () => {
+    const dynamicAccordion = accordion.exampleDemosArr.dynamicAccordion;
+
+    beforeEach(() => accordion.scrollToMenu('Dynamic accordion'));
+
+    it(`example contains 2 accordion items, initially not expanded and button "Add Group Item"`, () => {
+      accordion.isAccordionLengthEqual(dynamicAccordion, 2);
+      accordion.isAccordionItemExpanded(dynamicAccordion, 0, false);
+      accordion.isAccordionItemExpanded(dynamicAccordion, 1, false);
+      accordion.isItemContentVisible(dynamicAccordion, 0, false);
+      accordion.isItemContentVisible(dynamicAccordion, 1, false);
+      accordion.isBtnTxtEqual(dynamicAccordion, ' Add Group Item ');
+    });
+
+    it(`when user click on each item, it opens and content inside shown`, () => {
+      accordion.clickOnAccordionGroup(dynamicAccordion, 0);
+      accordion.clickOnAccordionGroup(dynamicAccordion, 1);
+      accordion.isAccordionItemExpanded(dynamicAccordion, 0, true);
+      accordion.isAccordionItemExpanded(dynamicAccordion, 1, true);
+      accordion.isItemContentVisible(dynamicAccordion, 0, true);
+      accordion.isItemContentVisible(dynamicAccordion, 1, true);
+    });
+
+    it(`when user click on "Add Group Item" button then new item added,
+                   when user click on just added new item, then shown content inside`, () => {
+      accordion.clickOnBtn(dynamicAccordion);
+      accordion.isAccordionLengthEqual(dynamicAccordion, 3);
+      accordion.isAccordionItemExpanded(dynamicAccordion, 2, false);
+      accordion.isItemContentVisible(dynamicAccordion, 2, false);
+      accordion.clickOnAccordionGroup(dynamicAccordion, 2);
+      accordion.isAccordionItemExpanded(dynamicAccordion, 2, true);
+      accordion.isItemContentVisible(dynamicAccordion, 2, true);
+    });
+
+    it(`when user click on "Add Group Item" N times, the amount of items increased on N
+                   when user reload page, amount of items in Accordion dynamic block should be 2`, () => {
+      accordion.clickOnBtn(dynamicAccordion);
+      accordion.clickOnBtn(dynamicAccordion);
+      accordion.clickOnBtn(dynamicAccordion);
+      accordion.clickOnBtn(dynamicAccordion);
+      accordion.isAccordionLengthEqual(dynamicAccordion, 6);
+      cy.reload();
+      accordion.isAccordionLengthEqual(dynamicAccordion, 2);
+    });
+  });
+
+  describe('Dynamic body content', () => {
+    const dynamicBody = accordion.exampleDemosArr.dynamicBody;
+    const itemBody = '.panel-body';
+
+    beforeEach(() => accordion.scrollToMenu('Dynamic body content'));
+
+    it(`example contains 3 accordion items, initially not expanded`, () => {
+      accordion.isAccordionLengthEqual(dynamicBody, 3);
+      accordion.isAccordionItemExpanded(dynamicBody, 0, false);
+      accordion.isAccordionItemExpanded(dynamicBody, 1, false);
+      accordion.isAccordionItemExpanded(dynamicBody, 2, false);
+      accordion.isItemContentVisible(dynamicBody, 0, false);
+      accordion.isItemContentVisible(dynamicBody, 1, false);
+      accordion.isItemContentVisible(dynamicBody, 2, false);
+    });
+
+    it(`when user click on 1st item, then user see "Add Item" button, there is 3 div-blocks`, () => {
+      accordion.clickOnAccordionGroup(dynamicBody, 0);
+      accordion.isAccordionItemExpanded(dynamicBody, 0, true);
+      accordion.isItemContentVisible(dynamicBody, 0, true);
+      accordion.isButtonExist(dynamicBody, 'Add Item ', 1);
+      accordion.isAccordionItemContain(dynamicBody, '.panel-body', 0, 'Item 1Item 2Item 3', true);
+    });
+
+    it(`when user click on "Add Item" button, amount of div-blocks inside should be increased to 4,
+                   when click on "Add Item" again, amount of div-blocks inside should be increased to 5`, () => {
+      accordion.clickOnAccordionGroup(dynamicBody, 0);
+      accordion.clickOnBtn(dynamicBody, 1);
+      accordion.isAccordionItemContain(dynamicBody, itemBody, 0, 'Item 1Item 2Item 3Item 4', true);
+      accordion.clickOnBtn(dynamicBody, 1);
+      accordion.isAccordionItemContain(dynamicBody, itemBody, 0, 'Item 1Item 2Item 3Item 4Item 5', true);
+      accordion.clickOnBtn(dynamicBody, 1);
+      accordion.isAccordionItemContain(dynamicBody, itemBody, 0, 'Item 1Item 2Item 3Item 4Item 5Item 6', true);
+    });
+
+    it(`when user click on "Add Item" button a few times, and then reload page,
+                   then amount of items should back to default (3 items and 3 div-blocks inside first item)`, () => {
+      accordion.clickOnAccordionGroup(dynamicBody, 0);
+      accordion.clickOnBtn(dynamicBody, 1);
+      accordion.clickOnBtn(dynamicBody, 1);
+      accordion.isAccordionItemExpanded(dynamicBody, 0, true);
+      accordion.isAccordionItemContain(dynamicBody, itemBody, 0, 'Item 1Item 2Item 3Item 4Item 5', true);
+      cy.reload();
+      accordion.isAccordionItemExpanded(dynamicBody, 0, false);
+      accordion.clickOnAccordionGroup(dynamicBody, 0);
+      accordion.isAccordionItemExpanded(dynamicBody, 0, true);
+      accordion.isAccordionItemContain(dynamicBody, itemBody, 0, 'Item 1Item 2Item 3', true);
+    });
+  });
+
+  describe('Manual toggle', () => {
+    const manualToggle = accordion.exampleDemosArr.manualToggle;
+
+    beforeEach(() => accordion.scrollToMenu('Manual toggle'));
+
+    it(`example contains 3 accordion items, only 3d initially expanded and 1 button "Toggle last panel"`, () => {
+      accordion.isAccordionLengthEqual(manualToggle, 3);
+      accordion.isAccordionItemExpanded(manualToggle, 0, false);
+      accordion.isAccordionItemExpanded(manualToggle, 1, false);
+      accordion.isAccordionItemExpanded(manualToggle, 2, true);
+      accordion.isItemContentVisible(manualToggle, 0, false);
+      accordion.isItemContentVisible(manualToggle, 1, false);
+      accordion.isItemContentVisible(manualToggle, 2, true);
+      accordion.isBtnTxtEqual(manualToggle, 'Toggle last panel ');
+    });
+
+    it('when user click on "Toggle last panel" button, then last item closed and user see content inside', () => {
+      accordion.clickOnBtn(manualToggle);
+      accordion.isAccordionItemExpanded(manualToggle, 2, false);
+      accordion.isItemContentVisible(manualToggle, 2, false);
+    });
+
+    it('when user click on "Toggle last panel" button second time, then last item opened again', () => {
+      accordion.clickOnBtn(manualToggle);
+      accordion.clickOnBtn(manualToggle);
+      accordion.isAccordionItemExpanded(manualToggle, 2, true);
+      accordion.isItemContentVisible(manualToggle, 2, true);
+    });
+  });
+
+  describe('Open only one at a time', () => {
+    const oneAtATime = accordion.exampleDemosArr.oneAtATime;
+
+    beforeEach(() => accordion.scrollToMenu('Open only one at a time'));
+
+    it(`example contains 3 accordion items, initially not expanded and 1 checkbox "Open only one at a time"`, () => {
+      accordion.isAccordionLengthEqual(oneAtATime, 3);
+      accordion.isAccordionItemExpanded(oneAtATime, 0, false);
+      accordion.isAccordionItemExpanded(oneAtATime, 1, false);
+      accordion.isAccordionItemExpanded(oneAtATime, 2, false);
+      accordion.isItemContentVisible(oneAtATime, 0, false);
+      accordion.isItemContentVisible(oneAtATime, 1, false);
+      accordion.isItemContentVisible(oneAtATime, 2, false);
+      accordion.isLabelTxtEqual(oneAtATime, ' Open only one at a time ');
+    });
+
+    it(`when user click on 1st item, it opened, when user click on 2d item, it opened and 1st is closed
+                   when user click on 3d item, it opened and 2d is closed`, () => {
+      accordion.clickOnAccordionGroup(oneAtATime, 0);
+      accordion.isAccordionItemExpanded(oneAtATime, 0, true);
+      accordion.isAccordionItemExpanded(oneAtATime, 1, false);
+      accordion.isAccordionItemExpanded(oneAtATime, 2, false);
+      accordion.clickOnAccordionGroup(oneAtATime, 1);
+      accordion.isItemContentVisible(oneAtATime, 0, false);
+      accordion.isItemContentVisible(oneAtATime, 1, true);
+      accordion.isItemContentVisible(oneAtATime, 2, false);
+      accordion.clickOnAccordionGroup(oneAtATime, 2);
+      accordion.isItemContentVisible(oneAtATime, 0, false);
+      accordion.isItemContentVisible(oneAtATime, 1, false);
+      accordion.isItemContentVisible(oneAtATime, 2, true);
+    });
+
+    it(`when user uncheck the check-box, then after click on each item, it stay opened`, () => {
+      accordion.clickCheckbox(oneAtATime, false);
+      accordion.clickOnAccordionGroup(oneAtATime, 0);
+      accordion.clickOnAccordionGroup(oneAtATime, 1);
+      accordion.clickOnAccordionGroup(oneAtATime, 2);
+      accordion.isAccordionItemExpanded(oneAtATime, 0, true);
+      accordion.isAccordionItemExpanded(oneAtATime, 1, true);
+      accordion.isAccordionItemExpanded(oneAtATime, 2, true);
+    });
+  });
+
+  describe('Styling', () => {
+    const styling = accordion.exampleDemosArr.styling;
+
+    beforeEach(() => accordion.scrollToMenu('Styling'));
+
+    it(`example contains 3 accordion items, only 1st initially expanded`, () => {
+      accordion.isAccordionLengthEqual(styling, 3);
+      accordion.isAccordionItemExpanded(styling, 0, true);
+      accordion.isAccordionItemExpanded(styling, 1, false);
+      accordion.isAccordionItemExpanded(styling, 2, false);
+      accordion.isItemContentVisible(styling, 0, true);
+      accordion.isItemContentVisible(styling, 1, false);
+      accordion.isItemContentVisible(styling, 2, false);
+    });
+
+    it(`styles for the 1st and 3d items and it content should be the same (from the customClass styles)
+                   styling for the 2d item and content should be default`, () => {
+      const colors = [
+        'rgb(91, 192, 222)', // light blue (malibu)
+        'rgb(255, 255, 255)', // white
+        'rgb(51, 122, 167)', // dark blue (lochmara)
+        'rgb(33, 37, 41)', // grey
+        'rgba(0, 0, 0, 0)' // black
+      ];
+      accordion.isAccordionItemHaveCorrectStyle(styling, 0, colors[0], colors[1]);
+      accordion.isAccordionBodyHaveCorrectStyle(styling, 0, colors[2], colors[1]);
+      accordion.isAccordionItemHaveCorrectStyle(styling, 2, colors[0], colors[1]);
+      accordion.isAccordionBodyHaveCorrectStyle(styling, 2, colors[2], colors[1]);
+      accordion.isAccordionItemHaveCorrectStyle(styling, 1, colors[1], colors[3]);
+      accordion.isAccordionBodyHaveCorrectStyle(styling, 1, colors[4], colors[3]);
+    });
+  });
+
+  describe('Configuring defaults', () => {
+    const configDefaults = accordion.exampleDemosArr.config;
+
+    beforeEach(() => {
+      cy.viewport(1440, 900);
+      accordion.clickOnDemoMenu('Configuring defaults');
+    });
+
+    it(`example contains 3 accordion items, initially not expanded
+                   src of component contains info how to override AccordionConfig`, () => {
+      accordion.isAccordionLengthEqual(configDefaults, 3);
+      accordion.isAccordionItemExpanded(configDefaults, 0, false);
+      accordion.isAccordionItemExpanded(configDefaults, 1, false);
+      accordion.isAccordionItemExpanded(configDefaults, 2, false);
+      accordion.isItemContentVisible(configDefaults, 0, false);
+      accordion.isItemContentVisible(configDefaults, 1, false);
+      accordion.isItemContentVisible(configDefaults, 2, false);
+      accordion.isComponentSrcContain('Configuring defaults', 'provide: AccordionConfig');
+      accordion.isComponentSrcContain('Configuring defaults', 'closeOthers: true');
+    });
+
+    it(`when user click on 1st item, it opened, when user click on 2d item, it opened and 1st is closed
+                   when user click on 3d item, it opened and 2d is closed`, () => {
+      accordion.clickOnAccordionGroup(configDefaults, 0);
+      accordion.isAccordionItemExpanded(configDefaults, 0, true);
+      accordion.isAccordionItemExpanded(configDefaults, 1, false);
+      accordion.isAccordionItemExpanded(configDefaults, 2, false);
+      accordion.clickOnAccordionGroup(configDefaults, 1);
+      accordion.isItemContentVisible(configDefaults, 0, false);
+      accordion.isItemContentVisible(configDefaults, 1, true);
+      accordion.isItemContentVisible(configDefaults, 2, false);
+      accordion.clickOnAccordionGroup(configDefaults, 2);
+      accordion.isItemContentVisible(configDefaults, 0, false);
+      accordion.isItemContentVisible(configDefaults, 1, false);
+      accordion.isItemContentVisible(configDefaults, 2, true);
+    });
+  });
+});
diff --git a/cypress/full/alerts_page_spec.ts b/cypress/full/alerts_page_spec.ts
new file mode 100644
index 0000000000..d6a42c400f
--- /dev/null
+++ b/cypress/full/alerts_page_spec.ts
@@ -0,0 +1,204 @@
+import { AlertsPo } from '../support/alerts.po';
+
+describe('Alerts page test suite', () => {
+  const alerts = new AlertsPo();
+
+  beforeEach(() => {
+    cy.clock();
+    alerts.navigateTo();
+  });
+
+  describe('Link color', () => {
+    const linkColor = alerts.exampleDemosArr.link;
+
+    it(`example contains 4 alerts with types: success, info, warning, danger
+                   each alert have clickable link with class alert-link`, () => {
+      alerts.scrollToMenu('Link color');
+      alerts.isAlertVisible(linkColor, 'success');
+      alerts.isAlertHaveLink(linkColor, 'success');
+      alerts.isAlertVisible(linkColor, 'info');
+      alerts.isAlertHaveLink(linkColor, 'info');
+      alerts.isAlertVisible(linkColor, 'warning');
+      alerts.isAlertHaveLink(linkColor, 'warning');
+      alerts.isAlertVisible(linkColor, 'danger');
+      alerts.isAlertHaveLink(linkColor, 'danger');
+    });
+  });
+
+  describe('Additional content', () => {
+    const additionalContent = alerts.exampleDemosArr.content;
+
+    it(`example contains 1 alert with type: success, content inside contains header h4 and 2 paragraphs`, () => {
+      alerts.scrollToMenu('Additional content');
+      alerts.isAlertVisible(additionalContent, 'success');
+      alerts.isAlertContentContains(additionalContent, 'success', 'h4');
+      alerts.isAlertContentContains(additionalContent, 'success', 'p');
+      alerts.isAlertContentContains(additionalContent, 'success', '.mb-0');
+    });
+  });
+
+  describe('Dismissing', () => {
+    const dismissing = alerts.exampleDemosArr.dismissing;
+
+    beforeEach(() => alerts.scrollToMenu('Dismissing'));
+
+    it(`example contains 3 alerts with types: success, info, danger,
+                   2 clickable buttons: "Toggle dismissible", "Reset`, () => {
+      alerts.isAlertVisible(dismissing, 'success');
+      alerts.isAlertVisible(dismissing, 'info');
+      alerts.isAlertVisible(dismissing, 'danger');
+      alerts.isBtnTxtEqual(dismissing, 'Toggle dismissible', 3);
+      alerts.isBtnTxtEqual(dismissing, 'Reset', 4);
+    });
+
+    it(`when user click on close button, then alert disappeared`, () => {
+      alerts.clickOnBtn(dismissing, 2);
+      alerts.isAlertVisible(dismissing, 'danger', false);
+      alerts.clickOnBtn(dismissing, 1);
+      alerts.isAlertVisible(dismissing, 'info', false);
+      alerts.clickOnBtn(dismissing, 0);
+      alerts.isAlertVisible(dismissing, 'success', false);
+    });
+
+    it(`when user click "Reset" - then alerts back to default (3 alert with close buttons)`, () => {
+      alerts.clickOnBtn(dismissing, 2);
+      alerts.clickOnBtn(dismissing, 1);
+      alerts.clickOnBtn(dismissing, 0);
+      alerts.clickOnBtn(dismissing, 1);
+      alerts.isAlertVisible(dismissing, 'success');
+      alerts.isAlertVisible(dismissing, 'info');
+      alerts.isAlertVisible(dismissing, 'danger');
+      alerts.isButtonExist(dismissing, '×Close', 0);
+      alerts.isButtonExist(dismissing, '×Close', 1);
+      alerts.isButtonExist(dismissing, '×Close', 2);
+    });
+
+    it(`when user click "Toggle dismissible", then close buttons disappeared`, () => {
+      alerts.clickOnBtn(dismissing, 3);
+      alerts.isAlertVisible(dismissing, 'success');
+      alerts.isAlertVisible(dismissing, 'info');
+      alerts.isAlertVisible(dismissing, 'danger');
+      alerts.isButtonExist(dismissing, '×Close', 0, false);
+      alerts.isButtonExist(dismissing, '×Close', 1, false);
+      alerts.isButtonExist(dismissing, '×Close', 2, false);
+    });
+
+    it(`when user click "Toggle dismissible" again, then close buttons appeared`, () => {
+      alerts.dblClickOnBtn(dismissing, 3);
+      alerts.isAlertVisible(dismissing, 'success');
+      alerts.isAlertVisible(dismissing, 'info');
+      alerts.isAlertVisible(dismissing, 'danger');
+      alerts.isButtonExist(dismissing, '×Close', 0);
+      alerts.isButtonExist(dismissing, '×Close', 1);
+      alerts.isButtonExist(dismissing, '×Close', 2);
+    });
+  });
+
+  describe('Dynamic html', () => {
+    const dynamicHtml = alerts.exampleDemosArr.dynamicHtml;
+
+    it(`example contains 3 alerts with types: success, info, danger,
+                   src of component code should contain DomSanitizer for sanitizing html`, () => {
+      alerts.scrollToMenu('Dynamic html');
+      alerts.isAlertVisible(dynamicHtml, 'success');
+      alerts.isAlertVisible(dynamicHtml, 'info');
+      alerts.isAlertVisible(dynamicHtml, 'danger');
+      alerts.isAlertContentContains(dynamicHtml, 'success', 'span');
+      alerts.isAlertContentContains(dynamicHtml, 'info', 'span');
+      alerts.isAlertContentContains(dynamicHtml, 'danger', 'span');
+      alerts.isComponentSrcContain('Dynamic html', 'DomSanitizer');
+    });
+  });
+
+  describe('Dynamic content', () => {
+    const dynamicContent = alerts.exampleDemosArr.dynamicContent;
+
+    it(`example contains 1 alert with type: success and "Change text" button`, () => {
+      alerts.isAlertVisible(dynamicContent, 'success');
+      alerts.isBtnTxtEqual(dynamicContent, 'Change text');
+    });
+
+    it(`when user click on this button, alert content changed, after click on it 2d, content changed again,
+                   when click on it 3d, then button changed to "Reset" and after click on it - content form 1t`, () => {
+      alerts.isAlertTextContains(dynamicContent, 'success', 'You successfully read this important alert');
+      alerts.clickOnBtn(dynamicContent);
+      alerts.isAlertVisible(dynamicContent, 'success');
+      alerts.isAlertTextContains(dynamicContent, 'success', 'Now this text is different from what it was before');
+      alerts.clickOnBtn(dynamicContent);
+      alerts.isAlertVisible(dynamicContent, 'success');
+      alerts.isAlertTextContains(dynamicContent, 'success', 'Well done! Click reset button');
+      alerts.isBtnTxtEqual(dynamicContent, 'Reset');
+      alerts.clickOnBtn(dynamicContent);
+      alerts.isAlertTextContains(dynamicContent, 'success', 'You successfully read this important alert');
+    });
+  });
+
+  describe('Dismiss on timeout', () => {
+    const dismissTimeout = alerts.exampleDemosArr.dismissTimeout;
+
+    it('example contains 1 success alert and "Add more" button', () => {
+      alerts.isAlertVisible(dismissTimeout, 'success');
+      alerts.isBtnTxtEqual(dismissTimeout, 'Add more');
+      cy.tick(6000);
+      alerts.isAlertVisible(dismissTimeout, 'success', false);
+    });
+
+    it('when user click on "Add more" button, then info alert shown', () => {
+      cy.tick(6000);
+      alerts.isAlertVisible(dismissTimeout, 'success', false);
+      alerts.clickOnBtn(dismissTimeout);
+      alerts.isAlertVisible(dismissTimeout, 'info');
+    });
+
+    it('when user in a short time (up to 5 sec) click on button a few times, then a few alerts shown', () => {
+      alerts.clickOnBtn(dismissTimeout);
+      alerts.clickOnBtn(dismissTimeout);
+      alerts.clickOnBtn(dismissTimeout);
+      alerts.isAlertLengthEqual(dismissTimeout, 4);
+      cy.tick(6000);
+      alerts.isAlertLengthEqual(dismissTimeout, 0);
+    });
+  });
+
+  describe('Global styling', () => {
+    const globalStyling = alerts.exampleDemosArr.globalStyling;
+
+    it(`example contains 1 alert with specific style, differs from default, template src contains this style`, () => {
+      alerts.scrollToMenu('Global styling');
+      alerts.isAlertVisible(globalStyling, 'colored');
+      alerts.isAlertHaveCss(globalStyling, 'background-color', 'rgb(123, 31, 162)');
+      alerts.isAlertHaveCss(globalStyling, 'border-color', 'rgb(74, 20, 140)');
+      alerts.isAlertHaveCss(globalStyling, 'color', 'rgb(255, 255, 255)');
+      alerts.isTemplateSrcContain('Global styling', '<style>');
+    });
+  });
+
+  describe('Component level styling', () => {
+    const componentStyling = alerts.exampleDemosArr.componentStyling;
+
+    it(`example contains 1 alert with specific style, which differs from default,
+                   src of component should contain this style`, () => {
+      alerts.scrollToMenu('Component level styling');
+      alerts.isAlertVisible(componentStyling, 'local');
+      alerts.isAlertHaveCss(componentStyling, 'background-color', 'rgb(0, 150, 136)');
+      alerts.isAlertHaveCss(componentStyling, 'border-color', 'rgb(0, 105, 92)');
+      alerts.isAlertHaveCss(componentStyling, 'color', 'rgb(255, 255, 255)');
+      alerts.isComponentSrcContain('Component level styling', 'styles: [');
+    });
+  });
+
+  describe('Configuring defaults', () => {
+    const configDefault = alerts.exampleDemosArr.config;
+
+    it(`example contains 2 alerts with type: success, info,
+                   info alert should have type: info in html and in template src`, () => {
+      cy.viewport(1440, 900);
+      alerts.clickOnDemoMenu('Configuring defaults');
+      alerts.isAlertVisible(configDefault, 'success');
+      alerts.isAlertVisible(configDefault, 'info');
+      alerts.isComponentSrcContain('Configuring defaults', 'new AlertConfig()');
+      alerts.isComponentSrcContain('Configuring defaults', 'type: \'success\'');
+      alerts.isTemplateSrcContain('Configuring defaults', 'alert type="info"');
+    });
+  });
+});
diff --git a/cypress/full/buttons_page_spec.ts b/cypress/full/buttons_page_spec.ts
new file mode 100644
index 0000000000..0a510a531b
--- /dev/null
+++ b/cypress/full/buttons_page_spec.ts
@@ -0,0 +1,224 @@
+import { ButtonsPo } from '../support/buttons.po';
+
+describe('Buttons page test suite', () => {
+  const buttons = new ButtonsPo();
+  const buttonGroupSelector = buttons.buttonGroupSelector;
+
+  beforeEach(() => buttons.navigateTo());
+
+  describe('Buttons Checkbox example', () => {
+    const checkboxDemo = buttons.exampleDemosArr.checkbox;
+
+    it('example contains 3 btns and output window. as default - picked Middle btn', () => {
+      buttons.isButtonVisible(checkboxDemo, 'Left', buttons.buttonGroupSelector);
+      buttons.isButtonVisible(checkboxDemo, 'Middle', buttons.buttonGroupSelector);
+      buttons.isButtonVisible(checkboxDemo, 'Right', buttons.buttonGroupSelector);
+      buttons.isBtnOutputSelected(checkboxDemo, 1, true);
+      buttons.isBtnOutputSelected(checkboxDemo, 0, false);
+      buttons.isBtnOutputSelected(checkboxDemo, 2, false);
+    });
+
+    it('when user clicks on the Left button it became active and after user clicks again - inactive', () => {
+      buttons.isButtonVisible(checkboxDemo, 'Left', buttons.buttonGroupSelector);
+      buttons.clickByText(checkboxDemo, 'Left');
+      buttons.isBtnOutputSelected(checkboxDemo, 0, true);
+      buttons.clickByText(checkboxDemo, 'Left');
+      buttons.isBtnOutputSelected(checkboxDemo, 0, false);
+    });
+
+    it('when user clicks on the Middle button it became inactive and after user clicks again - active', () => {
+      buttons.isButtonVisible(checkboxDemo, 'Middle', buttons.buttonGroupSelector);
+      buttons.clickByText(checkboxDemo, 'Middle');
+      buttons.isBtnOutputSelected(checkboxDemo, 1, false);
+      buttons.clickByText(checkboxDemo, 'Middle');
+      buttons.isBtnOutputSelected(checkboxDemo, 1, true);
+    });
+
+    it('when user clicks on the Right button it became active and after user clicks again - inactive', () => {
+      buttons.isButtonVisible(checkboxDemo, 'Right', buttons.buttonGroupSelector);
+      buttons.clickByText(checkboxDemo, 'Right');
+      buttons.isBtnOutputSelected(checkboxDemo, 2, true);
+      buttons.clickByText(checkboxDemo, 'Right');
+      buttons.isBtnOutputSelected(checkboxDemo, 2, false);
+    });
+  });
+
+  describe('Buttons Custom checkbox value example', () => {
+    const customCheckboxVal = buttons.exampleDemosArr.customCheckboxVal;
+
+    it('example contains 1 clickable btn with text: "Single Toggle" and "1" in the custom checkbox value field', () => {
+      buttons.isButtonVisible(customCheckboxVal, 'Single Toggle', 'button');
+      buttons.isPreviewExist(customCheckboxVal, '1');
+    });
+
+    it('when user clicks on it, btn become inactive and custom checkbox value should be "0"', () => {
+      buttons.isButtonEnabled(customCheckboxVal, 'Single Toggle');
+      buttons.isPreviewExist(customCheckboxVal, '1');
+      buttons.clickOnBtn(customCheckboxVal);
+      buttons.isPreviewExist(customCheckboxVal, '0');
+    });
+  });
+
+  describe('Buttons Checkbox with Reactive Forms example', () => {
+    const checkboxWithForm = buttons.exampleDemosArr.checkboxWithForms;
+
+    it('example contains button-group, contain of 3 parts(labels)', () => {
+      buttons.isButtonVisible(checkboxWithForm, 'Left', buttonGroupSelector);
+      buttons.isButtonVisible(checkboxWithForm, 'Right', buttonGroupSelector);
+      buttons.isButtonVisible(checkboxWithForm, 'Middle', buttonGroupSelector);
+    });
+
+    it('when user clicks on the Left button it became active and after user clicks again - inactive', () => {
+      buttons.isButtonVisible(checkboxWithForm, 'Left', buttons.buttonGroupSelector);
+      buttons.isBtnOutputSelected(checkboxWithForm, 0, false);
+      buttons.clickByText(checkboxWithForm, 'Left');
+      buttons.isBtnOutputSelected(checkboxWithForm, 0, true);
+      buttons.clickByText(checkboxWithForm, 'Left');
+      buttons.isBtnOutputSelected(checkboxWithForm, 0, false);
+    });
+
+    it('when user clicks on the Middle button it becomes inactive and after user clicks again - active', () => {
+      buttons.isButtonVisible(checkboxWithForm, 'Middle', buttons.buttonGroupSelector);
+      buttons.isBtnOutputSelected(checkboxWithForm, 1, true);
+      buttons.clickByText(checkboxWithForm, 'Middle');
+      buttons.isBtnOutputSelected(checkboxWithForm, 1, false);
+      buttons.clickByText(checkboxWithForm, 'Middle');
+      buttons.isBtnOutputSelected(checkboxWithForm, 1, true);
+
+    });
+
+    it('when user clicks on the Right button it became active and after user clicks again - inactive', () => {
+      buttons.isButtonVisible(checkboxWithForm, 'Right', buttons.buttonGroupSelector);
+      buttons.isBtnOutputSelected(checkboxWithForm, 2, false);
+      buttons.clickByText(checkboxWithForm, 'Right');
+      buttons.isBtnOutputSelected(checkboxWithForm, 2, true);
+      buttons.clickByText(checkboxWithForm, 'Right');
+      buttons.isBtnOutputSelected(checkboxWithForm, 2, false);
+    });
+  });
+
+  describe('Radio buttons', () => {
+    const radioCheck = buttons.exampleDemosArr.radioBtn;
+    const btnRadioGroup = buttons.btnRadioGroup;
+
+    it('example contains btns, Radio btns and output window. Middle btn is active and other btns - inactive', () => {
+      buttons.isButtonVisible(radioCheck, 'Left', buttonGroupSelector);
+      buttons.isButtonVisible(radioCheck, 'Middle', buttonGroupSelector);
+      buttons.isButtonVisible(radioCheck, 'Right', buttonGroupSelector);
+      buttons.isButtonVisible(radioCheck, 'Left', btnRadioGroup);
+      buttons.isButtonVisible(radioCheck, 'Middle', btnRadioGroup);
+      buttons.isButtonVisible(radioCheck, 'Right', btnRadioGroup);
+      buttons.isButtonHaveNoClass(radioCheck, 'Left', 'active', buttonGroupSelector);
+      buttons.isButtonHaveNoClass(radioCheck, 'Left', 'active', btnRadioGroup);
+      buttons.isButtonClassActive(radioCheck , 'Middle', 'active', buttonGroupSelector);
+      buttons.isButtonClassActive(radioCheck, 'Middle', 'active', btnRadioGroup);
+      buttons.isButtonHaveNoClass(radioCheck, 'Right', 'active', buttonGroupSelector);
+      buttons.isButtonHaveNoClass(radioCheck, 'Right', 'active', btnRadioGroup);
+      buttons.isPreviewExist(radioCheck, 'Middle');
+    });
+
+    it('when user clicks on Left btn, it become active and other btns become inactive', () => {
+      buttons.clickByText(radioCheck, 'Left');
+      buttons.isButtonClassActive(radioCheck , 'Left', 'active', buttonGroupSelector);
+      buttons.isButtonClassActive(radioCheck, 'Left', 'active', btnRadioGroup);
+      buttons.isPreviewExist(radioCheck, 'Left');
+      buttons.isButtonHaveNoClass(radioCheck, 'Middle', 'active', buttonGroupSelector);
+      buttons.isButtonHaveNoClass(radioCheck, 'Right', 'active', buttonGroupSelector);
+      buttons.isButtonHaveNoClass(radioCheck, 'Middle', 'active', btnRadioGroup);
+      buttons.isButtonHaveNoClass(radioCheck, 'Right', 'active', btnRadioGroup);
+    });
+
+    it('when user clicks on Right btn, it become active and other btns become inactive', () => {
+      buttons.clickByText(radioCheck, 'Right');
+      buttons.isButtonClassActive(radioCheck , 'Right', 'active', buttonGroupSelector);
+      buttons.isButtonClassActive(radioCheck, 'Right', 'active', btnRadioGroup);
+      buttons.isPreviewExist(radioCheck, 'Right');
+      buttons.isButtonHaveNoClass(radioCheck, 'Middle', 'active', buttonGroupSelector);
+      buttons.isButtonHaveNoClass(radioCheck, 'Left', 'active', buttonGroupSelector);
+      buttons.isButtonHaveNoClass(radioCheck, 'Middle', 'active', btnRadioGroup);
+      buttons.isButtonHaveNoClass(radioCheck, 'Left', 'active', btnRadioGroup);
+    });
+  });
+
+  describe('Uncheckable radio', () => {
+    const radioUncheck = buttons.exampleDemosArr.radioUnckeckable;
+
+    it('as default Middle btn is active and other btns are inactive', () => {
+      buttons.isPreviewExist(radioUncheck, 'Middle');
+      buttons.isButtonClassActive(radioUncheck , 'Middle', 'active', buttonGroupSelector);
+      buttons.isButtonHaveNoClass(radioUncheck, 'Left', 'active', buttonGroupSelector);
+      buttons.isButtonHaveNoClass(radioUncheck, 'Right', 'active', buttonGroupSelector);
+    });
+
+    it('when user clicks on Left btn, it become active and other btns become inactive', () => {
+      buttons.clickByText(radioUncheck, 'Left');
+      buttons.isButtonClassActive(radioUncheck , 'Left', 'active', buttonGroupSelector);
+      buttons.isPreviewExist(radioUncheck, 'Left');
+      buttons.isButtonHaveNoClass(radioUncheck, 'Middle', 'active', buttonGroupSelector);
+      buttons.isButtonHaveNoClass(radioUncheck, 'Right', 'active', buttonGroupSelector);
+    });
+
+    it('when user clicks on Right btn, it become active and other btns become inactive', () => {
+      buttons.clickByText(radioUncheck, 'Right');
+      buttons.isButtonClassActive(radioUncheck , 'Right', 'active', buttonGroupSelector);
+      buttons.isPreviewExist(radioUncheck, 'Right');
+      buttons.isButtonHaveNoClass(radioUncheck, 'Middle', 'active', buttonGroupSelector);
+      buttons.isButtonHaveNoClass(radioUncheck, 'Left', 'active', buttonGroupSelector);
+    });
+  });
+
+  describe('Buttons Radio with Reactive Forms example', () => {
+    const radioWithForm = buttons.exampleDemosArr.radioBtnWithForms;
+
+    it('example contains button-group, which contain of 3 parts(labels)', () => {
+      buttons.isButtonVisible(radioWithForm, 'A', buttonGroupSelector);
+      buttons.isButtonVisible(radioWithForm, 'B', buttonGroupSelector);
+      buttons.isButtonVisible(radioWithForm, 'C', buttonGroupSelector);
+    });
+
+    it('when user open Radio with Reactive Forms demo. "C" btn has class "active"', () => {
+      buttons.isPreviewExist(radioWithForm, '"radio": "C"');
+      buttons.isButtonClassActive(radioWithForm, 'C', 'active', buttonGroupSelector);
+    });
+
+    it('when user click on "A" btn, it has class "active"', () => {
+      buttons.clickByText(radioWithForm, 'A');
+      buttons.isPreviewExist(radioWithForm, '"radio": "A"');
+      buttons.isButtonClassActive(radioWithForm, 'A', 'active', buttonGroupSelector);
+    });
+
+    it('when user click on "B" btn, it becomes class "active"', () => {
+      buttons.clickByText(radioWithForm, 'B');
+      buttons.isPreviewExist(radioWithForm, '"radio": "B"');
+      buttons.isButtonClassActive(radioWithForm, 'B', 'active', buttonGroupSelector);
+    });
+  });
+
+  describe('Buttons Disabled example', () => {
+    const disabledDemo = buttons.exampleDemosArr.disabled;
+
+    it('disabled buttons example contains 2 buttons: "Button", "Enable/Disable"', () => {
+      cy.viewport(1440, 900);
+      buttons.isButtonVisible(disabledDemo, 'Button', 'button');
+      buttons.isButtonVisible(disabledDemo, 'Enable/Disable', 'button');
+    });
+
+    it('when user clicks on "Enable/Disable", "Button" become disabled', () => {
+      cy.viewport(1440, 900);
+      buttons.clickOnDemoMenu('Disabled Buttons');
+      buttons.isButtonEnabled(disabledDemo, 'Button');
+      buttons.clickOnBtn(disabledDemo, 1);
+      buttons.isButtonEnabled(disabledDemo, 'Button', false);
+    });
+
+    it('when user clicks on "Enable/Disable" second time, "Button" become enabled and clickable', () => {
+      cy.viewport(1440, 900);
+      buttons.clickOnDemoMenu('Disabled Buttons');
+      buttons.isButtonEnabled(disabledDemo, 'Button');
+      buttons.clickOnBtn(disabledDemo, 1);
+      buttons.clickOnBtn(disabledDemo, 1);
+      buttons.isButtonEnabled(disabledDemo, 'Button');
+      buttons.clickOnBtn(disabledDemo, 0);
+    });
+  });
+});
diff --git a/cypress/full/datepicker/config_method_spec.ts b/cypress/full/datepicker/config_method_spec.ts
new file mode 100644
index 0000000000..4eaa4af7ec
--- /dev/null
+++ b/cypress/full/datepicker/config_method_spec.ts
@@ -0,0 +1,53 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Config method', () => {
+  const datepicker = new DatepickerPo();
+  const configMethod = datepicker.exampleDemosArr.configMethod;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Config method');
+  });
+
+  it(`example contains Datepicker input and clickable button "Set min date"`, () => {
+    datepicker.isInputHaveAttrs(configMethod, [{ attr: 'placeholder', value: 'Datepicker' }], 0);
+    datepicker.isButtonExist(configMethod, 'Set min date', 0);
+  });
+
+  it(`when user clicks on Datepicker input, container opens, user able to click on any date,
+                 when user clicks on 8 may 2018 - then this date appear in the input`, () => {
+    datepicker.clearInputAndSendKeys(configMethod, '05/08/2018');
+    datepicker.clickEnterOnInput(configMethod);
+    datepicker.isDatepickerOpened(false);
+    datepicker.clickOnDatepickerInput(configMethod);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', '8');
+  });
+
+  it(`when user clicks on "Set min date" button, then container opens,
+                 when user try to click on any date before 13 of June 2018, nothing happens`, () => {
+    datepicker.clickOnDatepickerInput(configMethod);
+    datepicker.clearInputAndSendKeys(configMethod, '05/08/2018');
+    datepicker.clickEnterOnInput(configMethod);
+    datepicker.isDatepickerOpened(false);
+    datepicker.clickOnBtn(configMethod);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', false, 'body');
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '12');
+    datepicker.isSelectedDateExist('datepicker', false, 'body');
+  });
+
+  it(`when user clicks on "Set min date" button, then container opens,
+                 when user click on date after 13 of June 2018 - then this date chosen and appear in the input`, () => {
+    datepicker.clickOnDatepickerInput(configMethod);
+    datepicker.clearInputAndSendKeys(configMethod, '05/08/2018');
+    datepicker.clickEnterOnInput(configMethod);
+    datepicker.isDatepickerOpened(false);
+    datepicker.clickOnBtn(configMethod);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', false, 'body');
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '14');
+    datepicker.clickEnterOnInput(configMethod);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', '14');
+  });
+});
diff --git a/cypress/full/datepicker/config_properties_spec.ts b/cypress/full/datepicker/config_properties_spec.ts
new file mode 100644
index 0000000000..145344c181
--- /dev/null
+++ b/cypress/full/datepicker/config_properties_spec.ts
@@ -0,0 +1,33 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+import { formatDate } from 'ngx-bootstrap/chronos';
+
+describe('Datepicker demo test suite: Config properties', () => {
+  const datepicker = new DatepickerPo();
+  const configProperties = datepicker.exampleDemosArr.configProperties;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Config properties');
+  });
+
+  it(`example contains Datepicker input, template src should contain
+                 bsConfig parames: dateInputFormat: "DD-MM-YYYY", containerClass: "theme-red"`, () => {
+    datepicker.isInputHaveAttrs(configProperties, [{ attr: 'placeholder', value: 'Datepicker' }]);
+    datepicker.isTemplateSrcContain('Config properties', `dateInputFormat: 'DD-MM-YYYY'`);
+    datepicker.isTemplateSrcContain('Config properties', `containerClass: 'theme-red'`);
+  });
+
+  it(`when user clicks on Datepicker input, bs-datepicker-container opens in style "theme-red"`, () => {
+    datepicker.clickOnDatepickerInput(configProperties);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isDatepickerStyleCorrect('red');
+  });
+
+  it(`when user chose any date, then container disappeared and date shown in format "DD-MM-YYYY"`, () => {
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+    datepicker.clickOnDatepickerInput(configProperties);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.isInputValueEqual(configProperties, `${formatDate(chosenDate, 'DD-MM-YYYY')}`);
+    datepicker.isDatepickerOpened(false);
+  });
+});
diff --git a/cypress/full/datepicker/custom_date_format_spec.ts b/cypress/full/datepicker/custom_date_format_spec.ts
new file mode 100644
index 0000000000..50a37e2ba2
--- /dev/null
+++ b/cypress/full/datepicker/custom_date_format_spec.ts
@@ -0,0 +1,61 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Custom date format', () => {
+  const datepicker = new DatepickerPo();
+  const customFormat = datepicker.exampleDemosArr.customFormat;
+  const newDate = new Date();
+  const currentMonthNum: number = newDate.getMonth();
+  const currentMonthStr: string = datepicker.monthNames[newDate.getMonth()];
+  const currentYearNum: number = newDate.getFullYear();
+  const currentDay: number = newDate.getDate();
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Custom date format');
+  });
+
+  it(`example contains 3 Datepicker inputs, 3 clickable buttons, value in inputs is current day in diff formats:
+                     "YYYY-MM-DD", "MM/DD/YYYY", "MMMM Do YYYY,h:mm:ss a"`, () => {
+    const dayToChose = currentDay < 10 ? `0${currentDay}` : currentDay;
+    const monthToChose = currentMonthNum + 1 < 10 ? `0${currentMonthNum + 1}` : currentMonthNum + 1;
+    datepicker.isInputHaveAttrs(customFormat, [{ attr: 'formcontrolname', value: 'myDateYMD' }], 0);
+    datepicker.isInputHaveAttrs(customFormat, [{ attr: 'formcontrolname', value: 'myDateMDY' }], 1);
+    datepicker.isInputHaveAttrs(customFormat, [{ attr: 'formcontrolname', value: 'myDateFull' }], 2);
+    datepicker.isButtonExist(customFormat, 'Date Picker', 0);
+    datepicker.isButtonExist(customFormat, 'Date Picker', 1);
+    datepicker.isButtonExist(customFormat, 'Date Picker', 2);
+    datepicker.isInputValueEqual(customFormat,
+     newDate.toLocaleDateString('Lt'), 0);
+    datepicker.isInputValueEqual(customFormat, `${monthToChose}/${dayToChose}/${currentYearNum}`, 1);
+    datepicker.isInputValueContain(customFormat,
+      newDate.toLocaleDateString('en-US', { month: 'long', day: 'numeric' }), 2);
+    datepicker.isInputValueContain(customFormat,
+      `${newDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }).toLowerCase().split('')[1]}`, 2);
+  });
+
+  it('when user click on the first "Date Picker" btn, chose other date - it chosen, appear in "YYYY-MM-DD"', () => {
+    const dayToChose = currentDay === 15 ? '16' : '15';
+    datepicker.clickOnBtn(customFormat, 0);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, dayToChose);
+    datepicker.isInputValueEqual(customFormat,
+      new Date(`${currentYearNum}-${currentMonthNum + 1}-${Number(dayToChose)}`).toLocaleDateString('Lt'), 0);
+  });
+
+  it('when user click on the second "Date Picker" btn, chose other date - it chosen, appear in "MM/DD/YYYY"', () => {
+    const dayToChose = currentDay === 15 ? '16' : '15';
+    const monthToChose = currentMonthNum + 1 < 10 ? `0${currentMonthNum + 1}` : currentMonthNum + 1;
+    datepicker.clickOnBtn(customFormat, 1);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, dayToChose);
+    datepicker.isInputValueEqual(customFormat, `${monthToChose}/${dayToChose}/${currentYearNum}`, 1);
+  });
+
+  it('when user click on the third "Date Picker" btn, chose other date - it chosen, MMMM Do YYYY,h:mm:ss a', () => {
+    const dayToChose = currentDay === 15 ? '16' : '15';
+    datepicker.clickOnBtn(customFormat, 2);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, dayToChose);
+    datepicker.isInputValueContain(customFormat,
+      `${currentMonthStr} ${dayToChose}th ${currentYearNum}`, 2);
+    datepicker.isInputValueContain(customFormat,
+      `${newDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }).toLowerCase().split('')[1]}`, 2);
+  });
+});
diff --git a/cypress/full/datepicker/custom_today_class_spec.ts b/cypress/full/datepicker/custom_today_class_spec.ts
new file mode 100644
index 0000000000..dd62407be7
--- /dev/null
+++ b/cypress/full/datepicker/custom_today_class_spec.ts
@@ -0,0 +1,44 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Custom today class', () => {
+  const datepicker = new DatepickerPo();
+  const customToday = datepicker.exampleDemosArr.customTodayClass;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Custom today class');
+  });
+
+  it(`example contains 1 input for Datepicker`, () => {
+    datepicker.isInputHaveAttrs(customToday, [{ attr: 'placeholder', value: 'Datepicker' }], 0);
+  });
+
+  it(`when user clicks on the DatePicker input then container opened and no one date selected by default
+                 current today date have specific class name "custom-today-class"`, () => {
+    datepicker.clickOnDatepickerInput(customToday);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', false, 'body');
+    datepicker.isTodayHaveClass('custom-today-class');
+  });
+
+  it(`when user chose any date, then this date chosen and shown in the input`, () => {
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+    datepicker.clickOnDatepickerInput(customToday);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.isInputValueEqual(customToday, `${chosenDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+  });
+
+  it(`when user clicks on input again, then 1t date selected and current with custom-today-class
+                 when user chose today and click on input again, then current selected with custom-today-class`, () => {
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+    datepicker.clickOnDatepickerInput(customToday);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.clickOnDatepickerInput(customToday);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', '10');
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, `${new Date().getDate()}`);
+    datepicker.clickOnDatepickerInput(customToday);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', `${new Date().getDate()}`);
+    datepicker.isTodayHaveClass('custom-today-class');
+  });
+});
diff --git a/cypress/full/datepicker/custom_triggers_spec.ts b/cypress/full/datepicker/custom_triggers_spec.ts
new file mode 100644
index 0000000000..8671d915f2
--- /dev/null
+++ b/cypress/full/datepicker/custom_triggers_spec.ts
@@ -0,0 +1,76 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Custom triggers', () => {
+  const datepicker = new DatepickerPo();
+  const customTriggers = datepicker.exampleDemosArr.customTriggers;
+  const currentMonthNum: number = new Date().getMonth();
+  const currentYear: number = new Date().getFullYear();
+
+
+  beforeEach(() => {
+    cy.viewport(1440, 900);
+    datepicker.navigateTo();
+    datepicker.clickOnDemoMenu('Custom triggers');
+  });
+
+  it(`example contains 1 Datepicker input and 2 DateRangepicker inputs`, () => {
+   datepicker.isInputHaveAttrs(customTriggers, [{attr: 'placeholder', value: 'Datepicker'}], 0);
+   datepicker.isInputHaveAttrs(customTriggers, [{attr: 'placeholder', value: 'Daterangepicker'}], 1);
+   datepicker.isInputHaveAttrs(customTriggers, [{attr: 'placeholder', value: 'Daterangepicker'}], 2);
+  });
+
+  it(`when user move mouse to the first Datepicker input, then datepicker opens,
+                 when user chose any date, then it appear in the first input field in format "mm/dd/yyyy"`, () => {
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+    datepicker.mouseMove(`${customTriggers} input`, 0);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.isInputValueEqual(customTriggers, `${chosenDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`, 0);
+  });
+
+  it(`when user click in the first DateRangepicker input, it's activated , daterangepicker not shown
+                 when user press any key, then daterangepicker-container shown and user can chose any interval`, () => {
+    datepicker.clickOnDaterangepickerInput(customTriggers, 0);
+    datepicker.isDaterangepickerOpened(false);
+    datepicker.clickEnterOnInput(customTriggers, 1);
+    datepicker.isDaterangepickerOpened(true);
+    datepicker.isSelectedDateExist('daterangepicker', false, 'body');
+  });
+
+  it(`when user chose interval, then bs-daterangepicker-container disappeared
+                 and this interval shown in appropriate input in format "mm/dd/yyyy" - "mm/dd/yyyy"`, () => {
+    const dateLeft = new Date(`${currentMonthNum + 1}/01/${currentYear}`)
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+    const dateRight = new Date(`${currentMonthNum + 1}/15/${currentYear}`)
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+    datepicker.clickOnDaterangepickerInput(customTriggers, 0);
+    datepicker.clickEnterOnInput(customTriggers, 1);
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '1');
+    datepicker.isSelectedDateExist('daterangepicker', true, 'body', '1');
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '15');
+    datepicker.isInputValueEqual(customTriggers, `${dateLeft} - ${dateRight}`, 1);
+});
+
+  it(`when user click in the second DateRangepicker input, it's activated and bs-daterangepicker not shown
+                 when user press any key, then bs-daterangepicker-container still not shown`, () => {
+    datepicker.clickOnDaterangepickerInput(customTriggers, 1);
+    datepicker.isDaterangepickerOpened(false);
+    datepicker.clickEnterOnInput(customTriggers, 2);
+    datepicker.isDaterangepickerOpened(false);
+  });
+
+  it(`when user click twice on input, then bs-daterangepicker shown, when user chose interval, then
+                 bs-daterangepicker disappeared and this interval shown in input "mm/dd/yyyy" - "mm/dd/yyyy"`, () => {
+    const dateLeft = new Date(`${currentMonthNum + 1}/01/${currentYear}`)
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+    const dateRight = new Date(`${currentMonthNum + 1}/15/${currentYear}`)
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+    datepicker.dblClickOnInput(customTriggers, 2);
+    datepicker.isDaterangepickerOpened(true);
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '1');
+    datepicker.isSelectedDateExist('daterangepicker', true, 'body', '1');
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '15');
+    datepicker.isInputValueEqual(customTriggers, `${dateLeft} - ${dateRight}`, 2);
+  });
+});
diff --git a/cypress/full/datepicker/days_disabled_spec.ts b/cypress/full/datepicker/days_disabled_spec.ts
new file mode 100644
index 0000000000..ec62f10d84
--- /dev/null
+++ b/cypress/full/datepicker/days_disabled_spec.ts
@@ -0,0 +1,50 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Days disabled', () => {
+  const datepicker = new DatepickerPo();
+  const daysDisabled = datepicker.exampleDemosArr.daysDisabled;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Days disabled');
+  });
+
+  it(`example contains 2 inputs of Datepicker`, () => {
+    datepicker.isInputHaveAttrs(daysDisabled, [{ attr: 'placeholder', value: 'Datepicker' }], 0);
+    datepicker.isInputHaveAttrs(daysDisabled, [{ attr: 'placeholder', value: 'Datepicker' }], 1);
+  });
+
+  it(`when user clicks on 1 Datepicker, then it opened, user can chose date except Saturday and Sunday
+                   when user clicks on any Saturday or Sunday, nothing happens, they are disabled`, () => {
+    datepicker.clickOnDatepickerInput(daysDisabled, 0);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isWeekdayDisabled(true, 0);
+    datepicker.isWeekdayDisabled(true, 6);
+    datepicker.clickOnWeekDay(false);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isInputValueEqual(daysDisabled, '', 0);
+  });
+
+  it(`when user clicks on any active date in 1 datepicker, this date chosen and shown "mm/dd/yyyy"`, () => {
+    datepicker.clickOnDatepickerInput(daysDisabled, 0);
+    datepicker.clickOnWeekDay(true);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueContain(daysDisabled, `${new Date().getMonth() + 1}`, 0);
+    datepicker.isInputValueContain(daysDisabled, `${new Date().getFullYear()}`, 0);
+  });
+
+  it(`when user clicks on the second Datepicker, then container opened and user can chose any date`, () => {
+    const monthToChose = new Date().getMonth() + 1 < 10 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1;
+    datepicker.clickOnDatepickerInput(daysDisabled, 1);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.isInputValueEqual(daysDisabled, `${monthToChose}/10/${new Date().getFullYear()}`, 1);
+  });
+
+  it(`when user clicks on any Saturday or Sunday, this date chosen and shown in the input "mm/dd/yyyy"`, () => {
+    datepicker.clickOnDatepickerInput(daysDisabled, 1);
+    datepicker.clickOnWeekDay(false);
+    datepicker.isInputValueContain(daysDisabled, `${new Date().getMonth() + 1}`, 1);
+    datepicker.isInputValueContain(daysDisabled, `${new Date().getFullYear()}`, 1);
+  });
+});
diff --git a/cypress/full/datepicker/disabled_spec.ts b/cypress/full/datepicker/disabled_spec.ts
new file mode 100644
index 0000000000..9d07b4cbf2
--- /dev/null
+++ b/cypress/full/datepicker/disabled_spec.ts
@@ -0,0 +1,87 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Disabled', () => {
+  const datepicker = new DatepickerPo();
+  const disabled = datepicker.exampleDemosArr.disabled;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Disabled');
+  });
+
+  it(`example contains 2 inputs: Datepicker and Daterangepicker and button "Toggle disabling"`, () => {
+    datepicker.isInputHaveAttrs(disabled, [{ attr: 'placeholder', value: 'Datepicker' }], 0);
+    datepicker.isInputHaveAttrs(disabled, [{ attr: 'placeholder', value: 'Daterangepicker' }], 1);
+    datepicker.isBtnTxtEqual(disabled, 'Toggle disabling');
+  });
+
+  it(`when user clicks on Datepicker input, then container opened
+                 when user clicks on any date, then this date chosen and shown in format "mm/dd/yyyy"`, () => {
+    datepicker.clickOnDatepickerInput(disabled, 0);
+    datepicker.isDatepickerOpened(true);
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.isInputValueEqual(disabled, `${chosenDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+  });
+
+  it(`when user clicks on "Toggle disabling" and clicks on Datepicker input, then user unable to chose any date
+                 when user clicks on any date, month or year - nothing happens`, () => {
+    datepicker.clickOnBtn(disabled);
+    datepicker.clickOnDatepickerInput(disabled, 0);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.isInputValueEqual(disabled, ``);
+    datepicker.isDatepickerOpened(true);
+  });
+
+  it(`when user clicks on "Toggle disabling" again, clicks on Datepicker, user able to chose date
+                 when user clicks on any date, it chosen and shown in the input field in format "mm/dd/yyyy"`, () => {
+    datepicker.dblClickOnBtn(disabled);
+    datepicker.clickOnDatepickerInput(disabled, 0);
+    datepicker.isDatepickerOpened(true);
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.isInputValueEqual(disabled, `${chosenDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+  });
+
+  it(`when user clicks on Daterangepicker input, then container opened and user can chose any date
+                 when user chose any interval, it chosen and shown in format "mm/dd/yyyy" - "mm/dd/yyyy"`, () => {
+    datepicker.clickOnDaterangepickerInput(disabled);
+    datepicker.isDaterangepickerOpened(true);
+    const dateLeft = new Date(`${new Date().getMonth() + 1}/01/${new Date().getFullYear()}`)
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+    const dateRight = new Date(`${new Date().getMonth() + 1}/15/${new Date().getFullYear()}`)
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '1');
+    datepicker.isSelectedDateExist('daterangepicker', true, 'body', '1');
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '15');
+    datepicker.isInputValueEqual(disabled, `${dateLeft} - ${dateRight}`, 1);
+  });
+
+  it(`when user clicks on "Toggle disabling", clicks on Daterangepicker, then user unable to chose any date
+                 when user clicks on any date, month or year - nothing happens`, () => {
+    datepicker.clickOnBtn(disabled);
+    datepicker.clickOnDaterangepickerInput(disabled);
+    datepicker.isDaterangepickerOpened(true);
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '1');
+    datepicker.isInputValueEqual(disabled, ``, 1);
+    datepicker.isDaterangepickerOpened(true);
+  });
+
+  it(`when user clicks on "Toggle disabling" again, clicks on Daterangepicker, he able to chose another interval
+                 when user chose any other interval, it chosen and shown in format "mm/dd/yyyy" - "mm/dd/yyyy"`, () => {
+    datepicker.dblClickOnBtn(disabled);
+    datepicker.clickOnDaterangepickerInput(disabled);
+    datepicker.isDaterangepickerOpened(true);
+    const dateLeft = new Date(`${new Date().getMonth() + 1}/01/${new Date().getFullYear()}`)
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+    const dateRight = new Date(`${new Date().getMonth() + 1}/15/${new Date().getFullYear()}`)
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '1');
+    datepicker.isSelectedDateExist('daterangepicker', true, 'body', '1');
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '15');
+    datepicker.isInputValueEqual(disabled, `${dateLeft} - ${dateRight}`, 1);
+  });
+});
diff --git a/cypress/full/datepicker/forms_spec.ts b/cypress/full/datepicker/forms_spec.ts
new file mode 100644
index 0000000000..a6f4f21c4e
--- /dev/null
+++ b/cypress/full/datepicker/forms_spec.ts
@@ -0,0 +1,40 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Forms', () => {
+  const datepicker = new DatepickerPo();
+  const forms = datepicker.exampleDemosArr.forms;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Forms');
+  });
+
+  it(`example contains 2 inputs: Datepicker and Daterangepicker and preview block, empty by default`, () => {
+    datepicker.isInputHaveAttrs(forms, [{ attr: 'placeholder', value: 'Datepicker' }], 0);
+    datepicker.isInputHaveAttrs(forms, [{ attr: 'placeholder', value: 'Daterangepicker' }], 1);
+    datepicker.isCodePreviewExist(forms, '', true, 0);
+  });
+
+  it(`when user chose any date from Datepicker, then in preview block date is shown in default JS format`, () => {
+    const newDate = new Date();
+    datepicker.clickOnDatepickerInput(forms);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, `${newDate.getDate()}`);
+    datepicker.isInputValueEqual(forms, `${newDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+    datepicker.isCodePreviewExist(forms, `${newDate.toDateString()}`, true, 0);
+  });
+
+  it(`when user chose any interval from Daterangepicker, then interval shown in default JS format in preview`, () => {
+    const newDate = new Date();
+    const dateLeft = new Date(`${newDate.getMonth() + 1}/01/${newDate.getFullYear()}`);
+    const dateRight = new Date(`${newDate.getMonth() + 1}/15/${newDate.getFullYear()}`);
+    datepicker.clickOnDaterangepickerInput(forms);
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '1');
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '15');
+    datepicker.isInputValueEqual(forms, `${dateLeft
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })} - ${dateRight
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`, 1);
+    datepicker.isCodePreviewExist(forms, `${dateLeft.toDateString()}`, true, 0);
+    datepicker.isCodePreviewExist(forms, `${dateRight.toDateString()}`, true, 0);
+  });
+});
diff --git a/cypress/full/datepicker/hide_on_scroll_spec.ts b/cypress/full/datepicker/hide_on_scroll_spec.ts
new file mode 100644
index 0000000000..bb38630fc4
--- /dev/null
+++ b/cypress/full/datepicker/hide_on_scroll_spec.ts
@@ -0,0 +1,27 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Hide on scroll', () => {
+  const datepicker = new DatepickerPo();
+  const hideOnScroll = datepicker.exampleDemosArr.hideOnScroll;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Hide on scroll');
+  });
+
+  it(`example contains Datepicker input, "Date Picker" button`, () => {
+    datepicker.isInputHaveAttrs(hideOnScroll, [{ attr: 'placeholder', value: 'Datepicker' }]);
+    datepicker.isButtonExist(hideOnScroll, 'Date Picker');
+  });
+
+  it(`when user clicks on "Date Picker", container opened without selected date, after scroll it disappear`, () => {
+    // TODO impossible open datepicker, because scroll always triggers
+    // datepicker.clickOnBtn(hideOnScroll);
+    // datepicker.clickOnDatepickerInput(hideOnScroll);
+    // datepicker.setBtnAttribute(hideOnScroll, 0, 'true');
+    // datepicker.isDatepickerOpened(true);
+    // datepicker.isSelectedDateExist('datepicker', false);
+    // datepicker.scrollToDatepickerBottom(hideOnScroll);
+    // datepicker.isDatepickerOpened(false);
+  });
+});
diff --git a/cypress/full/datepicker/initial_state_spec.ts b/cypress/full/datepicker/initial_state_spec.ts
new file mode 100644
index 0000000000..35ac1b041c
--- /dev/null
+++ b/cypress/full/datepicker/initial_state_spec.ts
@@ -0,0 +1,71 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Initial state', () => {
+  const datepicker = new DatepickerPo();
+  const initialState = datepicker.exampleDemosArr.initialState;
+  const newDate = new Date();
+  const currentMonthNum: number = newDate.getMonth();
+  const currentYearNum: number = newDate.getFullYear();
+  const currentYearStr: string = currentYearNum.toString();
+  const currentDay: number = newDate.getDate();
+  const daySevenAfterCurrent = new Date();
+  daySevenAfterCurrent.setDate(newDate.getDate() + 7);
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Initial state');
+  });
+
+  it(`example contains 2 inputs, 2 buttons Datepicker and Daterangepicker, value in Datepicker input is current day,
+                     value in Daterangepicker input is interval from current day to current + 7 days`, () => {
+    datepicker.isInputHaveAttrs(initialState, [{ attr: 'type', value: 'text' }], 0);
+    datepicker.isButtonExist(initialState, 'Date Picker', 0);
+    datepicker.isButtonExist(initialState, 'Date Range Picker', 1);
+    datepicker.isInputValueEqual(initialState, `${
+      newDate.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`, 0);
+    datepicker.isInputValueEqual(initialState, `${
+      newDate.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })
+      } - ${
+      daySevenAfterCurrent.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`, 1);
+  });
+
+  it('when user clicks on "Date Picker" button, bs-datepicker-container opened and current date selected', () => {
+    datepicker.clickOnBtn(initialState, 0);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', `${currentDay}`);
+  });
+
+  it('when user clicks on other date, that date selected and shown in input', () => {
+    const dayToChose = currentDay === 15 ? '16' : '15';
+    const monthToChose = currentMonthNum + 1 < 10 ? `0${currentMonthNum + 1}` : currentMonthNum + 1;
+    datepicker.clickOnBtn(initialState, 0);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, dayToChose);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueEqual(initialState, `${monthToChose}/${dayToChose}/${currentYearStr}`, 0);
+    datepicker.clickOnBtn(initialState, 0);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', `${dayToChose}`);
+  });
+
+  it('when user clicks on "Date Range Picker", bs-daterangepicker-container opened with interval selected', () => {
+    datepicker.clickOnBtn(initialState, 1);
+    datepicker.isDaterangepickerOpened(true);
+    datepicker.isSelectedDateExist('daterangepicker', true, 'body', `${currentDay}`);
+    datepicker.isSelectedDateExist('daterangepicker', true, 'body', `${daySevenAfterCurrent.getDate()}`);
+  });
+
+  it('when user chose another interval, that interval selected and shown in input', () => {
+    const dayToChose = currentDay === 15 ? '16' : '15';
+    const nextDayToChose = `${Number(dayToChose) + 1}`;
+    const monthToChose = currentMonthNum + 1 < 10 ? `0${currentMonthNum + 1}` : currentMonthNum + 1;
+    datepicker.clickOnBtn(initialState, 1);
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, dayToChose);
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, nextDayToChose);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueEqual(initialState,
+      `${monthToChose}/${dayToChose}/${currentYearStr} - ${
+        monthToChose}/${nextDayToChose}/${currentYearStr}`, 1);
+    datepicker.clickOnBtn(initialState, 1);
+    datepicker.isSelectedDateExist('daterangepicker', true, 'body', dayToChose);
+    datepicker.isSelectedDateExist('daterangepicker', true, 'body', nextDayToChose);
+  });
+});
diff --git a/cypress/full/datepicker/inline_datepicker_spec.ts b/cypress/full/datepicker/inline_datepicker_spec.ts
new file mode 100644
index 0000000000..bc8174f35a
--- /dev/null
+++ b/cypress/full/datepicker/inline_datepicker_spec.ts
@@ -0,0 +1,33 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Inline Datepicker', () => {
+  const datepicker = new DatepickerPo();
+  const inlineDatepicker = datepicker.exampleDemosArr.inlineDatepicker;
+  const todayDay = new Date().getDate();
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Inline Datepicker');
+  });
+
+  it(`example contains Datepicker with selected date (Today)`, () => {
+   datepicker.isDatepickerOpened(true, inlineDatepicker);
+   datepicker.isSelectedDateExist('datepickerInline', true, inlineDatepicker, `${todayDay}`);
+   datepicker.isVisibleMonthOrYearEqual(datepicker.monthNames[new Date().getMonth()], inlineDatepicker);
+  });
+
+  it(`when user clicks on any other date - then this date selected`, () => {
+    const dayToChoose = todayDay >= 20 ? todayDay - 5 : todayDay + 5;
+    datepicker.clickOnDatepickerTableItem('date', inlineDatepicker, undefined, `${dayToChoose}`);
+    datepicker.isDatepickerOpened(true, inlineDatepicker);
+    datepicker.isSelectedDateExist('datepickerInline', true, inlineDatepicker, `${dayToChoose}`);
+    datepicker.isVisibleMonthOrYearEqual(datepicker.monthNames[new Date().getMonth()], inlineDatepicker);
+  });
+
+  it(`when user chose another month and chose there any date - then this date selected`, () => {
+    datepicker.clickOnNavigation(inlineDatepicker, '>');
+    datepicker.clickOnDatepickerTableItem('date', inlineDatepicker, undefined, `15`);
+    datepicker.isSelectedDateExist('datepickerInline', true, inlineDatepicker, `15`);
+    datepicker.isVisibleMonthOrYearEqual(datepicker.monthNames[new Date().getMonth() + 1], inlineDatepicker);
+  });
+});
diff --git a/cypress/full/datepicker/locales_spec.ts b/cypress/full/datepicker/locales_spec.ts
new file mode 100644
index 0000000000..56d75a8832
--- /dev/null
+++ b/cypress/full/datepicker/locales_spec.ts
@@ -0,0 +1,87 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+import * as globalLocales from 'ngx-bootstrap/locale';
+
+describe('Datepicker demo test suite: Locales', () => {
+  const datepicker = new DatepickerPo();
+  const locales = datepicker.exampleDemosArr.locales;
+
+  describe('Default state', () => {
+    beforeEach(() => {
+      datepicker.navigateTo();
+      datepicker.scrollToMenu('Locales');
+    });
+
+    it(`example contains 2 selects (with "en" locale), Datepicker and Daterangepicker and appropriate buttons`, () => {
+      datepicker.isSelectExist(locales, 'en', 0);
+      datepicker.isSelectExist(locales, 'en', 1);
+      datepicker.isInputHaveAttrs(locales, [{ attr: 'placeholder', value: 'Datepicker' }], 0);
+      datepicker.isInputHaveAttrs(locales, [{ attr: 'placeholder', value: 'Daterangepicker' }], 1);
+      datepicker.isButtonExist(locales, 'Date Picker', 0);
+      datepicker.isButtonExist(locales, 'Date Range Picker', 1);
+    });
+
+    it(`when user clicks on "Date Picker" btn, container opened with all info in English (month, days)`, () => {
+      datepicker.clickOnBtn(locales, 0);
+      datepicker.isDatepickerOpened(true);
+      datepicker.clickOnNavigation('body', 'month');
+      datepicker.isMonthLocaleAppropriate('en');
+      datepicker.clickOnDatepickerTableItem('month', 'body', 0);
+      datepicker.isWeekdayLocaleAppropriate('en');
+    });
+
+    it(`when user clicks on "Date Range Picker" button, container opened in English (month, days)`, () => {
+      datepicker.clickOnBtn(locales, 1);
+      datepicker.isDaterangepickerOpened(true);
+      datepicker.clickOnDateRangePickerNavigation('month-left');
+      datepicker.isMonthLocaleAppropriate('en', 'daterangepicker');
+      datepicker.clickOnDaterangePickerTableItem('month', 0, 'body', 0);
+      datepicker.isWeekdayLocaleAppropriate('en', 'daterangepicker');
+    });
+  });
+
+  describe('Change Locale Datepicker', () => {
+    before(() => {
+      datepicker.navigateTo();
+      datepicker.scrollToMenu('Locales');
+    });
+
+    Object.values(globalLocales).forEach(globalLocale => {
+      const currentLocale = globalLocale.abbr;
+      if (currentLocale !== undefined) {
+        it(`when user chose locale ${currentLocale} for "Datepicker", container shown in appropriate language`, () => {
+          datepicker.selectOne(locales, currentLocale, 0);
+          datepicker.isDatepickerOpened(true);
+          datepicker.clickOnNavigation('body', 'month');
+          datepicker.isMonthLocaleAppropriate(currentLocale);
+          datepicker.clickOnDatepickerTableItem('month', 'body', 0);
+          datepicker.isWeekdayLocaleAppropriate(currentLocale);
+        });
+      } else {
+        throw new Error(`${globalLocale} missing abbr key`);
+      }
+    });
+  });
+
+  describe('Change Locale DateRangepicker', () => {
+    before(() => {
+      datepicker.navigateTo();
+      datepicker.scrollToMenu('Locales');
+    });
+
+    Object.values(globalLocales).forEach(globalLocale => {
+      const currentLocale = globalLocale.abbr;
+      if (currentLocale !== undefined) {
+        it(`when user chose locale ${currentLocale} for "Daterangepicker", container shown in this language`, () => {
+          datepicker.selectOne(locales, currentLocale, 1);
+          datepicker.isDaterangepickerOpened(true);
+          datepicker.clickOnDateRangePickerNavigation('month-left');
+          datepicker.isMonthLocaleAppropriate(currentLocale, 'daterangepicker');
+          datepicker.clickOnDaterangePickerTableItem('month', 0, 'body', 0);
+          datepicker.isWeekdayLocaleAppropriate(currentLocale, 'daterangepicker');
+        });
+      } else {
+        throw new Error(`${globalLocale} missing abbr key`);
+      }
+    });
+  });
+});
diff --git a/cypress/full/datepicker/manual_trigger_spec.ts b/cypress/full/datepicker/manual_trigger_spec.ts
new file mode 100644
index 0000000000..ad1735dd07
--- /dev/null
+++ b/cypress/full/datepicker/manual_trigger_spec.ts
@@ -0,0 +1,57 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Manual triggering', () => {
+  const datepicker = new DatepickerPo();
+  const manualTrigger = datepicker.exampleDemosArr.manualTrigger;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Manual triggering');
+  });
+
+  it(`example contains Datepicker input and 3 clickable buttons: "Open", "Close", "Toggle"`, () => {
+    datepicker.isInputHaveAttrs(manualTrigger, [{ attr: 'type', value: 'text' }], 0);
+    datepicker.isBtnTxtEqual(manualTrigger, 'Open', 0);
+    datepicker.isBtnTxtEqual(manualTrigger, 'Close', 1);
+    datepicker.isBtnTxtEqual(manualTrigger, 'Toggle', 2);
+  });
+
+  it(`when user clicks "Open", datepicker opened, when user chose any date, then container disappeared,
+                 and date shown in the input in format "mm/dd/yyyy"`, () => {
+    const newDate = new Date();
+    datepicker.clickOnBtn(manualTrigger, 0);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, `${newDate.getDate()}`);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueEqual(manualTrigger, `${newDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+  });
+
+  it(`when user clicks "Open" again, datepicker opened and date is selected,
+                 when user clicks "Close", then container disappeared and date shown in the input "mm/dd/yyyy"`, () => {
+    const newDate = new Date();
+    datepicker.clickOnBtn(manualTrigger, 0);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, `${newDate.getDate()}`);
+    datepicker.clickOnBtn(manualTrigger, 0);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', `${newDate.getDate()}`);
+    datepicker.clickOnBtn(manualTrigger, 1);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueEqual(manualTrigger, `${newDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+  });
+
+  it(`when user clicks "Toggle", then datepicker opened and date is selected
+                 when user clicks "Toggle" again, container disappeared, date shown in the input "mm/dd/yyyy"`, () => {
+    const newDate = new Date();
+    datepicker.clickOnBtn(manualTrigger, 0);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, `${newDate.getDate()}`);
+    datepicker.clickOnBtn(manualTrigger, 2);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', `${newDate.getDate()}`);
+    datepicker.clickOnBtn(manualTrigger, 2);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueEqual(manualTrigger, `${newDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+  });
+});
diff --git a/cypress/full/datepicker/min_max_spec.ts b/cypress/full/datepicker/min_max_spec.ts
new file mode 100644
index 0000000000..bb0bf20204
--- /dev/null
+++ b/cypress/full/datepicker/min_max_spec.ts
@@ -0,0 +1,105 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Min-max', () => {
+  const datepicker = new DatepickerPo();
+  const minMax = datepicker.exampleDemosArr.minMax;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Min-max');
+  });
+
+  it(`example contains 2 inputs: Datepicker and Daterangepicker`, () => {
+    datepicker.isInputHaveAttrs(minMax, [{ attr: 'placeholder', value: 'Datepicker' }], 0);
+    datepicker.isInputHaveAttrs(minMax, [{ attr: 'placeholder', value: 'Daterangepicker' }], 1);
+  });
+
+  it(`when user clicks on Datepicker input, then container opened and user can chose date from min-max`, () => {
+    const minDate = new Date();
+    const maxDate = new Date();
+    minDate.setDate(minDate.getDate() - 1);
+    maxDate.setDate(maxDate.getDate() + 7);
+    datepicker.clickOnDatepickerInput(minMax);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isDayIntervalDisabledInCurrentMonth(minDate, maxDate, false);
+    if (minDate.getMonth() !== maxDate.getMonth()) {
+      datepicker.clickOnNavigation('body', '>');
+      datepicker.isDayIntervalDisabledInNextMonth(minDate, maxDate, false);
+    }
+  });
+
+  it(`when user clicks on any other date, not from this interval, nothing happens`, () => {
+    const minDate = new Date();
+    const maxDate = new Date();
+    minDate.setDate(minDate.getDate() - 2);
+    maxDate.setDate(maxDate.getDate() + 8);
+    const dateOutOfIntervalLeft = new Date(minDate.getTime());
+    const dateOutOfIntervalRight = new Date(maxDate.getTime());
+    dateOutOfIntervalLeft.setDate((dateOutOfIntervalLeft.getDate() - 3));
+    dateOutOfIntervalRight.setDate((dateOutOfIntervalRight.getDate() + 3));
+    datepicker.clickOnDatepickerInput(minMax);
+    datepicker.isDatepickerOpened(true);
+    if (minDate.getMonth() === dateOutOfIntervalLeft.getMonth()) {
+      datepicker.isDayIntervalDisabledInCurrentMonth(dateOutOfIntervalLeft, minDate, true);
+    } else {
+      datepicker.clickOnNavigation('body', '>');
+      datepicker.isDayIntervalDisabledInNextMonth(maxDate, dateOutOfIntervalRight, true);
+    }
+  });
+
+  it('when user clicks on date from this interval, it chosen and shown in input in format "mm/dd/yyyy"', () => {
+    const minDate = new Date();
+    minDate.setDate(minDate.getDate() - 1);
+    datepicker.clickOnDatepickerInput(minMax);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, `${minDate.getDate()}`);
+    datepicker.isInputValueEqual(minMax, minDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }), 0);
+  });
+
+  it(`when user clicks on DateRange input, then container opened and user can chose date from min-max`, () => {
+    const minDate = new Date();
+    const maxDate = new Date();
+    minDate.setDate(minDate.getDate() - 1);
+    maxDate.setDate(maxDate.getDate() + 7);
+    datepicker.clickOnDaterangepickerInput(minMax);
+    datepicker.isDaterangepickerOpened(true);
+    datepicker.isDayIntervalDisabledInCurrentMonthDateRange(minDate, maxDate, false);
+    datepicker.isDayIntervalDisabledInNextMonthDateRange(minDate, maxDate, false);
+  });
+
+  it(`clicks on any other date in daterangepicker, not from this interval, nothing happens`, () => {
+    const minDate = new Date();
+    const maxDate = new Date();
+    minDate.setDate(minDate.getDate() - 2);
+    maxDate.setDate(maxDate.getDate() + 8);
+    const dateOutOfIntervalLeft = new Date(minDate.getTime());
+    const dateOutOfIntervalRight = new Date(maxDate.getTime());
+    dateOutOfIntervalLeft.setDate((dateOutOfIntervalLeft.getDate() - 5));
+    dateOutOfIntervalRight.setDate((dateOutOfIntervalRight.getDate() + 5));
+    datepicker.clickOnDaterangepickerInput(minMax);
+    datepicker.isDaterangepickerOpened(true);
+    if (minDate.getMonth() === dateOutOfIntervalLeft.getMonth()) {
+      datepicker.isDayIntervalDisabledInCurrentMonthDateRange(dateOutOfIntervalLeft, minDate, true);
+    } else {
+      datepicker.isDayIntervalDisabledInNextMonthDateRange(maxDate, dateOutOfIntervalRight, true);
+    }
+  });
+
+  it('when user clicks on the first, second date from this interval, then it shown in input "mm/dd/yyyy"', () => {
+    const dateLeft = new Date();
+    const dateRight = new Date();
+    dateLeft.setDate(dateLeft.getDate() - 1);
+    datepicker.clickOnDaterangepickerInput(minMax);
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, `${dateLeft.getDate()}`);
+    if (dateLeft.getMonth() === dateRight.getMonth()) {
+      datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, `${dateRight.getDate()}`);
+    } else {
+      datepicker.clickOnDaterangePickerTableItem('date', 1, 'body', undefined, `${dateRight.getDate()}`);
+    }
+    datepicker.isInputValueEqual(minMax,
+      `${dateLeft.toLocaleDateString('en-US',
+        { year: 'numeric', month: '2-digit', day: '2-digit' })
+        } - ${dateRight.toLocaleDateString('en-US',
+        { year: 'numeric', month: '2-digit', day: '2-digit' })}`, 1);
+  });
+});
diff --git a/cypress/full/datepicker/min_mode_spec.ts b/cypress/full/datepicker/min_mode_spec.ts
new file mode 100644
index 0000000000..3c53c88117
--- /dev/null
+++ b/cypress/full/datepicker/min_mode_spec.ts
@@ -0,0 +1,56 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Min-mode', () => {
+  const datepicker = new DatepickerPo();
+  const minMode = datepicker.exampleDemosArr.minMode;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Min-mode');
+  });
+
+  it(`example contains 1 input of Datepicker and button "Date Picker"`, () => {
+    datepicker.isInputValueEqual(minMode, '08/01/2017');
+    datepicker.isBtnTxtEqual(minMode, 'Date Picker');
+  });
+
+  it(`when user clicks on Datepicker input, then container opened and user see list with months (mode=month)`, () => {
+    datepicker.clickOnDatepickerInput(minMode);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isDatePickerBodyExistAndCorrect('month');
+    datepicker.isDatepickerNavigationFullyActiveAndCorrect('month', 'body', '08', '2017');
+  });
+
+  it(`when user clicks on any month, then this month chosen and date shown in the input in format "mm/01/yyyy"`, () => {
+    const monthIndexToChose = 10;
+    datepicker.clickOnDatepickerInput(minMode);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isDatePickerBodyExistAndCorrect('month');
+    datepicker.clickOnDatepickerTableItem('month', 'body', monthIndexToChose);
+    datepicker.isInputValueEqual(minMode, `${monthIndexToChose + 1}/01/2017`);
+  });
+
+  it(`when user clicks on Datepicker btn, then container opened with mode=month
+                 when user clicks on year in navigation, then table with years shown`, () => {
+    datepicker.clickOnBtn(minMode);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isDatePickerBodyExistAndCorrect('month');
+    datepicker.clickOnNavigation('body', 'month');
+    datepicker.isDatePickerBodyExistAndCorrect('year');
+  });
+
+  it(`when user clicks on any year in year view, then this year chosen and user see months calendar
+                 when user chose any month, then this month chosen and date shown in format "mm/01/yyyy"`, () => {
+    const yearIndexToChose = 15;
+    const monthIndexToChose = 11;
+    datepicker.clickOnBtn(minMode);
+    datepicker.clickOnNavigation('body', 'month');
+    datepicker.isDatePickerBodyExistAndCorrect('year');
+    datepicker.clickOnDatepickerTableItem('year', 'body', yearIndexToChose);
+    datepicker.isDatePickerBodyExistAndCorrect('month');
+    datepicker.isDatepickerNavigationFullyActiveAndCorrect('month', 'body', '01', `${Math.round(yearIndexToChose / 2 + 2017)}`);
+    datepicker.clickOnDatepickerTableItem('month', 'body', monthIndexToChose);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueEqual(minMode, `${monthIndexToChose + 1}/01/2025`);
+  });
+});
diff --git a/cypress/full/datepicker/outside_click_spec.ts b/cypress/full/datepicker/outside_click_spec.ts
new file mode 100644
index 0000000000..31391de91b
--- /dev/null
+++ b/cypress/full/datepicker/outside_click_spec.ts
@@ -0,0 +1,41 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Outside click', () => {
+  const datepicker = new DatepickerPo();
+  const outsideClick = datepicker.exampleDemosArr.outsideClick;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Outside click');
+  });
+
+  it(`example contains 2 Datepicker inputs`, () => {
+   datepicker.isInputHaveAttrs(outsideClick, [{attr: 'placeholder', value: 'Datepicker'}], 0);
+   datepicker.isInputHaveAttrs(outsideClick, [{attr: 'placeholder', value: 'Datepicker'}], 1);
+  });
+
+  it(`when user clicks on the 1st Datepicker input, bs-datepicker-container opens
+                 when user clicks outside this Datepicker, then bs-datepicker-container disappeared`, () => {
+   datepicker.clickOnDatepickerInput(outsideClick, 0);
+   datepicker.isDatepickerOpened(true);
+   datepicker.clickOutside(`${outsideClick} input`);
+   datepicker.isDatepickerOpened(false);
+  });
+
+  it(`when user clicks on the 2d Datepicker input, bs-datepicker-container opens
+                 when user clicks outside this Datepicker, then bs-datepicker-container stay open`, () => {
+   datepicker.clickOnDatepickerInput(outsideClick, 1);
+   datepicker.isDatepickerOpened(true);
+   datepicker.clickOutside(`${outsideClick} input`);
+   datepicker.isDatepickerOpened(true);
+  });
+
+  it(`when user clicks on the 2d Datepicker input and select any date,
+                 then bs-datepicker-container disappeared and date is shown in format "mm/dd/yyyy"`, () => {
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+    datepicker.clickOnDatepickerInput(outsideClick, 1);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.isInputValueEqual(outsideClick, `${chosenDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`, 1);
+  });
+});
diff --git a/cypress/full/datepicker/placement_spec.ts b/cypress/full/datepicker/placement_spec.ts
new file mode 100644
index 0000000000..78a4db74ef
--- /dev/null
+++ b/cypress/full/datepicker/placement_spec.ts
@@ -0,0 +1,67 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Placement', () => {
+  const datepicker = new DatepickerPo();
+  const placement = datepicker.exampleDemosArr.placement;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Placement');
+  });
+
+  it(`example contains 4 Datepicker inputs (each have description about placement: right, top, bottom, left)`, () => {
+    datepicker.isInputHaveAttrs(placement, [
+      { attr: 'placeholder', value: 'Datepicker' },
+      {attr: 'placement', value: 'right'}], 0);
+    datepicker.isInputHaveAttrs(placement, [
+      { attr: 'placeholder', value: 'Datepicker' },
+      {attr: 'placement', value: 'top'}], 1);
+    datepicker.isInputHaveAttrs(placement, [
+      { attr: 'placeholder', value: 'Datepicker' },
+      {attr: 'placement', value: 'bottom'}], 2);
+    datepicker.isInputHaveAttrs(placement, [
+      { attr: 'placeholder', value: 'Datepicker' },
+      {attr: 'placement', value: 'left'}], 3);
+  });
+
+  it(`when user clicks on first input, datepicker opens on the right side
+                 when user clicks on first input again, bs-datepicker-container disappeared`, () => {
+    cy.viewport(1440, 900);
+    datepicker.clickOnDatepickerInput(placement, 0);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isDatepickerPlacementCorrect(placement, 'right');
+    datepicker.clickOnDatepickerInput(placement, 0);
+    datepicker.isDatepickerOpened(false);
+  });
+
+  it(`when user clicks on second input, datepicker opens at the top
+                 when user clicks on second input again, bs-datepicker-container disappeared`, () => {
+    cy.viewport(1440, 900);
+    datepicker.clickOnDatepickerInput(placement, 1);
+    datepicker.isDatepickerOpened(true);
+// TODO https://github.com/cypress-io/cypress/issues/871
+    datepicker.isDatepickerPlacementCorrect(placement, 'bottom', 1); // TODO should be top
+    datepicker.clickOnDatepickerInput(placement, 1);
+    datepicker.isDatepickerOpened(false);
+  });
+
+  it(`when user clicks on third input, datepicker opens at the bottom
+                 when user clicks on third input again, bs-datepicker-container disappeared`, () => {
+    cy.viewport(1440, 900);
+    datepicker.clickOnDatepickerInput(placement, 2);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isDatepickerPlacementCorrect(placement, 'bottom');
+    datepicker.clickOnDatepickerInput(placement, 2);
+    datepicker.isDatepickerOpened(false);
+  });
+
+  it(`when user clicks on fourth input, datepicker opens on the left side
+                 when user clicks on fourth input again, bs-datepicker-container disappeared`, () => {
+    cy.viewport(1440, 900);
+    datepicker.clickOnDatepickerInput(placement, 3);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isDatepickerPlacementCorrect(placement, 'left');
+    datepicker.clickOnDatepickerInput(placement, 3);
+    datepicker.isDatepickerOpened(false);
+  });
+});
diff --git a/cypress/full/datepicker/reactive_forms_spec.ts b/cypress/full/datepicker/reactive_forms_spec.ts
new file mode 100644
index 0000000000..8241a3456c
--- /dev/null
+++ b/cypress/full/datepicker/reactive_forms_spec.ts
@@ -0,0 +1,45 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Reactive forms', () => {
+  const datepicker = new DatepickerPo();
+  const reactiveForms = datepicker.exampleDemosArr.reactiveForms;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Reactive forms');
+  });
+
+  it(`example contains 2 inputs: Datepicker and Daterangepicker, by default, user don't see any preview blocks,
+                 component src should be written with using FormGroup and FormBuilder`, () => {
+    datepicker.isInputHaveAttrs(reactiveForms, [{ attr: 'placeholder', value: 'Datepicker' }], 0);
+    datepicker.isInputHaveAttrs(reactiveForms, [{ attr: 'placeholder', value: 'Daterangepicker' }], 1);
+    datepicker.isCodePreviewExist(reactiveForms, '', false, 0);
+    datepicker.isComponentSrcContain('Reactive forms', 'FormGroup');
+    datepicker.isComponentSrcContain('Reactive forms', 'FormBuilder');
+  });
+
+  it(`when user chose any date from Datepicker, then in preview block date value shown in ISO Dates format`, () => {
+    const newDate = new Date();
+    datepicker.clickOnDatepickerInput(reactiveForms);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, `${newDate.getDate()}`);
+    datepicker.isInputValueEqual(reactiveForms, `${newDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+    datepicker.isCodePreviewExist(reactiveForms, `${newDate
+      .toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`, true);
+  });
+
+  it(`when user chose any interval Daterangepicker, then in preview range value shown in ISO Dates`, () => {
+    const newDate = new Date();
+    const dateLeft = new Date(`${newDate.getMonth() + 1}/01/${newDate.getFullYear()}`);
+    const dateRight = new Date(`${newDate.getMonth() + 1}/15/${newDate.getFullYear()}`);
+    datepicker.clickOnDaterangepickerInput(reactiveForms);
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '1');
+    datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '15');
+    datepicker.isInputValueEqual(reactiveForms, `${dateLeft
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })} - ${dateRight
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`, 1);
+    datepicker.isCodePreviewExist(reactiveForms, `${dateLeft
+      .toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`, true);
+    datepicker.isCodePreviewExist(reactiveForms, `${dateRight
+      .toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`, true);  });
+});
diff --git a/cypress/full/datepicker/select_dates_from_other_month_spec.ts b/cypress/full/datepicker/select_dates_from_other_month_spec.ts
new file mode 100644
index 0000000000..80f253f4a9
--- /dev/null
+++ b/cypress/full/datepicker/select_dates_from_other_month_spec.ts
@@ -0,0 +1,43 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Select dates from other month', () => {
+  const datepicker = new DatepickerPo();
+  const selectDatesFromOtherMonths = datepicker.exampleDemosArr.selectFromOtherMonth;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Select dates from other month');
+  });
+
+  it(`example contains Datepicker input, template src should be written with
+                 dateInputFormat: 'DD-MM-YYYY' and selectFromOtherMonth: true`, () => {
+    datepicker.isInputHaveAttrs(selectDatesFromOtherMonths, [{ attr: 'placeholder', value: 'Datepicker' }]);
+    datepicker.isTemplateSrcContain('Select dates from other month', `dateInputFormat: 'DD-MM-YYYY'`);
+    datepicker.isTemplateSrcContain('Select dates from other month', `selectFromOtherMonth: true`);
+  });
+
+  it(`when user clicks on Datepicker input, bs-datepicker-container opens, when user clicks on any date
+                 from previous month in this view, then this date chosen and appear in the input`, () => {
+    const dateFromFirstMonth = '02-06-2019';
+    const dateFromPreviousMonth = '26-05-2019';
+    datepicker.clearInputAndSendKeys(selectDatesFromOtherMonths, dateFromFirstMonth);
+    datepicker.clickEnterOnInput(selectDatesFromOtherMonths);
+    datepicker.clickOnDatepickerInput(selectDatesFromOtherMonths);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerTableItem('date', 'body', 1);
+    datepicker.isInputValueContain(selectDatesFromOtherMonths, dateFromPreviousMonth);
+  });
+
+  it(`when user clicks on any date from next month in this view, then this date chosen and appear in the input
+                 when user clicks on bs-datepicker-container again, then user see calendar with chosen month`, () => {
+    const monthNextMonth = new Date().getMonth() === 11 ? '01' : (new Date().getMonth() + 2);
+    const yearNextMonth = new Date().getMonth() === 11 ? (new Date().getFullYear() + 1) : new Date().getFullYear();
+    datepicker.clickOnDatepickerInput(selectDatesFromOtherMonths);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerTableItem('date', 'body', 47); // one of the latest days in each calendar view
+    datepicker.isInputValueContain(selectDatesFromOtherMonths, `${monthNextMonth}-${yearNextMonth}`);
+    datepicker.clickOnDatepickerInput(selectDatesFromOtherMonths);
+    datepicker.isSelectedDateExist('datepicker', true, 'body');
+    datepicker.isVisibleMonthOrYearEqual(`${datepicker.monthNames[Number(monthNextMonth) - 1]}`);
+  });
+});
diff --git a/cypress/full/datepicker/select_week_spec.ts b/cypress/full/datepicker/select_week_spec.ts
new file mode 100644
index 0000000000..cd54d189b6
--- /dev/null
+++ b/cypress/full/datepicker/select_week_spec.ts
@@ -0,0 +1,137 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Select week', () => {
+  const datepicker = new DatepickerPo();
+  const selectWeek = datepicker.exampleDemosArr.selectWeek;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Select week');
+  });
+
+  it(`example contains 4 inputs of Datepicker, each with appropriate placeholder`, () => {
+   datepicker.isInputHaveAttrs(selectWeek, [{attr: 'placeholder', value: 'Datepicker with select week'}], 0);
+   datepicker.isInputHaveAttrs(selectWeek, [{attr: 'placeholder', value: 'selectFromOtherMonth active'}], 1);
+   datepicker.isInputHaveAttrs(selectWeek, [{attr: 'placeholder', value: 'Two first days disabled'}], 2);
+   datepicker.isInputHaveAttrs(selectWeek, [{attr: 'placeholder', value: 'All days disabled'}], 3);
+  });
+
+  it(`when user clicks on the first datepicker input, then container opened and user can chose any week`, () => {
+    datepicker.clickOnDatepickerInput(selectWeek, 0);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerWeekItem(1);
+    datepicker.isDatepickerOpened(false);
+    datepicker.clickOnDatepickerInput(selectWeek, 0);
+    datepicker.isSelectedDateExist('datepicker', true);
+    datepicker.clickOnDatepickerWeekItem(3);
+    datepicker.isDatepickerOpened(false);
+  });
+
+  it(`when user select week, then datepicker container disappeared and date shown in input in format MM/DD/YYYY
+                 when user clicks on this input again, then container opened and user see selected date`, () => {
+    datepicker.clickOnDatepickerInput(selectWeek, 0);
+    datepicker.clickOnDatepickerWeekItem(2);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueContain(selectWeek, `${new Date().getMonth()}`, 0);
+    datepicker.isInputValueContain(selectWeek, `${new Date().getFullYear()}`, 0);
+    datepicker.clickOnDatepickerInput(selectWeek, 0);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', true);
+  });
+
+  it(`when user clicks on the second input, then container opened and user can select weeks from other months`, () => {
+    datepicker.clickOnDatepickerInput(selectWeek, 1);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerWeekItem(0);
+    datepicker.isDatepickerOpened(false);
+    datepicker.clickOnDatepickerInput(selectWeek, 1);
+    datepicker.isSelectedDateExist('datepicker', true);
+    datepicker.clickOnDatepickerWeekItem(5);
+    datepicker.isDatepickerOpened(false);
+    datepicker.clickOnDatepickerInput(selectWeek, 1);
+    datepicker.isSelectedDateExist('datepicker', true);
+  });
+
+  it(`when user click on the week from previous month, then datepicker disappeared and date shown MM/DD/YYYY`, () => {
+    datepicker.clickOnDatepickerInput(selectWeek, 1);
+    datepicker.clickOnNavigation('body', '<');
+    datepicker.clickOnDatepickerWeekItem(3);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueContain(selectWeek,
+      `${new Date().getMonth() === 0 ? 12 : new Date().getMonth() - 1}`, 1);
+    datepicker.isInputValueContain(selectWeek,
+      `${new Date().getMonth() === 0 ? new Date().getFullYear() - 1 : new Date().getFullYear()}`, 1);
+  });
+
+  it(`when user click on the week from previous month, then datepicker disappeared and date shown MM/DD/YYYY
+                 when user click on the 2d datepicker again, then container opened and user see selected date`, () => {
+    datepicker.clickOnDatepickerInput(selectWeek, 1);
+    datepicker.clickOnNavigation('body', '<');
+    datepicker.clickOnDatepickerWeekItem(3);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueContain(selectWeek,
+      `${new Date().getMonth() === 0 ? 12 : new Date().getMonth() - 1}`, 1);
+    datepicker.isInputValueContain(selectWeek,
+      `${new Date().getMonth() === 0 ? new Date().getFullYear() - 1 : new Date().getFullYear()}`, 1);
+    datepicker.clickOnDatepickerInput(selectWeek, 1);
+    datepicker.isSelectedDateExist('datepicker', true);
+  });
+
+  it(`when user chose the week from the next month, then datepicker container disappeared
+                 and date shown in input in format MM/DD/YYYY`, () => {
+    datepicker.clickOnDatepickerInput(selectWeek, 1);
+    datepicker.clickOnNavigation('body', '>');
+    datepicker.clickOnDatepickerWeekItem(3);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueContain(selectWeek,
+      `${new Date().getMonth() === 11 ? 1 : new Date().getMonth() + 1}`, 1);
+    datepicker.isInputValueContain(selectWeek,
+      `${new Date().getMonth() === 11 ? new Date().getFullYear() + 1 : new Date().getFullYear()}`, 1);
+  });
+
+  it(`when user click on the 3d datepicker input, then datepicker container opened
+                 when user click on Sunday or Monday, nothing happens, they disabled`, () => {
+    datepicker.clickOnDatepickerInput(selectWeek, 2);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isWeekdayDisabled(true, 0);
+    datepicker.isWeekdayDisabled(true, 1);
+  });
+
+  it(`when user click on the week from current month, then datepicker disappeared and date shown MM/DD/YYYY,
+                 when user click on the 3d datepicker again, then container opened and user see selected date`, () => {
+    datepicker.clickOnDatepickerInput(selectWeek, 2);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerWeekItem(3);
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueContain(selectWeek, `${new Date().getMonth()}`, 2);
+    datepicker.isInputValueContain(selectWeek, `${new Date().getFullYear()}`, 2);
+    datepicker.clickOnDatepickerInput(selectWeek, 2);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', true);
+  });
+
+  it(`when user click on the 4th datepicker input, then datepicker container opened
+                 when user click on any item, nothing happens, they are disabled`, () => {
+    datepicker.clickOnDatepickerInput(selectWeek, 3);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerWeekItem(3);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isWeekdayDisabled(true, 0);
+    datepicker.isWeekdayDisabled(true, 1);
+    datepicker.isWeekdayDisabled(true, 2);
+    datepicker.isWeekdayDisabled(true, 3);
+    datepicker.isWeekdayDisabled(true, 4);
+    datepicker.isWeekdayDisabled(true, 5);
+    datepicker.isWeekdayDisabled(true, 6);
+  });
+
+  it(`when user enter the correct date to the input and press enter,
+                 then after datepicker opens, this date selected`, () => {
+    const dateToSend = '01/16/2019';
+    datepicker.clearInputAndSendKeys(selectWeek, dateToSend, 3);
+    datepicker.clickEnterOnInput(selectWeek, 3);
+    datepicker.clickOnDatepickerInput(selectWeek, 3);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', '16');
+  });
+});
diff --git a/cypress/full/datepicker/themes_spec.ts b/cypress/full/datepicker/themes_spec.ts
new file mode 100644
index 0000000000..3805dc3a57
--- /dev/null
+++ b/cypress/full/datepicker/themes_spec.ts
@@ -0,0 +1,58 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Themes', () => {
+  const datepicker = new DatepickerPo();
+  const themes = datepicker.exampleDemosArr.themes;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Themes');
+  });
+
+  it(`example contains select field (with "green" by default), Datepicker input and button "Open"`, () => {
+    datepicker.isInputHaveAttrs(themes, [{ attr: 'type', value: 'text' }]);
+    datepicker.isButtonExist(themes, 'Open');
+    datepicker.isSelectExist(themes, 'green');
+  });
+
+  it(`when user clicks on "Open" button, bs-datepicker theme-green opened with appropriate styles`, () => {
+    datepicker.clickOnBtn(themes);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isDatepickerStyleCorrect('green');
+  });
+
+  it(`when user chose "default", bs-datepicker theme-default shown with appropriate styles`, () => {
+    datepicker.clickOnBtn(themes);
+    datepicker.isDatepickerOpened(true);
+    datepicker.selectOne(themes, 'default');
+    datepicker.isDatepickerStyleCorrect('default');
+  });
+
+  it(`when user chose "blue", bs-datepicker theme-blue shown with appropriate styles`, () => {
+    datepicker.clickOnBtn(themes);
+    datepicker.isDatepickerOpened(true);
+    datepicker.selectOne(themes, 'blue');
+    datepicker.isDatepickerStyleCorrect('blue');
+  });
+
+  it(`when user chose "dark-blue", bs-datepicker theme-dark-blue shown with appropriate styles`, () => {
+    datepicker.clickOnBtn(themes);
+    datepicker.isDatepickerOpened(true);
+    datepicker.selectOne(themes, 'dark-blue');
+    datepicker.isDatepickerStyleCorrect('dark-blue');
+  });
+
+  it(`when user chose "red", bs-datepicker theme-red shown with appropriate styles`, () => {
+    datepicker.clickOnBtn(themes);
+    datepicker.isDatepickerOpened(true);
+    datepicker.selectOne(themes, 'red');
+    datepicker.isDatepickerStyleCorrect('red');
+  });
+
+  it(`when user chose "orange", bs-datepicker theme-red shown with appropriate styles`, () => {
+    datepicker.clickOnBtn(themes);
+    datepicker.isDatepickerOpened(true);
+    datepicker.selectOne(themes, 'orange');
+    datepicker.isDatepickerStyleCorrect('orange');
+  });
+});
diff --git a/cypress/full/datepicker/trigger_by_isOpen_spec.ts b/cypress/full/datepicker/trigger_by_isOpen_spec.ts
new file mode 100644
index 0000000000..f0d447a284
--- /dev/null
+++ b/cypress/full/datepicker/trigger_by_isOpen_spec.ts
@@ -0,0 +1,39 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Trigger by isOpen property', () => {
+  const datepicker = new DatepickerPo();
+  const triggerByIsOpen = datepicker.exampleDemosArr.triggerByIsOpen;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Trigger by isOpen property');
+  });
+
+  it(`example contains Datepicker input and clickable button "Toggle"`, () => {
+   datepicker.isInputHaveAttrs(triggerByIsOpen, [{attr: 'placeholder', value: 'Datepicker'}]);
+   datepicker.isBtnTxtEqual(triggerByIsOpen, 'Toggle');
+  });
+
+  it(`when user clicks on "Toggle", then bs-datepicker-container opens, when user select any date
+                 from this Datepicker, then container disappeared and date is shown in format "mm/dd/yyyy"`, () => {
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+    datepicker.clickOnBtn(triggerByIsOpen);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.isInputValueEqual(triggerByIsOpen, `${chosenDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+  });
+
+  it(`when user clicks on "Toggle" again (after chosing day), then bs-datepicker-container opens again
+                 when user clicks on "Toggle" again, then bs-datepicker-container disappear`, () => {
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+    datepicker.clickOnBtn(triggerByIsOpen);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.clickOnBtn(triggerByIsOpen);
+    datepicker.clickOnBtn(triggerByIsOpen);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', '10');
+    datepicker.clickOnBtn(triggerByIsOpen);
+    datepicker.isDatepickerOpened(false);
+  });
+});
diff --git a/cypress/full/datepicker/value_change_event_spec.ts b/cypress/full/datepicker/value_change_event_spec.ts
new file mode 100644
index 0000000000..9b3ed4443b
--- /dev/null
+++ b/cypress/full/datepicker/value_change_event_spec.ts
@@ -0,0 +1,54 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Value change event', () => {
+  const datepicker = new DatepickerPo();
+  const valueChangeEvent = datepicker.exampleDemosArr.valueChangeEvent;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Value change event');
+  });
+
+  it(`example contains Datepicker input`, () => {
+    datepicker.isInputHaveAttrs(valueChangeEvent, [{ attr: 'placeholder', value: 'Datepicker' }]);
+  });
+
+  it(`when user clicks on Datepicker input, container opens, when chose any date - date is shown
+                 in the input in format "mm/dd/yyyy", card with info "Changed date is Mmm dd, yyyy" shown`, () => {
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/15/${new Date().getFullYear()}`);
+    datepicker.clickOnDatepickerInput(valueChangeEvent);
+    datepicker.isDatepickerOpened(true);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '15');
+    datepicker.isInputValueEqual(valueChangeEvent, `${chosenDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+    datepicker.isPreviewExist(valueChangeEvent, `Changed date is ${chosenDate
+      .toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`);
+  });
+
+  it(`when user clicks on Datepicker input again and chose another Date, then this new date is shown
+                 in the input in format "mm/dd/yyyy" and card with info "Changed date is Mmm dd, yyyy" shown`, () => {
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/15/${new Date().getFullYear()}`);
+    const chosenOtherDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+    datepicker.clickOnDatepickerInput(valueChangeEvent);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '15');
+    datepicker.isInputValueEqual(valueChangeEvent, `${chosenDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+    datepicker.clickOnDatepickerInput(valueChangeEvent);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+    datepicker.isInputValueEqual(valueChangeEvent, `${chosenOtherDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+    datepicker.isPreviewExist(valueChangeEvent, `Changed date is ${chosenOtherDate
+      .toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`);
+  });
+
+  it(`when user clears input, then card with info disappeared`, () => {
+    const chosenDate = new Date(`${new Date().getMonth() + 1}/15/${new Date().getFullYear()}`);
+    datepicker.clickOnDatepickerInput(valueChangeEvent);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '15');
+    datepicker.isInputValueEqual(valueChangeEvent, `${chosenDate
+      .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+    datepicker.clearInput(valueChangeEvent);
+    datepicker.clickEnterOnInput(valueChangeEvent);
+    datepicker.isPreviewHidden(valueChangeEvent);
+  });
+});
diff --git a/cypress/full/datepicker/visibility_events_spec.ts b/cypress/full/datepicker/visibility_events_spec.ts
new file mode 100644
index 0000000000..4dc37244e7
--- /dev/null
+++ b/cypress/full/datepicker/visibility_events_spec.ts
@@ -0,0 +1,40 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Visibility Events', () => {
+  const datepicker = new DatepickerPo();
+  const visibilityEvents = datepicker.exampleDemosArr.visibilityEvents;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Visibility Events');
+  });
+
+  it(`example contains Datepicker input`, () => {
+    datepicker.isInputHaveAttrs(visibilityEvents, [{ attr: 'placeholder', value: 'Datepicker' }]);
+  });
+
+  it(`when user clicks on Datepicker input, bs-datepicker-container opens
+                 and user see card with "Event onShown is fired"`, () => {
+    datepicker.clickOnDatepickerInput(visibilityEvents);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isPreviewExist(visibilityEvents, 'Event onShown is fired', 0);
+  });
+
+  it(`when user chose any date, then bs-datepicker-container disappeared
+                 and "Event onShown is fired", "Event onHidden is fired" shown`, () => {
+    datepicker.clickOnDatepickerInput(visibilityEvents);
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '15');
+    datepicker.isDatepickerOpened(false);
+    datepicker.isInputValueContain(visibilityEvents, '15');
+    datepicker.isPreviewExist(visibilityEvents, 'Event onShown is fired', 0);
+    datepicker.isPreviewExist(visibilityEvents, 'Event onHidden is fired', 1);
+  });
+
+  it(`when user clicks on input again, then "Event onShown is fired" shown
+                 and "Event onHidden is fired" hidden`, () => {
+    datepicker.clickOnDatepickerInput(visibilityEvents);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isPreviewExist(visibilityEvents, 'Event onShown is fired');
+    datepicker.isPreviewHidden(visibilityEvents, 1);
+  });
+});
diff --git a/cypress/full/popover_page_spec.ts b/cypress/full/popover_page_spec.ts
index 80773acb1d..10743b86ad 100644
--- a/cypress/full/popover_page_spec.ts
+++ b/cypress/full/popover_page_spec.ts
@@ -7,16 +7,28 @@ describe('Popover demo page test suite', () => {
   beforeEach(() => popover.navigateTo());
 
   describe('Placement popover', () => {
-
     const placementDemo = popover.exampleDemosArr.placement;
-    const placement = popover.popoverPlacements;
 
     it('when user click on trigger btn in the Placement exmpl - container appears on the setted placement', () => {
-      popover.isPopoverPlacementCorrect(placementDemo, placement.top.popoverClass, placement.top.name);
-      popover.isPopoverPlacementCorrect(placementDemo, placement.right.popoverClass, placement.right.name);
-      popover.isPopoverPlacementCorrect(placementDemo, placement.auto.popoverClass, placement.auto.name);
-      popover.isPopoverPlacementCorrect(placementDemo, placement.left.popoverClass, placement.left.name);
-      popover.isPopoverPlacementCorrect(placementDemo, placement.bottom.popoverClass, placement.bottom.name);
+      cy.viewport(1440, 900);
+      popover.clickOnDemoMenu('Placement');
+      popover.clickOnBtn(placementDemo, 0);
+// TODO need to have possibility to disable CY scrolling
+//  https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Scrolling
+//  https://github.com/cypress-io/cypress/issues/871
+      popover.isPopoverPlacementCorrect(placementDemo, 'bottom'); // TODO should be top
+      popover.clickOnBtn(placementDemo, 0);
+      popover.clickOnBtn(placementDemo, 1);
+      popover.isPopoverPlacementCorrect(placementDemo, 'right');
+      popover.clickOnBtn(placementDemo, 1);
+      popover.clickOnBtn(placementDemo, 2);
+      popover.isPopoverPlacementCorrect(placementDemo, 'auto');
+      popover.clickOnBtn(placementDemo, 2);
+      popover.clickOnBtn(placementDemo, 3);
+      popover.isPopoverPlacementCorrect(placementDemo, 'left');
+      popover.clickOnBtn(placementDemo, 3);
+      popover.clickOnBtn(placementDemo, 4);
+      popover.isPopoverPlacementCorrect(placementDemo, 'bottom');
     });
   });
 
@@ -86,6 +98,7 @@ describe('Popover demo page test suite', () => {
       popover.clickOnBtn(dymanicHtml);
       popover.isPopoverAppears(dymanicHtml);
       popover.isPopoverVisible(dymanicHtml);
+      popover.isPopoverHaveCssItem(dymanicHtml, popover.dynamicHtmlBtn, 'background-color', 'rgb(220, 53, 69)');
     });
 
     it('when user clicks on "Show me popover with html" again, then popover-container disappeared', () => {
@@ -248,27 +261,29 @@ describe('Popover demo page test suite', () => {
     const manualTriggering = popover.exampleDemosArr.manualTriggering;
 
     it('when user clicks on "Show", then popover-container appear above the text', () => {
-        popover.clickOnBtn(manualTriggering);
-        popover.isPopoverAppears(manualTriggering);
-        popover.isPopoverVisible(manualTriggering);
+      popover.clickOnBtn(manualTriggering);
+      popover.isPopoverAppears(manualTriggering);
+      popover.isPopoverVisible(manualTriggering);
     });
 
-    it('when user clicks on "Hide", then popover-container disappeared', () => {
-        popover.clickOnBtn(manualTriggering);
-        popover.clickOnBtn(manualTriggering, 1);
-        popover.isPopoverDismiss(manualTriggering);
+    // TODO unskip when /cypress-io/cypress/issues/871 will be fixed
+    it.skip('when user clicks on "Hide", then popover-container disappeared', () => {
+      popover.clickOnBtn(manualTriggering);
+      popover.clickOnBtn(manualTriggering, 1);
+      popover.isPopoverDismiss(manualTriggering);
     });
 
     it('when user clicks on "Toggle", then popover-container appear  above the text', () => {
-        popover.clickOnBtn(manualTriggering, 2);
-        popover.isPopoverAppears(manualTriggering);
-        popover.isPopoverVisible(manualTriggering);
+      popover.clickOnBtn(manualTriggering, 2);
+      popover.isPopoverAppears(manualTriggering);
+      popover.isPopoverVisible(manualTriggering);
     });
 
-    it('when user clicks on "Toggle" again, then popover-container disappeared', () => {
-        popover.clickOnBtn(manualTriggering, 2);
-        popover.clickOnBtn(manualTriggering, 2);
-        popover.isPopoverDismiss(manualTriggering);
+    // TODO unskip when /cypress-io/cypress/issues/871 will be fixed
+    it.skip('when user clicks on "Toggle" again, then popover-container disappeared', () => {
+      popover.clickOnBtn(manualTriggering, 2);
+      popover.clickOnBtn(manualTriggering, 2);
+      popover.isPopoverDismiss(manualTriggering);
     });
   });
 
@@ -282,7 +297,8 @@ describe('Popover demo page test suite', () => {
       popover.isPopoverVisible(triggerIsOpen);
     });
 
-    it('when user clicks on "Toggle" again, then popover-container disappeared', () => {
+    // TODO unskip when /cypress-io/cypress/issues/871 will be fixed
+    it.skip('when user clicks on "Toggle" again, then popover-container disappeared', () => {
       popover.clickOnBtn(triggerIsOpen);
       popover.clickOnBtn(triggerIsOpen);
       popover.isPopoverDismiss(triggerIsOpen);
@@ -297,6 +313,7 @@ describe('Popover demo page test suite', () => {
       popover.clickOnBtn(componentLevelStyling);
       popover.isPopoverAppears(componentLevelStyling);
       popover.isPopoverVisible(componentLevelStyling);
+      popover.isPopoverHaveCss(componentLevelStyling, 'background-color', 'rgb(0, 150, 136)');
     });
 
     it('when user clicks on "I have component level styling" again, then popover-container disappeared', () => {
diff --git a/cypress/full/tooltip_page_spec.ts b/cypress/full/tooltip_page_spec.ts
new file mode 100644
index 0000000000..949fe97343
--- /dev/null
+++ b/cypress/full/tooltip_page_spec.ts
@@ -0,0 +1,253 @@
+import { TooltipPo } from '../support/tooltip.po';
+
+describe('Tooltip demo page test suite', () => {
+  const tooltip = new TooltipPo();
+
+  beforeEach(() => tooltip.navigateTo());
+
+  describe('Placement tooltip', () => {
+    const placementDemo = tooltip.exampleDemosArr.placement;
+
+    it('when user hover on Trigger btn in the Placement exmpl - tooltip appears on the setted placement', () => {
+      cy.viewport(1440, 900);
+      tooltip.focusOnBtn(placementDemo, 0);
+      tooltip.isTooltipPlacementCorrect(placementDemo, 'top');
+      tooltip.focusOnBtn(placementDemo, 1);
+      tooltip.isTooltipPlacementCorrect(placementDemo, 'right');
+      tooltip.focusOnBtn(placementDemo, 2);
+      tooltip.isTooltipPlacementCorrect(placementDemo, 'right');
+      tooltip.focusOnBtn(placementDemo, 3);
+      tooltip.isTooltipPlacementCorrect(placementDemo, 'left');
+      tooltip.focusOnBtn(placementDemo, 4);
+      tooltip.isTooltipPlacementCorrect(placementDemo, 'bottom');
+    });
+  });
+
+  describe('Dismiss tooltip', () => {
+    const dismissDemo = tooltip.exampleDemosArr.dismiss;
+
+    it('when user clicks on "Dismissible tooltip", then tooltip-container shown', () => {
+      tooltip.clickOnBtn(dismissDemo);
+      tooltip.isTooltipAppears(dismissDemo);
+      tooltip.isTooltipVisible(dismissDemo);
+    });
+
+    it('when user clicks on "Dismissible tooltip" again, then nothing happens', () => {
+      tooltip.clickOnBtn(dismissDemo);
+      tooltip.clickOnBtn(dismissDemo);
+      tooltip.isTooltipAppears(dismissDemo);
+      tooltip.isTooltipVisible(dismissDemo);
+    });
+
+    it('when user clicks the another placement, then tooltip-container disappeared', () => {
+      tooltip.clickOnBtn(dismissDemo);
+      tooltip.clickToAnotherPlacement(dismissDemo);
+      tooltip.isTooltipDismiss(dismissDemo);
+    });
+  });
+
+  describe('Dynamic Content', () => {
+    const dynamicContent = tooltip.exampleDemosArr.dynamicTooltip;
+
+    it('when user hover on "Simple binding", then tooltip-container shown', () => {
+      tooltip.focusOnBtn(dynamicContent);
+      tooltip.isTooltipAppears(dynamicContent);
+      tooltip.isTooltipVisible(dynamicContent);
+    });
+
+    it('when user moves the mouse cursor away of tooltip-button, then tooltip-container disappeared', () => {
+      tooltip.focusOnBtn(dynamicContent);
+      tooltip.focusToAnotherPlacement('Dynamic Content');
+      tooltip.isTooltipDismiss(dynamicContent);
+    });
+  });
+
+  describe('Custom content template', () => {
+    const customContentTemplate = tooltip.exampleDemosArr.customContentTemplate;
+
+    it('when user clicks on the Custom content template tooltip btn, Tooltip appears', () => {
+      tooltip.focusOnBtn(customContentTemplate);
+      tooltip.isTooltipAppears(customContentTemplate);
+    });
+
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.focusOnBtn(customContentTemplate);
+      tooltip.focusToAnotherPlacement('Custom content template');
+      tooltip.isTooltipDismiss(customContentTemplate);
+    });
+  });
+
+  describe('Dynamic Html', () => {
+    const dynamicHtmlTooltip = tooltip.exampleDemosArr.dynamicHtml;
+
+    it('when user hover on "Show me tooltip with html", then tootip-container shown', () => {
+      tooltip.focusOnBtn(dynamicHtmlTooltip);
+      tooltip.isTooltipAppears(dynamicHtmlTooltip);
+      tooltip.isTooltipVisible(dynamicHtmlTooltip);
+    });
+
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.focusOnBtn(dynamicHtmlTooltip);
+      tooltip.focusToAnotherPlacement('Dynamic Html');
+      tooltip.isTooltipDismiss(dynamicHtmlTooltip);
+    });
+  });
+
+  describe('Append to body', () => {
+    const appendToBody = tooltip.exampleDemosArr.appendToBody;
+
+    it('when user hover on "Default tooltip", then tooltip-container shown on the top of button', () => {
+      tooltip.focusOnBtn(appendToBody);
+      tooltip.isTooltipAppears(tooltip.body);
+      tooltip.isTooltipVisible(tooltip.body);
+    });
+
+    it('when user moves the mouse cursor away of tooltip-button, then tooltip-container disappeared', () => {
+      tooltip.focusOnBtn(appendToBody);
+      tooltip.focusToAnotherPlacement('Append to body');
+      tooltip.isTooltipDismiss(tooltip.body);
+    });
+  });
+
+  describe('Configuring defaults', () => {
+    const configuringDefaults = tooltip.exampleDemosArr.configuringDefaults;
+
+    it('when user hover on "Preconfigured tooltip", then tooltip-container shown', () => {
+      tooltip.focusOnBtn(configuringDefaults);
+      tooltip.isTooltipAppears(tooltip.body);
+      tooltip.isTooltipVisible(tooltip.body);
+    });
+
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.focusOnBtn(configuringDefaults);
+      tooltip.focusToAnotherPlacement('Configuring defaults');
+      tooltip.isTooltipDismiss(configuringDefaults);
+    });
+  });
+
+  describe('Custom triggers', () => {
+    const customTriggersTooltip = tooltip.exampleDemosArr.customTriggersTooltip;
+
+    it('when user move mouse to "Hover over me!", then tooltip-container shown', () => {
+      tooltip.hoverOnBtn(customTriggersTooltip);
+      tooltip.isTooltipAppears(customTriggersTooltip);
+      tooltip.isTooltipVisible(customTriggersTooltip);
+    });
+
+    it('when user move mouse out of the "Hover over me!", nothing happens', () => {
+      tooltip.hoverOnBtn(customTriggersTooltip);
+      tooltip.mouseLeave(customTriggersTooltip);
+      tooltip.isTooltipAppears(customTriggersTooltip);
+      tooltip.isTooltipVisible(customTriggersTooltip);
+    });
+
+    it('when user clicks on "Hover over me!", then tooltip-container disappeared', () => {
+      tooltip.hoverOnBtn(customTriggersTooltip);
+      tooltip.clickOnBtn(customTriggersTooltip);
+      tooltip.isTooltipDismiss(customTriggersTooltip);
+    });
+
+    it('when user hover on "Click on me!", nothing happens', () => {
+      tooltip.hoverOnBtn(customTriggersTooltip, 1);
+      tooltip.isTooltipDismiss(customTriggersTooltip);
+    });
+
+    it('when user clicks on "Click on me!", then tooltip-container shown', () => {
+      tooltip.clickOnBtn(customTriggersTooltip, 1);
+      tooltip.isTooltipAppears(customTriggersTooltip);
+      tooltip.isTooltipVisible(customTriggersTooltip);
+    });
+
+    it('when user move mouse out of the "Click on me!", nothing happens', () => {
+      tooltip.clickOnBtn(customTriggersTooltip, 1);
+      tooltip.focusToAnotherPlacement('Custom triggers');
+      tooltip.isTooltipAppears(customTriggersTooltip);
+      tooltip.isTooltipVisible(customTriggersTooltip);
+    });
+
+    it('when user clicks on "Click on me!", then tooltip-container disappeared', () => {
+      tooltip.clickOnBtn(customTriggersTooltip, 1);
+      tooltip.clickOnBtn(customTriggersTooltip, 1);
+      tooltip.isTooltipDismiss(customTriggersTooltip);
+    });
+  });
+
+  describe('Manual triggering', () => {
+    const manualTriggeringTooltip = tooltip.exampleDemosArr.manualTriggeringTooltip;
+
+    it('when user clicks on "Show", then tooltip-container appear  above the text', () => {
+      tooltip.clickOnBtn(manualTriggeringTooltip, 0);
+      tooltip.isTooltipAppears(manualTriggeringTooltip);
+      tooltip.isTooltipVisible(manualTriggeringTooltip);
+    });
+
+    it('when user clicks on "Hide", then tooltip-container disappeared', () => {
+      tooltip.clickOnBtn(manualTriggeringTooltip, 0);
+      tooltip.clickOnBtn(manualTriggeringTooltip, 1);
+      tooltip.isTooltipDismiss(manualTriggeringTooltip);
+    });
+
+    it('when user clicks on "Toggle", then tooltip-container appear', () => {
+      tooltip.clickOnBtn(manualTriggeringTooltip, 2);
+      tooltip.isTooltipAppears(manualTriggeringTooltip);
+      tooltip.isTooltipVisible(manualTriggeringTooltip);
+    });
+
+    it('when user clicks on "Toggle" again, then tooltip-container disappeared', () => {
+      tooltip.clickOnBtn(manualTriggeringTooltip, 2);
+      tooltip.clickOnBtn(manualTriggeringTooltip, 2);
+      tooltip.isTooltipDismiss(manualTriggeringTooltip);
+    });
+  });
+
+  describe('Component level styling', () => {
+    const componentLevelStyling = tooltip.exampleDemosArr.componentLevelStyling;
+
+    it('when user hover on "I have component level styling", then tooltip-container appear', () => {
+      tooltip.focusOnBtn(componentLevelStyling);
+      tooltip.isTooltipAppears(componentLevelStyling);
+      tooltip.isTooltipVisible(componentLevelStyling);
+    });
+
+    it('when user move mouse out of the "I have component level styling", then tooltip-container disappeared', () => {
+      tooltip.focusOnBtn(componentLevelStyling);
+      tooltip.focusToAnotherPlacement('Component level styling');
+      tooltip.isTooltipDismiss(componentLevelStyling);
+    });
+  });
+
+  describe('Custom class', () => {
+    const customClass = tooltip.exampleDemosArr.customClass;
+
+    it('when user hover on the "IDemo with custom class" btn, tooltip appears', () => {
+      tooltip.focusOnBtn(customClass);
+      tooltip.isTooltipAppears(customClass);
+    });
+
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.focusOnBtn(customClass);
+      tooltip.focusToAnotherPlacement('Custom class');
+      tooltip.isTooltipDismiss(customClass);
+    });
+  });
+
+  describe('Tooltip with delay', () => {
+    const delayTooltip = tooltip.exampleDemosArr.delayTooltip;
+    it('when user hover on "Tooltip with 0.5sec delay", then tooltip-container appear', () => {
+      cy.viewport(1440, 900);
+      tooltip.clickOnDemoMenu('Tooltip with delay');
+      tooltip.focusOnBtn(delayTooltip);
+      tooltip.isTooltipAppears(delayTooltip);
+      tooltip.isTooltipVisible(delayTooltip);
+    });
+
+    it('when user move mouse out of the "Tooltip with 0.5sec delay", then tooltip-container disappeared', () => {
+      cy.viewport(1440, 900);
+      tooltip.clickOnDemoMenu('Tooltip with delay');
+      tooltip.focusOnBtn(delayTooltip);
+      tooltip.isTooltipAppears(delayTooltip);
+      tooltip.focusToAnotherPlacement('Tooltip with delay');
+      tooltip.isTooltipDismiss(delayTooltip);
+    });
+  });
+});
diff --git a/cypress/integration/accordion_page_spec.ts b/cypress/integration/accordion_page_spec.ts
index 5d446810e6..9ae3e6bb63 100644
--- a/cypress/integration/accordion_page_spec.ts
+++ b/cypress/integration/accordion_page_spec.ts
@@ -6,226 +6,52 @@ describe('Accordion page test suite', () => {
   beforeEach(() => accordion.navigateTo());
 
   describe('Basic accordion', () => {
-    const basicDemo = accordion.exampleDemosArr.basic;
-
-    it('panels open content at first click', () => {
-      accordion.getAccordionPanel(basicDemo, 0).as('firstPanel')
-        .click();
-
-      cy.get('@firstPanel')
-        .should('have.class', accordion.openClass);
-
-      accordion.getAccordionPanel(basicDemo, 3).as('fourthPanel')
-        .click();
-
-      cy.get('@fourthPanel')
-        .should('have.class', accordion.openClass);
-    });
-
-    it('after double click panels are closed', () => {
-      accordion.getAccordionPanel(basicDemo, 0).as('firstPanel')
-        .dblclick();
-      accordion.getAccordionPanel(basicDemo, 1).as('secondPanel')
-        .dblclick();
-
-      cy.get('@firstPanel')
-        .should('not.to.have.class', accordion.openClass);
-      cy.get('@secondPanel')
-        .should('not.to.have.class', accordion.openClass);
-    });
-  });
-
-  describe('Group opening event', () => {
-    const groupOpenEvent = accordion.exampleDemosArr.openEvent;
-    const openLog = 'Accordion has been opened';
-    const closeLog = 'Accordion has been closed';
-
-    it('click on panel with event listener throws event log in console', () => {
-      cy.window().then(win => {
-        const consoleSpy = cy.spy(win.console, 'log');
-        accordion.getAccordionPanel(groupOpenEvent, 1).as('secondPanel').click();
-        cy.wrap(consoleSpy)
-          .should('have.been.called.with', openLog);
-
-        cy.get('@secondPanel').click();
-        cy.wrap(consoleSpy)
-          .should('have.been.called.with', closeLog);
-      });
-    });
-  });
-
-  describe('Custom HTML', () => {
-    const customHTML = accordion.exampleDemosArr.customHtml;
-    const htmlElemSel = '.badge';
-
-    it('first accordion panel-heading contains custom html', () => {
-      accordion.getAccordionPanel(customHTML, 0).find(accordion.accordionHeading)
-        .children(htmlElemSel).should('to.be.visible');
-    });
-
-    it('second accordion panel-body contains custom html', () => {
-      accordion.getAccordionPanel(customHTML, 1).as('secondPanel').click();
-      cy.get('@secondPanel').find('.panel-body')
-        .children(htmlElemSel).should('to.be.visible');
-    });
-  });
-
-  describe('Disabled accordion', () => {
-    const disabledDemo = accordion.exampleDemosArr.disabled;
-    const buttonEnableDisable = 'Enable / Disable first panel';
-
-    it('first panel can be disabled or enabled', () => {
-      accordion.clickByText(disabledDemo, buttonEnableDisable);
-
-      accordion.getAccordionPanel(disabledDemo, 0).as('firstPanel').find(accordion.disabledPanelText)
-        .should('to.be.exist');
-
-      accordion.clickByText(disabledDemo, buttonEnableDisable);
-
-      cy.get('@firstPanel').find(accordion.disabledPanelText)
-        .should('not.to.be.exist');
-    });
-  });
-
-  describe('Initially opened', () => {
-    const openedByDefault = accordion.exampleDemosArr.initiallyOpened;
-
-    it('second accordion panel is opened by default', () => {
-      accordion.getAccordionPanel(openedByDefault, 1).should('to.have.class', accordion.openClass);
-    });
-  });
-
-  describe('Dynamic accordion', () => {
-    const dynamicDemo = accordion.exampleDemosArr.dynamicAccGroup;
-    const buttonAddGroup = 'Add Group Item';
-
-    it('new accordion group can be added by click on button', () => {
-      cy.get(`${ dynamicDemo } accordion-group`).as('arrPanels')
-        .should('have.length', 2);
-      accordion.clickByText(dynamicDemo, buttonAddGroup);
-      cy.get('@arrPanels')
-        .should('have.length', 3);
-    });
-  });
-
-  describe('Dynamic body content', () => {
-    const dynamicBody = accordion.exampleDemosArr.dynamicBody;
-    const buttonAddItem = 'Add';
-
-    it('items in first collapse-panel can be added dynamic', () => {
-      accordion.getAccordionPanel(dynamicBody, 0).as('dynamicItemsPanel').click();
-
-      cy.get('@dynamicItemsPanel').find('.panel-body div')
-        .should('have.length', 3);
-
-      accordion.clickByText('@dynamicItemsPanel', buttonAddItem);
-
-      cy.get('@dynamicItemsPanel').find('.panel-body div')
-        .should('have.length', 4);
-    });
-  });
-
-  describe('Manual toggle', () => {
-    const manualToggle = accordion.exampleDemosArr.manualToggle;
-    const buttonPanelToggler = 'Toggle last panel';
-
-    it('last panel can be controlled by toggler button', () => {
-      accordion.clickByText(manualToggle, buttonPanelToggler);
-
-      accordion.getAccordionPanel(manualToggle, 2).as('dynamicPanel')
-        .should('not.have.class', accordion.openClass);
-
-      accordion.clickByText(manualToggle, buttonPanelToggler);
-
-      cy.get('@dynamicPanel')
-        .should('have.class', accordion.openClass);
-    });
-  });
-
-  describe('Open only one at a time', () => {
-    const onePanelDemo = accordion.exampleDemosArr.oneAtATime;
-
-    it('closeOthers property sets as true - only one panel can be opened at a time', () => {
-      cy.get(onePanelDemo).find('input').check();
-
-      accordion.getAccordionPanel(onePanelDemo, 0).as('firstPanel').click()
-        .should('have.class', accordion.openClass);
-      accordion.getAccordionPanel(onePanelDemo, 1).as('secondPanel')
-        .should('not.have.class', accordion.openClass);
-      accordion.getAccordionPanel(onePanelDemo, 2).as('thirdPanel')
-        .should('not.have.class', accordion.openClass);
-
-      cy.get('@thirdPanel').click();
-
-      cy.get('@thirdPanel')
-        .should('have.class', accordion.openClass);
-      cy.get('@firstPanel')
-        .should('not.have.class', accordion.openClass);
-      cy.get('@secondPanel')
-        .should('not.have.class', accordion.openClass);
-    });
-
-    it('closeOthers property sets as false - not only one panel can be opened at a time', () => {
-      cy.get(onePanelDemo).find('input').uncheck();
-
-      accordion.getAccordionPanel(onePanelDemo, 0).as('firstPanel').click()
-        .should('have.class', accordion.openClass);
-      accordion.getAccordionPanel(onePanelDemo, 1).as('secondPanel')
-        .should('not.have.class', accordion.openClass);
-      accordion.getAccordionPanel(onePanelDemo, 2).as('thirdPanel')
-        .should('not.have.class', accordion.openClass);
-
-      cy.get('@thirdPanel').click();
-      cy.get('@thirdPanel')
-        .should('have.class', accordion.openClass);
-      cy.get('@firstPanel')
-        .should('have.class', accordion.openClass);
-      cy.get('@secondPanel')
-        .should('not.have.class', accordion.openClass);
-    });
-  });
-
-  describe('Styling accordion', () => {
-    const stylingDemo = accordion.exampleDemosArr.styling;
-
-    it('first and third panel contains customClass style', () => {
-      const stylesPanel = [
-        'rgb(91, 192, 222)', // light blue (malibu)
-        'rgb(255, 255, 255)' // white
-      ];
-      const stylePanelBody = 'rgb(51, 122, 167)'; // dark blue (lochmara)
-
-      accordion.getAccordionPanel(stylingDemo, 0).find(accordion.panelCard).as('firstPanel')
-        .should('to.have.css', 'background-color', stylesPanel[0])
-        .and('to.have.css', 'color', stylesPanel[1]);
-      cy.get('@firstPanel').find(accordion.panelBody)
-        .should('to.have.css', 'background-color', stylePanelBody);
-
-      accordion.getAccordionPanel(stylingDemo, 2).find(accordion.panelCard).as('thirdPanel')
-        .should('to.have.css', 'background-color', stylesPanel[0])
-        .and('to.have.css', 'color', stylesPanel[1]);
-      cy.get('@thirdPanel').find(accordion.panelBody)
-        .should('to.have.css', 'background-color', stylePanelBody);
-    });
-  });
-
-  describe('Configuring defaults', () => {
-    const configDemo = accordion.exampleDemosArr.config;
-
-    it('example opens only one panel at a time', () => {
-      accordion.getAccordionPanel(configDemo, 0).as('firstPanel').click()
-        .should('have.class', accordion.openClass);
-      accordion.getAccordionPanel(configDemo, 1).as('secondPanel')
-        .should('not.have.class', accordion.openClass);
-      accordion.getAccordionPanel(configDemo, 2).as('thirdPanel')
-        .should('not.have.class', accordion.openClass);
-
-      cy.get('@secondPanel').click()
-        .should('have.class', accordion.openClass);
-      cy.get('@firstPanel')
-        .should('not.have.class', accordion.openClass);
-      cy.get('@thirdPanel')
-        .should('not.have.class', accordion.openClass);
+    const basic = accordion.exampleDemosArr.basic;
+
+    it('example contains 4 accordion items, initially not expanded', () => {
+      accordion.isAccordionLengthEqual(basic, 4);
+      accordion.isAccordionItemExpanded(basic, 0, false);
+      accordion.isAccordionItemExpanded(basic, 1, false);
+      accordion.isAccordionItemExpanded(basic, 2, false);
+      accordion.isAccordionItemExpanded(basic, 3, false);
+      accordion.isItemContentVisible(basic, 0, false);
+      accordion.isItemContentVisible(basic, 1, false);
+      accordion.isItemContentVisible(basic, 2, false);
+      accordion.isItemContentVisible(basic, 3, false);
+    });
+
+    it('when user click on each item, then any content inside shown', () => {
+      accordion.clickOnAccordionGroup(basic, 0);
+      accordion.isAccordionItemExpanded(basic, 0, true);
+      accordion.isItemContentVisible(basic, 0, true);
+      accordion.clickOnAccordionGroup(basic, 1);
+      accordion.isAccordionItemExpanded(basic, 1, true);
+      accordion.isItemContentVisible(basic, 1, true);
+      accordion.clickOnAccordionGroup(basic, 2);
+      accordion.isAccordionItemExpanded(basic, 2, true);
+      accordion.isItemContentVisible(basic, 2, true);
+      accordion.clickOnAccordionGroup(basic, 3);
+      accordion.isAccordionItemExpanded(basic, 3, true);
+      accordion.isItemContentVisible(basic, 3, true);
+    });
+
+    it('when user double click on each item, content closed', () => {
+      accordion.clickOnAccordionGroup(basic, 0);
+      accordion.clickOnAccordionGroup(basic, 0);
+      accordion.isAccordionItemExpanded(basic, 0, false);
+      accordion.isItemContentVisible(basic, 0, false);
+      accordion.clickOnAccordionGroup(basic, 1);
+      accordion.clickOnAccordionGroup(basic, 1);
+      accordion.isAccordionItemExpanded(basic, 1, false);
+      accordion.isItemContentVisible(basic, 1, false);
+      accordion.clickOnAccordionGroup(basic, 2);
+      accordion.clickOnAccordionGroup(basic, 2);
+      accordion.isAccordionItemExpanded(basic, 2, false);
+      accordion.isItemContentVisible(basic, 2, false);
+      accordion.clickOnAccordionGroup(basic, 3);
+      accordion.clickOnAccordionGroup(basic, 3);
+      accordion.isAccordionItemExpanded(basic, 3, false);
+      accordion.isItemContentVisible(basic, 3, false);
     });
   });
 });
diff --git a/cypress/integration/alerts_page_spec.ts b/cypress/integration/alerts_page_spec.ts
index bb4d54dd6a..38fa953213 100644
--- a/cypress/integration/alerts_page_spec.ts
+++ b/cypress/integration/alerts_page_spec.ts
@@ -6,168 +6,13 @@ describe('Alerts page test suite', () => {
   beforeEach(() => alerts.navigateTo());
 
   describe('Basic', () => {
-    const basicDemo = alerts.exampleDemosArr.basic;
-    const alertTypes = [
-      'alert-success',
-      'alert-info',
-      'alert-warning',
-      'alert-danger'
-    ];
+    const basic = alerts.exampleDemosArr.basic;
 
-    it('success, info, warning and danger types of alerts are displayed', () => {
-      alertTypes.forEach(type => cy.get(`${ basicDemo } .${ type }`)
-        .should('be.visible'));
-    });
-  });
-
-  describe('Link color', () => {
-    const linkDemo = alerts.exampleDemosArr.link;
-    const alertTypes = [
-      'alert-success',
-      'alert-info',
-      'alert-warning',
-      'alert-danger'
-    ];
-
-    it('links can be provided by class alert-link', () => {
-      alertTypes.forEach(type => cy.get(`${ linkDemo } .${ type }`).find(alerts.linkClass)
-        .should('have.attr', 'href', '#'));
-    });
-  });
-
-  describe('Additional content', () => {
-    const contentDemo = alerts.exampleDemosArr.content;
-
-    it('alert with additional content contains html elements', () => {
-      cy.get(contentDemo).find(alerts.alertClass)
-        .should('to.have.descendants', 'h4')
-        .and('to.have.descendants', 'p')
-        .and('to.have.descendants', alerts.heading);
-    });
-  });
-
-  describe('Dismissing', () => {
-    const dismissingDemo = alerts.exampleDemosArr.dismissing;
-    const alertTypes = [
-      'alert-success',
-      'alert-info',
-      'alert-danger'
-    ];
-    const buttonToggler = 'Toggle dismissible';
-    const buttonReset = 'Reset';
-
-    it('alerts can stop being dismissible', () => {
-      cy.get(dismissingDemo).find(alerts.alertClass).last().as('dismissAlert')
-        .should('to.have.descendants', alerts.dismissOption);
-
-      alerts.clickByText(dismissingDemo, buttonToggler);
-      cy.get('@dismissAlert')
-        .should('not.to.have.descendants', alerts.dismissOption);
-
-      alerts.clickByText(dismissingDemo, buttonToggler);
-      cy.get('@dismissAlert')
-        .should('to.have.descendants', alerts.dismissOption);
-    });
-
-    it('alerts can all be closed and then resetting to default state', () => {
-      alertTypes.forEach(type => {
-        cy.get(`${ dismissingDemo } .${ type } ${alerts.dismissOption}`).click();
-        cy.get(`${ dismissingDemo } .${ type }`)
-          .should('not.to.exist');
-      });
-
-      alerts.clickByText(dismissingDemo, buttonReset);
-      alertTypes.forEach(type => cy.get(`${ dismissingDemo } .${ type }`)
-        .should('to.exist'));
-    });
-  });
-
-  describe('Dynamic html', () => {
-    const dynamicHtml = alerts.exampleDemosArr.dynamicHtml;
-    const alertTypes = [
-      'alert-success',
-      'alert-info',
-      'alert-danger'
-    ];
-
-    it('each alert contains style and content from component', () => {
-      alertTypes.forEach(type => cy.get(`${ dynamicHtml} .${ type }`)
-        .should('be.visible')
-        .and('to.have.descendants', alerts.textWrapper));
-    });
-  });
-
-  describe('Dynamic content', () => {
-    const dynamicContent = alerts.exampleDemosArr.dynamicContent;
-    const dynamicAlertText = [
-      'You successfully read this important alert message.',
-      'Now this text is different from what it was before. Go ahead and click the button one more time',
-      'Well done! Click reset button'
-    ];
-
-    it('alert\'s content can be changed dynamicly', () => {
-      dynamicAlertText.forEach(text => {
-        cy.get(dynamicContent).find(alerts.alertClass)
-          .should('to.contain', text);
-        cy.get(dynamicContent).find('button').click();
-      });
-    });
-  });
-
-  describe('Dismiss on timeout', () => {
-    const dismisTimeout = alerts.exampleDemosArr.dismissTimeout;
-    const timeoutLength = 5000;
-
-    it('After timeout in 5 seconds, default alert disappears', () => {
-      cy.get(`${ dismisTimeout } ${ alerts.alertClass }`).as('defaultAlert')
-        .should('to.be.visible');
-      cy.wait(timeoutLength);
-      cy.get('@defaultAlert').should('not.to.exist');
-    });
-  });
-
-  describe('Global styling', () => {
-    const globalStyle = alerts.exampleDemosArr.globalStyling;
-    const stylesColors = [
-      'rgb(123, 31, 162)', // violet
-      'rgb(74, 20, 140)', // indigo
-      'rgb(255, 255, 255)' // white
-    ];
-
-    it('alert is displayed with added style', () => {
-      cy.get(globalStyle).find(alerts.alertClass)
-        .should('to.have.css', 'background-color', stylesColors[0])
-        .and('to.have.css', 'border-color', stylesColors[1])
-        .and('to.have.css', 'color', stylesColors[2]);
-    });
-  });
-
-  describe('Component level styling', () => {
-    const componentStyle = alerts.exampleDemosArr.localStyling;
-    const stylesColors = [
-      'rgb(0, 150, 136)', // dark cyan
-      'rgb(0, 105, 92)', // mosque
-      'rgb(255, 255, 255)' // white
-    ];
-
-    it('alert is displayed with added style', () => {
-      cy.get(componentStyle).find(alerts.alertClass)
-        .should('to.have.css', 'background-color', stylesColors[0])
-        .and('to.have.css', 'border-color', stylesColors[1])
-        .and('to.have.css', 'color', stylesColors[2]);
-    });
-  });
-
-  describe('Configuring defaults', () => {
-    const configDemo = alerts.exampleDemosArr.config;
-    const alertTypes = [
-      'alert-success',
-      'alert-info'
-    ];
-
-    it('each alert contains added config', () => {
-      alertTypes.forEach(type => cy.get(`${ configDemo } .${ type }`)
-        .should('be.visible'));
+    it('example contains success, info, warning and danger types of alerts', () => {
+      alerts.isAlertVisible(basic, 'success');
+      alerts.isAlertVisible(basic, 'info');
+      alerts.isAlertVisible(basic, 'warning');
+      alerts.isAlertVisible(basic, 'danger');
     });
   });
 });
diff --git a/cypress/integration/buttons_page_spec.ts b/cypress/integration/buttons_page_spec.ts
index e8aa714ac8..0843d9ac43 100644
--- a/cypress/integration/buttons_page_spec.ts
+++ b/cypress/integration/buttons_page_spec.ts
@@ -2,155 +2,16 @@ import { ButtonsPo } from '../support/buttons.po';
 
 describe('Buttons page test suite', () => {
   const buttons = new ButtonsPo();
-  const buttonNames = [
-    'Left',
-    'Middle',
-    'Right'
-  ];
 
   beforeEach(() => buttons.navigateTo());
 
   describe('Basic', () => {
     const basicBtn = buttons.exampleDemosArr.basic;
-    const btnText = 'Single Button';
 
     it('example contains only enabled button with text on it', () => {
-      cy.get(` ${ basicBtn } ${ buttons.buttonSel }`)
-        .should('to.be.enabled')
-        .and('to.contain', btnText);
-    });
-  });
-
-  describe('Checkbox', () => {
-    const checkboxDemo = buttons.exampleDemosArr.checkbox;
-
-    it('checkboxes can be checked or unchecked', () => {
-      cy.get(`${ checkboxDemo } ${ buttons.output }`).as('output')
-        .should('to.contain', `"${ buttonNames[1].toLowerCase() }": true`);
-      buttons.clickByText(checkboxDemo, buttonNames[1]);
-
-      buttonNames.forEach(button => {
-        cy.get('@output')
-          .should('to.contain', `"${ button.toLowerCase() }": false`);
-
-        buttons.clickByText(checkboxDemo, button);
-        cy.get('@output')
-          .should('to.contain', `"${ button.toLowerCase() }": true`);
-      });
-    });
-  });
-
-  describe('Custom checkbox value', () => {
-    const customCheckboxVal = buttons.exampleDemosArr.customCheckboxVal;
-
-    it('examples contains output, which can be changed by click on output', () => {
-      const defaultVal = '1';
-      const afterClickVal = '0';
-
-      cy.get(` ${ customCheckboxVal } ${ buttons.output }`).as('header')
-        .should('to.contain', defaultVal);
-
-      cy.get(` ${ customCheckboxVal } ${ buttons.buttonSel }`).click();
-      cy.get('@header')
-        .should('to.contain', afterClickVal);
-    });
-  });
-
-  describe('Checkbox with Reactive Form', () => {
-    const checkboxWithForm = buttons.exampleDemosArr.checkboxWithForms;
-
-    it('checkboxes can be checked or unchecked and its\' states are displayed at reactive form', () => {
-      cy.get(` ${ checkboxWithForm } ${ buttons.output }`).as('output')
-        .should('to.contain', `"${ buttonNames[1].toLowerCase() }": true`);
-      buttons.clickByText(checkboxWithForm, buttonNames[1]);
-
-      buttonNames.forEach(button => {
-        cy.get('@output')
-          .should('to.contain', `"${ button.toLowerCase() }": false`);
-
-        buttons.clickByText(checkboxWithForm, button);
-        cy.get('@output')
-          .should('to.contain', `"${ button.toLowerCase() }": true`);
-      });
-    });
-  });
-
-  describe('Radio buttons', () => {
-    const radioCheck = buttons.exampleDemosArr.radioBtn;
-
-    it('checked radio button created with ngModel is displayed in output', () => {
-      // for now we need creating this alias due to same selectors' names and classes
-      cy.get(radioCheck).eq(0).as('radio').find('.btn-group').first().as('radioNgModel');
-
-      buttonNames.forEach(name => {
-        buttons.clickByText('@radioNgModel', name);
-
-        cy.get(`${ '@radio' }${ buttons.output }`)
-          .should('to.contain', name);
-      });
-    });
-
-    it('checked radio buttons created with btnRadioGroup is displayed in output', () => {
-      // for now we need creating this alias due to same selectors' names
-      cy.get(radioCheck).eq(0).as('radio').find(`${ buttons.btnRadioGroupSel }`).as('checkBtnRadioGroup');
-
-      buttonNames.forEach(name => {
-        buttons.clickByText('@checkBtnRadioGroup', name);
-
-        cy.get(`${ '@radio' }${ buttons.output }`)
-          .should('to.contain', name);
-      });
-    });
-  });
-
-  describe('Uncheckable radio', () => {
-    const radioUncheck = buttons.exampleDemosArr.radioBtn;
-
-    it('uncheckable radio buttons can be checked or unchecked', () => {
-      // for now we need creating this alias due to same selectors' names
-      cy.get(radioUncheck).eq(1).as('radioUncheck').find(`${ buttons.btnRadioGroupSel }`).as('uncheckBtnRadio');
-
-      buttonNames.forEach(name => {
-        buttons.clickByText('@uncheckBtnRadio', name);
-
-        cy.get(`${ '@radioUncheck' }${ buttons.output }`)
-          .should('to.contain', name);
-
-        buttons.clickByText('@uncheckBtnRadio', name);
-
-        cy.get(`${ '@radioUncheck' }${ buttons.output }`)
-          .should('to.be', null);
-      });
-    });
-  });
-
-  describe('Radio with Reactive Forms', () => {
-    const radioWithForm = buttons.exampleDemosArr.radioBtnWithForms;
-
-    it('radio example should dynamicly update reactive form', () => {
-      const btns = ['A', 'B', 'C'];
-
-      btns.forEach(radio => {
-        buttons.clickByText(radioWithForm, radio);
-
-        cy.get(`${ radioWithForm } ${ buttons.output }`)
-          .should('to.contain', radio);
-      });
-    });
-  });
-
-  describe('Disabled Buttons', () => {
-    const disabled = buttons.exampleDemosArr.disabled;
-    const togglerBtn = 'Enable/Disable';
-    const btnForAction = 'Button';
-
-    it('disabled buttons examples contains button, that can be disabled', () => {
-      cy.get(disabled).contains(btnForAction).as('btnForDisabling')
-        .should('to.be.enabled');
-      buttons.clickByText(disabled, togglerBtn);
-
-      cy.get('@btnForDisabling')
-        .should('not.to.be.enabled');
+      buttons.isButtonEnabled(basicBtn, 'Single Button');
+      buttons.clickOnBtn(basicBtn);
+      buttons.isBtnTxtEqual(basicBtn, ' Single Button\n');
     });
   });
 });
diff --git a/cypress/integration/datepicker_page_spec.ts b/cypress/integration/datepicker_page_spec.ts
index 78e4264a44..2bf453e213 100644
--- a/cypress/integration/datepicker_page_spec.ts
+++ b/cypress/integration/datepicker_page_spec.ts
@@ -2,53 +2,360 @@ import { DatepickerPo } from '../support/datepicker.po';
 
 describe('Datepicker demo page test suite', () => {
   const datepicker = new DatepickerPo();
+  const currentMonthNum: number = new Date().getMonth();
+  const prevMonthStr: string = datepicker.monthNames[currentMonthNum === 0 ? 11 : currentMonthNum - 1];
+  const currentYearNum: number = new Date().getFullYear();
+  const currentYearStr: string = currentYearNum.toString();
+  const prevYearStr: string = (currentYearNum - 1).toString();
+  const nextMonthStr: string = datepicker.monthNames[(currentMonthNum + 1)];
+  const nextYearStr: string = (currentYearNum + 1).toString();
 
   beforeEach(() => datepicker.navigateTo());
 
-  describe('Basic', () => {
+  describe('Basic datepicker', () => {
     const basic = datepicker.exampleDemosArr.basic;
 
-    it('basic date- and daterangepicker can be opened by click on input', () => {
-      cy.get(`${ basic } ${ datepicker.datepickerInput }`).click();
-      cy.get(datepicker.datepickerLastOpened)
-        .should('to.be.visible');
+    beforeEach(() => datepicker.scrollToMenu('Basic'));
 
-      cy.get(`${ basic } ${ datepicker.daterangepickerInput }`).click();
-      cy.get(datepicker.daterangepickerLastOpened)
-        .should('to.be.visible');
+    it('example contains 2 inputs: Datepicker and Daterangepicker with appropriate placeholders', () => {
+      datepicker.isInputHaveAttrs(basic, [
+        { attr: 'placeholder', value: 'Datepicker' },
+        { attr: 'type', value: 'text' }], 0);
+
+      datepicker.isInputHaveAttrs(basic, [
+        { attr: 'placeholder', value: 'Daterangepicker' },
+        { attr: 'type', value: 'text' }], 1);
+    });
+
+    it('when user clicks on "Datepicker" input, container with 2 arrows: "‹", "›" opened, no one date selected', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.isSelectedDateExist('datepicker', false);
+      datepicker.isDatepickerNavigationFullyActiveAndCorrect('date');
+    });
+
+    it('when user clicks on "‹" - previous month shown, when user clicks on "›" - next month shown', () => {
+      const currentMonth = new Date().getMonth();
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', '<');
+      datepicker.isSelectedDateExist('datepicker', false);
+      datepicker.isVisibleMonthOrYearEqual(datepicker.monthNames[currentMonth === 0 ? datepicker.monthNames.length - 2 : currentMonth - 1]);
+      datepicker.clickOnNavigation('body', '>');
+      datepicker.isSelectedDateExist('datepicker', false);
+      datepicker.isVisibleMonthOrYearEqual(datepicker.monthNames[currentMonth]);
+      datepicker.clickOnNavigation('body', '>');
+      datepicker.isSelectedDateExist('datepicker', false);
+      datepicker.isVisibleMonthOrYearEqual(datepicker.monthNames[currentMonth + 1]);
+    });
+
+    it('when user clicks on month, then full table with 12 months shown with year in head block', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', 'month');
+      datepicker.isDatepickerNavigationFullyActiveAndCorrect('month');
+      datepicker.isDatePickerBodyExistAndCorrect('month');
+      datepicker.isDatePickerTriggerCorrect('month');
+    });
+
+    it('when user clicks on month and "‹" button - previous year in head block shown', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', 'month');
+      datepicker.clickOnNavigation('body', '<');
+      datepicker.isDatePickerBodyExistAndCorrect('month');
+      datepicker.isVisibleMonthOrYearEqual((new Date().getFullYear() - 1).toString());
+    });
+
+    it('when user clicks on month and "›" button - next year in head block shown', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', 'month');
+      datepicker.clickOnNavigation('body', '>');
+      datepicker.isDatePickerBodyExistAndCorrect('month');
+      datepicker.isVisibleMonthOrYearEqual((new Date().getFullYear() + 1).toString());
+    });
+
+    it('when user clicks on month and then on any month - this month shown in head block, dates mode', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', 'month');
+      datepicker.clickOnDatepickerTableItem('month', 'body', 5);
+      datepicker.isDatePickerBodyExistAndCorrect('date');
+      datepicker.isVisibleMonthOrYearEqual(datepicker.monthNames[5]);
+    });
+
+    it('when user clicks on year, then table with 16 years shown with year interval in head block', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', 'year');
+      datepicker.isDatepickerNavigationFullyActiveAndCorrect('year');
+      datepicker.isDatePickerBodyExistAndCorrect('year');
+      datepicker.isDatePickerTriggerCorrect('year');
+    });
+
+    it('when user clicks on year and "‹" button - interval with previous 16 years shown', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', 'year');
+      datepicker.clickOnNavigation('body', '<');
+      datepicker.isDatePickerBodyExistAndCorrect('year');
+      datepicker.isVisibleMonthOrYearEqual(
+        `${(new Date().getFullYear() - 7 - 16)} - ${(new Date().getFullYear() + 8 - 16)}`);
     });
-  });
 
-  describe('Custom date format', () => {
-    const customFormat = datepicker.exampleDemosArr.customFormat;
+    it('when user clicks on year and "›" button - interval with next 16 years shown', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', 'year');
+      datepicker.clickOnNavigation('body', '>');
+      datepicker.isDatePickerBodyExistAndCorrect('year');
+      datepicker.isVisibleMonthOrYearEqual(
+        `${(new Date().getFullYear() - 7 + 16)} - ${(new Date().getFullYear() + 8 + 16)}`);
+    });
 
-    it('by default, today\'s date is displayed at first output in format YYYY-MM-DD', () => {
-      const expectedDate = Cypress.moment().format('YYYY-MM-DD');
+    it('when user clicks on year and any year - then it shown in head block and table with 12 months shown', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', 'year');
+      datepicker.clickOnDatepickerTableItem('year', 'body', 2);
+      datepicker.isDatePickerBodyExistAndCorrect('month');
+      datepicker.isVisibleMonthOrYearEqual(`${(new Date().getFullYear() - 7 + 2)}`);
+    });
 
-      cy.get(`${ customFormat } ${ datepicker.datepickerInput }`).first()
-        .should('have.value', `${ expectedDate }`);
+    it('when user clicks on year and any year - then it shown in head block and table with 12 months shown', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', 'year');
+      datepicker.clickOnDatepickerTableItem('year', 'body', 2);
+      datepicker.isDatePickerBodyExistAndCorrect('month');
+      datepicker.isVisibleMonthOrYearEqual(`${(new Date().getFullYear() - 7 + 2)}`);
     });
 
-    it('by default, today\'s date is displayed at second output in format MM/DD/YYYY', () => {
-      const expectedDate = Cypress.moment().format('MM/DD/YYYY');
+    it('when user clicks on: year mode => year => any month - then this month, year shown with dates mode', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnNavigation('body', 'year');
+      datepicker.clickOnDatepickerTableItem('year', 'body', 0);
+      datepicker.clickOnDatepickerTableItem('month', 'body', 0);
+      datepicker.isDatePickerBodyExistAndCorrect('date');
+      datepicker.isDatepickerNavigationFullyActiveAndCorrect(
+        'date', 'body', datepicker.monthNames[0], (new Date().getFullYear() - 7).toString());
+    });
 
-      cy.get(`${ customFormat } ${ datepicker.datepickerInput }`).eq(1)
-        .should('have.value', `${ expectedDate }`);
+    it('when user clicks on any date - then this date appeared in the input in format "mm/dd/yyyy"', () => {
+      const chosenDate = new Date(`${new Date().getMonth() + 1}/10/${new Date().getFullYear()}`);
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+      datepicker.isInputValueEqual(basic, `${chosenDate
+        .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' })}`);
+    });
+
+    it('when user chose date and click on "Datepicker" again, container opened and chosen date selected', () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '10');
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.isSelectedDateExist('datepicker', true, 'body', '10');
+    });
+
+    it('when user clears input, add date in format "mm.dd.yyyy", click "Enter" - it converted to "mm/dd/yyyy"', () => {
+      datepicker.clearInputAndSendKeys(basic, '05.10.2015', 0);
+      datepicker.clickEnterOnInput(basic);
+      datepicker.isInputValueEqual(basic, '05/10/2015');
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.isSelectedDateExist('datepicker', true, 'body', '10');
+      datepicker.isDatepickerNavigationFullyActiveAndCorrect('date', 'body', datepicker.monthNames[4], '2015');
+    });
+
+    it('when user clears input and add there date in bad format, click "Enter" - "Invalid date" shown', () => {
+      datepicker.clearInputAndSendKeys(basic, '20,10,2015', 0);
+      datepicker.clickEnterOnInput(basic);
+      datepicker.isInputValueEqual(basic, 'Invalid date', 0);
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.isSelectedDateExist('datepicker', false);
+    });
+
+    it('when user clears input, add date in format "mmddyyyy", click "Enter" - date converted "mm/dd/yyyy"', () => {
+      datepicker.clearInputAndSendKeys(basic, '05102015', 0);
+      datepicker.clickEnterOnInput(basic);
+      datepicker.isInputValueEqual(basic, '05/10/2015');
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.isSelectedDateExist('datepicker', true, 'body', '10');
+      datepicker.isDatepickerNavigationFullyActiveAndCorrect('date', 'body', datepicker.monthNames[4], '2015');
     });
   });
 
-  describe('Reactive forms', () => {
-    const reactiveForms = datepicker.exampleDemosArr.reactiveForms;
+  describe('Basic daterangepicker', () => {
+    const basic = datepicker.exampleDemosArr.basic;
+
+    beforeEach(() => datepicker.scrollToMenu('Basic'));
+
+    it(`when user clicks on "Daterangepicker" input after datepicker, 2d container opened and 1t closed
+      range contains 2 calendar blocks, 2 arrows: "‹/›", shown interval from current month/year and next`, () => {
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnDatepickerTableItem('date', 'body', 0, '15');
+      datepicker.isInputValueEqual(basic,
+        new Date(`${currentMonthNum + 1}/15/${currentYearStr}`)
+          .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }));
+      datepicker.clickOnDatepickerInput(basic);
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.isDateRangepickerNavigationFullyActiveAndCorrect();
+      datepicker.isDatepickerOpened(false);
+    });
 
-    it('chosen in datepicker date can be displayed in reactive form', () => {
-      const expectedDateValue = Cypress.moment().format('MMM D, YYYY');
-      const day = Cypress.moment().format('D');
+    it('when user clicks on "‹" - shown interval, which started from previous month', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('<');
+      datepicker.isDateRangepickerNavigationFullyActiveAndCorrect(
+        'date', 'body', prevMonthStr, currentMonthNum === 0 ? prevYearStr : currentYearStr);
+    });
 
-      cy.get(`${ reactiveForms } ${ datepicker.datepickerInput }`).click();
-      datepicker.clickOnDayInCurrMonth(`${ datepicker.datepickerLastOpened }`, day);
+    it('when user clicks on "›" - shown interval, which started from next month', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('>');
+      datepicker.isDateRangepickerNavigationFullyActiveAndCorrect(
+        'date', 'body', nextMonthStr, currentMonthNum === 11 ? nextYearStr : currentYearStr);
+    });
+
+    it('when user clicks on month, 2 tables with 12 months in each shown with years(current, next) in head', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('month-left');
+      datepicker.isDateRangepickerNavigationFullyActiveAndCorrect('month');
+      datepicker.isDaterangePickerBodyExistAndCorrect('month');
+      datepicker.isDaterangePickerTriggerCorrect('month');
+    });
+
+    it('when user clicks on month and "‹" button - interval, started from previous year in head block shown', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('month-left');
+      datepicker.clickOnDateRangePickerNavigation('<');
+      datepicker.isDaterangePickerBodyExistAndCorrect('month');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual(prevYearStr, currentYearStr);
+    });
+
+    it('when user clicks on month and "›" button - interval, started from next year in head block shown', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('month-left');
+      datepicker.clickOnDateRangePickerNavigation('>');
+      datepicker.isDaterangePickerBodyExistAndCorrect('month');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual(nextYearStr, (currentYearNum + 2).toString());
+    });
+
+    it('when user clicks on month and any month - then tables with dates shown and in head chosen month', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('month-right');
+      datepicker.clickOnDaterangePickerTableItem('month', 0, 'body', undefined, 'January');
+      datepicker.isDaterangePickerBodyExistAndCorrect('date');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual('January', 'February');
+    });
+
+    it('when user clicks on year, then 2 tables with 16 years in each shown with year interval in head block', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('year-left');
+      datepicker.isDaterangePickerBodyExistAndCorrect('year');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual(
+        `${currentYearNum - 7} - ${currentYearNum + 8}`, `${currentYearNum + 9} - ${currentYearNum + 24}`);
+      datepicker.isDaterangePickerTriggerCorrect('year');
+    });
+
+    it('when user clicks on year and "‹" button - interval with previous 16 years shown in each table', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('year-left');
+      datepicker.clickOnDateRangePickerNavigation('<');
+      datepicker.isDaterangePickerBodyExistAndCorrect('year');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual(
+        `${currentYearNum - 23} - ${currentYearNum - 8}`, `${currentYearNum - 7} - ${currentYearNum + 8}`);
+    });
+
+    it('when user clicks on year and "›" button - interval with next 16 years shown in each table', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('year-right');
+      datepicker.clickOnDateRangePickerNavigation('>');
+      datepicker.isDaterangePickerBodyExistAndCorrect('year');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual(
+        `${currentYearNum + 9} - ${currentYearNum + 24}`, `${currentYearNum + 25} - ${currentYearNum + 40}`);
+    });
+
+    it('when user clicks on year and year from the left table - then it shown in head, tables with 12 months', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('year-left');
+      datepicker.clickOnDaterangePickerTableItem('year', 0, 'body', 4);
+      datepicker.isDaterangePickerBodyExistAndCorrect('month');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual(
+        `${currentYearNum - 7 + 4}`, `${currentYearNum - 7 + 5}`);
+    });
+
+    it('when user clicks on year and year from the right table - then it shown in head, tables with 12 months', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('year-left');
+      datepicker.clickOnDaterangePickerTableItem('year', 1, 'body', 9);
+      datepicker.isDaterangePickerBodyExistAndCorrect('month');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual(
+        `${currentYearNum + 9 + 9}`, `${currentYearNum + 9 + 10}`);
+    });
+
+    it('when user clicks on year and year from the right table - then it shown in head, tables with 12 months', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('year-left');
+      datepicker.clickOnDaterangePickerTableItem('year', 1, 'body', 9);
+      datepicker.isDaterangePickerBodyExistAndCorrect('month');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual(
+        `${currentYearNum + 9 + 9}`, `${currentYearNum + 9 + 10}`);
+    });
+
+    it('when user clicks on year and year and any month from the left - month, year shown in head, dates mode', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('year-left');
+      datepicker.clickOnDaterangePickerTableItem('year', 0, 'body', 0);
+      datepicker.clickOnDaterangePickerTableItem('month', 0, 'body', 0);
+      datepicker.isDaterangePickerBodyExistAndCorrect('date');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual(
+        datepicker.monthNames[0], datepicker.monthNames[1]);
+    });
+
+    it('when user clicks on year and year and any month from the right - month, year shown in head, dates mode', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDateRangePickerNavigation('year-right');
+      datepicker.clickOnDaterangePickerTableItem('year', 1, 'body', 2);
+      datepicker.clickOnDaterangePickerTableItem('month', 1, 'body', 2);
+      datepicker.isDaterangePickerBodyExistAndCorrect('date');
+      datepicker.isVisibleDateRangePickerMonthOrYearEqual(
+        datepicker.monthNames[2], datepicker.monthNames[3]);
+    });
+
+    it('when user clicks on any date - it selected, click on later date, interval shown mm/dd/yyyy-mm/dd/yyyy', () => {
+      const dateLeft = new Date(`${currentMonthNum + 1}/01/${currentYearStr}`)
+        .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+      const dateRight = new Date(`${currentMonthNum + 1}/15/${currentYearStr}`)
+        .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '1');
+      datepicker.isSelectedDateExist('daterangepicker', true, 'body', '1');
+      datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '15');
+      datepicker.isInputValueEqual(basic, `${dateLeft} - ${dateRight}`, 1);
+    });
+
+    it('when user chose an interval, clicks on Daterangepicker again, container opened, date interval selected', () => {
+      const dateLeft = new Date(`${currentMonthNum + 1}/01/${currentYearStr}`)
+        .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+      const dateRight = new Date(`${currentMonthNum + 1}/18/${currentYearStr}`)
+        .toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '1');
+      datepicker.clickOnDaterangePickerTableItem('date', 0, 'body', undefined, '18');
+      datepicker.isInputValueEqual(basic, `${dateLeft} - ${dateRight}`, 1);
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.isSelectedDateExist('daterangepicker', true, 'body', '1');
+      datepicker.isSelectedDateExist('daterangepicker', true, 'body', '18');
+    });
+
+    it('when user clears input, add interval in format mm.dd.yyyy, click "Enter" - it converted to mm/dd/yyyy', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clearInputAndSendKeys(basic, '12.12.2012 - 12.13.2012', 1);
+      datepicker.clickEnterOnInput(basic);
+      datepicker.isInputValueEqual(basic, `12/12/2012 - 12/13/2012`, 1);
+    });
+
+    it('when user clears input and add there date interval in bad format, click "Enter" - nothing happens', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clearInputAndSendKeys(basic, '2122012 - 2132012', 1);
+      datepicker.clickEnterOnInput(basic);
+      datepicker.isInputValueEqual(basic, '', 1);
+    });
 
-      cy.get(`${ reactiveForms } ${ datepicker.formOutput }`)
-        .should('to.contain', `${ expectedDateValue }`);
+    it('when user clears input, add date interval in "mmddyyyy", click Enter - date converted to "mm/dd/yyyy"', () => {
+      datepicker.clickOnDaterangepickerInput(basic);
+      datepicker.clearInputAndSendKeys(basic, '12122012 - 12142012', 1);
+      datepicker.clickEnterOnInput(basic);
+      datepicker.isInputValueEqual(basic, '12/12/2012 - 12/14/2012', 1);
     });
   });
 });
diff --git a/cypress/integration/tooltip_page_spec.ts b/cypress/integration/tooltip_page_spec.ts
index 0477d6ee77..af8dce2e1e 100644
--- a/cypress/integration/tooltip_page_spec.ts
+++ b/cypress/integration/tooltip_page_spec.ts
@@ -8,10 +8,16 @@ describe('Tooltip demo page test suite', () => {
   describe('Basic tooltip', () => {
     const basic = tooltip.exampleDemosArr.basic;
 
-    it('basic tooltip appears after hovering on trigger button', () => {
-      cy.get(basic).as('basicDemo').find(tooltip.togglerTooltip).focus();
-      cy.get('@basicDemo')
-        .should('to.have.descendants', tooltip.containerTooltip);
+    it('when user on hover on "Simple demo" button, then tooltip-container shown', () => {
+      tooltip.focusOnBtn(basic);
+      tooltip.isTooltipAppears(basic);
+      tooltip.isTooltipVisible(basic);
+    });
+
+    it('when user moves the mouse cursor away of tooltip-button, then tooltip-container disappeared', () => {
+      tooltip.focusOnBtn(basic);
+      tooltip.focusToAnotherPlacement('Basic');
+      tooltip.isTooltipDismiss(basic);
     });
   });
 });
diff --git a/cypress/plugins/cy-ts-preprocessor.js b/cypress/plugins/cy-ts-preprocessor.js
index c9916505e0..8052f329dc 100644
--- a/cypress/plugins/cy-ts-preprocessor.js
+++ b/cypress/plugins/cy-ts-preprocessor.js
@@ -11,7 +11,10 @@ const webpackOptions = {
         exclude: [/node_modules/],
         use: [
           {
-            loader: 'ts-loader'
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true
+            }
           }
         ]
       }
diff --git a/cypress/support/accordion.po.ts b/cypress/support/accordion.po.ts
index da8a589d97..79c46b15c1 100644
--- a/cypress/support/accordion.po.ts
+++ b/cypress/support/accordion.po.ts
@@ -1,15 +1,11 @@
 import { BaseComponent } from './base.component';
+import Agent = Cypress.Agent;
 
 export class AccordionPo extends BaseComponent {
   pageUrl = '/accordion';
   pageTitle = 'Accordion';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/accordion';
-
-  openClass = 'panel-open';
-  disabledPanelText = '.text-muted';
-  panelCard = '.card';
-  panelBody = '.panel-body';
-  accordionHeading = '[accordion-heading]';
+  additionalHtml = '.badge';
 
   exampleDemosArr = {
     basic: 'demo-accordion-basic',
@@ -17,7 +13,7 @@ export class AccordionPo extends BaseComponent {
     customHtml: 'demo-accordion-custom-html',
     disabled: 'demo-accordion-disabled',
     initiallyOpened: 'demo-accordion-opened',
-    dynamicAccGroup: 'demo-accordion-dynamic',
+    dynamicAccordion: 'demo-accordion-dynamic',
     dynamicBody: 'demo-accordion-dynamic-body',
     manualToggle: 'demo-accordion-manual-toggle',
     oneAtATime: 'demo-accordion-one-time',
@@ -25,7 +21,66 @@ export class AccordionPo extends BaseComponent {
     config: 'demo-accordion-config'
   };
 
-  getAccordionPanel(locator: string, panelNum: number) {
-    return cy.get(locator).find('accordion-group').eq(panelNum);
+  isAccordionLengthEqual(baseSelector: string, expectedLength: number) {
+    cy.get(`${baseSelector} accordion-group`).should('to.have.length', expectedLength);
+  }
+
+  isAccordionItemExpanded(baseSelector: string, itemIndex: number, expanded: boolean) {
+    cy.get(`${baseSelector} accordion-group`)
+      .eq(itemIndex)
+      .find('.accordion-toggle')
+      .should('to.have.attr', `aria-expanded`, `${expanded}`);
+  }
+
+  clickOnAccordionGroup(baseSelector: string, itemIndex: number) {
+    cy.get(`${baseSelector} accordion-group button`)
+      .eq(itemIndex)
+      .click();
+  }
+
+  isItemContentVisible(baseSelector: string, itemIndex: number, visible: boolean) {
+    cy.get(`${baseSelector} .panel-body`)
+      .eq(itemIndex)
+      .should(visible ? 'be.visible' : 'not.be.visible');
+  }
+
+  createBrowserLogSpy() {
+    return cy.window().then(win => {
+      return cy.spy(win.console, 'log');
+    });
+  }
+
+  isConsoleLogCalled(consoleSpy: Agent<sinon.SinonSpy>, isCalled: boolean, expectedLog?: string) {
+    if (!isCalled) {
+      cy.wrap(consoleSpy).should('not.have.been.called');
+    } else {
+      cy.wrap(consoleSpy).should('to.be.calledWith', expectedLog);
+    }
+  }
+
+  isAccordionItemContain(baseSelector: string, additionalSelector: string, itemIndex: number, expectedContent: string, visible: boolean) {
+    cy.get(`${baseSelector} accordion-group`)
+      .eq(itemIndex)
+      .find(additionalSelector)
+      .should(visible ? 'to.be.visible' : 'not.to.be.visible')
+      .invoke('text')
+      .should('to.contains', expectedContent);
+  }
+
+  isAccordionItemHaveCorrectStyle(baseSelector: string, itemIndex: number, backColor: string, color: string) {
+    cy.get(`${baseSelector} accordion-group`)
+      .eq(itemIndex)
+      .find('.card')
+      .should('to.have.css', 'background-color', backColor)
+      .and('to.have.css', 'color', color);
+  }
+
+  isAccordionBodyHaveCorrectStyle(baseSelector: string, itemIndex: number, backColor: string, color: string) {
+    cy.get(`${baseSelector} accordion-group`)
+      .eq(itemIndex)
+      .find('.panel-body')
+      .should('to.have.css', 'background-color', backColor)
+      .and('to.have.css', 'color', color);
+
   }
 }
diff --git a/cypress/support/alerts.po.ts b/cypress/support/alerts.po.ts
index 78ca47b715..7978c9e091 100644
--- a/cypress/support/alerts.po.ts
+++ b/cypress/support/alerts.po.ts
@@ -5,11 +5,8 @@ export class AlertsPo extends BaseComponent {
   pageTitle = 'Alerts';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/alert';
 
-  alertClass = '.alert';
   linkClass = '.alert-link';
   heading = '.alert-heading';
-  dismissOption = '.close';
-  textWrapper = 'span';
 
   exampleDemosArr = {
     basic: 'demo-alert-basic',
@@ -20,7 +17,60 @@ export class AlertsPo extends BaseComponent {
     dynamicContent: 'demo-alert-content-html',
     dismissTimeout: 'demo-alert-timeout',
     globalStyling: 'demo-alert-styling-global',
-    localStyling: 'demo-alert-styling-local',
+    componentStyling: 'demo-alert-styling-local',
     config: 'demo-alert-config'
   };
+
+  isAlertVisible(baseSelector: string, alertType: string, exist = true) {
+    cy.get(`${baseSelector} ${this.getAlertClass(alertType)}`)
+      .should(exist ? 'be.visible' : 'not.exist');
+  }
+
+  isAlertHaveLink(baseSelector: string, alertType: string) {
+    cy.get(`${baseSelector} ${this.getAlertClass(alertType)}`)
+      .find(this.linkClass)
+      .should('have.attr', 'href', '#');
+  }
+
+  isAlertContentContains(baseSelector: string, alertType: string, expectedContentClass: string) {
+    cy.get(`${baseSelector} ${this.getAlertClass(alertType)}`)
+      .should('to.have.descendants', expectedContentClass);
+  }
+
+  isAlertLengthEqual(baseSelector: string, expectedLength: number) {
+    cy.get(`${baseSelector} alert`)
+      .should('to.have.length', expectedLength);
+  }
+
+  isAlertHaveCss(baseSelector: string, nameCSS: string , valueCSS: string) {
+    cy.get(`${baseSelector} alert div`)
+        .should('to.have.css', nameCSS, valueCSS);
+  }
+
+  isAlertTextContains(baseSelector: string, alertType: string, expectedText: string) {
+    cy.get(`${baseSelector} ${this.getAlertClass(alertType)}`)
+      .invoke('text')
+      .should('to.contains', expectedText);
+  }
+
+  getAlertClass(alertType: string) {
+    let alertClass: string;
+    switch (alertType) {
+      case 'success':
+        return alertClass = '.alert-success';
+      case 'info':
+        return alertClass = '.alert-info';
+      case 'warning':
+        return alertClass = '.alert-warning';
+      case 'danger':
+        return alertClass = '.alert-danger';
+      case 'colored':
+        return alertClass = '.alert-md-color';
+      case 'local':
+        return alertClass = '.alert-md-local';
+
+      default:
+        throw new Error('Incorrect alert type, available: success, info, warning, danger, coloured, local');
+    }
+  }
 }
diff --git a/cypress/support/base.component.ts b/cypress/support/base.component.ts
index 05d8f57d08..3447bc1327 100644
--- a/cypress/support/base.component.ts
+++ b/cypress/support/base.component.ts
@@ -63,8 +63,12 @@ export abstract class BaseComponent {
     cy.get(`${baseSelector} button`).eq(buttonIndex ? buttonIndex : 0).trigger('mouseleave');
   }
 
-  isInputHaveAttrs(baseSelector: string, attributes: AttrObj[]) {
-    cy.get(`${baseSelector} input`)
+  mouseMove(baseSelector: string, elementIndex?: number) {
+    cy.get(baseSelector).eq(elementIndex ? elementIndex : 0).trigger('mouseenter');
+  }
+
+  isInputHaveAttrs(baseSelector: string, attributes: AttrObj[], inputIndex = 0) {
+    cy.get(`${baseSelector} input`).eq(inputIndex)
       .then(input => {
         let i = 0;
         for (; i < attributes.length; i++) {
@@ -73,8 +77,26 @@ export abstract class BaseComponent {
       });
   }
 
-  clearInputAndSendKeys(baseSelector: string, dataToSend: string) {
-    cy.get(`${baseSelector} input`).clear().type(dataToSend);
+  isInputValueEqual(baseSelector: string, expectedTxt: string, inputIndex = 0) {
+    cy.get(`${baseSelector} input`).eq(inputIndex).should('to.have.value', expectedTxt);
+  }
+
+  isInputValueContain(baseSelector: string, expectedTxt: string, inputIndex = 0) {
+    cy.get(`${baseSelector} input`).eq(inputIndex).then(input => {
+      expect(input.val()).to.contains(expectedTxt);
+    });
+  }
+
+  clearInputAndSendKeys(baseSelector: string, dataToSend: string, inputIndex = 0) {
+    cy.get(`${baseSelector} input`).eq(inputIndex).clear().type(dataToSend);
+  }
+
+  clearInput(baseSelector: string, inputIndex = 0) {
+    cy.get(`${baseSelector} input`).eq(inputIndex).clear();
+  }
+
+  clickEnterOnInput(baseSelector: string, inputIndex = 0) {
+    cy.get(`${baseSelector} input`).eq(inputIndex).type('{enter}');
   }
 
   isDemoContainsTxt(baseSelector: string, expectedTxt: string, expectedTxtOther?: string) {
@@ -85,13 +107,76 @@ export abstract class BaseComponent {
       });
   }
 
-  isButtonExist(baseSelector: string, buttonName: string, buttonNumber?: number) {
+  isButtonExist(baseSelector: string, buttonName: string, buttonNumber?: number, exist = true) {
+    if (exist === true) {
     cy.get(`${baseSelector} button`).eq(buttonNumber ? buttonNumber : 0).invoke('text')
       .should(btnTxt => expect(btnTxt).to.equal(buttonName));
+  } else {
+      cy.get(`${baseSelector} button`).contains(buttonName).should('not.exist');
+    }
+  }
+
+  isSelectExist(baseSelector: string, selectText: string, selectNumber = 0) {
+    cy.get(`${baseSelector} select`).eq(selectNumber).invoke('text')
+      .should(btnTxt => expect(btnTxt).to.contain(selectText));
+  }
+
+  selectOne(baseSelector: string, selectToChose: string, selectNumber = 0) {
+    cy.get(`${baseSelector} select`).eq(selectNumber).select(selectToChose);
   }
 
   isPreviewExist(baseSelector: string, previewText: string, previewNumber?: number) {
     cy.get(`${baseSelector} .card.card-block`).eq(previewNumber ? previewNumber : 0).invoke('text')
       .should(btnTxt => expect(btnTxt).to.contain(previewText));
   }
+
+  clickOutside(baseSelector: string) {
+    cy.get(baseSelector).eq(0).trigger('click', { clientX: 100, clientY: 100 });
+  }
+  
+  clickCheckbox(baseSelector: string, shouldBeChecked: boolean) {
+    if (shouldBeChecked) {
+      cy.get(`${baseSelector} input[type="checkbox"]`)
+        .check();
+    } else {
+      cy.get(`${baseSelector} input[type="checkbox"]`)
+        .uncheck();
+    }
+  }
+
+  isPreviewHidden(baseSelector: string, previewNumber?: number) {
+    if (!previewNumber) {
+      cy.get(`${baseSelector} .card.card-block`).should('not.exist');
+    } else {
+      cy.get(`${baseSelector} .card.card-block`).eq(previewNumber).should('not.exist');
+    }
+  }
+
+  isTemplateSrcContain(demoName: string, expectedTxt: string) {
+    cy.get('examples h3')
+      .contains(demoName)
+      .parent()
+      .find('tab[heading*="template"]')
+      .invoke('text')
+      .should('to.contains', expectedTxt);
+  }
+
+  isCodePreviewExist(baseSelector: string, previewText: string, exist = true, previewNumber?: number) {
+    if (exist) {
+    cy.get(`${baseSelector} .code-preview`).eq(previewNumber ? previewNumber : 0).invoke('text')
+      .should(btnTxt => expect(btnTxt).to.contain(previewText));
+    } else {
+      cy.get(`${baseSelector} .code-preview`)
+        .should('not.exist');
+    }
+  }
+
+  isComponentSrcContain(demoName: string, expectedTxt: string) {
+    cy.get('examples h3')
+      .contains(demoName)
+      .parent()
+      .find('tab[heading*="component"]')
+      .invoke('text')
+      .should('to.contains', expectedTxt);
+  }
 }
diff --git a/cypress/support/buttons.po.ts b/cypress/support/buttons.po.ts
index 92613db5f1..139fa3d555 100644
--- a/cypress/support/buttons.po.ts
+++ b/cypress/support/buttons.po.ts
@@ -5,17 +5,44 @@ export class ButtonsPo extends BaseComponent {
   pageTitle = 'Buttons';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/buttons';
 
+  buttonNames = [
+    'Left',
+    'Middle',
+    'Right'
+  ];
+
   output = '.card-header';
-  buttonSel = 'button';
-  btnRadioGroupSel = '[btnradiogroup]';
+  buttonGroupSelector = '.btn-group';
+  btnRadioGroup = '[btnradiogroup]';
 
   exampleDemosArr = {
     basic: 'demo-buttons-basic',
     checkbox: 'demo-buttons-checkbox',
     customCheckboxVal: 'demo-custom-checkbox-value',
     checkboxWithForms: 'demo-buttons-checkbox-reactiveforms',
+    radioUnckeckable: 'demo-buttons-radio-uncheckable',
     radioBtn: 'demo-buttons-radio',
     radioBtnWithForms: 'demo-buttons-radio-reactiveforms',
     disabled: 'demo-buttons-disabled'
   };
+
+  isButtonVisible(baseSelector: string, buttonName: string, btnSelector: string) {
+    cy.get(`${baseSelector} ${btnSelector}`).contains(buttonName).should('to.be.visible');
+  }
+
+  isButtonEnabled(baseSelector: string, buttonName: string, enabled = true) {
+      cy.get(`${baseSelector}`).contains(buttonName).should(enabled ? 'not.to.have.attr' : 'to.have.attr', 'disabled');
+  }
+
+  isButtonClassActive(baseSelector: string, buttonName: string, result: string, btnSelector: string) {
+    cy.get(`${baseSelector} ${btnSelector}`).contains(buttonName).should('to.have.class', `${result}`);
+  }
+
+  isButtonHaveNoClass(baseSelector: string, buttonName: string, result: string, btnSelector: string) {
+    cy.get(`${baseSelector} ${btnSelector}`).contains(buttonName).should('not.to.have.class', `${result}`);
+  }
+
+  isBtnOutputSelected(baseSelector: string, buttonNumber: number, result: boolean) {
+    cy.get(`${baseSelector} ${this.output}`).should('to.contain', `"${ this.buttonNames[buttonNumber].toLowerCase() }": ${result}`);
+  }
 }
diff --git a/cypress/support/datepicker.po.ts b/cypress/support/datepicker.po.ts
index 7a132933e2..5a742bc8f4 100644
--- a/cypress/support/datepicker.po.ts
+++ b/cypress/support/datepicker.po.ts
@@ -1,4 +1,5 @@
 import { BaseComponent } from './base.component';
+import * as globalLocales from 'ngx-bootstrap/locale';
 
 export class DatepickerPo extends BaseComponent {
   pageUrl = '/datepicker';
@@ -7,20 +8,650 @@ export class DatepickerPo extends BaseComponent {
 
   datepickerInput = 'input[bsdatepicker]';
   daterangepickerInput = 'input[bsdaterangepicker]';
-  datepickerLastOpened = 'bs-datepicker-container:last';
-  daterangepickerLastOpened = 'bs-daterangepicker-container:last';
-  datepickerDays = '[bsdatepickerdaydecorator]';
-  formOutput = '.code-preview';
+  datepickerNavView = 'bs-datepicker-navigation-view';
+  datepickerContainer = 'bs-datepicker-container';
+  datepickerInlineContainer = 'bs-datepicker-inline-container';
+  daterangepickerContainer = 'bs-daterangepicker-container';
+  datepickerBodyDaysView = 'bs-days-calendar-view';
+  datepickerBodyMonthView = 'bs-month-calendar-view';
+  datepickerBodyYearsView = 'bs-years-calendar-view';
+  monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December', 'January'];
+  locales = [];
+
 
   exampleDemosArr = {
     basic: 'demo-datepicker-basic',
+    initialState: 'demo-datepicker-date-initial-state',
     customFormat: 'demo-date-picker-custom-format',
-    reactiveForms: 'demo-datepicker-reactive-forms'
+    hideOnScroll: 'demo-date-picker-hide-on-scroll',
+    themes: 'demo-datepicker-color-theming',
+    locales: 'demo-datepicker-change-locale',
+    minMax: 'demo-datepicker-min-max',
+    daysDisabled: 'demo-datepicker-daysdisabled',
+    minMode: 'demo-datepicker-min-mode',
+    disabled: 'demo-datepicker-disabled',
+    forms: 'demo-datepicker-forms',
+    reactiveForms: 'demo-datepicker-reactive-forms',
+    manualTrigger: 'demo-datepicker-triggers-manual',
+    placement: 'demo-datepicker-placement',
+    configMethod: 'demo-datepicker-config-method',
+    visibilityEvents: 'demo-datepicker-visibility-events',
+    valueChangeEvent: 'demo-datepicker-value-change-event',
+    configProperties: 'demo-datepicker-config-object',
+    selectFromOtherMonth: 'demo-datepicker-select-dates-from-other-months',
+    outsideClick: 'demo-datepicker-outside-click',
+    triggerByIsOpen: 'demo-datepicker-trigger-by-isopen',
+    customTriggers: 'demo-datepicker-triggers-custom',
+    selectWeek: 'demo-datepicker-select-week',
+    inlineDatepicker: 'bs-datepicker-inline',
+    customTodayClass: 'demo-datepicker-custom-today-class'
   };
 
-  clickOnDayInCurrMonth(datepicker: string, day: string) {
-    cy.get(`${ datepicker } ${ this.datepickerDays}`)
+  clickOnDatepickerInput(baseSelector: string, datepickerIndex = 0) {
+    cy.get(`${baseSelector} ${this.datepickerInput}`).eq(datepickerIndex).click();
+  }
+
+  clickOnDaterangepickerInput(baseSelector: string, dateRangeIndex = 0) {
+    cy.get(`${baseSelector} ${this.daterangepickerInput}`).eq(dateRangeIndex).click();
+  }
+
+  isSelectedDateExist(picker = 'datepicker', exist: boolean, baseSelector = 'body', expectedDay?: string) {
+    const appropriateContainer: string = this.getAppropriateContainer(picker);
+
+    if (!exist) {
+      cy.get(`${baseSelector}>${appropriateContainer} .selected`)
+        .should('not.exist');
+    } else {
+      cy.get(`${baseSelector}>${appropriateContainer} .selected`)
+        .should('be.visible')
+        .and('contain', expectedDay ? expectedDay : '');
+    }
+  }
+
+  isVisibleMonthOrYearEqual(expectedMonth: string, baseSelector = 'body') {
+    const appropriateContainer: string =
+      this.getAppropriateContainer(baseSelector === 'body' ? 'datepicker' : 'datepickerInline');
+
+    cy.get(`${baseSelector}>${appropriateContainer} ${this.datepickerNavView} button`).eq(1)
+      .should('be.visible')
+      .and('to.have.text', expectedMonth);
+  }
+
+  isVisibleDateRangePickerMonthOrYearEqual(expectedValueLeft: string, expectedValueRight: string, baseSelector = 'body') {
+    cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.datepickerNavView}`).eq(0).find('button').eq(1)
+      .should('be.visible')
+      .and('to.have.text', expectedValueLeft);
+    cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.datepickerNavView}`).eq(1).find('button').eq(1)
+      .should('be.visible')
+      .and('to.have.text', expectedValueRight);
+  }
+
+  isDatepickerNavigationFullyActiveAndCorrect(mode = 'date',
+                                              baseSelector = 'body',
+                                              expectedMonth?: string,
+                                              expectedYear?: string) {
+    const currentMonth: string = this.monthNames[new Date().getMonth()];
+    const currentYearSrt: string = new Date().getFullYear().toString();
+
+    cy.get(`${baseSelector}>${this.datepickerContainer} ${this.datepickerNavView}`).as('DatepickerNavBarArray');
+    cy.get('@DatepickerNavBarArray').find('button')
+      .should('to.have.length', mode === 'date' ? 4 : 3);
+    cy.get('@DatepickerNavBarArray').find('.previous')
+      .should('be.visible')
+      .and('to.have.text', '‹');
+    cy.get('@DatepickerNavBarArray').find('.next')
+      .should('be.visible')
+      .and('to.have.text', '›');
+
+    switch (mode) {
+      case 'date':
+        cy.get('@DatepickerNavBarArray').find('button').eq(1)
+          .should('be.visible')
+          .and('to.have.text', expectedMonth ? expectedMonth : currentMonth);
+        cy.get('@DatepickerNavBarArray').find('button').eq(2)
+          .should('be.visible')
+          .and('to.have.text', expectedYear ? expectedYear : currentYearSrt);
+        break;
+
+      case 'month':
+        cy.get('@DatepickerNavBarArray').find('button').eq(1)
+          .should('be.visible')
+          .and('to.have.text', expectedYear ? expectedYear : currentYearSrt);
+        break;
+
+      case 'year':
+        cy.get('@DatepickerNavBarArray').find('button').eq(1)
+          .should('be.visible')
+          .and('to.have.text', `${new Date().getFullYear() - 7} - ${new Date().getFullYear() + 8}`);
+        break;
+
+      default:
+        throw new Error('Unknown view mode');
+    }
+  }
+
+  isDateRangepickerNavigationFullyActiveAndCorrect(mode = 'date',
+                                                   baseSelector = 'body',
+                                                   expectedMonth?: string,
+                                                   expectedYear?: string) {
+    const currentMonth: string = expectedMonth ? expectedMonth
+      : this.monthNames[new Date().getMonth()];
+    const nextMonth: string = expectedMonth ? this.monthNames[this.monthNames.indexOf(expectedMonth) + 1]
+      : this.monthNames[new Date().getMonth() + 1];
+    const currentYearSrt: string = expectedYear ? expectedYear
+      : new Date().getFullYear().toString();
+    const currentYearNum: number = expectedYear ? Number(expectedYear)
+      : new Date().getFullYear();
+    const nextYearStr: string = expectedYear ? (Number(expectedYear) + 1).toString()
+      : (new Date().getFullYear() + 1).toString();
+
+    cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.datepickerNavView}`)
+      .eq(0)
+      .as('DaterangepickerNavBarLeft');
+    cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.datepickerNavView}`)
+      .eq(1)
+      .as('DaterangepickerNavBarRight');
+    cy.get('@DaterangepickerNavBarLeft').find('button')
+      .should('to.have.length', mode === 'date' ? 4 : 3);
+    cy.get('@DaterangepickerNavBarLeft').find('button.previous')
+      .should('be.visible')
+      .and('to.have.text', '‹');
+    cy.get('@DaterangepickerNavBarLeft').find('button.next')
+      .should('be.hidden')
+      .and('to.have.text', '›');
+    cy.get('@DaterangepickerNavBarRight').find('button')
+      .should('to.have.length', mode === 'date' ? 4 : 3);
+    cy.get('@DaterangepickerNavBarRight').find('button.previous')
+      .should('be.hidden')
+      .and('to.have.text', '‹');
+    cy.get('@DaterangepickerNavBarRight').find('button.next')
+      .should('be.visible')
+      .and('to.have.text', '›');
+
+    switch (mode) {
+      case 'date':
+        cy.get('@DaterangepickerNavBarLeft').find('button').eq(1)
+          .should('be.visible')
+          .and('to.have.text', currentMonth);
+        cy.get('@DaterangepickerNavBarLeft').find('button').eq(2)
+          .should('be.visible')
+          .and('to.have.text', currentYearSrt);
+        cy.get('@DaterangepickerNavBarRight').find('button').eq(1)
+          .should('be.visible')
+          .and('to.have.text', nextMonth);
+        cy.get('@DaterangepickerNavBarRight').find('button').eq(2)
+          .should('be.visible')
+          .and('to.have.text', currentMonth === 'December' ? nextYearStr : currentYearSrt);
+        break;
+
+      case 'month':
+        cy.get('@DaterangepickerNavBarLeft').find('button').eq(1)
+          .should('be.visible')
+          .and('to.have.text', currentYearSrt);
+        cy.get('@DaterangepickerNavBarRight').find('button').eq(1)
+          .should('be.visible')
+          .and('to.have.text', nextYearStr);
+        break;
+
+      case 'year':
+        cy.get('@DaterangepickerNavBarLeft').find('button').eq(1)
+          .should('be.visible')
+          .and('to.have.text', `${currentYearNum - 7} - ${currentYearNum + 8}`);
+        cy.get('@DaterangepickerNavBarRight').find('button').eq(1)
+          .should('be.visible')
+          .and('to.have.text', `${currentYearNum + 9} - ${currentYearNum + 24}`);
+        break;
+
+      default:
+        throw new Error('Unknown view mode');
+    }
+  }
+
+  isDatePickerBodyExistAndCorrect(mode: string, baseSelector = 'body') {
+    const bodyView = this.getBodyParams(mode).bodyView;
+    const expectedLength = this.getBodyParams(mode).expectedLength;
+
+    cy.get(`${baseSelector}>${this.datepickerContainer} ${bodyView} td`)
+      .should('to.have.length', expectedLength);
+  }
+
+  isDaterangePickerBodyExistAndCorrect(mode: string, baseSelector = 'body') {
+    const bodyView = this.getBodyParams(mode).bodyView;
+    const expectedLength = this.getBodyParams(mode).expectedLength;
+
+    cy.get(`${baseSelector}>${this.daterangepickerContainer} ${bodyView}`).each(bodyContainer => {
+      cy.wrap(bodyContainer).find('td').should('to.have.length', expectedLength);
+    });
+  }
+
+  isDatePickerTriggerCorrect(mode: string, baseSelector = 'body') {
+    const bodyView = this.getBodyParams(mode).bodyView;
+
+    cy.get(`${baseSelector}>${this.datepickerContainer} ${bodyView} td`)
+      .each(date => {
+        cy.wrap(date).trigger('mouseenter').should('to.have.class', 'is-highlighted');
+      });
+  }
+
+  isDaterangePickerTriggerCorrect(mode: string, baseSelector = 'body') {
+    const bodyView = this.getBodyParams(mode).bodyView;
+
+    cy.get(`${baseSelector}>${this.daterangepickerContainer} ${bodyView}`).each(bodyContainer => {
+      cy.wrap(bodyContainer).find('td')
+        .each(date => {
+          cy.wrap(date).trigger('mouseenter').should('to.have.class', 'is-highlighted');
+        });
+    });
+  }
+
+  isDatepickerOpened(opened: boolean, baseSelector = 'body') {
+    cy.get(`${baseSelector}>${baseSelector === 'body' ? this.datepickerContainer : this.datepickerInlineContainer}`)
+      .should(opened ? 'to.be.exist' : 'not.to.be.exist');
+  }
+
+  isDaterangepickerOpened(opened: boolean, baseSelector = 'body') {
+    cy.get(`${baseSelector}>${this.daterangepickerContainer}`).should(opened ? 'to.be.exist' : 'not.to.be.exist');
+  }
+
+  clickOnNavigation(baseSelector: string, navigationItem: string) {
+    const appropriateContainer =
+      this.getAppropriateContainer(baseSelector === 'body' ? 'datepicker' : 'datepickerInline');
+
+    switch (navigationItem) {
+      case '<' :
+        cy.get(`${baseSelector}>${appropriateContainer} ${this.datepickerNavView} .previous`).click();
+        break;
+
+      case '>' :
+        cy.get(`${baseSelector}>${appropriateContainer} ${this.datepickerNavView} .next`).click();
+        break;
+
+      case 'month' :
+        cy.get(`${baseSelector}>${appropriateContainer} ${this.datepickerNavView} button`).eq(1).click();
+        break;
+
+      case 'year' :
+        cy.get(`${baseSelector}>${appropriateContainer} ${this.datepickerNavView} button`).eq(2).click();
+        break;
+
+      default:
+        throw new Error('Unknown navigation item, correct: <, >, month, year');
+    }
+  }
+
+  clickOnDateRangePickerNavigation(navigationItem: string, baseSelector = 'body') {
+    switch (navigationItem) {
+      case '<' :
+        cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.datepickerNavView}`)
+          .eq(0)
+          .find('.previous')
+          .click();
+        break;
+
+      case '>' :
+        cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.datepickerNavView}`)
+          .eq(1)
+          .find('.next')
+          .click();
+        break;
+
+      case 'month-left' || 'yearInterval-left' :
+        cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.datepickerNavView}`)
+          .eq(0)
+          .find('button')
+          .eq(1)
+          .click();
+        break;
+
+      case 'month-right' || 'yearInterval-right' :
+        cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.datepickerNavView}`)
+          .eq(1)
+          .find('button')
+          .eq(1)
+          .click();
+        break;
+
+      case 'year-left' :
+        cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.datepickerNavView}`)
+          .eq(0)
+          .find('button')
+          .eq(2)
+          .click();
+        break;
+
+      case 'year-right' :
+        cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.datepickerNavView}`)
+          .eq(1)
+          .find('button')
+          .eq(2)
+          .click();
+        break;
+
+      default:
+        throw new Error(`Unknown item, available: "<", ">", "month-left", "month-right",
+        "year-left", "year-right", "yearInterval-left", "yearInterval-right"`);
+    }
+  }
+
+  clickOnDatepickerTableItem(mode: string, baseSelector = 'body', itemIndex?: number, itemText?: string) {
+    const bodyView = this.getBodyParams(mode).bodyView;
+    const appropriateContainer =
+      this.getAppropriateContainer(baseSelector === 'body' ? 'datepicker' : 'datepickerInline');
+
+    if (itemText === undefined) {
+      cy.get(`${baseSelector}>${appropriateContainer} ${bodyView} td`).eq(itemIndex).click();
+    } else {
+      cy.get(`${baseSelector}>${appropriateContainer} ${bodyView}`)
+        .find(`td`)
+        .not('.week')
+        .find('span')
+        .not('[class*="is-other-month"]')
+        .contains(itemText).click();
+    }
+  }
+
+  clickOnDatepickerWeekItem(itemIndex?: number, itemText?: string) {
+    if (itemText === undefined) {
+      cy.get(`body>${this.datepickerContainer} .week`)
+        .eq(itemIndex)
+        .click();
+    } else {
+      cy.get(`body>${this.datepickerContainer} .week`)
+        .contains(itemText)
+        .click();
+    }
+  }
+
+  clickOnDaterangePickerTableItem(mode: string,
+                                  pickerIndex = 0,
+                                  baseSelector = 'body',
+                                  itemIndex?: number,
+                                  itemText?: string) {
+    const bodyView = this.getBodyParams(mode).bodyView;
+
+    if (itemText === undefined) {
+      cy.get(`${baseSelector}>${this.daterangepickerContainer} ${bodyView}`)
+        .eq(pickerIndex)
+        .find(`td`)
+        .not('.week')
+        .find('span')
+        .not('[class*="is-other-month"]')
+        .eq(itemIndex).click();
+    } else {
+      cy.get(`${baseSelector}>${this.daterangepickerContainer} ${bodyView}`)
+        .eq(pickerIndex)
+        .find(`td`)
+        .not('.week')
+        .find('span')
+        .not('[class*="is-other-month"]')
+        .contains(itemText).click();
+    }
+  }
+
+  isDatepickerStyleCorrect(expectedTheme: string, baseSelector = 'body') {
+    let expColour: string;
+
+    switch (expectedTheme) {
+      case 'green' :
+        expColour = 'rgb(92, 184, 92)';
+        break;
+
+      case 'default' :
+        expColour = 'rgb(119, 119, 119)';
+        break;
+
+      case 'red' :
+        expColour = 'rgb(217, 83, 79)';
+        break;
+
+      case 'blue' :
+        expColour = 'rgb(91, 192, 222)';
+        break;
+
+      case 'dark-blue' :
+        expColour = 'rgb(51, 122, 183)';
+        break;
+
+      case 'orange' :
+        expColour = 'rgb(240, 173, 78)';
+        break;
+
+      default:
+        throw new Error(`Unknown theme, available: "green", "blue", "dark-blue", "red", "orange", "default"`);
+    }
+
+    cy.get(`${baseSelector}>${this.datepickerContainer} .bs-datepicker-head`)
+      .should('to.have.css', 'background-color', expColour);
+    cy.get(`${baseSelector}>${this.datepickerContainer} .bs-datepicker-body .week span`)
+      .should('to.have.css', 'color', expColour);
+  }
+
+  isMonthLocaleAppropriate(expectedLocale: string, pickerType = 'datepicker', baseSelector = 'body') {
+    let actualMonthArr: any;
+    switch (expectedLocale) {
+      case 'hi' :
+        actualMonthArr = globalLocales.hiLocale.months;
+        break;
+
+      case 'gl' :
+        actualMonthArr = globalLocales.glLocale.months;
+        break;
+
+      case 'mn' :
+        actualMonthArr = globalLocales.mnLocale.months;
+        break;
+
+      default:
+        actualMonthArr = undefined;
+    }
+    cy.get(`${baseSelector}>${
+      pickerType === 'datepicker' ? this.datepickerContainer : this.daterangepickerContainer} tbody td`)
+      .eq(0).each((month, monthIndex) => {
+      expect(month.text().toLowerCase()).to.contains(
+        actualMonthArr ? actualMonthArr[monthIndex].toLowerCase() :
+          new Date(2017, monthIndex)
+            .toLocaleDateString(expectedLocale, { month: 'long' })
+            .toLowerCase());
+    });
+  }
+
+  isWeekdayLocaleAppropriate(expectedLocale: string, pickerType = 'datepicker', baseSelector = 'body') {
+    cy.get(`${baseSelector}>${
+      pickerType === 'datepicker' ? this.datepickerContainer : this.daterangepickerContainer} table`)
+      .eq(0)
+      .find('th[aria-label*="weekday"]')
+      .each((weekday, weekdayIndex) => {
+        Object.values(globalLocales).forEach(globalLocale => {
+          if (globalLocale === expectedLocale) {
+            expect(weekday.text().toLowerCase())
+              .to.contains(globalLocale.weekdaysShort[globalLocale.week.dow + weekdayIndex]);
+          }
+        });
+      });
+  }
+
+  isDayIntervalDisabledInCurrentMonth(minDate: Date, maxDate: Date, disabled: boolean) {
+    const minOrigin = new Date(minDate.getTime());
+    const min = minDate;
+    for (min; min <= maxDate && min.getMonth() === minOrigin.getMonth(); min.setDate(min.getDate() + 1)) {
+      cy.get(`body>${this.datepickerContainer} ${this.datepickerBodyDaysView} tbody td`)
+        .not('.week')
+        .find('span')
+        .not('.is-other-month')
+        .contains(min.getDate())
+        .should(disabled ? 'have.class' : 'not.to.have.class', 'disabled');
+    }
+  }
+
+  isWeekdayDisabled(disabled: boolean, weekdayIndex: number) {
+    cy.get(`body>${this.datepickerContainer} ${this.datepickerBodyDaysView} tbody tr`)
+      .each(week => {
+        cy.wrap(week)
+          .find('td')
+          .not('.week')
+          .find('span')
+          .eq(weekdayIndex)
+          .should(disabled ? 'have.class' : 'not.to.have.class', 'disabled');
+      });
+  }
+
+  clickOnWeekDay(workingDay: boolean) {
+    cy.get(`body>${this.datepickerContainer} ${this.datepickerBodyDaysView} tbody tr`)
+      .eq(2)
+      .find('td')
+      .not('.week')
+      .eq(workingDay ? 2 : 0)
+      .click();
+  }
+
+  isDayIntervalDisabledInCurrentMonthDateRange(minDate: Date, maxDate: Date, disabled: boolean) {
+    const minOrigin = new Date(minDate.getTime());
+    const min = minDate;
+    for (min; min <= maxDate && min.getMonth() === minOrigin.getMonth(); min.setDate(min.getDate() + 1)) {
+      cy.get(`body>${this.daterangepickerContainer} ${this.datepickerBodyDaysView}`).eq(0).find(`tbody td`)
+        .not('.week')
+        .find('span')
+        .not('.is-other-month')
+        .contains(min.getDate())
+        .should(disabled ? 'have.class' : 'not.to.have.class', 'disabled');
+    }
+  }
+
+  isDayIntervalDisabledInNextMonth(minDate: Date, maxDate: Date, disabled: boolean) {
+    const maxOrigin = new Date(maxDate.getTime());
+    const max = maxDate;
+    for (max; minDate <= max && maxOrigin.getMonth() === max.getMonth(); max.setDate(max.getDate() - 1)) {
+      cy.get(`body>${this.datepickerContainer} ${this.datepickerBodyDaysView} tbody td`)
+        .not('.week')
+        .find('span')
+        .not('.is-other-month')
+        .contains(max.getDate())
+        .should(disabled ? 'have.class' : 'not.to.have.class', 'disabled');
+    }
+  }
+
+  isDayIntervalDisabledInNextMonthDateRange(minDate: Date, maxDate: Date, disabled: boolean) {
+    const maxOrigin = new Date(maxDate.getTime());
+    const max = maxDate;
+    for (max; minDate <= max && maxOrigin.getMonth() === max.getMonth(); max.setDate(max.getDate() - 1)) {
+      cy.get(`body>${this.daterangepickerContainer} ${this.datepickerBodyDaysView}`).eq(1).find(`tbody td`)
+        .not('.week')
+        .find('span')
+        .not('.is-other-month')
+        .contains(max.getDate())
+        .should(disabled ? 'have.class' : 'not.to.have.class', 'disabled');
+    }
+  }
+        
+  isTodayHaveClass(className: string) {
+    cy.get(`body>${this.datepickerContainer} tbody td`)
+      .not('.week')
+      .find('span')
       .not('.is-other-month')
-      .contains(day).click();
+      .contains(new Date().getDate())
+      .should('to.have.class', className);
+  }
+
+  /**
+   * Method checks datepicker placement according to input field (left/right/top/bottom)
+   * Compare input and picker height and width for checking centering elements
+   * For avoid resolution differences in equivalence check, used rounding to 10
+   */
+  isDatepickerPlacementCorrect(baseSelector: string, placement: string, indexInput?: number) {
+    let index: number;
+    const inputMarginHeight = 15;
+    const inputMarginWidth = 27;
+    cy.get(`body>${this.datepickerContainer}`).as('Datepicker');
+    cy.get(`${baseSelector} input`).as('InputsArray');
+
+    switch (placement) {
+      case 'right':
+        indexInput ? index = indexInput : index = 0;
+        cy.get('@Datepicker').then(datepicker => {
+          cy.get('@InputsArray').eq(index).then(input => {
+            expect(input.offset().left).to.lessThan(datepicker.offset().left);
+            expect(input.offset().top).to.greaterThan(datepicker.offset().top);
+            expect(Math.round((input.offset().top + (input.height() + inputMarginHeight) / 2) / 10) * 10)
+              .to.equal(Math.round((datepicker.offset().top + datepicker.height() / 2) / 10) * 10);
+          });
+        });
+        break;
+
+      case 'top':
+        indexInput ? index = indexInput : index = 1;
+        cy.get('@Datepicker').then(datepicker => {
+          cy.get('@InputsArray').eq(index).then(input => {
+            expect(input.offset().left).to.greaterThan(datepicker.offset().left);
+            expect(input.offset().top).to.greaterThan(datepicker.offset().top);
+            expect(Math.round((input.offset().left + (input.width() + inputMarginWidth) / 2) / 10) * 10)
+              .to.equal(Math.round((datepicker.offset().left + datepicker.width() / 2) / 10) * 10);
+          });
+        });
+        break;
+
+      case 'bottom':
+        indexInput ? index = indexInput : index = 2;
+        cy.get('@Datepicker').then(datepicker => {
+          cy.get('@InputsArray').eq(index).then(input => {
+            expect(input.offset().left).to.greaterThan(datepicker.offset().left);
+            expect(input.offset().top).to.lessThan(datepicker.offset().top);
+            expect(Math.round((input.offset().left + (input.width() + inputMarginWidth) / 2) / 10) * 10)
+              .to.equal(Math.round((datepicker.offset().left + datepicker.width() / 2) / 10) * 10);
+          });
+        });
+        break;
+
+      case 'left':
+        indexInput ? index = indexInput : index = 3;
+        cy.get('@Datepicker').then(datepicker => {
+          cy.get('@InputsArray').eq(index).then(input => {
+            expect(input.offset().left).to.greaterThan(datepicker.offset().left);
+            expect(input.offset().top).to.greaterThan(datepicker.offset().top);
+            expect(Math.round((input.offset().top + (input.height() + inputMarginHeight) / 2) / 10) * 10)
+              .to.equal(Math.round((datepicker.offset().top + datepicker.height() / 2) / 10) * 10);
+          });
+        });
+        break;
+      default:
+        index = undefined;
+    }
+  }
+
+  private getBodyParams(mode: string) {
+    let bodyView: string;
+    let expectedLength: number;
+    switch (mode) {
+      case 'date':
+        bodyView = this.datepickerBodyDaysView;
+        expectedLength = 48;
+        break;
+      case 'month':
+        bodyView = this.datepickerBodyMonthView;
+        expectedLength = 12;
+        break;
+      case 'year':
+        bodyView = this.datepickerBodyYearsView;
+        expectedLength = 16;
+        break;
+      default:
+        throw new Error('Unknown view mode');
+    }
+
+    return { bodyView, expectedLength };
+  }
+
+  private getAppropriateContainer(picker: string) {
+    let appropriateContainer: string;
+    switch (picker) {
+      case 'datepicker':
+        return appropriateContainer = this.datepickerContainer;
+      case 'daterangepicker':
+        return appropriateContainer = this.daterangepickerContainer;
+      case 'datepickerInline':
+        return appropriateContainer = this.datepickerInlineContainer;
+      default:
+        return appropriateContainer = this.datepickerContainer;
+    }
   }
 }
diff --git a/cypress/support/popover.po.ts b/cypress/support/popover.po.ts
index 577d3e4930..7e0116f32c 100644
--- a/cypress/support/popover.po.ts
+++ b/cypress/support/popover.po.ts
@@ -5,9 +5,9 @@ export class PopoverPo extends BaseComponent {
   pageTitle = 'Popover';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/popover';
 
-  togglerPopover = 'button';
   containerPopover = 'popover-container';
   body = 'body';
+  dynamicHtmlBtn = 'span.btn.btn-danger';
 
   exampleDemosArr = {
     basic: 'demo-popover-basic',
@@ -28,32 +28,11 @@ export class PopoverPo extends BaseComponent {
     popoverContext: 'demo-popover-context'
   };
 
-  popoverPlacements = {
-    top: { popoverClass: 'popover in popover-top bs-popover-top top show', name: 'Popover on top' },
-    right: {
-      popoverClass: 'popover in popover-right bs-popover-right right show',
-      name: 'Popover on right'
-    },
-    auto: {
-      popoverClass: 'popover in popover-auto bs-popover-auto auto show bottom',
-      name: 'Popover auto'
-    },
-    left: {
-      popoverClass: 'popover in popover-left bs-popover-left left show',
-      name: 'Popover on left'
-    },
-    bottom: {
-      popoverClass: 'popover in popover-bottom bs-popover-bottom bottom show',
-      name: 'Popover on bottom'
-    }
-  };
-
-  isPopoverPlacementCorrect(baseSelector: string, placement: string, buttonName: string) {
-    cy.get(`${baseSelector} ${this.togglerPopover}`).contains(buttonName).click();
-
-    cy.get(`${baseSelector} ${this.containerPopover}`).should('be.visible').should('have.attr', 'class', placement);
-
-    cy.get(`${baseSelector} ${this.togglerPopover}`).contains(buttonName).click();
+  isPopoverPlacementCorrect(baseSelector: string, placement: string) {
+    cy.get(`${baseSelector} ${this.containerPopover}`).then(popover => {
+      expect(popover).to.be.visible;
+      expect(popover.attr('class')).to.contains(placement);
+    });
   }
 
   isPopoverAppears(baseSelector: string) {
@@ -71,4 +50,12 @@ export class PopoverPo extends BaseComponent {
   isPopoverDismiss(baseSelector: string) {
     cy.get(`${baseSelector}`).should('not.to.have.descendants', this.containerPopover);
   }
+
+  isPopoverHaveCssItem(baseSelector: string, item: string, cssProperty: string, expectedCssValue: string) {
+    cy.get(`${baseSelector} ${this.containerPopover} ${item}`).should('have.css', cssProperty, expectedCssValue);
+  }
+  
+  isPopoverHaveCss(baseSelector: string, cssProperty: string, expectedCssValue: string) {
+    cy.get(`${baseSelector} ${this.containerPopover}`).should('have.css', cssProperty, expectedCssValue);
+  }
 }
diff --git a/cypress/support/tooltip.po.ts b/cypress/support/tooltip.po.ts
index 277f745f0f..cc65ec2a28 100644
--- a/cypress/support/tooltip.po.ts
+++ b/cypress/support/tooltip.po.ts
@@ -5,10 +5,53 @@ export class TooltipPo extends BaseComponent {
   pageTitle = 'Tooltip';
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/tooltip';
 
-  togglerTooltip = 'button';
   containerTooltip = 'bs-tooltip-container';
+  body = 'body';
 
   exampleDemosArr = {
-    basic: 'demo-tooltip-basic'
+    basic: 'demo-tooltip-basic',
+    placement: 'demo-tooltip-placement',
+    dismiss: 'demo-tooltip-dismiss',
+    dynamicTooltip: 'demo-tooltip-dynamic',
+    customContentTemplate: 'demo-tooltip-custom-content',
+    dynamicHtml: 'demo-tooltip-dynamic-html',
+    appendToBody: 'demo-tooltip-container',
+    configuringDefaults: 'demo-tooltip-config',
+    customTriggersTooltip: 'demo-tooltip-triggers-custom',
+    manualTriggeringTooltip: 'demo-tooltip-triggers-manual',
+    componentLevelStyling: 'demo-tooltip-styling-local',
+    customClass: 'demo-tooltip-class',
+    delayTooltip: 'demo-tooltip-delay'
   };
+
+  isTooltipPlacementCorrect(baseSelector: string, placement: string) {
+    cy.get(`${baseSelector} ${this.containerTooltip}`).then(tooltip => {
+      expect(tooltip).to.be.visible;
+      expect(tooltip.attr('class')).to.contains(placement);
+    });
+  }
+
+  focusOnBtn(baseSelector: string, buttonIndex?: number) {
+    cy.get(`${ baseSelector } button`).eq(buttonIndex ? buttonIndex : 0).focus();
+  }
+
+  isTooltipAppears(baseSelector: string) {
+    cy.get(`${baseSelector}`).should('to.have.descendants', this.containerTooltip);
+  }
+
+  isTooltipVisible(baseSelector: string) {
+    cy.get(`${baseSelector} ${this.containerTooltip}`).should('be.visible');
+  }
+
+  isTooltipDismiss(baseSelector: string) {
+    cy.get(`${baseSelector}`).should('not.to.have.descendants', this.containerTooltip);
+  }
+
+  clickToAnotherPlacement(baseSelector: string) {
+    cy.get(`${baseSelector}`).parent().click('topRight');
+  }
+
+  focusToAnotherPlacement(demoName: string) {
+    cy.get('examples h3').contains(demoName).find('a.anchor-link').focus();
+  }
 }
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index b954296b9f..bba29f7259 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -15,6 +15,7 @@
   "include": [
     "integration/*.ts",
     "full/*.ts",
+    "full/**/*.ts",
     "support/*.ts",
     "../node_modules/cypress"
   ]
diff --git a/demo/src/app/common/documentation/documentation.component.html b/demo/src/app/common/documentation/documentation.component.html
index e8691d2608..25d9494d6d 100644
--- a/demo/src/app/common/documentation/documentation.component.html
+++ b/demo/src/app/common/documentation/documentation.component.html
@@ -176,6 +176,13 @@ <h3>Credits</h3>
         </a>
       </p>
 
+      <p>End-to-end testing sponsored by
+        <a href="https://www.cypress.io/" class="pr-1">Cypress</a>
+        <a href="https://www.cypress.io/">
+          <img src="https://www.cypress.io/img/favicon.ico" alt="Cypress" width="31" height="31">
+        </a>
+      </p>
+
       <h2 id="accessibility">Accessibility</h2>
 
       <h3>Overview and Limitations</h3>
diff --git a/demo/src/app/components/+accordion/demos/basic/basic.html b/demo/src/app/components/+accordion/demos/basic/basic.html
index af138f52c3..21a2759b8b 100644
--- a/demo/src/app/components/+accordion/demos/basic/basic.html
+++ b/demo/src/app/components/+accordion/demos/basic/basic.html
@@ -1,5 +1,5 @@
 <accordion>
-  <accordion-group heading="Static Header, initially expanded">
+  <accordion-group heading="Static Header">
     This content is straight in the template.
   </accordion-group>
   <accordion-group heading="Another group">
diff --git a/demo/src/app/components/+buttons/demos/uncheckable-radio/uncheckable-radio.ts b/demo/src/app/components/+buttons/demos/uncheckable-radio/uncheckable-radio.ts
index 858a8b3279..de0ff740b6 100644
--- a/demo/src/app/components/+buttons/demos/uncheckable-radio/uncheckable-radio.ts
+++ b/demo/src/app/components/+buttons/demos/uncheckable-radio/uncheckable-radio.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'demo-buttons-radio',
+  selector: 'demo-buttons-radio-uncheckable',
   templateUrl: './uncheckable-radio.html'
 })
 export class DemoButtonsUncheckableRadioComponent {
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
index 5ce0f5337e..b8446f75c7 100644
--- a/demo/src/app/components/+datepicker/datepicker-section.list.ts
+++ b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -10,6 +10,7 @@ import { DemoDatePickerConfigObjectComponent } from './demos/config-object/confi
 import { DemoDatePickerCustomFormatComponent } from './demos/custom-format/custom-format';
 import { DemoDatepickerDateInitialStateComponent } from './demos/date-initial-state/date-initial-state';
 import { DemoDatepickerDaysDisabledComponent } from './demos/disable-days/disable-days';
+import { DemoDatepickerDatesDisabledComponent } from './demos/disable-dates/disable-dates';
 import { DemoDatepickerInlineComponent } from './demos/inline-datepicker/inline-datepicker.component';
 import { DemoDatepickerDisabledComponent } from './demos/disabled/disabled.component';
 import { DemoDatepickerFormsComponent } from './demos/forms/forms.component';
@@ -173,6 +174,16 @@ export const demoComponentContent: ContentSection[] = [
           Sunday is considered the first day of the week and thus has the value 0</p>`,
         outlet: DemoDatepickerDaysDisabledComponent
       },
+      {
+        title: 'Dates disabled',
+        anchor: 'dates-disabled',
+        component: require('!!raw-loader?lang=typescript!./demos/disable-dates/disable-dates.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/disable-dates/disable-dates.html'),
+        description: `
+          <p>You can set which dates should be disabled with <code>datesDisabled</code></p>
+          <p>In the following example <code>datesDisabled</code> is set with an array to disable 2019-02-05 and 2019-02-09.</p>`,
+        outlet: DemoDatepickerDatesDisabledComponent
+      },
       {
         title: 'Min-mode',
         anchor: 'min-mode',
diff --git a/demo/src/app/components/+datepicker/demos/config-method/config-method.html b/demo/src/app/components/+datepicker/demos/config-method/config-method.html
index 4c98504b82..2e5ac01db5 100644
--- a/demo/src/app/components/+datepicker/demos/config-method/config-method.html
+++ b/demo/src/app/components/+datepicker/demos/config-method/config-method.html
@@ -3,6 +3,6 @@
     <input type="text" class="form-control" placeholder="Datepicker" #dp="bsDatepicker" bsDatepicker [bsConfig]="bsConfig">
   </div>
   <div class="col-xs-12 col-12 col-sm-8 form-group">
-    <input class="btn btn-success" type="button" (click)="setOptions()" value="Set min date">
+    <button class="btn btn-success" (click)="setOptions()">Set min date</button>
   </div>
 </div>
diff --git a/demo/src/app/components/+datepicker/demos/disable-dates/disable-dates.html b/demo/src/app/components/+datepicker/demos/disable-dates/disable-dates.html
new file mode 100644
index 0000000000..cecab7c30e
--- /dev/null
+++ b/demo/src/app/components/+datepicker/demos/disable-dates/disable-dates.html
@@ -0,0 +1,16 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Datepicker"
+           class="form-control"
+           bsDatepicker
+           [datesDisabled]="disabledDates">
+  </div>
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Daterangepicker"
+           class="form-control"
+           bsDaterangepicker
+           [datesDisabled]="disabledDates">
+  </div>
+</div>
diff --git a/demo/src/app/components/+datepicker/demos/disable-dates/disable-dates.ts b/demo/src/app/components/+datepicker/demos/disable-dates/disable-dates.ts
new file mode 100644
index 0000000000..a79f324dff
--- /dev/null
+++ b/demo/src/app/components/+datepicker/demos/disable-dates/disable-dates.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-datesdisabled',
+  templateUrl: './disable-dates.html'
+})
+export class DemoDatepickerDatesDisabledComponent {
+  disabledDates = [
+    new Date('2019-02-05'),
+    new Date('2019-02-09')
+  ];
+}
diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts
index 33dcb5cffc..6f922d7989 100644
--- a/demo/src/app/components/+datepicker/demos/index.ts
+++ b/demo/src/app/components/+datepicker/demos/index.ts
@@ -9,6 +9,7 @@ import { DemoDatePickerCustomFormatComponent } from './custom-format/custom-form
 import { DemoDatepickerCustomTodayClassComponent } from './custom-today-class/custom-today-class.component';
 import { DemoDatepickerDateInitialStateComponent } from './date-initial-state/date-initial-state';
 import { DemoDatepickerDaysDisabledComponent } from './disable-days/disable-days';
+import { DemoDatepickerDatesDisabledComponent } from './disable-dates/disable-dates';
 import { DemoDatepickerDisabledComponent } from './disabled/disabled.component';
 import { DemoDatepickerFormsComponent } from './forms/forms.component';
 import { DemoDatepickerHideOnScrollComponent } from './hide-on-scroll/hide-on-scroll';
@@ -41,6 +42,7 @@ export const DEMO_COMPONENTS = [
   DemoDatePickerCustomFormatComponent,
   DemoDatepickerCustomTodayClassComponent,
   DemoDatepickerDateInitialStateComponent,
+  DemoDatepickerDatesDisabledComponent,
   DemoDatepickerDaysDisabledComponent,
   DemoDatepickerDisabledComponent,
   DemoDatepickerFormsComponent,
diff --git a/demo/src/app/components/+datepicker/demos/trigger-by-isopen-property/trigger-by-isopen-property.html b/demo/src/app/components/+datepicker/demos/trigger-by-isopen-property/trigger-by-isopen-property.html
index ba9fafa471..b38fe9c341 100644
--- a/demo/src/app/components/+datepicker/demos/trigger-by-isopen-property/trigger-by-isopen-property.html
+++ b/demo/src/app/components/+datepicker/demos/trigger-by-isopen-property/trigger-by-isopen-property.html
@@ -3,6 +3,6 @@
     <input class="form-control" placeholder="Datepicker" bsDatepicker [isOpen]="isOpen"/>
   </div>
   <div class="col-xs-4 col-4 col-md-4 form-group">
-    <input class="btn btn-success" type="button" value="Toggle" (click)="isOpen = !isOpen">
+    <button class="btn btn-success" (click)="isOpen = !isOpen">Toggle</button>
   </div>
 </div>
diff --git a/demo/src/app/components/+datepicker/demos/triggers-manual/triggers-manual.html b/demo/src/app/components/+datepicker/demos/triggers-manual/triggers-manual.html
index f2db2af131..a1ec1033f1 100644
--- a/demo/src/app/components/+datepicker/demos/triggers-manual/triggers-manual.html
+++ b/demo/src/app/components/+datepicker/demos/triggers-manual/triggers-manual.html
@@ -3,8 +3,8 @@
     <input type="text" class="form-control" #dp="bsDatepicker" bsDatepicker [outsideClick]="false">
   </div>
   <div class="col-xs-12 col-12 col-sm-8 form-group">
-    <input class="btn btn-success" type="button" (click)="dp.show()" value="Open">
-    <input class="btn btn-success" type="button" (click)="dp.hide()" value="Close">
-    <input class="btn btn-success" type="button" (click)="dp.toggle()" [attr.aria-expanded]="dp.isOpen" value="Toggle">
+    <button class="btn btn-success" (click)="dp.show()">Open</button>
+    <button class="btn btn-success" (click)="dp.hide()">Close</button>
+    <button class="btn btn-success" (click)="dp.toggle()" [attr.aria-expanded]="dp.isOpen">Toggle</button>
   </div>
 </div>
diff --git a/demo/src/app/components/+typeahead/demos/index.ts b/demo/src/app/components/+typeahead/demos/index.ts
index 1543d5b822..74930bb28b 100644
--- a/demo/src/app/components/+typeahead/demos/index.ts
+++ b/demo/src/app/components/+typeahead/demos/index.ts
@@ -17,6 +17,7 @@ import { DemoTypeaheadReactiveFormComponent } from './reactive-form/reactive-for
 import { DemoTypeaheadScrollableComponent } from './scrollable/scrollable';
 import { DemoTypeaheadShowOnBlurComponent } from './show-on-blur/show-on-blur';
 import { DemoTypeaheadSingleWorldComponent } from './single-world/single-world';
+import { DemotypeaheadSelectFirstItemComponent } from './selected-first-item/selected-first-item';
 
 export const DEMO_COMPONENTS = [
   DemoTypeaheadAsyncComponent,
@@ -37,5 +38,6 @@ export const DEMO_COMPONENTS = [
   DemoTypeaheadReactiveFormComponent,
   DemoTypeaheadScrollableComponent,
   DemoTypeaheadShowOnBlurComponent,
-  DemoTypeaheadSingleWorldComponent
+  DemoTypeaheadSingleWorldComponent,
+  DemotypeaheadSelectFirstItemComponent
 ];
diff --git a/demo/src/app/components/+typeahead/demos/selected-first-item/selected-first-item.html b/demo/src/app/components/+typeahead/demos/selected-first-item/selected-first-item.html
new file mode 100644
index 0000000000..68ead02f24
--- /dev/null
+++ b/demo/src/app/components/+typeahead/demos/selected-first-item/selected-first-item.html
@@ -0,0 +1,5 @@
+<pre class="card card-block card-header mb-3">Model: {{selected | json}}</pre>
+<input [(ngModel)]="selected"
+       [typeahead]="states"
+       [typeaheadSelectFirstItem]="false"
+       class="form-control">
diff --git a/demo/src/app/components/+typeahead/demos/selected-first-item/selected-first-item.ts b/demo/src/app/components/+typeahead/demos/selected-first-item/selected-first-item.ts
new file mode 100644
index 0000000000..79355cd578
--- /dev/null
+++ b/demo/src/app/components/+typeahead/demos/selected-first-item/selected-first-item.ts
@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-selected-first-item',
+  templateUrl: './selected-first-item.html'
+})
+export class DemotypeaheadSelectFirstItemComponent {
+  selected: string;
+  states: string[] = [
+    'Alabama',
+    'Alaska',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'New Mexico',
+    'New York',
+    'North Dakota',
+    'North Carolina',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming'
+  ];
+}
diff --git a/demo/src/app/components/+typeahead/typeahead-section.list.ts b/demo/src/app/components/+typeahead/typeahead-section.list.ts
index 65da52368b..253062da3e 100644
--- a/demo/src/app/components/+typeahead/typeahead-section.list.ts
+++ b/demo/src/app/components/+typeahead/typeahead-section.list.ts
@@ -17,6 +17,7 @@ import { DemoTypeaheadReactiveFormComponent } from './demos/reactive-form/reacti
 import { DemoTypeaheadScrollableComponent } from './demos/scrollable/scrollable';
 import { DemoTypeaheadShowOnBlurComponent } from './demos/show-on-blur/show-on-blur';
 import { DemoTypeaheadSingleWorldComponent } from './demos/single-world/single-world';
+import { DemotypeaheadSelectFirstItemComponent } from './demos/selected-first-item/selected-first-item';
 
 import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section';
 import { ContentSection } from '../../docs/models/content-section.model';
@@ -215,6 +216,16 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader?lang=typescript!./demos/config/config'),
         html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
         outlet: DemoTypeaheadConfigComponent
+      }, {
+        title: 'Selected first item',
+        anchor: 'selected-first-item',
+        description: `
+          <p>Use <code>typeaheadSelectFirstItem</code> property to make first item in 
+          option list is chosen by default.</p>
+        `,
+        component: require('!!raw-loader?lang=typescript!./demos/selected-first-item/selected-first-item.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/selected-first-item/selected-first-item.html'),
+        outlet: DemotypeaheadSelectFirstItemComponent
       }
     ]
   },
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
index 1060ddf9a8..3070bffd38 100644
--- a/demo/src/ng-api-doc.ts
+++ b/demo/src/ng-api-doc.ts
@@ -676,6 +676,11 @@ export const ngdoc: any = {
         "type": "Date",
         "description": "<p>Initial value of datepicker</p>\n"
       },
+      {
+        "name": "datesDisabled",
+        "type": "Date[]",
+        "description": "<p>Disable specific dates</p>\n"
+      },
       {
         "name": "isDisabled",
         "type": "boolean",
@@ -748,6 +753,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>A selector specifying the element the datepicker should be appended to.\nCurrently only supports &quot;body&quot;.</p>\n"
       },
+      {
+        "name": "datesDisabled",
+        "type": "Date[]",
+        "description": "<p>Disable specific dates</p>\n"
+      },
       {
         "name": "daysDisabled",
         "type": "number[]",
@@ -862,6 +872,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>Add class to current day</p>\n"
       },
+      {
+        "name": "datesDisabled",
+        "type": "Date[]",
+        "description": "<p>Disable specific dates</p>\n"
+      },
       {
         "name": "maxDate",
         "type": "Date",
@@ -875,7 +890,7 @@ export const ngdoc: any = {
       {
         "name": "minMode",
         "type": "BsDatepickerViewMode",
-        "description": "<p>Defaut mode for all date pickers</p>\n"
+        "description": "<p>Default mode for all date pickers</p>\n"
       },
       {
         "name": "rangeInputFormat",
@@ -888,6 +903,11 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>Makes dates from other months active</p>\n"
       },
+      {
+        "name": "selectWeek",
+        "type": "boolean",
+        "description": "<p>Makes dates from other months active</p>\n"
+      },
       {
         "name": "showWeekNumbers",
         "defaultValue": "true",
@@ -929,6 +949,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>A selector specifying the element the daterangepicker should be appended\nto. Currently only supports &quot;body&quot;.</p>\n"
       },
+      {
+        "name": "datesDisabled",
+        "type": "Date[]",
+        "description": "<p>Disable specific dates</p>\n"
+      },
       {
         "name": "isDisabled",
         "type": "boolean",
@@ -1666,6 +1691,10 @@ export const ngdoc: any = {
         "name": "onHover",
         "description": ""
       },
+      {
+        "name": "onHoverWeek",
+        "description": ""
+      },
       {
         "name": "onNavigate",
         "description": ""
@@ -1940,7 +1969,7 @@ export const ngdoc: any = {
     "properties": [
       {
         "name": "dropdownMenu",
-        "type": "Promise<any>",
+        "type": "Promise<BsComponentRef<any>>",
         "description": "<p>Content to be displayed as popover.</p>\n"
       }
     ]
@@ -2953,11 +2982,6 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>if true hours and minutes fields will be disabled </p>\n"
       },
-      {
-        "name": "disabled",
-        "type": "boolean",
-        "description": "<p>if true hours and minutes fields will be disabled </p>\n"
-      },
       {
         "name": "hourStep",
         "type": "number",
@@ -3046,12 +3070,6 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>if true hours and minutes fields will be disabled </p>\n"
       },
-      {
-        "name": "disabled",
-        "defaultValue": "false",
-        "type": "boolean",
-        "description": "<p>if true hours and minutes fields will be disabled </p>\n"
-      },
       {
         "name": "hourStep",
         "defaultValue": "1",
diff --git a/docs/spec/accordion/accordion.examples.basic.use-case.md b/docs/spec/accordion/accordion.examples.basic.use-case.md
index 477e60e27c..16a8345b95 100644
--- a/docs/spec/accordion/accordion.examples.basic.use-case.md
+++ b/docs/spec/accordion/accordion.examples.basic.use-case.md
@@ -10,8 +10,9 @@ Main success scenario:
 ----------------------
 1. User open Accordion demo page
 2. User click on Basic sub-menu
-3. User able to click on each item of 4
+3. User see 4 accordion items, initially not expanded
 4. After click on each item, user see any content inside
+5. After double click on items, they are closed
 
 Extensions:
 -----------
diff --git a/docs/spec/accordion/accordion.examples.custom-html.use-case.md b/docs/spec/accordion/accordion.examples.custom-html.use-case.md
index 4a90fbf23e..267bdbae19 100644
--- a/docs/spec/accordion/accordion.examples.custom-html.use-case.md
+++ b/docs/spec/accordion/accordion.examples.custom-html.use-case.md
@@ -10,7 +10,7 @@ Main success scenario:
 ----------------------
 1. User open Accordion demo page
 2. User click on Custom HTML sub-menu
-3. User able to click on each item of 2
+3. User see 2 accordion items, initially not expanded
 4. First item have additional span block with "Some HTML here" text
 5. After click on the first item, it is opened
 6. Second item don't have any additional html with closed state
diff --git a/docs/spec/accordion/accordion.examples.group-open.use-case.md b/docs/spec/accordion/accordion.examples.group-open.use-case.md
index 687b121dba..ccad4cb6c5 100644
--- a/docs/spec/accordion/accordion.examples.group-open.use-case.md
+++ b/docs/spec/accordion/accordion.examples.group-open.use-case.md
@@ -10,7 +10,7 @@ Main success scenario:
 ----------------------
 1. User open Accordion demo page
 2. User click on Group opening event sub-menu
-3. User able to click on each item of 3
+3. User see 3 accordion items, initially not expanded
 4. After click on item without event listener, item is opened and in the browser console - nothing happens
 5. After click on item with event listener, item is opened and in the browser console - should be message "Accordion has been opened"
 
diff --git a/docs/spec/accordion/accordion.examples.manual-toggle.use-case.md b/docs/spec/accordion/accordion.examples.manual-toggle.use-case.md
index 3eb9381463..081bcae972 100644
--- a/docs/spec/accordion/accordion.examples.manual-toggle.use-case.md
+++ b/docs/spec/accordion/accordion.examples.manual-toggle.use-case.md
@@ -11,8 +11,8 @@ Main success scenario:
 1. User open Accordion demo page
 2. User click on Manual toggle sub-menu
 3. User able to click on each item of 3
-4. When user click on "Toggle last panel" button, then last item opened and user see content inside
-5. When user click on "Toggle last panel" button second time, then last item closed
+4. When user click on "Toggle last panel" button, then last item closed and user see content inside
+5. When user click on "Toggle last panel" button second time, then last item opened again
 
 Variations:
 -----------
diff --git a/docs/spec/datepicker/datepicker.examples.basic.use-case.md b/docs/spec/datepicker/datepicker.examples.basic.use-case.md
index 598b732292..96489e898a 100644
--- a/docs/spec/datepicker/datepicker.examples.basic.use-case.md
+++ b/docs/spec/datepicker/datepicker.examples.basic.use-case.md
@@ -66,8 +66,8 @@ Extentions:
 
 21a. When user clicks on "‹" button - interval with previous 16 years shown in each table
 21b. When user clicks on "›" button - interval with next 16 years shown in each table
-21c. When user clicks on any year from the left table - then this year shown in head block and tables with 12 months in each shown //TODO should work with right table also
-21d. When user clicks on any month from the left table - then this month and year shown in head block and tables with dates in each shown //TODO should work with right table also
+21c. When user clicks on any year from the left table - then this year shown in head block and tables with 12 months in each shown
+21d. When user clicks on any month from the left table - then this month and year shown in head block and tables with dates in each shown
 
 25a. When user clears input and add there date interval in bad format, click "Enter" - nothing happens
 25b. When user clears input and add there date interval in format "mmddyyyy" - "mmddyyyy", click "Enter" - date converted to "mm/dd/yyyy" - "mm/dd/yyyy"
diff --git a/docs/spec/datepicker/datepicker.examples.config-method.use-case.md b/docs/spec/datepicker/datepicker.examples.config-method.use-case.md
index 4e67c1a4e0..6ce9615a11 100644
--- a/docs/spec/datepicker/datepicker.examples.config-method.use-case.md
+++ b/docs/spec/datepicker/datepicker.examples.config-method.use-case.md
@@ -13,8 +13,8 @@ Main success scenario:
 3. User see Datepicker input and clickable button "Set min date"
 4. When user clicks on Datepicker input, bs-datepicker-container opens
 5. User able to click on any date, even any date from May 2018
-6. When user clicks on 15 may 2018 - then this date appear in the input
-7. When user clicks on "Set min date" button, then bs-datepicker-container opens and user should see June 2018 calendar
+6. When user clicks on 8 may 2018 - then this date appear in the input
+7. When user clicks on "Set min date" button, then bs-datepicker-container opens
 8. When user try to click on any date before 13 of June 2018, nothing happens
 9. When user try to click on any date after 13 of June 2018 - then this date chosen and appear in the input
 
diff --git a/docs/spec/datepicker/datepicker.examples.custom-date-format.use-case.md b/docs/spec/datepicker/datepicker.examples.custom-date-format.use-case.md
index 06e85ce811..4720a0a0b0 100644
--- a/docs/spec/datepicker/datepicker.examples.custom-date-format.use-case.md
+++ b/docs/spec/datepicker/datepicker.examples.custom-date-format.use-case.md
@@ -11,7 +11,7 @@ Main success scenario:
 1. User opens Datepicker demo page
 2. User clicks on Custom date format sub-menu
 3. User see 3 inputs for Datepicker
-4. User see 3 clickable buttons of "Date Picker" //TODO component should not set minDate and maxDate, this is in another demo
+4. User see 3 clickable buttons of "Date Picker"
 5. By default, value in inputs is current day in different formats: "YYYY-MM-DD", "MM/DD/YYYY", "MMMM Do YYYY,h:mm:ss a"
 6. When user click on the first "Date Picker" button and chose any other date - that date chosen and appear in the input with format "YYYY-MM-DD"
 7. When user click on the second "Date Picker" button and chose any other date - that date chosen and appear in the input with format "MM/DD/YYYY"
diff --git a/docs/spec/datepicker/datepicker.examples.custom-today-class.use-case.md b/docs/spec/datepicker/datepicker.examples.custom-today-class.use-case.md
new file mode 100644
index 0000000000..bd09263f11
--- /dev/null
+++ b/docs/spec/datepicker/datepicker.examples.custom-today-class.use-case.md
@@ -0,0 +1,22 @@
+5.22: Datepicker Custom today class
+==================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to set custom class for today date
+
+Main success scenario:
+----------------------
+1. User opens Datepicker demo page
+2. User clicks on Custom today class sub-menu
+3. User see 1 input for Datepicker
+4. When user clicks on the "DatePicker" input then container opened and no one date selected by default
+6. Current today date have specific class name "custom-today-class"
+7. When user chose any date, then this date chosen and shown in the input
+8. When user clicks on input again, then previous date selected and current date still with "custom-today-class"
+9. When user chose today date and click on datepicker input again, then current date selected and still with "custom-today-class"
+
+Variations:
+-----------
+2*. User scroll to Custom today class
diff --git a/docs/spec/datepicker/datepicker.examples.days-disabled.use-case.md b/docs/spec/datepicker/datepicker.examples.days-disabled.use-case.md
new file mode 100644
index 0000000000..6fa0fa5b56
--- /dev/null
+++ b/docs/spec/datepicker/datepicker.examples.days-disabled.use-case.md
@@ -0,0 +1,22 @@
+5.23: Datepicker Days disabled example
+===============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to disable Saturday and Sunday in Datepicker and Daterangepicker
+
+Main success scenario:
+----------------------
+1. User opens Datepicker demo page
+2. User clicks on Days disabled sub-menu
+3. User see 2 inputs for Datepicker
+4. When user clicks on the first Datepicker input, then bs-datepicker-container opened and user can chose any date except Saturday and Sunday
+5. When user clicks on any Saturday or Sunday, nothing happens, they are disabled
+6. When user clicks on any active date, this date chosen and shown in the input field in format "mm/dd/yyyy"
+7. When user clicks on the second Datepicker input, then bs-datepicker-container opened and user can chose any date
+8. When user clicks on any Saturday or Sunday in 2d datepicker, this date chosen and shown in the input field in format "mm/dd/yyyy"
+
+Variations:
+-----------
+2*. User scroll to Days disabled sub-menu
diff --git a/docs/spec/datepicker/datepicker.examples.initial-state.use-case.md b/docs/spec/datepicker/datepicker.examples.initial-state.use-case.md
index f81f8616fa..0d85b965ad 100644
--- a/docs/spec/datepicker/datepicker.examples.initial-state.use-case.md
+++ b/docs/spec/datepicker/datepicker.examples.initial-state.use-case.md
@@ -16,7 +16,7 @@ Main success scenario:
 6. By default, value in Daterangepicker input is interval from current day to current + 7 days
 7. When user clicks on "Date Picker" button, bs-datepicker-container opened and current date selected
 8. When user clicks on other date, that date selected and shown in input
-9. When user clicks on "Date Range Picker" button, bs-dateragdepicker-container opened and appropriate interval selected
+9. When user clicks on "Date Range Picker" button, bs-daterangepicker-container opened and appropriate interval selected
 10. When user chose another interval, that interval selected and shown in input
 
 Variations:
diff --git a/docs/spec/datepicker/datepicker.examples.inline-datepicker.use-case.md b/docs/spec/datepicker/datepicker.examples.inline-datepicker.use-case.md
new file mode 100644
index 0000000000..135dc90e08
--- /dev/null
+++ b/docs/spec/datepicker/datepicker.examples.inline-datepicker.use-case.md
@@ -0,0 +1,19 @@
+5.21: Datepicker Inline Datepicker example
+==========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to use inline datepicker, with initial state
+
+Main success scenario:
+----------------------
+1. User opens Datepicker demo page
+2. User clicks on Inline Datepicker sub-menu
+3. User see Datepicker with selected date (Today)
+4. When user clicks on any other date - then this date selected
+5. When user chose another month and chose there any date - then this date selected
+
+Variations:
+-----------
+2*. User scroll to Inline Datepicker sub-menu
diff --git a/docs/spec/datepicker/datepicker.examples.min-mode.use-case.md b/docs/spec/datepicker/datepicker.examples.min-mode.use-case.md
new file mode 100644
index 0000000000..ead04f0647
--- /dev/null
+++ b/docs/spec/datepicker/datepicker.examples.min-mode.use-case.md
@@ -0,0 +1,26 @@
+5.20: Datepicker Min-mode example
+===============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to set min view mode of datepicker (month, year)
+
+Main success scenario:
+----------------------
+1. User opens Datepicker demo page
+2. User clicks on Min-mode sub-menu
+3. User see 1 input of Datepicker and button "Date Picker"
+4. When user clicks on Datepicker input, then bs-datepicker-container opened and user see list with months (mode=month)
+5. When user clicks on any month, then this month chosen and date shown in the input field in format "mm/01/yyyy"
+
+Variations:
+-----------
+2*. User scroll to Min-mode sub-menu
+4*. When user clicks on Datepicker btn, then bs-datepicker-container opened and user see list with months (mode=month)
+
+Extentions:
+-----------
+5a. When user clicks on year in navigation, then table with years shown
+5b. When user clicks on any year, then this year chosen and user see months calendar
+5c. When user chose any month, then this month chosen and date shown in the input field in format "mm/01/yyyy"
diff --git a/docs/spec/datepicker/datepicker.examples.reactive-forms.use-case.md b/docs/spec/datepicker/datepicker.examples.reactive-forms.use-case.md
index 66b9ba7b80..0c8a118445 100644
--- a/docs/spec/datepicker/datepicker.examples.reactive-forms.use-case.md
+++ b/docs/spec/datepicker/datepicker.examples.reactive-forms.use-case.md
@@ -11,12 +11,10 @@ Main success scenario:
 1. User opens Datepicker demo page
 2. User clicks on Reactive forms sub-menu
 3. User see 2 inputs: Datepicker and Daterangepicker
-4. By default, user see preview block with object, which values is null
+4. By default, user don't see any preview blocks
 5. When user chose any date from Datepicker, then in preview block date value shown in ISO Dates (Date-Time) format
-6. This value should be string type
-7. When user chose any date from Daterangepicker, then in preview block range value shown in ISO Dates (Date-Time) format
-8. This value should be an array of strings, length should be 2
-9. Component src should be written with using FormGroup and FormBuilder
+6. When user chose any date from Daterangepicker, then in preview block range value shown in ISO Dates (Date-Time) format
+8. Component src should be written with using FormGroup and FormBuilder
 
 Variations:
 -----------
diff --git a/docs/spec/datepicker/datepicker.examples.select-dates-from-other-month.use-case.md b/docs/spec/datepicker/datepicker.examples.select-dates-from-other-month.use-case.md
new file mode 100644
index 0000000000..889a436099
--- /dev/null
+++ b/docs/spec/datepicker/datepicker.examples.select-dates-from-other-month.use-case.md
@@ -0,0 +1,23 @@
+5.24: Datepicker Select dates from other month example
+======================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to manage selectFromOtherMonth option of Datepicker for getting possibility to chose day from other month
+
+Main success scenario:
+----------------------
+1. User opens Datepicker demo page
+2. User clicks on Select dates from other month sub-menu
+3. User see Datepicker input
+4. When user clicks on Datepicker input, bs-datepicker-container opens
+5. When user clicks on any date from previous month in this view, then this date chosen and appear in the input
+6. When user clicks on bs-datepicker-container again, then user see calendar with chosen month
+7. When user clicks on any date from next month in this view, then this date chosen and appear in the input
+8. When user clicks on bs-datepicker-container again, then user see calendar with chosen month
+9. Template src should be written with dateInputFormat: 'DD-MM-YYYY' and selectFromOtherMonth: true
+
+Variations:
+-----------
+2*. User scroll to Select dates from other month sub-menu
diff --git a/docs/spec/datepicker/datepicker.examples.select-week.use-case.md b/docs/spec/datepicker/datepicker.examples.select-week.use-case.md
new file mode 100644
index 0000000000..e3cabc49b5
--- /dev/null
+++ b/docs/spec/datepicker/datepicker.examples.select-week.use-case.md
@@ -0,0 +1,31 @@
+5.25: Datepicker Select week example
+====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to use selectWeek option, which give possibility to user to chose weeks instead of days in datepicker
+
+Main success scenario:
+----------------------
+1. User opens Datepicker demo page
+2. User clicks on Select week sub-menu
+3. User see 4 inputs of Datepicker, each with appropriate placeholder
+4. When user clicks on the first datepicker input, then container opened and user can chose any week. Week numbers started from 1, from January 1 each year.
+5. When user select week, then datepicker container disappeared and date shown in input in format MM/DD/YYYY (day should be always Monday)
+6. When user clicks on this input again, then container opened and user see selected date
+7. When user clicks on the second input, then container opened and user can select weeks from other months.
+8. When user click on the week from previous month, then datepicker container disappeared and date shown in input in format MM/DD/YYYY
+9. When user click on the 2d datepicker input again, then container opened and user see selected date
+10. When user chose the week from the next month, then datepicker container disappeared and date shown in input in format MM/DD/YYYY
+11. When user click on the 3d datepicker input, then datepicker container opened
+12. When user click on Sunday or Monday, nothing happens, they disabled
+13. When user click on the week from current month, then datepicker container disappeared and date shown in input in format MM/DD/YYYY (day should be Tuesday)
+14. When user click on the 3d datepicker again, then container opened and user see selected date
+15. When user click on the 4th datepicker input, then datepicker container opened
+16. When user click on any item, nothing happens, they are disabled.
+17. When user enter the correct date to the input and press enter, then after datepicker opens, this date selected.
+
+Variations:
+-----------
+2*. User scroll to Select week sub-menu
diff --git a/docs/spec/datepicker/datepicker.examples.themes.use-case.md b/docs/spec/datepicker/datepicker.examples.themes.use-case.md
index dd7e3e4bbc..39a2d12077 100644
--- a/docs/spec/datepicker/datepicker.examples.themes.use-case.md
+++ b/docs/spec/datepicker/datepicker.examples.themes.use-case.md
@@ -10,7 +10,7 @@ Main success scenario:
 ----------------------
 1. User opens Datepicker demo page
 2. User clicks on Themes sub-menu
-3. User see select filed (with "green" by default), Datepicker input and button "Open"
+3. User see select field (with "green" by default), Datepicker input and button "Open"
 4. When user clicks on "Open" button, bs-datepicker theme-green opened with appropriate styles
 5. When user chose "default", bs-datepicker theme-default shown with appropriate styles
 6. When user chose "blue", bs-datepicker theme-blue shown with appropriate styles
diff --git a/docs/spec/datepicker/datepicker.examples.visibility-events.use-case.md b/docs/spec/datepicker/datepicker.examples.visibility-events.use-case.md
index 49f73d528d..c89c03d945 100644
--- a/docs/spec/datepicker/datepicker.examples.visibility-events.use-case.md
+++ b/docs/spec/datepicker/datepicker.examples.visibility-events.use-case.md
@@ -12,7 +12,7 @@ Main success scenario:
 2. User clicks on Visibility Events sub-menu
 3. User see Datepicker input
 4. When user clicks on Datepicker input, bs-datepicker-container opens and user see card with "Event onShown is fired"
-5. When user chose any date, then bs-datepicker-container disappeared and "Event onHidden is fired" shown
+5. When user chose any date, then bs-datepicker-container disappeared and "Event onShown is fired", "Event onHidden is fired" shown
 6. When user clicks on input again, then "Event onShown is fired" shown and "Event onHidden is fired" hidden
 
 Variations:
diff --git a/docs/spec/index.md b/docs/spec/index.md
index f8fb742158..9a5c33381a 100644
--- a/docs/spec/index.md
+++ b/docs/spec/index.md
@@ -107,6 +107,8 @@
 
 [Datepicker. Basic](datepicker/datepicker.examples.basic.use-case.md)
 
+[Datepicker. Inline Datepicker](datepicker/datepicker.examples.inline-datepicker.use-case.md)
+
 [Datepicker. Initial state](datepicker/datepicker.examples.initial-state.use-case.md)
 
 [Datepicker. Custom date format](datepicker/datepicker.examples.custom-date-format.use-case.md)
@@ -119,8 +121,14 @@
 
 [Datepicker. Min-max](datepicker/datepicker.examples.min-max.use-case.md)
 
+[Datepicker. Days disabled](datepicker/datepicker.examples.days-disabled.use-case.md)
+
+[Datepicker. Min-mode](datepicker/datepicker.examples.min-mode.use-case.md)
+
 [Datepicker. Disabled](datepicker/datepicker.examples.disabled.use-case.md)
 
+[Datepicker. Custom today class](datepicker/datepicker.examples.custom-today-class.use-case.md)
+
 [Datepicker. Forms](datepicker/datepicker.examples.forms.use-case.md)
 
 [Datepicker. Reactive forms](datepicker/datepicker.examples.reactive-forms.use-case.md)
@@ -137,6 +145,10 @@
 
 [Datepicker. Config properties](datepicker/datepicker.examples.config-properties.md)
 
+[Datepicker. Select dates from other month](datepicker/datepicker.examples.select-dates-from-other-month.use-case.md)
+
+[Datepicker. Select week](datepicker/datepicker.examples.select-week.use-case.md)
+
 [Datepicker. Outside click](datepicker/datepicker.examples.outside-click.md)
 
 [Datepicker. Trigger by isOpen property](datepicker/datepicker.examples.trigger-by-isopen.md)
diff --git a/package-lock.json b/package-lock.json
index 97deb8e02d..98b46b3a83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap-base",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1390,7 +1390,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -1785,15 +1785,15 @@
       }
     },
     "@types/sinon": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-4.0.0.tgz",
-      "integrity": "sha512-cuK4xM8Lg2wd8cxshcQa8RG4IK/xfyB6TNE6tNVvkrShR4xdrYgsV04q6Dp6v1Lp6biEFdzD8k8zg/ujQeiw+A==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-2.3.7.tgz",
+      "integrity": "sha512-w+LjztaZbgZWgt/y/VMP5BUAWLtSyoIJhXyW279hehLPyubDoBNwvhcj3WaSptcekuKYeTCVxrq60rdLc6ImJA==",
       "dev": true
     },
     "@types/sinon-chai": {
-      "version": "2.7.29",
-      "resolved": "https://registry.npmjs.org/@types/sinon-chai/-/sinon-chai-2.7.29.tgz",
-      "integrity": "sha512-EkI/ZvJT4hglWo7Ipf9SX+J+R9htNOMjW8xiOhce7+0csqvgoF5IXqY5Ae1GqRgNtWCuaywR5HjVa1snkTqpOw==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/sinon-chai/-/sinon-chai-3.2.2.tgz",
+      "integrity": "sha512-5zSs2AslzyPZdOsbm2NRtuSNAI2aTWzNKOHa/GRecKo7a5efYD7qGcPxMZXQDayVXT2Vnd5waXxBvV31eCZqiA==",
       "dev": true,
       "requires": {
         "@types/chai": "*",
@@ -5409,9 +5409,9 @@
       "dev": true
     },
     "cypress": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-3.1.3.tgz",
-      "integrity": "sha512-ZusTQffKBVrLDvcxEinymTH0iCUL7hM1m6q9X+557wDtpd6S4et330QQE1IW10Pnyp+vYIHpkWxDm43B9G14nA==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-3.1.5.tgz",
+      "integrity": "sha512-jzYGKJqU1CHoNocPndinf/vbG28SeU+hg+4qhousT/HDBMJxYgjecXOmSgBX/ga9/TakhqSrIrSP2r6gW/OLtg==",
       "dev": true,
       "requires": {
         "@cypress/listr-verbose-renderer": "0.4.1",
@@ -5424,8 +5424,8 @@
         "@types/lodash": "4.14.87",
         "@types/minimatch": "3.0.3",
         "@types/mocha": "2.2.44",
-        "@types/sinon": "4.0.0",
-        "@types/sinon-chai": "2.7.29",
+        "@types/sinon": "7.0.0",
+        "@types/sinon-chai": "3.2.2",
         "bluebird": "3.5.0",
         "cachedir": "1.3.0",
         "chalk": "2.4.1",
@@ -5443,7 +5443,7 @@
         "is-installed-globally": "0.1.0",
         "lazy-ass": "1.6.0",
         "listr": "0.12.0",
-        "lodash": "4.17.10",
+        "lodash": "4.17.11",
         "log-symbols": "2.2.0",
         "minimist": "1.2.0",
         "moment": "2.22.2",
@@ -5462,6 +5462,12 @@
           "integrity": "sha512-m812CONwdZn/dMzkIJEY0yAs4apyTkTORgfB2UsMOxgkUbC205AHnm4T8I0I5gPg9MHrFc1dJ35iS75c0CJkjg==",
           "dev": true
         },
+        "@types/sinon": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-7.0.0.tgz",
+          "integrity": "sha512-kcYoPw0uKioFVC/oOqafk2yizSceIQXCYnkYts9vJIwQklFRsMubTObTDrjQamUyBRd47332s85074cd/hCwxg==",
+          "dev": true
+        },
         "ajv": {
           "version": "5.5.2",
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
@@ -5541,9 +5547,15 @@
             "har-schema": "^2.0.0"
           }
         },
+        "lodash": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+          "dev": true
+        },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -6542,7 +6554,7 @@
       "dependencies": {
         "pify": {
           "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         }
@@ -6875,7 +6887,7 @@
         },
         "mkdirp": {
           "version": "0.5.0",
-          "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.0.tgz",
           "integrity": "sha1-HXMHam35hs2TROFecfzAWkyavxI=",
           "dev": true,
           "requires": {
@@ -10939,7 +10951,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -11012,7 +11024,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
diff --git a/package.json b/package.json
index 8bf4875c0e..a5a20445bd 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap-base",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "scripts": {
@@ -42,6 +42,7 @@
     "cy:open": "cypress open",
     "cy:run:smoke": "cypress run --config integrationFolder=cypress/integration",
     "cy:run:full": "cypress run --config integrationFolder=cypress/full",
+    "cy:run:all": "cypress run --config integrationFolder=cypress",
     "view-stats": "webpack-bundle-analyzer demo/dist/stats.json",
     "build:dynamic": "run-s build build:client-and-server-bundles webpack:server configure-heroku",
     "serve:dynamic": "node demo/dist/server",
@@ -104,6 +105,7 @@
     "@schematics/angular": "0.8.5",
     "@types/chai": "4.1.3",
     "@types/jasmine": "2.8.7",
+    "@types/sinon": "2.3.7",
     "@types/marked": "0.3.0",
     "@types/node": "10.0.8",
     "@types/tapable": "1.0.2",
@@ -119,7 +121,7 @@
     "core-js": "2.5.6",
     "cpy": "7.0.0",
     "cpy-cli": "1.0.1",
-    "cypress": "3.1.3",
+    "cypress": "3.1.5",
     "gh-pages": "1.1.0",
     "gitignore-to-glob": "0.3.0",
     "google-code-prettify": "1.0.5",
diff --git a/scripts/build-modules.js b/scripts/build-modules.js
index e7c88dba72..d9de3310c6 100644
--- a/scripts/build-modules.js
+++ b/scripts/build-modules.js
@@ -10,6 +10,7 @@ const buildPkgJson = require('ngm-cli/tasks/npm/build-pkg-json.task');
 const src = 'src';
 const dist = 'dist';
 const common = 'common';
+const path = require('path');
 
 let flags = {};
 
@@ -57,7 +58,7 @@ if (flags.watch) {
     ignored: /(^|[\/\\])\../
   })
     .on('change', (event) => {
-      let moduleName = event.replace(/src\/(.*)\/.*/i, '$1');
+      let moduleName = event.replace(new RegExp(`src\\${path.sep}(.*)\\${path.sep}(.*)`,'i'), '$1');
       buildModules([moduleName])
     });
 }
diff --git a/scripts/ci/npm-ng-latest.sh b/scripts/ci/npm-ng-latest.sh
index 8711f17775..7dc23def82 100755
--- a/scripts/ci/npm-ng-latest.sh
+++ b/scripts/ci/npm-ng-latest.sh
@@ -16,6 +16,6 @@ npm i @angular/animations@latest \
     @angular/service-worker@latest \
     @angular-devkit/schematics@latest \
     @schematics/angular@latest \
-    typescript@latest \
+    typescript@3.2.2 \
     tsickle@0.33.0 \
     rxjs@6.3
diff --git a/src/accordion/package.json b/src/accordion/package.json
index a9d695b915..f60e2a1c04 100644
--- a/src/accordion/package.json
+++ b/src/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/accordion",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/alert/package.json b/src/alert/package.json
index cdc166b6bc..cbfbc0b441 100644
--- a/src/alert/package.json
+++ b/src/alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/alert",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/buttons/package.json b/src/buttons/package.json
index 67c25514fb..ebeb980282 100644
--- a/src/buttons/package.json
+++ b/src/buttons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/buttons",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/carousel/package.json b/src/carousel/package.json
index 7de93ed941..3ad6fc692b 100644
--- a/src/carousel/package.json
+++ b/src/carousel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/carousel",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/chronos/package.json b/src/chronos/package.json
index 5329c45946..26c9aa5570 100644
--- a/src/chronos/package.json
+++ b/src/chronos/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/chronos",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/chronos/public_api.ts b/src/chronos/public_api.ts
index 244e63543c..fecc9e23e2 100644
--- a/src/chronos/public_api.ts
+++ b/src/chronos/public_api.ts
@@ -27,7 +27,7 @@ export {
 
 export { LocaleData } from './locale/locale.class';
 
-export { isAfter, isBefore, isDisabledDay } from './utils/date-compare';
+export { isAfter, isBefore, isDisabledDay, isSame } from './utils/date-compare';
 export { isArray, isDateValid, isDate } from './utils/type-checks';
 export { shiftDate, setFullDate } from './utils/date-setters';
 export { endOf, startOf } from './utils/start-end-of';
diff --git a/src/collapse/package.json b/src/collapse/package.json
index 789e470a21..40957fff52 100644
--- a/src/collapse/package.json
+++ b/src/collapse/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/collapse",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/common/package.json b/src/common/package.json
index be236bbec5..5f8ff5a977 100644
--- a/src/common/package.json
+++ b/src/common/package.json
@@ -13,5 +13,5 @@
     },
     "dest": "../../dist/common"
   },
-  "version": "3.2.0"
+  "version": "3.3.0"
 }
diff --git a/src/component-loader/component-loader.class.ts b/src/component-loader/component-loader.class.ts
index 198fb7eaf2..01b793e818 100644
--- a/src/component-loader/component-loader.class.ts
+++ b/src/component-loader/component-loader.class.ts
@@ -206,6 +206,8 @@ export class ComponentLoader<T> {
       return this;
     }
 
+    this._posService.deletePositionElement(this._componentRef.location);
+
     this.onBeforeHide.emit(this._componentRef.instance);
 
     const componentEl = this._componentRef.location.nativeElement;
@@ -350,6 +352,7 @@ export class ComponentLoader<T> {
     if (!this._zoneSubscription) {
       return;
     }
+
     this._zoneSubscription.unsubscribe();
     this._zoneSubscription = null;
   }
diff --git a/src/component-loader/package.json b/src/component-loader/package.json
index 93f8c77a8b..46838d32e2 100644
--- a/src/component-loader/package.json
+++ b/src/component-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/component-loader",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/datepicker/base/bs-datepicker-container.ts b/src/datepicker/base/bs-datepicker-container.ts
index 8895a27e16..d5bb22739e 100644
--- a/src/datepicker/base/bs-datepicker-container.ts
+++ b/src/datepicker/base/bs-datepicker-container.ts
@@ -33,6 +33,9 @@ export abstract class BsDatepickerAbstractComponent {
   set daysDisabled(value: number[]) {
     this._effects.setDaysDisabled(value);
   }
+  set datesDisabled(value: Date[]) {
+    this._effects.setDatesDisabled(value);
+  }
 
   set isDisabled(value: boolean) {
     this._effects.setDisabled(value);
diff --git a/src/datepicker/bs-datepicker-inline.component.ts b/src/datepicker/bs-datepicker-inline.component.ts
index f32645dcd6..cb256269fb 100644
--- a/src/datepicker/bs-datepicker-inline.component.ts
+++ b/src/datepicker/bs-datepicker-inline.component.ts
@@ -42,6 +42,10 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
    * Maximum date which is available for selection
    */
   @Input() maxDate: Date;
+  /**
+   * Disable specific dates
+   */
+  @Input() datesDisabled: Date[];
   /**
    * Emits when datepicker value has been changed
    */
@@ -103,6 +107,10 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
       this._datepickerRef.instance.maxDate = this.maxDate;
     }
 
+    if (changes.datesDisabled) {
+      this._datepickerRef.instance.datesDisabled = this.datesDisabled;
+    }
+
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
@@ -116,7 +124,8 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
       value: this._bsValue,
       isDisabled: this.isDisabled,
       minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
-      maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate
+      maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
+      datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled
     });
   }
 
diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts
index 4bdbcf4a14..0bab54dc78 100644
--- a/src/datepicker/bs-datepicker.component.ts
+++ b/src/datepicker/bs-datepicker.component.ts
@@ -100,6 +100,11 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
    * Disable Certain days in the week
    */
   @Input() daysDisabled: number[];
+
+  /**
+   * Disable specific dates
+   */
+  @Input() datesDisabled: Date[];
   /**
    * Emits when datepicker value has been changed
    */
@@ -153,6 +158,10 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
       this._datepickerRef.instance.daysDisabled = this.daysDisabled;
     }
 
+    if (changes.datesDisabled) {
+      this._datepickerRef.instance.datesDisabled = this.datesDisabled;
+    }
+
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
@@ -227,6 +236,7 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
       minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
       maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
       daysDisabled: this.daysDisabled || this.bsConfig && this.bsConfig.daysDisabled,
+      datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
       minMode: this.minMode || this.bsConfig && this.bsConfig.minMode
     });
   }
diff --git a/src/datepicker/bs-datepicker.config.ts b/src/datepicker/bs-datepicker.config.ts
index 3e5611654d..d4a8e8e34e 100644
--- a/src/datepicker/bs-datepicker.config.ts
+++ b/src/datepicker/bs-datepicker.config.ts
@@ -23,6 +23,11 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
   maxDate?: Date;
 
   daysDisabled?: number[];
+
+  /**
+   * Disable specific dates
+   */
+  datesDisabled?: Date[];
   /**
    * Makes dates from other months active
    */
diff --git a/src/datepicker/bs-datepicker.spec.ts b/src/datepicker/bs-datepicker.spec.ts
index dc63350483..a0f075f244 100644
--- a/src/datepicker/bs-datepicker.spec.ts
+++ b/src/datepicker/bs-datepicker.spec.ts
@@ -103,7 +103,7 @@ describe('datepicker:', () => {
     datepickerContainerInstance[`_store`]
       .select(state => state.view)
       .subscribe(view => {
-        expect(view.date.getDay()).not.toEqual((weekSelection.days[0].date.getDay()));
+        expect(view.date.getDate()).not.toEqual((weekSelection.days[0].date.getDate()));
       });
   });
 
diff --git a/src/datepicker/bs-daterangepicker.component.ts b/src/datepicker/bs-daterangepicker.component.ts
index e58928a366..bb8f77b1a6 100644
--- a/src/datepicker/bs-daterangepicker.component.ts
+++ b/src/datepicker/bs-daterangepicker.component.ts
@@ -102,6 +102,10 @@ export class BsDaterangepickerDirective
    * Maximum date which is available for selection
    */
   @Input() maxDate: Date;
+  /**
+   * Disable specific dates
+   */
+  @Input() datesDisabled: Date[];
   /**
    * Emits when daterangepicker value has been changed
    */
@@ -150,6 +154,10 @@ export class BsDaterangepickerDirective
       this._datepickerRef.instance.maxDate = this.maxDate;
     }
 
+    if (changes.datesDisabled) {
+      this._datepickerRef.instance.datesDisabled = this.datesDisabled;
+    }
+
     if (changes.isDisabled) {
       this._datepickerRef.instance.isDisabled = this.isDisabled;
     }
@@ -205,7 +213,8 @@ export class BsDaterangepickerDirective
         value: this._bsValue,
         isDisabled: this.isDisabled,
         minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
-        maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate
+        maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
+        datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled
       }
     );
   }
diff --git a/src/datepicker/engine/flag-days-calendar.ts b/src/datepicker/engine/flag-days-calendar.ts
index e361f81661..17ed8289b3 100644
--- a/src/datepicker/engine/flag-days-calendar.ts
+++ b/src/datepicker/engine/flag-days-calendar.ts
@@ -13,13 +13,14 @@ import {
   shiftDate
 } from 'ngx-bootstrap/chronos';
 
-import { isMonthDisabled } from '../utils/bs-calendar-utils';
+import { isMonthDisabled, isDisabledDate } from '../utils/bs-calendar-utils';
 
 export interface FlagDaysCalendarOptions {
   isDisabled: boolean;
   minDate: Date;
   maxDate: Date;
   daysDisabled: number[];
+  datesDisabled: Date[];
   hoveredDate: Date;
   selectedDate: Date;
   selectedRange: Date[];
@@ -63,7 +64,8 @@ export function flagDaysCalendar(
         options.isDisabled ||
         isBefore(day.date, options.minDate, 'day') ||
         isAfter(day.date, options.maxDate, 'day') ||
-        isDisabledDay(day.date, options.daysDisabled);
+        isDisabledDay(day.date, options.daysDisabled) ||
+        isDisabledDate(day.date, options.datesDisabled);
 
       const currentDate = new Date();
       const isToday = !isOtherMonth && isSameDay(day.date, currentDate);
diff --git a/src/datepicker/engine/flag-days.calendar.spec.ts b/src/datepicker/engine/flag-days.calendar.spec.ts
new file mode 100644
index 0000000000..feb599b00e
--- /dev/null
+++ b/src/datepicker/engine/flag-days.calendar.spec.ts
@@ -0,0 +1,42 @@
+import { flagDaysCalendar } from './flag-days-calendar';
+
+describe('flag-days-calendar:', () => {
+
+    it('should flag days as disabled when they are part of the datesDisabled', () => {
+      const weekViewModel = {
+        month: new Date('2019-02-01'),
+        weeks: [
+          {
+            days: [
+              { date: new Date('2019-02-07'), label: '2019-02-07' },
+              { date: new Date('2019-02-08'), label: '2019-02-08'  },
+              { date: new Date('2019-02-09'), label: '2019-02-09'  }
+            ]}
+        ],
+        weekNumbers: [],
+        weekdays: [],
+        monthTitle: '',
+        yearTitle: ''
+      };
+      const datesDisabled = [
+        new Date('2019-02-07'),
+        new Date('2019-02-09')
+      ];
+      const result = flagDaysCalendar(weekViewModel, {
+        datesDisabled,
+        isDisabled: false,
+        minDate: new Date('2019-01-01'),
+        maxDate: new Date('2019-12-31'),
+        daysDisabled: [],
+        hoveredDate: new Date('2019-02-06'),
+        selectedDate: new Date('2019-02-05'),
+        selectedRange: [],
+        displayMonths: 1,
+        monthIndex: 1
+      });
+
+      expect(result.weeks[0].days.find(day => day.label === '2019-02-07').isDisabled).toBe(true);
+      expect(result.weeks[0].days.find(day => day.label === '2019-02-08').isDisabled).toBe(false);
+      expect(result.weeks[0].days.find(day => day.label === '2019-02-09').isDisabled).toBe(true);
+    });
+   });
diff --git a/src/datepicker/package.json b/src/datepicker/package.json
index 915455cfff..bbb881af22 100644
--- a/src/datepicker/package.json
+++ b/src/datepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/datepicker",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/datepicker/reducer/bs-datepicker.actions.ts b/src/datepicker/reducer/bs-datepicker.actions.ts
index d53eb3cefb..255ccb3cc2 100644
--- a/src/datepicker/reducer/bs-datepicker.actions.ts
+++ b/src/datepicker/reducer/bs-datepicker.actions.ts
@@ -23,6 +23,7 @@ export class BsDatepickerActions {
   static readonly SET_MIN_DATE = '[datepicker] set min date';
   static readonly SET_MAX_DATE = '[datepicker] set max date';
   static readonly SET_DAYSDISABLED = '[datepicker] set days disabled';
+  static readonly SET_DATESDISABLED = '[datepicker] set dates disabled';
   static readonly SET_IS_DISABLED = '[datepicker] set is disabled';
 
   static readonly SET_LOCALE = '[datepicker] set datepicker locale';
@@ -112,6 +113,13 @@ export class BsDatepickerActions {
     };
   }
 
+  datesDisabled(dates: Date[]): Action {
+    return {
+      type: BsDatepickerActions.SET_DATESDISABLED,
+      payload: dates
+    };
+  }
+
   isDisabled(value: boolean): Action {
     return {
       type: BsDatepickerActions.SET_IS_DISABLED,
diff --git a/src/datepicker/reducer/bs-datepicker.effects.ts b/src/datepicker/reducer/bs-datepicker.effects.ts
index 4218934f67..f16d863fb8 100644
--- a/src/datepicker/reducer/bs-datepicker.effects.ts
+++ b/src/datepicker/reducer/bs-datepicker.effects.ts
@@ -72,6 +72,12 @@ export class BsDatepickerEffects {
     return this;
   }
 
+  setDatesDisabled(value: Date[]) {
+    this._store.dispatch(this._actions.datesDisabled(value));
+
+    return this;
+  }
+
   setDisabled(value: boolean): BsDatepickerEffects {
     this._store.dispatch(this._actions.isDisabled(value));
 
diff --git a/src/datepicker/reducer/bs-datepicker.reducer.ts b/src/datepicker/reducer/bs-datepicker.reducer.ts
index 6c0739becb..4a161b7290 100644
--- a/src/datepicker/reducer/bs-datepicker.reducer.ts
+++ b/src/datepicker/reducer/bs-datepicker.reducer.ts
@@ -287,6 +287,7 @@ function flagReducer(state: BsDatepickerState,
           minDate: state.minDate,
           maxDate: state.maxDate,
           daysDisabled: state.daysDisabled,
+          datesDisabled: state.datesDisabled,
           hoveredDate: state.hoveredDate,
           selectedDate: state.selectedDate,
           selectedRange: state.selectedRange,
diff --git a/src/datepicker/reducer/bs-datepicker.state.ts b/src/datepicker/reducer/bs-datepicker.state.ts
index f3c09e9470..70a9258990 100644
--- a/src/datepicker/reducer/bs-datepicker.state.ts
+++ b/src/datepicker/reducer/bs-datepicker.state.ts
@@ -31,6 +31,7 @@ export class BsDatepickerState
   minDate?: Date;
   maxDate?: Date;
   daysDisabled?: number[];
+  datesDisabled?: Date[];
   minMode?: BsDatepickerViewMode;
 
   hoveredDate?: Date;
diff --git a/src/datepicker/utils/bs-calendar-utils.ts b/src/datepicker/utils/bs-calendar-utils.ts
index 905c4e614f..00803e9db1 100644
--- a/src/datepicker/utils/bs-calendar-utils.ts
+++ b/src/datepicker/utils/bs-calendar-utils.ts
@@ -5,7 +5,8 @@ import {
   isBefore,
   shiftDate,
   endOf,
-  startOf
+  startOf,
+  isSame
 } from 'ngx-bootstrap/chronos';
 
 export function getStartingDayOfCalendar(date: Date,
@@ -43,3 +44,11 @@ export function isYearDisabled(date: Date, min: Date, max: Date): boolean {
 
   return minBound || maxBound;
 }
+
+export function isDisabledDate(date: Date, datesDisabled: Date[]): boolean {
+  if (datesDisabled === undefined || !datesDisabled || !datesDisabled.length) {
+    return false;
+  }
+
+  return datesDisabled.some((dateDisabled: Date) => isSame(date, dateDisabled, 'date'));
+}
diff --git a/src/dropdown/package.json b/src/dropdown/package.json
index 967dab85c3..2ae9f4589e 100644
--- a/src/dropdown/package.json
+++ b/src/dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/dropdown",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/locale/package.json b/src/locale/package.json
index cf2fad8d1b..2d93421668 100644
--- a/src/locale/package.json
+++ b/src/locale/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/locale",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/mini-ngrx/package.json b/src/mini-ngrx/package.json
index b4a93aff8d..d68c2ba8dc 100644
--- a/src/mini-ngrx/package.json
+++ b/src/mini-ngrx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/mini-ngrx",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/modal/package.json b/src/modal/package.json
index 64dc9c612c..fbaab12119 100644
--- a/src/modal/package.json
+++ b/src/modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/modal",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/package.json b/src/package.json
index 9bd786dc97..61061bdab2 100644
--- a/src/package.json
+++ b/src/package.json
@@ -5,5 +5,5 @@
     "@angular/core": "*",
     "@angular/common": "*"
   },
-  "version": "3.2.0"
+  "version": "3.3.0"
 }
diff --git a/src/pagination/package.json b/src/pagination/package.json
index e0515793ec..b97b7e196e 100644
--- a/src/pagination/package.json
+++ b/src/pagination/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/pagination",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/popover/package.json b/src/popover/package.json
index 901810edc7..8a6674420e 100644
--- a/src/popover/package.json
+++ b/src/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/popover",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/popover/popover-container.component.ts b/src/popover/popover-container.component.ts
index ce351adc07..68e568a1d9 100644
--- a/src/popover/popover-container.component.ts
+++ b/src/popover/popover-container.component.ts
@@ -10,20 +10,31 @@ import { isBs3 } from 'ngx-bootstrap/utils';
     '[class]':
       '"popover in popover-" + placement + " " + "bs-popover-" + placement + " " + placement + " " + containerClass',
     '[class.show]': '!isBs3',
+    '[class.bs3]': 'isBs3',
     role: 'tooltip',
     style: 'display:block;'
   },
   styles: [
     `
-    :host.bs-popover-top .arrow, :host.bs-popover-bottom .arrow {
-      left: 50%;
-      transform: translateX(-50%);
+    :host.bs3.popover-top {
+      margin-bottom: 10px;
     }
-    :host.bs-popover-left .arrow, :host.bs-popover-right .arrow {
-      top: 50%;
-      transform: translateY(-50%);
+    :host.bs3.popover.top>.arrow {
+      margin-left: -2px;
     }
-  `
+    :host.bs3.popover.top {
+      margin-bottom: 10px;
+    }
+    :host.popover.bottom>.arrow {
+      margin-left: -4px;
+    }
+    :host.bs3.bs-popover-left {
+      margin-right: .5rem;
+    }
+    :host.bs3.bs-popover-right .arrow, :host.bs3.bs-popover-left .arrow{
+      margin: .3rem 0;
+    }
+    `
   ],
   templateUrl: './popover-container.component.html'
 })
diff --git a/src/positioning/models/index.ts b/src/positioning/models/index.ts
new file mode 100644
index 0000000000..d2058603f9
--- /dev/null
+++ b/src/positioning/models/index.ts
@@ -0,0 +1,26 @@
+export interface Offsets {
+  bottom?: number;
+  height: number;
+  left?: number;
+  right?: number;
+  top?: number;
+  width: number;
+  marginTop?: number;
+  marginLeft?: number;
+}
+
+export interface Data {
+  instance: {
+    target: HTMLElement;
+    host: HTMLElement;
+    arrow: HTMLElement;
+  };
+  offsets: {
+    target: Offsets;
+    host: Offsets;
+    arrow: { [key: string]: string | number | HTMLElement };
+  };
+  positionFixed: boolean;
+  placement: string;
+  placementAuto: boolean;
+}
diff --git a/src/positioning/modifiers/arrow.ts b/src/positioning/modifiers/arrow.ts
new file mode 100644
index 0000000000..54a98d85be
--- /dev/null
+++ b/src/positioning/modifiers/arrow.ts
@@ -0,0 +1,58 @@
+import { getClientRect, getOuterSizes, getStyleComputedProperty } from '../utils';
+import { Data } from '../models';
+
+export function arrow(data: Data) {
+  let targetOffsets = data.offsets.target;
+  // if arrowElement is a string, suppose it's a CSS selector
+  const arrowElement: HTMLElement | null = data.instance.target.querySelector('.arrow');
+
+  // if arrowElement is not found, don't run the modifier
+  if (!arrowElement) {
+    return data;
+  }
+
+  const isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
+
+  const len = isVertical ? 'height' : 'width';
+  const sideCapitalized = isVertical ? 'Top' : 'Left';
+  const side = sideCapitalized.toLowerCase();
+  const altSide = isVertical ? 'left' : 'top';
+  const opSide = isVertical ? 'bottom' : 'right';
+  const arrowElementSize = getOuterSizes(arrowElement)[len];
+
+  // top/left side
+  if (data.offsets.host[opSide] - arrowElementSize < targetOffsets[side]) {
+    targetOffsets[side] -=
+      targetOffsets[side] - (data.offsets.host[opSide] - arrowElementSize);
+  }
+  // bottom/right side
+  if (Number(data.offsets.host[side]) + Number(arrowElementSize) > targetOffsets[opSide]) {
+    targetOffsets[side] +=
+      Number(data.offsets.host[side]) + Number(arrowElementSize) - Number(targetOffsets[opSide]);
+  }
+  targetOffsets = getClientRect(targetOffsets);
+
+  // compute center of the target
+  const center = Number(data.offsets.host[side]) + Number(data.offsets.host[len] / 2 - arrowElementSize / 2);
+
+  // Compute the sideValue using the updated target offsets
+  // take target margin in account because we don't have this info available
+  const css = getStyleComputedProperty(data.instance.target);
+
+  const targetMarginSide = parseFloat(css[`margin${sideCapitalized}`]);
+  const targetBorderSide = parseFloat(css[`border${sideCapitalized}Width`]);
+  let sideValue =
+    center - targetOffsets[side] - targetMarginSide - targetBorderSide;
+
+  // prevent arrowElement from being placed not contiguously to its target
+  sideValue = Math.max(Math.min(targetOffsets[len] - arrowElementSize, sideValue), 0);
+
+  data.offsets.arrow = {
+    [side]: Math.round(sideValue),
+    [altSide]: '' // make sure to unset any eventual altSide value from the DOM node
+  };
+
+  data.instance.arrow = arrowElement;
+
+  return data;
+}
diff --git a/src/positioning/modifiers/flip.ts b/src/positioning/modifiers/flip.ts
new file mode 100644
index 0000000000..991822f0c1
--- /dev/null
+++ b/src/positioning/modifiers/flip.ts
@@ -0,0 +1,93 @@
+import {
+  computeAutoPlacement,
+  getBoundaries, getClientRect,
+  getOppositePlacement,
+  getOppositeVariation,
+  getTargetOffsets
+} from '../utils';
+
+import { Data } from '../models';
+
+export function flip(data: Data): Data {
+  data.offsets.target = getClientRect(data.offsets.target);
+
+  const boundaries = getBoundaries(
+    data.instance.target,
+    data.instance.host,
+    0, // padding
+    'viewport',
+    false // positionFixed
+  );
+
+  let placement = data.placement.split(' ')[0];
+  let variation = data.placement.split(' ')[1] || '';
+
+  const adaptivePosition = variation
+    ? getOppositePlacement(placement)
+    : computeAutoPlacement('auto', data.offsets.host, data.instance.target, data.instance.host, 'viewport', 0);
+
+  const flipOrder = [placement, adaptivePosition];
+
+  /* tslint:disable-next-line: cyclomatic-complexity */
+  flipOrder.forEach((step, index) => {
+    if (placement !== step || flipOrder.length === index + 1) {
+      return data;
+    }
+
+    placement = data.placement.split(' ')[0];
+
+    // using floor because the host offsets may contain decimals we are not going to consider here
+    const overlapsRef =
+      (placement === 'left' &&
+        Math.floor(data.offsets.target.right) > Math.floor(data.offsets.host.left)) ||
+      (placement === 'right' &&
+        Math.floor(data.offsets.target.left) < Math.floor(data.offsets.host.right)) ||
+      (placement === 'top' &&
+        Math.floor(data.offsets.target.bottom) > Math.floor(data.offsets.host.top)) ||
+      (placement === 'bottom' &&
+        Math.floor(data.offsets.target.top) < Math.floor(data.offsets.host.bottom));
+
+    const overflowsLeft = Math.floor(data.offsets.target.left) < Math.floor(boundaries.left);
+    const overflowsRight = Math.floor(data.offsets.target.right) > Math.floor(boundaries.right);
+    const overflowsTop = Math.floor(data.offsets.target.top) < Math.floor(boundaries.top);
+    const overflowsBottom = Math.floor(data.offsets.target.bottom) > Math.floor(boundaries.bottom);
+
+    const overflowsBoundaries =
+      (placement === 'left' && overflowsLeft) ||
+      (placement === 'right' && overflowsRight) ||
+      (placement === 'top' && overflowsTop) ||
+      (placement === 'bottom' && overflowsBottom);
+
+    // flip the variation if required
+    const isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
+    const flippedVariation =
+      ((isVertical && variation === 'left' && overflowsLeft) ||
+        (isVertical && variation === 'right' && overflowsRight) ||
+        (!isVertical && variation === 'left' && overflowsTop) ||
+        (!isVertical && variation === 'right' && overflowsBottom));
+
+    if (overlapsRef || overflowsBoundaries || flippedVariation) {
+      // this boolean to detect any flip loop
+      if (overlapsRef || overflowsBoundaries) {
+        placement = flipOrder[index + 1];
+      }
+
+      if (flippedVariation) {
+        variation = getOppositeVariation(variation);
+      }
+
+      data.placement = placement + (variation ? ` ${variation}` : '');
+
+      data.offsets.target = {
+        ...data.offsets.target,
+        ...getTargetOffsets(
+          data.instance.target,
+          data.offsets.host,
+          data.placement
+        )
+      };
+    }
+  });
+
+  return data;
+}
diff --git a/src/positioning/modifiers/index.ts b/src/positioning/modifiers/index.ts
new file mode 100644
index 0000000000..9449224407
--- /dev/null
+++ b/src/positioning/modifiers/index.ts
@@ -0,0 +1,5 @@
+export { arrow } from './arrow';
+export { flip } from './flip';
+export { initData } from './initData';
+export { preventOverflow } from './preventOverflow';
+export { shift } from './shift';
diff --git a/src/positioning/modifiers/initData.ts b/src/positioning/modifiers/initData.ts
new file mode 100644
index 0000000000..e3e874ca6e
--- /dev/null
+++ b/src/positioning/modifiers/initData.ts
@@ -0,0 +1,32 @@
+import {
+  computeAutoPlacement,
+  getReferenceOffsets,
+  getTargetOffsets
+} from '../utils';
+
+import { Data } from '../models';
+
+export function initData(targetElement: HTMLElement, hostElement: HTMLElement, position: string): Data {
+
+  const hostElPosition = getReferenceOffsets(targetElement, hostElement);
+  const targetOffset = getTargetOffsets(targetElement, hostElPosition, position);
+
+  const placement = computeAutoPlacement(position, hostElPosition, targetElement, hostElement, 'viewport', 0);
+  const placementAuto = position.indexOf('auto') !== -1;
+
+  return {
+    instance: {
+      target: targetElement,
+      host: hostElement,
+      arrow: null
+    },
+    offsets: {
+      target: targetOffset,
+      host: hostElPosition,
+      arrow: null
+    },
+    positionFixed: false,
+    placement,
+    placementAuto
+  };
+}
diff --git a/src/positioning/modifiers/preventOverflow.ts b/src/positioning/modifiers/preventOverflow.ts
new file mode 100644
index 0000000000..f6ce48899d
--- /dev/null
+++ b/src/positioning/modifiers/preventOverflow.ts
@@ -0,0 +1,75 @@
+import { getBoundaries } from '../utils';
+import { Data } from '../models';
+
+export function preventOverflow(data: Data) {
+
+  // NOTE: DOM access here
+  // resets the targetOffsets's position so that the document size can be calculated excluding
+  // the size of the targetOffsets element itself
+  const transformProp = 'transform';
+  const targetStyles = data.instance.target.style; // assignment to help minification
+  const { top, left, [transformProp]: transform } = targetStyles;
+  targetStyles.top = '';
+  targetStyles.left = '';
+  targetStyles[transformProp] = '';
+
+  const boundaries = getBoundaries(
+    data.instance.target,
+    data.instance.host,
+    0, // padding
+    'scrollParent',
+    false // positionFixed
+  );
+
+  // NOTE: DOM access here
+  // restores the original style properties after the offsets have been computed
+  targetStyles.top = top;
+  targetStyles.left = left;
+  targetStyles[transformProp] = transform;
+
+  const order = ['left', 'right', 'top', 'bottom'];
+
+  const check = {
+    primary(placement: string) {
+      let value = data.offsets.target[placement];
+      if (
+        data.offsets.target[placement] < boundaries[placement] &&
+        !false // options.escapeWithReference
+      ) {
+        value = Math.max(data.offsets.target[placement], boundaries[placement]);
+      }
+
+      return { [placement]: value };
+    },
+    secondary(placement: string) {
+      const mainSide = placement === 'right' ? 'left' : 'top';
+      let value = data.offsets.target[mainSide];
+      if (
+        data.offsets.target[placement] > boundaries[placement] &&
+        !false // escapeWithReference
+      ) {
+        value = Math.min(
+          data.offsets.target[mainSide],
+          boundaries[placement] -
+          (placement === 'right' ? data.offsets.target.width : data.offsets.target.height)
+        );
+      }
+
+      return { [mainSide]: value };
+    }
+  };
+
+  let side: string;
+
+  order.forEach(placement => {
+    side = ['left', 'top']
+      .indexOf(placement) !== -1
+      ? 'primary'
+      : 'secondary';
+
+    data.offsets.target = { ...data.offsets.target, ...check[side](placement) };
+
+  });
+
+  return data;
+}
diff --git a/src/positioning/modifiers/shift.ts b/src/positioning/modifiers/shift.ts
new file mode 100644
index 0000000000..2cf608cea6
--- /dev/null
+++ b/src/positioning/modifiers/shift.ts
@@ -0,0 +1,25 @@
+import { Data } from '../models';
+
+export function shift(data: Data): Data {
+  const placement = data.placement;
+  const basePlacement = placement.split(' ')[0];
+  const shiftvariation = placement.split(' ')[1];
+
+  if (shiftvariation) {
+    const { host, target } = data.offsets;
+    const isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
+    const side = isVertical ? 'left' : 'top';
+    const measurement = isVertical ? 'width' : 'height';
+
+    const shiftOffsets = {
+      left: { [side]: host[side] },
+      right: {
+        [side]: host[side] + host[measurement] - host[measurement]
+      }
+    };
+
+    data.offsets.target = { ...target, ...shiftOffsets[shiftvariation] };
+  }
+
+  return data;
+}
diff --git a/src/positioning/ng-positioning.ts b/src/positioning/ng-positioning.ts
index 975f073562..5f497cc9fa 100644
--- a/src/positioning/ng-positioning.ts
+++ b/src/positioning/ng-positioning.ts
@@ -1,250 +1,36 @@
 /**
  * @copyright Valor Software
- * @copyright Angular ng-bootstrap team
+ * @copyright Federico Zivolo and contributors
  */
+import { Renderer2 } from '@angular/core';
 
-// previous version:
-// https://github.com/angular-ui/bootstrap/blob/07c31d0731f7cb068a1932b8e01d2312b796b4ec/src/position/position.js
-// tslint:disable
-export class Positioning {
-  public position(element: HTMLElement, round = true): ClientRect {
-    let elPosition: ClientRect;
-    let parentOffset: ClientRect = {
-      width: 0,
-      height: 0,
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0
-    };
-
-    if (this.getStyle(element, 'position') === 'fixed') {
-      const bcRect = element.getBoundingClientRect();
-      elPosition = {
-        width: bcRect.width,
-        height: bcRect.height,
-        top: bcRect.top,
-        bottom: bcRect.bottom,
-        left: bcRect.left,
-        right: bcRect.right
-      };
-    } else {
-      const offsetParentEl = this.offsetParent(element);
-
-      elPosition = this.offset(element, false);
-
-      if (offsetParentEl !== document.documentElement) {
-        parentOffset = this.offset(offsetParentEl, false);
-      }
+import { getReferenceOffsets, setAllStyles } from './utils';
 
-      parentOffset.top += offsetParentEl.clientTop;
-      parentOffset.left += offsetParentEl.clientLeft;
-    }
+import { arrow, flip, preventOverflow, shift, initData } from './modifiers';
+import { Data, Offsets } from './models';
 
-    elPosition.top -= parentOffset.top;
-    elPosition.bottom -= parentOffset.top;
-    elPosition.left -= parentOffset.left;
-    elPosition.right -= parentOffset.left;
 
-    if (round) {
-      elPosition.top = Math.round(elPosition.top);
-      elPosition.bottom = Math.round(elPosition.bottom);
-      elPosition.left = Math.round(elPosition.left);
-      elPosition.right = Math.round(elPosition.right);
-    }
-
-    return elPosition;
+export class Positioning {
+  position(hostElement: HTMLElement, targetElement: HTMLElement, round = true): Offsets {
+    return this.offset(hostElement, targetElement, false);
   }
 
-  public offset(element: HTMLElement, round = true): ClientRect {
-    const elBcr = element.getBoundingClientRect();
-    const viewportOffset = {
-      top: window.pageYOffset - document.documentElement.clientTop,
-      left: window.pageXOffset - document.documentElement.clientLeft
-    };
-
-    let elOffset = {
-      height: elBcr.height || element.offsetHeight,
-      width: elBcr.width || element.offsetWidth,
-      top: elBcr.top + viewportOffset.top,
-      bottom: elBcr.bottom + viewportOffset.top,
-      left: elBcr.left + viewportOffset.left,
-      right: elBcr.right + viewportOffset.left
-    };
-
-    if (round) {
-      elOffset.height = Math.round(elOffset.height);
-      elOffset.width = Math.round(elOffset.width);
-      elOffset.top = Math.round(elOffset.top);
-      elOffset.bottom = Math.round(elOffset.bottom);
-      elOffset.left = Math.round(elOffset.left);
-      elOffset.right = Math.round(elOffset.right);
-    }
-
-    return elOffset;
+  offset(hostElement: HTMLElement, targetElement: HTMLElement, round = true): Offsets {
+    return getReferenceOffsets(targetElement, hostElement);
   }
 
-  public positionElements(
+  positionElements(
     hostElement: HTMLElement,
     targetElement: HTMLElement,
-    placement: string,
+    position: string,
     appendToBody?: boolean
-  ): ClientRect {
-    const hostElPosition = appendToBody
-      ? this.offset(hostElement, false)
-      : this.position(hostElement, false);
-    const targetElStyles = this.getAllStyles(targetElement);
-    const targetElBCR = targetElement.getBoundingClientRect();
-    let placementPrimary = placement.split(' ')[0] || 'top';
-    const placementSecondary = placement.split(' ')[1] || 'center';
-
-    let targetElPosition: ClientRect = {
-      height: targetElBCR.height || targetElement.offsetHeight,
-      width: targetElBCR.width || targetElement.offsetWidth,
-      top: 0,
-      bottom: targetElBCR.height || targetElement.offsetHeight,
-      left: 0,
-      right: targetElBCR.width || targetElement.offsetWidth
-    };
-
-    const shiftHeight: any = {
-      top: hostElPosition.top,
-      center:
-        hostElPosition.top +
-        hostElPosition.height / 2 -
-        targetElPosition.height / 2,
-      bottom: hostElPosition.top + hostElPosition.height
-    };
-    const shiftWidth: any = {
-      left: hostElPosition.left,
-      center:
-        hostElPosition.left +
-        hostElPosition.width / 2 -
-        targetElPosition.width / 2,
-      right: hostElPosition.left + hostElPosition.width
-    };    
-
-    if (placementPrimary === 'auto') {
-      let newPlacementPrimary = this.autoPosition(
-        targetElPosition,
-        hostElPosition,
-        targetElement,
-        placementSecondary
-      );
-      if (!newPlacementPrimary)
-        newPlacementPrimary = this.autoPosition(
-          targetElPosition,
-          hostElPosition,
-          targetElement
-        );
-      if (newPlacementPrimary) placementPrimary = newPlacementPrimary;
-      targetElement.classList.add(placementPrimary);
-    }
-
-    switch (placementPrimary) {
-      case 'top':
-        targetElPosition.top =
-          hostElPosition.top -
-          (targetElPosition.height +
-            parseFloat(targetElStyles.marginBottom));
-        targetElPosition.bottom +=
-          hostElPosition.top - targetElPosition.height;
-        targetElPosition.left = shiftWidth[placementSecondary];
-        targetElPosition.right += shiftWidth[placementSecondary];
-        break;
-      case 'bottom':
-        targetElPosition.top = shiftHeight[placementPrimary];
-        targetElPosition.bottom += shiftHeight[placementPrimary];
-        targetElPosition.left = shiftWidth[placementSecondary];
-        targetElPosition.right += shiftWidth[placementSecondary];
-        break;
-      case 'left':
-        targetElPosition.top = shiftHeight[placementSecondary];
-        targetElPosition.bottom += shiftHeight[placementSecondary];
-        targetElPosition.left =
-          hostElPosition.left -
-          (targetElPosition.width + parseFloat(targetElStyles.marginRight));
-        targetElPosition.right +=
-          hostElPosition.left - targetElPosition.width;
-        break;
-      case 'right':
-        targetElPosition.top = shiftHeight[placementSecondary];
-        targetElPosition.bottom += shiftHeight[placementSecondary];
-        targetElPosition.left = shiftWidth[placementPrimary];
-        targetElPosition.right += shiftWidth[placementPrimary];
-        break;
-    }
-
-    targetElPosition.top = Math.round(targetElPosition.top);
-    targetElPosition.bottom = Math.round(targetElPosition.bottom);
-    targetElPosition.left = Math.round(targetElPosition.left);
-    targetElPosition.right = Math.round(targetElPosition.right);
+  ): Data {
+    const chainOfModifiers = [flip, shift, preventOverflow, arrow];
 
-    return targetElPosition;
-  }
-
-  private autoPosition(
-    targetElPosition: ClientRect,
-    hostElPosition: ClientRect,
-    targetElement: HTMLElement,
-    preferredPosition?: string
-  ) {
-    if (
-      (!preferredPosition || preferredPosition === 'right') &&
-      targetElPosition.left + hostElPosition.left - targetElPosition.width <
-        0
-    ) {
-      return 'right';
-    } else if (
-      (!preferredPosition || preferredPosition === 'top') &&
-      targetElPosition.bottom +
-        hostElPosition.bottom +
-        targetElPosition.height >
-        window.innerHeight
-    ) {
-      return 'top';
-    } else if (
-      (!preferredPosition || preferredPosition === 'bottom') &&
-      targetElPosition.top + hostElPosition.top - targetElPosition.height < 0
-    ) {
-      return 'bottom';
-    } else if (
-      (!preferredPosition || preferredPosition === 'left') &&
-      targetElPosition.right +
-        hostElPosition.right +
-        targetElPosition.width >
-        window.innerWidth
-    ) {
-      return 'left';
-    }
-    return null;
-  }
-
-  private getAllStyles(element: HTMLElement) {
-    return window.getComputedStyle(element);
-  }
-
-  private getStyle(element: HTMLElement, prop: string): string {
-    return (this.getAllStyles(element) as any)[prop];
-  }
-
-  private isStaticPositioned(element: HTMLElement): boolean {
-    return (this.getStyle(element, 'position') || 'static') === 'static';
-  }
-
-  private offsetParent(element: HTMLElement): HTMLElement {
-    let offsetParentEl =
-      <HTMLElement>element.offsetParent || document.documentElement;
-
-    while (
-      offsetParentEl &&
-      offsetParentEl !== document.documentElement &&
-      this.isStaticPositioned(offsetParentEl)
-    ) {
-      offsetParentEl = <HTMLElement>offsetParentEl.offsetParent;
-    }
-
-    return offsetParentEl || document.documentElement;
+    return chainOfModifiers.reduce(
+      (modifiedData, modifier) => modifier(modifiedData),
+      initData(targetElement, hostElement, position)
+    );
   }
 }
 
@@ -254,15 +40,16 @@ export function positionElements(
   hostElement: HTMLElement,
   targetElement: HTMLElement,
   placement: string,
-  appendToBody?: boolean
+  appendToBody?: boolean,
+  renderer?: Renderer2
 ): void {
-  const pos = positionService.positionElements(
+
+  const data = positionService.positionElements(
     hostElement,
     targetElement,
     placement,
     appendToBody
   );
 
-  targetElement.style.top = `${pos.top}px`;
-  targetElement.style.left = `${pos.left}px`;
+  setAllStyles(data, renderer);
 }
diff --git a/src/positioning/package.json b/src/positioning/package.json
index 4fd8868099..1e616f900b 100644
--- a/src/positioning/package.json
+++ b/src/positioning/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/positioning",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/positioning/positioning.service.ts b/src/positioning/positioning.service.ts
index ce5360ac0e..a58056d780 100644
--- a/src/positioning/positioning.service.ts
+++ b/src/positioning/positioning.service.ts
@@ -1,5 +1,8 @@
-import { Injectable, ElementRef } from '@angular/core';
+import { Injectable, ElementRef, RendererFactory2 } from '@angular/core';
+
 import { positionElements } from './ng-positioning';
+import { fromEvent, merge, of, animationFrameScheduler, Subject } from 'rxjs';
+
 
 export interface PositioningOptions {
   /** The DOM element, ElementRef, or a selector string of an element which will be moved */
@@ -34,18 +37,48 @@ export interface PositioningOptions {
   appendToBody?: boolean;
 }
 
+
 @Injectable()
 export class PositioningService {
+  private update$$ = new Subject<null>();
+
+  private events$: any = merge(
+    fromEvent(window, 'scroll'),
+    fromEvent(window, 'resize'),
+    of(0, animationFrameScheduler),
+    this.update$$
+  );
+
+  private positionElements = new Map();
+
+  constructor(rendererFactory: RendererFactory2) {
+    this.events$
+      .subscribe(() => {
+        this.positionElements
+          .forEach((positionElement: PositioningOptions) => {
+            positionElements(
+              _getHtmlElement(positionElement.target),
+              _getHtmlElement(positionElement.element),
+              positionElement.attachment,
+              positionElement.appendToBody,
+              rendererFactory.createRenderer(null, null)
+            );
+          });
+      });
+  }
+
   position(options: PositioningOptions): void {
-    const {element, target, attachment, appendToBody} = options;
-    positionElements(
-      _getHtmlElement(target),
-      _getHtmlElement(element),
-      attachment,
-      appendToBody
-    );
+    this.addPositionElement(options);
+    this.update$$.next();
   }
 
+  addPositionElement(options: PositioningOptions): void {
+    this.positionElements.set(_getHtmlElement(options.element), options);
+  }
+
+  deletePositionElement(elRef: ElementRef): void {
+    this.positionElements.delete(_getHtmlElement(elRef));
+  }
 }
 
 function _getHtmlElement(element: HTMLElement | ElementRef | string): HTMLElement {
diff --git a/src/positioning/utils/computeAutoPlacement.ts b/src/positioning/utils/computeAutoPlacement.ts
new file mode 100644
index 0000000000..243da4b3e6
--- /dev/null
+++ b/src/positioning/utils/computeAutoPlacement.ts
@@ -0,0 +1,76 @@
+/**
+ * Utility used to transform the `auto` placement to the placement with more
+ * available space.
+ */
+import { getBoundaries } from './getBoundaries';
+import { Offsets } from '../models';
+
+function getArea({ width, height }: { [key: string]: number }) {
+  return width * height;
+}
+
+export function computeAutoPlacement(
+  placement: string,
+  refRect: Offsets,
+  target: HTMLElement,
+  host: HTMLElement,
+  boundariesElement: string,
+  padding = 0
+) {
+  if (placement.indexOf('auto') === -1) {
+    return placement;
+  }
+
+  if (placement.indexOf('auto') !== -1
+    && (placement.indexOf('left') !== -1
+    || placement.indexOf('right') !== -1
+    || placement.indexOf('top') !== -1
+    || placement.indexOf('bottom') !== -1)) {
+
+    return placement.split(' ')[1] || '';
+  }
+
+  const boundaries = getBoundaries(target, host, padding, boundariesElement);
+
+  const rects: any = {
+    top: {
+      width: boundaries.width,
+      height: refRect.top - boundaries.top
+    },
+    right: {
+      width: boundaries.right - refRect.right,
+      height: boundaries.height
+    },
+    bottom: {
+      width: boundaries.width,
+      height: boundaries.bottom - refRect.bottom
+    },
+    left: {
+      width: refRect.left - boundaries.left,
+      height: boundaries.height
+    }
+  };
+
+  const sortedAreas = Object.keys(rects)
+    .map(key => ({
+      key,
+      ...rects[key],
+      area: getArea(rects[key])
+    }))
+    .sort((a, b) => b.area - a.area);
+
+  const filteredAreas = sortedAreas.filter(
+    ({ width, height }) =>
+      width >= target.clientWidth && height >= target.clientHeight
+  );
+
+  const computedPlacement: string = filteredAreas.length > 0
+    ? filteredAreas[0].key
+    : sortedAreas[0].key;
+
+  const variation = placement.split(' ')[1];
+
+  target.className = target.className.replace(/auto/g, computedPlacement);
+
+  return computedPlacement + (variation ? `-${variation}` : '');
+}
diff --git a/src/positioning/utils/findCommonOffsetParent.ts b/src/positioning/utils/findCommonOffsetParent.ts
new file mode 100644
index 0000000000..278ed8de0d
--- /dev/null
+++ b/src/positioning/utils/findCommonOffsetParent.ts
@@ -0,0 +1,47 @@
+/**
+ * Finds the offset parent common to the two provided nodes
+ */
+import { isOffsetContainer } from './isOffsetContainer';
+import { getRoot } from './getRoot';
+import { getOffsetParent } from './getOffsetParent';
+
+export function findCommonOffsetParent(element1: HTMLElement, element2: HTMLElement): any {
+  // This check is needed to avoid errors in case one of the elements isn't defined for any reason
+  if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
+    return document.documentElement;
+  }
+
+  // Here we make sure to give as "start" the element that comes first in the DOM
+  /* tslint:disable-next-line: no-bitwise */
+  const order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
+
+  const start = order ? element1 : element2;
+  const end = order ? element2 : element1;
+
+  // Get common ancestor container
+  const range = document.createRange();
+  range.setStart(start, 0);
+  range.setEnd(end, 0);
+  const { commonAncestorContainer } = range;
+
+  // Both nodes are inside #document
+  if (
+    (element1 !== commonAncestorContainer &&
+      element2 !== commonAncestorContainer) ||
+    start.contains(end)
+  ) {
+    if (isOffsetContainer(commonAncestorContainer)) {
+      return commonAncestorContainer;
+    }
+
+    return getOffsetParent(commonAncestorContainer);
+  }
+
+  // one of the nodes is inside shadowDOM, find which one
+  const element1root = getRoot(element1);
+  if (element1root.host) {
+    return findCommonOffsetParent(element1root.host, element2);
+  } else {
+    return findCommonOffsetParent(element1, getRoot(element2).host);
+  }
+}
diff --git a/src/positioning/utils/getBordersSize.ts b/src/positioning/utils/getBordersSize.ts
new file mode 100644
index 0000000000..392c01f86e
--- /dev/null
+++ b/src/positioning/utils/getBordersSize.ts
@@ -0,0 +1,13 @@
+/**
+ * Helper to detect borders of a given element
+ */
+
+export function getBordersSize(styles: CSSStyleDeclaration, axis: string) {
+  const sideA = axis === 'x' ? 'Left' : 'Top';
+  const sideB = sideA === 'Left' ? 'Right' : 'Bottom';
+
+  return (
+    parseFloat(styles[`border${sideA}Width`]) +
+    parseFloat(styles[`border${sideB}Width`])
+  );
+}
diff --git a/src/positioning/utils/getBoundaries.ts b/src/positioning/utils/getBoundaries.ts
new file mode 100644
index 0000000000..0c3d8f0a1b
--- /dev/null
+++ b/src/positioning/utils/getBoundaries.ts
@@ -0,0 +1,68 @@
+/**
+ * Computed the boundaries limits and return them
+ */
+import { getScrollParent } from './getScrollParent';
+import { getParentNode } from './getParentNode';
+import { findCommonOffsetParent } from './findCommonOffsetParent';
+import { getOffsetRectRelativeToArbitraryNode } from './getOffsetRectRelativeToArbitraryNode';
+import { getViewportOffsetRectRelativeToArtbitraryNode } from './getViewportOffsetRectRelativeToArtbitraryNode';
+import { getWindowSizes } from './getWindowSizes';
+import { isFixed } from './isFixed';
+import { getFixedPositionOffsetParent } from './getFixedPositionOffsetParent';
+
+export function getBoundaries(
+  target: HTMLElement,
+  host: HTMLElement,
+  padding = 0,
+  boundariesElement: string,
+  fixedPosition = false
+) {
+  // NOTE: 1 DOM access here
+
+  let boundaries: any = { top: 0, left: 0 };
+  const offsetParent = fixedPosition ? getFixedPositionOffsetParent(target) : findCommonOffsetParent(target, host);
+
+  // Handle viewport case
+  if (boundariesElement === 'viewport') {
+    boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
+  } else {
+    // Handle other cases based on DOM element used as boundaries
+    let boundariesNode;
+    if (boundariesElement === 'scrollParent') {
+      boundariesNode = getScrollParent(getParentNode(host));
+      if (boundariesNode.nodeName === 'BODY') {
+        boundariesNode = target.ownerDocument.documentElement;
+      }
+    } else if (boundariesElement === 'window') {
+      boundariesNode = target.ownerDocument.documentElement;
+    } else {
+      boundariesNode = boundariesElement;
+    }
+
+    const offsets = getOffsetRectRelativeToArbitraryNode(
+      boundariesNode,
+      offsetParent,
+      fixedPosition
+    );
+
+    // In case of HTML, we need a different computation
+    if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
+      const { height, width } = getWindowSizes(target.ownerDocument);
+      boundaries.top += offsets.top - offsets.marginTop;
+      boundaries.bottom = Number(height) + Number(offsets.top);
+      boundaries.left += offsets.left - offsets.marginLeft;
+      boundaries.right = Number(width) + Number(offsets.left);
+    } else {
+      // for all the other DOM elements, this one is good
+      boundaries = offsets;
+    }
+  }
+
+  // Add paddings
+  boundaries.left += padding;
+  boundaries.top += padding;
+  boundaries.right -= padding;
+  boundaries.bottom -= padding;
+
+  return boundaries;
+}
diff --git a/src/positioning/utils/getBoundingClientRect.ts b/src/positioning/utils/getBoundingClientRect.ts
new file mode 100644
index 0000000000..07548774a4
--- /dev/null
+++ b/src/positioning/utils/getBoundingClientRect.ts
@@ -0,0 +1,63 @@
+/**
+ * Get bounding client rect of given element
+ */
+import { getStyleComputedProperty } from './getStyleComputedProperty';
+import { getBordersSize } from './getBordersSize';
+import { getWindowSizes } from './getWindowSizes';
+import { getScroll } from './getScroll';
+import { getClientRect } from './getClientRect';
+import { isIE } from './isIE';
+import { Offsets } from '../models';
+
+export function getBoundingClientRect(element: HTMLElement): Offsets {
+  let rect: any = {};
+
+  // IE10 10 FIX: Please, don't ask, the element isn't
+  // considered in DOM in some circumstances...
+  // This isn't reproducible in IE10 compatibility mode of IE11
+  try {
+    if (isIE(10)) {
+      rect = element.getBoundingClientRect();
+      const scrollTop = getScroll(element, 'top');
+      const scrollLeft = getScroll(element, 'left');
+      rect.top += scrollTop;
+      rect.left += scrollLeft;
+      rect.bottom += scrollTop;
+      rect.right += scrollLeft;
+    } else {
+      rect = element.getBoundingClientRect();
+    }
+  } catch (e) {
+    return undefined;
+  }
+
+  const result: any = {
+    left: rect.left,
+    top: rect.top,
+    width: rect.right - rect.left,
+    height: rect.bottom - rect.top
+  };
+
+  // subtract scrollbar size from sizes
+  const sizes: any = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
+  const width =
+    sizes.width || element.clientWidth || result.right - result.left;
+  const height =
+    sizes.height || element.clientHeight || result.bottom - result.top;
+
+  let horizScrollbar = element.offsetWidth - width;
+  let vertScrollbar = element.offsetHeight - height;
+
+  // if an hypothetical scrollbar is detected, we must be sure it's not a `border`
+  // we make this check conditional for performance reasons
+  if (horizScrollbar || vertScrollbar) {
+    const styles = getStyleComputedProperty(element);
+    horizScrollbar -= getBordersSize(styles, 'x');
+    vertScrollbar -= getBordersSize(styles, 'y');
+
+    result.width -= horizScrollbar;
+    result.height -= vertScrollbar;
+  }
+
+  return getClientRect(result);
+}
diff --git a/src/positioning/utils/getClientRect.ts b/src/positioning/utils/getClientRect.ts
new file mode 100644
index 0000000000..d2e07621d1
--- /dev/null
+++ b/src/positioning/utils/getClientRect.ts
@@ -0,0 +1,12 @@
+/**
+ * Given element offsets, generate an output similar to getBoundingClientRect
+ */
+import { Offsets } from '../models';
+
+export function getClientRect(offsets: Offsets): Offsets {
+  return {
+    ...offsets,
+    right: offsets.left + offsets.width,
+    bottom: offsets.top + offsets.height
+  };
+}
diff --git a/src/positioning/utils/getFixedPositionOffsetParent.ts b/src/positioning/utils/getFixedPositionOffsetParent.ts
new file mode 100644
index 0000000000..cad33233d8
--- /dev/null
+++ b/src/positioning/utils/getFixedPositionOffsetParent.ts
@@ -0,0 +1,21 @@
+/**
+ * Finds the first parent of an element that has a transformed property defined
+ */
+
+import { getStyleComputedProperty } from './getStyleComputedProperty';
+import { isIE } from './isIE';
+
+export function getFixedPositionOffsetParent(element: HTMLElement): HTMLElement {
+  // This check is needed to avoid errors in case one of the elements isn't defined for any reason
+  if (!element || !element.parentElement || isIE()) {
+   return document.documentElement;
+  }
+
+  let el = element.parentElement;
+
+  while (el && getStyleComputedProperty(el, 'transform') === 'none') {
+    el = el.parentElement;
+  }
+
+  return el || document.documentElement;
+}
diff --git a/src/positioning/utils/getOffsetParent.ts b/src/positioning/utils/getOffsetParent.ts
new file mode 100644
index 0000000000..50f437bfe6
--- /dev/null
+++ b/src/positioning/utils/getOffsetParent.ts
@@ -0,0 +1,41 @@
+/**
+ * Returns the offset parent of the given element
+ */
+import { getStyleComputedProperty } from './getStyleComputedProperty';
+import { isIE } from './isIE';
+
+export function getOffsetParent(element: any): any {
+  if (!element) {
+    return document.documentElement;
+  }
+
+  const noOffsetParent = isIE(10) ? document.body : null;
+
+  // NOTE: 1 DOM access here
+  let offsetParent = element.offsetParent || null;
+  // Skip hidden elements which don't have an offsetParent
+
+  let sibling: any;
+
+  while (offsetParent === noOffsetParent && element.nextElementSibling) {
+    sibling = element.nextElementSibling;
+    offsetParent = sibling.offsetParent;
+  }
+
+  const nodeName = offsetParent && offsetParent.nodeName;
+
+  if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
+    return sibling ? sibling.ownerDocument.documentElement : document.documentElement;
+  }
+
+  // .offsetParent will return the closest TH, TD or TABLE in case
+  // no offsetParent is present, I hate this job...
+  if (
+    ['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 &&
+    getStyleComputedProperty(offsetParent, 'position') === 'static'
+  ) {
+    return getOffsetParent(offsetParent);
+  }
+
+  return offsetParent;
+}
diff --git a/src/positioning/utils/getOffsetRectRelativeToArbitraryNode.ts b/src/positioning/utils/getOffsetRectRelativeToArbitraryNode.ts
new file mode 100644
index 0000000000..585bd26f7c
--- /dev/null
+++ b/src/positioning/utils/getOffsetRectRelativeToArbitraryNode.ts
@@ -0,0 +1,67 @@
+import { getBoundingClientRect } from './getBoundingClientRect';
+import { getClientRect } from './getClientRect';
+import { getScrollParent } from './getScrollParent';
+import { getStyleComputedProperty } from './getStyleComputedProperty';
+import { includeScroll } from './includeScroll';
+import { isIE as runIsIE } from './isIE';
+import { Offsets } from '../models';
+
+export function getOffsetRectRelativeToArbitraryNode(
+  children: HTMLElement,
+  parent: HTMLElement,
+  fixedPosition = false
+): Offsets {
+  const isIE10 = runIsIE(10);
+  const isHTML = parent.nodeName === 'HTML';
+  const childrenRect: any = getBoundingClientRect(children);
+  const parentRect: any = getBoundingClientRect(parent);
+  const scrollParent = getScrollParent(children);
+
+  const styles = getStyleComputedProperty(parent);
+  const borderTopWidth = parseFloat(styles.borderTopWidth);
+  const borderLeftWidth = parseFloat(styles.borderLeftWidth);
+
+  // In cases where the parent is fixed, we must ignore negative scroll in offset calc
+  if (fixedPosition && isHTML) {
+    parentRect.top = Math.max(parentRect.top, 0);
+    parentRect.left = Math.max(parentRect.left, 0);
+  }
+
+  let offsets: Offsets = getClientRect({
+    top: childrenRect.top - parentRect.top - borderTopWidth,
+    left: childrenRect.left - parentRect.left - borderLeftWidth,
+    width: childrenRect.width,
+    height: childrenRect.height
+  });
+
+  offsets.marginTop = 0;
+  offsets.marginLeft = 0;
+
+  // Subtract margins of documentElement in case it's being used as parent
+  // we do this only on HTML because it's the only element that behaves
+  // differently when margins are applied to it. The margins are included in
+  // the box of the documentElement, in the other cases not.
+  if (!isIE10 && isHTML) {
+    const marginTop = parseFloat(styles.marginTop);
+    const marginLeft = parseFloat(styles.marginLeft);
+
+    offsets.top -= borderTopWidth - marginTop;
+    offsets.bottom -= borderTopWidth - marginTop;
+    offsets.left -= borderLeftWidth - marginLeft;
+    offsets.right -= borderLeftWidth - marginLeft;
+
+    // Attach marginTop and marginLeft because in some circumstances we may need them
+    offsets.marginTop = marginTop;
+    offsets.marginLeft = marginLeft;
+  }
+
+  if (
+    isIE10 && !fixedPosition
+      ? parent.contains(scrollParent)
+      : parent === scrollParent && scrollParent.nodeName !== 'BODY'
+  ) {
+    offsets = includeScroll(offsets, parent);
+  }
+
+  return offsets;
+}
diff --git a/src/positioning/utils/getOffsets.ts b/src/positioning/utils/getOffsets.ts
new file mode 100644
index 0000000000..a25cdc9ae9
--- /dev/null
+++ b/src/positioning/utils/getOffsets.ts
@@ -0,0 +1,12 @@
+import { Data, Offsets } from '../models';
+
+export function getOffsets(data: Data): Offsets {
+  return {
+    width: data.offsets.target.width,
+    height: data.offsets.target.height,
+    left: Math.floor(data.offsets.target.left),
+    top: Math.round(data.offsets.target.top),
+    bottom: Math.round(data.offsets.target.bottom),
+    right: Math.floor(data.offsets.target.right)
+  };
+}
diff --git a/src/positioning/utils/getOppositePlacement.ts b/src/positioning/utils/getOppositePlacement.ts
new file mode 100644
index 0000000000..5819bad7a8
--- /dev/null
+++ b/src/positioning/utils/getOppositePlacement.ts
@@ -0,0 +1,8 @@
+/**
+ * Get the opposite placement of the given one
+ */
+export function getOppositePlacement(placement: string) {
+  const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
+
+  return placement.replace(/left|right|bottom|top/g, matched => hash[matched]);
+}
diff --git a/src/positioning/utils/getOppositeVariation.ts b/src/positioning/utils/getOppositeVariation.ts
new file mode 100644
index 0000000000..ea32bcb656
--- /dev/null
+++ b/src/positioning/utils/getOppositeVariation.ts
@@ -0,0 +1,12 @@
+/**
+ * Get the opposite placement variation of the given one
+ */
+export function getOppositeVariation(variation: string) {
+  if (variation === 'right') {
+    return 'left';
+  } else if (variation === 'left') {
+    return 'right';
+  }
+
+  return variation;
+}
diff --git a/src/positioning/utils/getOuterSizes.ts b/src/positioning/utils/getOuterSizes.ts
new file mode 100644
index 0000000000..5f475a0386
--- /dev/null
+++ b/src/positioning/utils/getOuterSizes.ts
@@ -0,0 +1,14 @@
+/**
+ * Get the outer sizes of the given element (offset size + margins)
+ */
+export function getOuterSizes(element: any) {
+  const window = element.ownerDocument.defaultView;
+  const styles = window.getComputedStyle(element);
+  const x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
+  const y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
+
+  return {
+    width: Number(element.offsetWidth) + y,
+    height: Number(element.offsetHeight) + x
+  };
+}
diff --git a/src/positioning/utils/getParentNode.ts b/src/positioning/utils/getParentNode.ts
new file mode 100644
index 0000000000..b0ef5780f6
--- /dev/null
+++ b/src/positioning/utils/getParentNode.ts
@@ -0,0 +1,10 @@
+/**
+ * Returns the parentNode or the host of the element
+ */
+export function getParentNode(element: any): any {
+  if (element.nodeName === 'HTML') {
+    return element;
+  }
+
+  return element.parentNode || element.host;
+}
diff --git a/src/positioning/utils/getReferenceOffsets.ts b/src/positioning/utils/getReferenceOffsets.ts
new file mode 100644
index 0000000000..9752156a95
--- /dev/null
+++ b/src/positioning/utils/getReferenceOffsets.ts
@@ -0,0 +1,19 @@
+/**
+ * Get offsets to the reference element
+ */
+import { findCommonOffsetParent } from './findCommonOffsetParent';
+import { getOffsetRectRelativeToArbitraryNode } from './getOffsetRectRelativeToArbitraryNode';
+import { getFixedPositionOffsetParent } from './getFixedPositionOffsetParent';
+import { Offsets } from '../models';
+
+export function getReferenceOffsets(
+  target: HTMLElement,
+  host: HTMLElement,
+  fixedPosition: boolean = null
+): Offsets {
+  const commonOffsetParent = fixedPosition
+    ? getFixedPositionOffsetParent(target)
+    : findCommonOffsetParent(target, host);
+
+  return getOffsetRectRelativeToArbitraryNode(host, commonOffsetParent, fixedPosition);
+}
diff --git a/src/positioning/utils/getRoot.ts b/src/positioning/utils/getRoot.ts
new file mode 100644
index 0000000000..dda10ed134
--- /dev/null
+++ b/src/positioning/utils/getRoot.ts
@@ -0,0 +1,10 @@
+/**
+ * Finds the root node (document, shadowDOM root) of the given element
+ */
+export function getRoot(node: Node): any {
+  if (node.parentNode !== null) {
+    return getRoot(node.parentNode);
+  }
+
+  return node;
+}
diff --git a/src/positioning/utils/getScroll.ts b/src/positioning/utils/getScroll.ts
new file mode 100644
index 0000000000..c34e5468db
--- /dev/null
+++ b/src/positioning/utils/getScroll.ts
@@ -0,0 +1,16 @@
+/**
+ * Gets the scroll value of the given element in the given side (top and left)
+ */
+export function getScroll(element: HTMLElement, side = 'top') {
+  const upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
+  const nodeName = element.nodeName;
+
+  if (nodeName === 'BODY' || nodeName === 'HTML') {
+    const html = element.ownerDocument.documentElement;
+    const scrollingElement = element.ownerDocument.scrollingElement || html;
+
+    return scrollingElement[upperSide];
+  }
+
+  return element[upperSide];
+}
diff --git a/src/positioning/utils/getScrollParent.ts b/src/positioning/utils/getScrollParent.ts
new file mode 100644
index 0000000000..59ede93821
--- /dev/null
+++ b/src/positioning/utils/getScrollParent.ts
@@ -0,0 +1,29 @@
+/**
+ * Returns the scrolling parent of the given element
+ */
+import { getStyleComputedProperty } from './getStyleComputedProperty';
+import { getParentNode } from './getParentNode';
+
+export function getScrollParent(element: any): any {
+  // Return body, `getScroll` will take care to get the correct `scrollTop` from it
+  if (!element) {
+    return document.body;
+  }
+
+  switch (element.nodeName) {
+    case 'HTML':
+    case 'BODY':
+      return element.ownerDocument.body;
+    case '#document':
+      return element.body;
+    default:
+  }
+
+  // Firefox want us to check `-x` and `-y` variations as well
+  const { overflow, overflowX, overflowY } = getStyleComputedProperty(element);
+  if (/(auto|scroll|overlay)/.test(String(overflow) + String(overflowY) + String(overflowX))) {
+    return element;
+  }
+
+  return getScrollParent(getParentNode(element));
+}
diff --git a/src/positioning/utils/getStyleComputedProperty.ts b/src/positioning/utils/getStyleComputedProperty.ts
new file mode 100644
index 0000000000..42208128e5
--- /dev/null
+++ b/src/positioning/utils/getStyleComputedProperty.ts
@@ -0,0 +1,13 @@
+/**
+ * Get CSS computed property of the given element
+ */
+export function getStyleComputedProperty(element: HTMLElement, property?: string): any {
+  if (element.nodeType !== 1) {
+    return [];
+  }
+  // NOTE: 1 DOM access here
+  const window = element.ownerDocument.defaultView;
+  const css = window.getComputedStyle(element, null);
+
+  return property ? css[property] : css;
+}
diff --git a/src/positioning/utils/getTargetOffsets.ts b/src/positioning/utils/getTargetOffsets.ts
new file mode 100644
index 0000000000..ab34f21f4b
--- /dev/null
+++ b/src/positioning/utils/getTargetOffsets.ts
@@ -0,0 +1,41 @@
+/**
+ * Get offsets to the target
+ */
+import { getOppositePlacement } from './getOppositePlacement';
+import { getOuterSizes } from './getOuterSizes';
+import { Offsets } from '../models';
+
+export function getTargetOffsets(
+  target: HTMLElement,
+  hostOffsets: Offsets,
+  position: string
+): Offsets {
+  const placement = position.split(' ')[0];
+
+  // Get target node sizes
+  const targetRect = getOuterSizes(target);
+
+  // Add position, width and height to our offsets object
+  const targetOffsets = {
+    width: targetRect.width,
+    height: targetRect.height
+  };
+
+  // depending by the target placement we have to compute its offsets slightly differently
+  const isHoriz = ['right', 'left'].indexOf(placement) !== -1;
+  const mainSide = isHoriz ? 'top' : 'left';
+  const secondarySide = isHoriz ? 'left' : 'top';
+  const measurement = isHoriz ? 'height' : 'width';
+  const secondaryMeasurement = !isHoriz ? 'height' : 'width';
+
+  targetOffsets[mainSide] =
+    hostOffsets[mainSide] +
+    hostOffsets[measurement] / 2 -
+    targetRect[measurement] / 2;
+
+  targetOffsets[secondarySide] = placement === secondarySide
+    ? hostOffsets[secondarySide] - targetRect[secondaryMeasurement]
+    : hostOffsets[getOppositePlacement(secondarySide)];
+
+  return targetOffsets;
+}
diff --git a/src/positioning/utils/getViewportOffsetRectRelativeToArtbitraryNode.ts b/src/positioning/utils/getViewportOffsetRectRelativeToArtbitraryNode.ts
new file mode 100644
index 0000000000..1a55cfe265
--- /dev/null
+++ b/src/positioning/utils/getViewportOffsetRectRelativeToArtbitraryNode.ts
@@ -0,0 +1,23 @@
+import { getClientRect } from './getClientRect';
+import { getOffsetRectRelativeToArbitraryNode } from './getOffsetRectRelativeToArbitraryNode';
+import { getScroll } from './getScroll';
+import { Offsets } from '../models';
+
+export function getViewportOffsetRectRelativeToArtbitraryNode(element: HTMLElement, excludeScroll = false): Offsets {
+  const html = element.ownerDocument.documentElement;
+  const relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
+  const width = Math.max(html.clientWidth, window.innerWidth || 0);
+  const height = Math.max(html.clientHeight, window.innerHeight || 0);
+
+  const scrollTop = !excludeScroll ? getScroll(html) : 0;
+  const scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
+
+  const offset = {
+    top: scrollTop - Number(relativeOffset.top) + Number(relativeOffset.marginTop),
+    left: scrollLeft - Number(relativeOffset.left) + Number(relativeOffset.marginLeft),
+    width,
+    height
+  };
+
+  return getClientRect(offset);
+}
diff --git a/src/positioning/utils/getWindowSizes.ts b/src/positioning/utils/getWindowSizes.ts
new file mode 100644
index 0000000000..ae99f28f2b
--- /dev/null
+++ b/src/positioning/utils/getWindowSizes.ts
@@ -0,0 +1,27 @@
+import { isIE } from './isIE';
+
+function getSize(axis: string, body: HTMLElement, html: HTMLElement, computedStyle: CSSStyleDeclaration) {
+  return Math.max(
+    body[`offset${axis}`],
+    body[`scroll${axis}`],
+    html[`client${axis}`],
+    html[`offset${axis}`],
+    html[`scroll${axis}`],
+    isIE(10)
+      ? (parseInt(html[`offset${axis}`], 10) +
+      parseInt(computedStyle[`margin${axis === 'Height' ? 'Top' : 'Left'}`], 10) +
+      parseInt(computedStyle[`margin${axis === 'Height' ? 'Bottom' : 'Right'}`], 10))
+    : 0
+  );
+}
+
+export function getWindowSizes(document: Document) {
+  const body = document.body;
+  const html = document.documentElement;
+  const computedStyle = isIE(10) && getComputedStyle(html);
+
+  return {
+    height: getSize('Height', body, html, computedStyle),
+    width: getSize('Width', body, html, computedStyle)
+  };
+}
diff --git a/src/positioning/utils/includeScroll.ts b/src/positioning/utils/includeScroll.ts
new file mode 100644
index 0000000000..e4ec53ae87
--- /dev/null
+++ b/src/positioning/utils/includeScroll.ts
@@ -0,0 +1,17 @@
+/**
+ * Sum or subtract the element scroll values (left and top) from a given rect object
+ */
+import { getScroll } from './getScroll';
+import { Offsets } from '../models';
+
+export function includeScroll(rect: Offsets, element: HTMLElement, subtract = false) {
+  const scrollTop = getScroll(element, 'top');
+  const scrollLeft = getScroll(element, 'left');
+  const modifier = subtract ? -1 : 1;
+  rect.top += scrollTop * modifier;
+  rect.bottom += scrollTop * modifier;
+  rect.left += scrollLeft * modifier;
+  rect.right += scrollLeft * modifier;
+
+  return rect;
+}
diff --git a/src/positioning/utils/index.ts b/src/positioning/utils/index.ts
new file mode 100644
index 0000000000..19d289dd92
--- /dev/null
+++ b/src/positioning/utils/index.ts
@@ -0,0 +1,22 @@
+export { computeAutoPlacement } from './computeAutoPlacement';
+export { getBordersSize } from './getBordersSize';
+export { getBoundaries } from './getBoundaries';
+export { getBoundingClientRect } from './getBoundingClientRect';
+export { getClientRect } from './getClientRect';
+export { getOffsetParent } from './getOffsetParent';
+export { getOffsetRectRelativeToArbitraryNode } from './getOffsetRectRelativeToArbitraryNode';
+export { getOffsets } from './getOffsets';
+export { getOppositePlacement } from './getOppositePlacement';
+export { getOppositeVariation } from './getOppositeVariation';
+export { getOuterSizes } from './getOuterSizes';
+export { getParentNode } from './getParentNode';
+export { getReferenceOffsets } from './getReferenceOffsets';
+export { getScroll } from './getScroll';
+export { getScrollParent } from './getScrollParent';
+export { getStyleComputedProperty } from './getStyleComputedProperty';
+export { getTargetOffsets } from './getTargetOffsets';
+export { getWindowSizes } from './getWindowSizes';
+export { isFixed } from './isFixed';
+export { isNumeric } from './isNumeric';
+export { setAllStyles } from './setAllStyles';
+export { setStyles } from './setStyles';
diff --git a/src/positioning/utils/isBrowser.ts b/src/positioning/utils/isBrowser.ts
new file mode 100644
index 0000000000..bb2cd0b76f
--- /dev/null
+++ b/src/positioning/utils/isBrowser.ts
@@ -0,0 +1 @@
+export const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
diff --git a/src/positioning/utils/isFixed.ts b/src/positioning/utils/isFixed.ts
new file mode 100644
index 0000000000..c3be266ebd
--- /dev/null
+++ b/src/positioning/utils/isFixed.ts
@@ -0,0 +1,17 @@
+/**
+ * Check if the given element is fixed or is inside a fixed parent
+ */
+import { getStyleComputedProperty } from './getStyleComputedProperty';
+import { getParentNode } from './getParentNode';
+
+export function isFixed(element: HTMLElement): boolean {
+  const nodeName = element.nodeName;
+  if (nodeName === 'BODY' || nodeName === 'HTML') {
+    return false;
+  }
+  if (getStyleComputedProperty(element, 'position') === 'fixed') {
+    return true;
+  }
+
+  return isFixed(getParentNode(element));
+}
diff --git a/src/positioning/utils/isIE.ts b/src/positioning/utils/isIE.ts
new file mode 100644
index 0000000000..8a25984a16
--- /dev/null
+++ b/src/positioning/utils/isIE.ts
@@ -0,0 +1,18 @@
+/**
+ * Determines if the browser is Internet Explorer
+ */
+import { isBrowser } from './isBrowser';
+
+const isIE11 = isBrowser && !!((window as any).MSInputMethodContext && (document as any).documentMode);
+const isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);
+
+export function isIE(version?: number) {
+  if (version === 11) {
+    return isIE11;
+  }
+  if (version === 10) {
+    return isIE10;
+  }
+
+  return isIE11 || isIE10;
+}
diff --git a/src/positioning/utils/isNumeric.ts b/src/positioning/utils/isNumeric.ts
new file mode 100644
index 0000000000..5a237c85b0
--- /dev/null
+++ b/src/positioning/utils/isNumeric.ts
@@ -0,0 +1,6 @@
+/**
+ * Tells if a given input is a number
+ */
+export function isNumeric(n: any) {
+  return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
+}
diff --git a/src/positioning/utils/isOffsetContainer.ts b/src/positioning/utils/isOffsetContainer.ts
new file mode 100644
index 0000000000..1e847bf5dd
--- /dev/null
+++ b/src/positioning/utils/isOffsetContainer.ts
@@ -0,0 +1,12 @@
+import { getOffsetParent } from './getOffsetParent';
+
+export function isOffsetContainer(element: any) {
+  const { nodeName } = element;
+  if (nodeName === 'BODY') {
+    return false;
+  }
+
+  return (
+    nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element
+  );
+}
diff --git a/src/positioning/utils/setAllStyles.ts b/src/positioning/utils/setAllStyles.ts
new file mode 100644
index 0000000000..0b64733f35
--- /dev/null
+++ b/src/positioning/utils/setAllStyles.ts
@@ -0,0 +1,67 @@
+/**
+ * Set the style to the given popper
+ */
+import { Renderer2 } from '@angular/core';
+
+import { Data } from '../models';
+import { getOffsets, setStyles } from './index';
+
+export function setAllStyles(data: Data, renderer?: Renderer2): void {
+  const target = data.instance.target;
+
+  const offsets = getOffsets(data);
+
+  setStyles(target, {
+    'will-change': 'transform',
+    top: '0px',
+    left: '0px',
+    transform: `translate3d(${offsets.left}px, ${offsets.top}px, 0px)`
+  }, renderer);
+
+  if (data.instance.arrow) {
+    setStyles(data.instance.arrow, data.offsets.arrow, renderer);
+  }
+
+  if (data.placementAuto) {
+    if (renderer) {
+      renderer.setAttribute(target, 'class',
+        target.className.replace(/bs-popover-auto/g, `bs-popover-${data.placement}`)
+      );
+      renderer.setAttribute(target, 'class',
+        target.className.replace(/bs-tooltip-auto/g, `bs-tooltip-${data.placement}`)
+      );
+
+      renderer.setAttribute(target, 'class',
+        target.className.replace(/\sauto/g, `\s${data.placement}`)
+      );
+
+      if (target.className.match(/popover/g)) {
+        renderer.addClass(target, 'popover-auto');
+      }
+
+      if (target.className.match(/tooltip/g)) {
+        renderer.addClass(target, 'tooltip-auto');
+      }
+
+
+    } else {
+      target.className = target.className.replace(/bs-popover-auto/g, `bs-popover-${data.placement}`);
+      target.className = target.className.replace(/bs-tooltip-auto/g, `bs-tooltip-${data.placement}`);
+      target.className = target.className.replace(/\sauto/g, `\s${data.placement}`);
+
+      if (target.className.match(/popover/g)) {
+        target.classList.add('popover-auto');
+      }
+
+      if (target.className.match(/tooltip/g)) {
+        target.classList.add('tooltip-auto');
+      }
+    }
+  }
+
+  if (renderer) {
+    renderer.setAttribute(target, 'class', target.className.replace(/left|right|top|bottom/g, `${data.placement}`));
+  } else {
+    target.className = target.className.replace(/left|right|top|bottom/g, `${data.placement}`);
+  }
+}
diff --git a/src/positioning/utils/setStyles.ts b/src/positioning/utils/setStyles.ts
new file mode 100644
index 0000000000..e73c69f0e1
--- /dev/null
+++ b/src/positioning/utils/setStyles.ts
@@ -0,0 +1,25 @@
+/**
+ * Set the style to the given popper
+ */
+import { Renderer2 } from '@angular/core';
+
+import { isNumeric } from './isNumeric';
+
+export function setStyles(element: HTMLElement, styles: any, renderer?: Renderer2) {
+  Object.keys(styles).forEach((prop: any) => {
+    let unit = '';
+    // add unit if the value is numeric and is one of the following
+    if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 &&
+      isNumeric(styles[prop])) {
+      unit = 'px';
+    }
+
+    if (renderer) {
+      renderer.setStyle(element, prop, `${String(styles[prop])}${unit}`);
+
+      return;
+    }
+
+    element.style[prop] = String(styles[prop]) + unit;
+  });
+}
diff --git a/src/progressbar/package.json b/src/progressbar/package.json
index 54e7ad19ad..cd77758379 100644
--- a/src/progressbar/package.json
+++ b/src/progressbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/progressbar",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/rating/package.json b/src/rating/package.json
index ecd9259765..0dd2852176 100644
--- a/src/rating/package.json
+++ b/src/rating/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/rating",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/sortable/package.json b/src/sortable/package.json
index 65ad4aea34..48a325d41b 100644
--- a/src/sortable/package.json
+++ b/src/sortable/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/sortable",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/spec/ng-bootstrap/popover.spec.ts b/src/spec/ng-bootstrap/popover.spec.ts
index d57a71d023..ffa88acbfc 100644
--- a/src/spec/ng-bootstrap/popover.spec.ts
+++ b/src/spec/ng-bootstrap/popover.spec.ts
@@ -11,6 +11,7 @@ import {
   Injectable,
   OnDestroy
 } from '@angular/core';
+
 import {
   PopoverModule,
   PopoverContainerComponent,
@@ -111,7 +112,7 @@ describe('popover', () => {
   describe('basic functionality', () => {
     it('should open and close a popover - default settings and content as string', () => {
       const fixture = createTestComponent(
-        `<div popover="Great tip!" popoverTitle="Title"></div>`
+        `<div style="margin: 400px" popover="Great tip!" popoverTitle="Title"></div>`
       );
       const directive = fixture.debugElement.query(
         By.directive(PopoverDirective)
@@ -136,7 +137,7 @@ describe('popover', () => {
     it('should open and close a popover - default settings and content from a template', () => {
       const fixture = createTestComponent(`
           <ng-template #t>Hello, {{name}}!</ng-template>
-          <div [popover]="t" popoverTitle="Title"></div>`);
+          <div style="margin: 400px" [popover]="t" popoverTitle="Title"></div>`);
       const directive = fixture.debugElement.query(
         By.directive(PopoverDirective)
       );
@@ -238,7 +239,7 @@ describe('popover', () => {
   describe('positioning', () => {
     it('should use requested position', () => {
       const fixture = createTestComponent(
-        `<div popover="Great tip!" placement="left"></div>`
+        `<div style="padding: 400px"><div popover="Great tip!" placement="left"></div></div>`
       );
       const directive = fixture.debugElement.query(
         By.directive(PopoverDirective)
@@ -246,6 +247,7 @@ describe('popover', () => {
 
       directive.triggerEventHandler('click', {});
       fixture.detectChanges();
+
       const windowEl = getWindow(fixture.nativeElement);
 
       expect(windowEl).toHaveCssClass('popover');
@@ -255,8 +257,9 @@ describe('popover', () => {
 
     it('should properly position popovers when a component is using the OnPush strategy', () => {
       const fixture = createOnPushTestComponent(
-        `<div popover="Great tip!" placement="left"></div>`
+        `<div style="padding: 400px"><div popover="Great tip!" placement="left"></div></div>`
       );
+
       const directive = fixture.debugElement.query(
         By.directive(PopoverDirective)
       );
@@ -272,7 +275,7 @@ describe('popover', () => {
 
     it('should set position to right when use auto position and fit on screen', () => {
       const fixture = createTestComponent(
-        `<div popover="Great tip!" placement="auto"></div>`
+        `<div style="padding: 400px"><div popover="Great tip!" placement="auto"></div></div>`
       );
       const directive = fixture.debugElement.query(
         By.directive(PopoverDirective)
@@ -284,13 +287,13 @@ describe('popover', () => {
 
       expect(windowEl).toHaveCssClass('popover');
       expect(windowEl).toHaveCssClass('popover-auto');
-      expect(windowEl).toHaveCssClass('right');
+      expect(windowEl).toHaveCssClass('top');
       expect(windowEl.textContent.trim()).toBe('Great tip!');
     });
 
     it('should set position to bottom when use auto position', () => {
       const fixture = createTestComponent(
-        `<div popover="Great tip!" placement="auto bottom"></div>`
+        `<div style="padding-bottom: 300px"><div popover="Great tip!" placement="auto bottom"></div></div>`
       );
       const directive = fixture.debugElement.query(
         By.directive(PopoverDirective)
@@ -308,7 +311,7 @@ describe('popover', () => {
 
     it('should set position to top when use auto position and fit on screen', () => {
       const fixture = createTestComponent(
-        `<div popover="Great tip!" placement="auto top"></div>`
+        `<div style="padding: 400px"><div popover="Great tip!" placement="auto top"></div></div>`
       );
       const directive = fixture.debugElement.query(
         By.directive(PopoverDirective)
@@ -326,7 +329,7 @@ describe('popover', () => {
 
     it('should set position to right when use auto position and fit on screen', () => {
       const fixture = createTestComponent(
-        `<div popover="Great tip!" placement="auto right"></div>`
+        `<div style="padding: 400px"><div popover="Great tip!" placement="auto right"></div>`
       );
       const directive = fixture.debugElement.query(
         By.directive(PopoverDirective)
@@ -344,13 +347,14 @@ describe('popover', () => {
 
     it('should set position to left when use auto position and fit on screen', () => {
       const fixture = createTestComponent(
-        `<div popover="Great tip!" placement="auto left"></div>`
+        `<div style="padding: 400px"><div popover="Great tip!" placement="auto left"></div>`
       );
       const directive = fixture.debugElement.query(
         By.directive(PopoverDirective)
       );
 
       directive.triggerEventHandler('click', {});
+
       fixture.detectChanges();
       const windowEl = getWindow(fixture.nativeElement);
 
diff --git a/src/spec/ng-bootstrap/tooltip.spec.ts b/src/spec/ng-bootstrap/tooltip.spec.ts
index 73de26fc77..5825582eee 100644
--- a/src/spec/ng-bootstrap/tooltip.spec.ts
+++ b/src/spec/ng-bootstrap/tooltip.spec.ts
@@ -76,7 +76,7 @@ describe('tooltip', () => {
 
   describe('basic functionality', () => {
     it('should open and close a tooltip - default settings and content as string', () => {
-      const fixture = createTestComponent(`<div tooltip="Great tip!"></div>`);
+      const fixture = createTestComponent(`<div style="margin: 400px" tooltip="Great tip!"></div>`);
       const directive = fixture.debugElement.query(
         By.directive(TooltipDirective)
       );
@@ -99,7 +99,7 @@ describe('tooltip', () => {
 
     it('should open and close a tooltip - default settings and content from a template', () => {
       const fixture = createTestComponent(
-        `<ng-template #t>Hello, {{name}}!</ng-template><div [tooltip]="t"></div>`
+        `<ng-template #t>Hello, {{name}}!</ng-template><div style="margin: 400px" [tooltip]="t"></div>`
       );
       const directive = fixture.debugElement.query(
         By.directive(TooltipDirective)
@@ -207,7 +207,7 @@ describe('tooltip', () => {
     describe('positioning', () => {
       it('should use requested position', () => {
         const fixture = createTestComponent(
-          `<div tooltip="Great tip!" placement="left"></div>`
+          `<div style="padding:400px"><div tooltip="Great tip!" placement="left"></div>`
         );
         const directive = fixture.debugElement.query(
           By.directive(TooltipDirective)
@@ -224,7 +224,7 @@ describe('tooltip', () => {
 
       it('should properly position tooltips when a component is using the OnPush strategy', () => {
         const fixture = createOnPushTestComponent(
-          `<div tooltip="Great tip!" placement="left"></div>`
+          `<div style="padding:400px"><div tooltip="Great tip!" placement="left"></div>`
         );
         const directive = fixture.debugElement.query(
           By.directive(TooltipDirective)
@@ -241,7 +241,7 @@ describe('tooltip', () => {
 
       it('should use auto position', () => {
         const fixture = createTestComponent(
-          `<div tooltip="Great tip!" placement="auto"></div>`
+          `<div style="padding:400px"><div tooltip="Great tip!" placement="auto"></div></div>`
         );
         const directive = fixture.debugElement.query(
           By.directive(TooltipDirective)
@@ -253,7 +253,7 @@ describe('tooltip', () => {
 
         expect(windowEl).toHaveCssClass('tooltip');
         expect(windowEl).toHaveCssClass('tooltip-auto');
-        expect(windowEl).toHaveCssClass('right');
+        expect(windowEl).toHaveCssClass('top');
         expect(windowEl.textContent.trim()).toBe('Great tip!');
       });
     });
diff --git a/src/spec/typeahead-container.component.spec.ts b/src/spec/typeahead-container.component.spec.ts
index 9e7160d551..5d0db85890 100644
--- a/src/spec/typeahead-container.component.spec.ts
+++ b/src/spec/typeahead-container.component.spec.ts
@@ -8,6 +8,7 @@ import {
   TypeaheadMatch,
   TypeaheadOptions
 } from '../typeahead';
+import { TypeaheadConfig } from '../typeahead/typeahead.config';
 
 describe('Component: TypeaheadContainer', () => {
   let fixture: ComponentFixture<TypeaheadContainerComponent>;
@@ -21,17 +22,24 @@ describe('Component: TypeaheadContainer', () => {
       providers: [{
         provide: TypeaheadOptions,
         useValue: new TypeaheadOptions({ animation: false, placement: 'bottom-left', typeaheadRef: undefined })
-      }]
+      },
+        {
+          provide: TypeaheadConfig,
+          useValue: new TypeaheadConfig()
+        }]
     });
     fixture = testModule.createComponent(TypeaheadContainerComponent);
 
     component = fixture.componentInstance;
+    /* tslint:disable-next-line: no-object-literal-type-assertion */
+    component.parent = { typeaheadSelectFirstItem: false } as TypeaheadDirective;
     fixture.detectChanges();
     tick(1);
   }));
 
-  it('should be defined', () => {
-    expect(component).toBeTruthy();
+  it('selectMatch should not be called if active was not existed' , () => {
+    component.selectActiveMatch();
+    expect(component.matches.length).toBe(0);
   });
 
   it('should have an "element" property', () => {
@@ -42,6 +50,10 @@ describe('Component: TypeaheadContainer', () => {
     expect(component.matches.length).toBe(0);
   });
 
+  it('should have an empty "matches" array', () => {
+    expect(component.matches.length).toBe(0);
+  });
+
   describe('dropdown-menu', () => {
     let dropDown: HTMLElement;
 
@@ -78,7 +90,7 @@ describe('Component: TypeaheadContainer', () => {
         expect(matches.length).toBe(2);
       });
 
-      xit('should highlight query for match', () => {
+      it('should highlight query for match', () => {
         // expect(matches[1].children[0].innerHTML).toBe('<strong>fo</strong>od');
         const ms = fixture.debugElement.queryAll(
           By.css('.dropdown-menu li span')
@@ -96,18 +108,26 @@ describe('Component: TypeaheadContainer', () => {
     });
 
     describe('nextActiveMatch', () => {
-      it('should select the next match', () => {
+      it('should select the first match on first use', () => {
         component.nextActiveMatch();
 
         expect(component.isActive(component.matches[1])).toBeTruthy();
       });
 
-      it('should select the first match again, when triggered twice', () => {
+      it('should select the next match after the first', () => {
         component.nextActiveMatch();
         component.nextActiveMatch();
 
         expect(component.isActive(component.matches[0])).toBeTruthy();
       });
+
+      it('should not select the first match again, when triggered three times', () => {
+        component.nextActiveMatch();
+        component.nextActiveMatch();
+        component.nextActiveMatch();
+
+        expect(component.isActive(component.matches[0])).toBeFalsy();
+      });
     });
 
     describe('prevActiveMatch', () => {
@@ -126,6 +146,62 @@ describe('Component: TypeaheadContainer', () => {
     });
   });
 
+  describe('(if first item was selected) matches', () => {
+    let matches: HTMLLIElement[];
+
+    beforeEach(() => {
+      /* tslint:disable-next-line: no-object-literal-type-assertion */
+      component.parent = { typeaheadSelectFirstItem: true } as TypeaheadDirective;
+      component.query = 'fo';
+      component.matches = [
+        new TypeaheadMatch({ id: 0, name: 'foo' }, 'foo'),
+        new TypeaheadMatch({ id: 1, name: 'food' }, 'food')
+      ];
+      fixture.detectChanges();
+
+      matches = asNativeElements(
+        fixture.debugElement.queryAll(By.css('.dropdown-menu li'))
+      );
+    });
+
+    describe('rendering', () => {
+      it('should set the "active" class on first match', () => {
+        expect(matches[0].classList.contains('active')).toBeTruthy();
+        expect(matches[1].classList.contains('active')).toBeFalsy();
+      });
+
+      it('should rewrite matches', () => {
+        component.matches = ([new TypeaheadMatch({ id: 1, name: 'fox' }, 'fox')]);
+        fixture.detectChanges();
+
+        expect(component.matches.length).toBe(1);
+      });
+    });
+
+    describe('nextActiveMatch', () => {
+      it('should not select the first match on first use', () => {
+        component.nextActiveMatch();
+
+        expect(component.isActive(component.matches[0])).toBeFalsy();
+      });
+
+      it('should not select the next match after the first', () => {
+        component.nextActiveMatch();
+        component.nextActiveMatch();
+
+        expect(component.isActive(component.matches[1])).toBeFalsy();
+      });
+
+      it('should not select the first match again, when triggered three times', () => {
+        component.nextActiveMatch();
+        component.nextActiveMatch();
+        component.nextActiveMatch();
+
+        expect(component.isActive(component.matches[0])).toBeFalsy();
+      });
+    });
+  });
+
   describe('grouped matches', () => {
     let itemMatches: HTMLLIElement[];
     let headerMatch: HTMLLIElement;
@@ -159,15 +235,16 @@ describe('Component: TypeaheadContainer', () => {
         expect(itemMatches.length).toBe(2);
       });
 
-      xit('should highlight query for item match', () => {
+      it('should highlight query for item match', () => {
         const im = fixture.debugElement.queryAll(
           By.css('.dropdown-menu li:not(.dropdown-header) span')
         );
         expect(im[1].nativeElement.innerHTML).toBe('<strong>a</strong>pple');
       });
 
-      it('should set the "active" class on the first item match', () => {
+      it('should not set the "active" class on any matches', () => {
         expect(itemMatches[0].classList.contains('active')).toBeTruthy();
+        expect(itemMatches[1].classList.contains('active')).toBeFalsy();
       });
 
       it('should not set the "active" class on the header match', () => {
@@ -180,13 +257,14 @@ describe('Component: TypeaheadContainer', () => {
     });
 
     describe('nextActiveMatch', () => {
-      it('should select the next item match', () => {
+      it('should select the first item match', () => {
         component.nextActiveMatch();
 
         expect(component.isActive(component.matches[2])).toBeTruthy();
       });
 
-      it('should skip the header match, when triggered twice', () => {
+      it('should skip the header match, when triggered three times', () => {
+        component.nextActiveMatch();
         component.nextActiveMatch();
         component.nextActiveMatch();
 
@@ -210,6 +288,49 @@ describe('Component: TypeaheadContainer', () => {
     });
   });
 
+  describe('(if first item was selected) grouped matches', () => {
+    let itemMatches: HTMLLIElement[];
+
+    beforeEach(() => {
+      /* tslint:disable-next-line: no-object-literal-type-assertion */
+      component.parent = { typeaheadSelectFirstItem: true } as TypeaheadDirective;
+      component.query = 'a';
+      component.matches = [
+        new TypeaheadMatch('fruits', 'fruits', true),
+        new TypeaheadMatch(
+          { id: 0, name: 'banana', category: 'fruits' },
+          'banana'
+        ),
+        new TypeaheadMatch(
+          { id: 0, name: 'apple', category: 'fruits' },
+          'apple'
+        )
+      ];
+
+      fixture.detectChanges();
+      itemMatches = asNativeElements(
+        fixture.debugElement.queryAll(
+          By.css('.dropdown-menu li:not(.dropdown-header)')
+        )
+      );
+    });
+
+    describe('rendering', () => {
+      it('should set the "active" class on first match', () => {
+        expect(itemMatches[0].classList.contains('active')).toBeTruthy();
+        expect(itemMatches[1].classList.contains('active')).toBeFalsy();
+      });
+    });
+
+    describe('nextActiveMatch', () => {
+      it('should not select the first item match', () => {
+        component.nextActiveMatch();
+
+        expect(component.isActive(component.matches[1])).toBeFalsy();
+      });
+    });
+  });
+
   describe('isFocused', () => {
     it('should not be focus after init', () => {
       expect(component.isFocused).toBeFalsy();
@@ -221,6 +342,7 @@ describe('Component: TypeaheadContainer', () => {
       expect(component.isFocused).toBeFalsy();
     });
   });
+
   describe('scrollable matches', () => {
     let itemMatches: HTMLLIElement[];
     /* tslint:disable-next-line: no-unused-variable */
@@ -315,28 +437,32 @@ describe('Component: TypeaheadContainer', () => {
         expect(itemMatches[1].children[0].children[0].innerHTML).toBe('<strong>a</strong>pple');
       });
 
-      it('should set the \"active\" class on the first item match', () => {
-        expect(itemMatches[0].classList.contains('active')).toBeTruthy();
+      it('should not set the \"active\" class on any matches except first', () => {
+        for (let i = 1; i < 9; i++) {
+          expect(itemMatches[i].classList.contains('active')).toBeFalsy();
+        }
       });
     });
 
     describe('nextActiveMatch', () => {
-      it('should select the next item match', () => {
+      it('should select the first item match', () => {
         component.nextActiveMatch();
         expect(component.isActive(component.matches[1])).toBeTruthy();
       });
       it('should select the next item match and scroll', fakeAsync(() => {
+        component.nextActiveMatch();
         component.nextActiveMatch();
         component.nextActiveMatch();
         fixture.detectChanges();
         tick(1);
-        expect(component.isActive(component.matches[2])).toBeTruthy();
+        expect(component.isActive(component.matches[3])).toBeTruthy();
         expect(containingElementScrollable[0].scrollTop).toBe(0);
       }));
       it('should select the last item match and scroll', () => {
         for (let i = 0; i < 8; i++) {
           component.nextActiveMatch();
         }
+
         expect(component.isActive(component.matches[10])).toBeTruthy();
       });
 
@@ -344,6 +470,7 @@ describe('Component: TypeaheadContainer', () => {
         for (let i = 0; i < 9; i++) {
           component.nextActiveMatch();
         }
+
         expect(component.isActive(component.matches[0])).toBeTruthy();
         expect(containingElementScrollable[0].scrollTop).toBe(0);
       });
@@ -361,6 +488,7 @@ describe('Component: TypeaheadContainer', () => {
         component.nextActiveMatch();
         component.nextActiveMatch();
         component.prevActiveMatch();
+
         expect(component.isActive(component.matches[2])).toBeTruthy();
       });
     });
diff --git a/src/spec/typeahead.directive.spec.ts b/src/spec/typeahead.directive.spec.ts
index c5a2fb2ad2..53bb0e4dc8 100644
--- a/src/spec/typeahead.directive.spec.ts
+++ b/src/spec/typeahead.directive.spec.ts
@@ -1,11 +1,12 @@
 /* tslint:disable:max-file-line-count */
-import { BehaviorSubject, of, Subject } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+
 import { dispatchMouseEvent } from '@netbasal/spectator';
 import { fireEvent } from '../../scripts/helpers';
-import { FormsModule } from '@angular/forms';
+import { of } from 'rxjs';
 import { TypeaheadMatch, TypeaheadDirective, TypeaheadModule } from '../typeahead';
 
 interface State {
@@ -19,336 +20,506 @@ interface State {
     <input [(ngModel)]="selectedState"
            [typeahead]="states"
            [typeaheadOptionField]="'name'"
-           (typeaheadOnBlur)="onBlurEvent($event)">
-  `
+           (typeaheadOnBlur)="onBlurEvent($event)">`
 })
-
 class TestTypeaheadComponent {
   selectedState: string;
   states: State[] = [
     {id: 1, name: 'Alabama', region: 'South'},
-    {id: 2, name: 'Alaska', region: 'West'}
+    {id: 2, name: 'Alaska', region: 'West'},
+    {id: 3, name: 'Arizona', region: 'West'},
+    {id: 4, name: 'Arkansas', region: 'South'}
   ];
-  statesValue: Subject<any> = new BehaviorSubject<any>(null);
 
   onBlurEvent(activeItem) { return undefined; }
 }
 
-describe('Directive: ', () => {
+describe('Directive: Typeahead', () => {
   let fixture: ComponentFixture<TestTypeaheadComponent>;
   let component: TestTypeaheadComponent;
   let directive: TypeaheadDirective;
   let inputElement: HTMLInputElement;
 
-  describe('Typeahead', () => {
-    beforeEach(() => {
-      fixture = TestBed.configureTestingModule({
-        declarations: [TestTypeaheadComponent],
-        imports: [TypeaheadModule.forRoot(), FormsModule]
-      }).createComponent(TestTypeaheadComponent);
-
-      fixture.detectChanges();
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [ TestTypeaheadComponent],
+      imports: [TypeaheadModule.forRoot(), FormsModule]
+    }).createComponent(TestTypeaheadComponent);
+
+    fixture.detectChanges();
+    component = fixture.componentInstance;
+    inputElement = fixture.debugElement.query(By.css('input'))
+      .nativeElement as HTMLInputElement;
+
+    // get the typeahead directive instance
+    const inputs = fixture.debugElement.queryAll(
+      By.directive(TypeaheadDirective)
+    );
+    directive = inputs.map(
+      (de: DebugElement) =>
+        de.injector.get<TypeaheadDirective>(TypeaheadDirective)
+    )[0];
+  });
 
-      component = fixture.componentInstance;
-      inputElement = fixture.debugElement.query(By.css('input'))
-        .nativeElement as HTMLInputElement;
+  it('should be defined on the test component', () => {
+    expect(directive).not.toBeNull();
+  });
 
-      // get the typeahead directive instance
-      const inputs = fixture.debugElement.queryAll(
-        By.directive(TypeaheadDirective)
-      );
-      directive = inputs.map(
-        (de: DebugElement) =>
-          de.injector.get<TypeaheadDirective>(TypeaheadDirective)
-      )[0];
+  describe('ngOnInit', () => {
+    it('should set a default value for typeaheadOptionsLimit', () => {
+      expect(directive.typeaheadOptionsLimit).toBe(20);
     });
 
-    it('should be defined on the test component', () => {
-      expect(directive).not.toBeNull();
+    it('should set a default value for typeaheadMinLength', () => {
+      expect(directive.typeaheadMinLength).toBe(1);
     });
 
-    describe('ngOnInit', () => {
-      it('should set a default value for typeaheadOptionsLimit', () => {
-        expect(directive.typeaheadOptionsLimit).toBe(20);
-      });
-
-      it('should set a default value for typeaheadMinLength', () => {
-        expect(directive.typeaheadMinLength).toBe(1);
-      });
-
-      it('should set a default value for typeaheadWaitMs', () => {
-        expect(directive.typeaheadWaitMs).toBe(0);
-      });
-
-      it('should set a default value for typeaheadAsync', () => {
-        expect(directive.typeaheadAsync).toBeFalsy();
-      });
-      it('should set a default value for typeaheadHideResultsOnBlur', () => {
-        expect(directive.typeaheadHideResultsOnBlur).toBeTruthy();
-      });
-
-      it('should typeaheadAsync to false, if typeahead is an observable', () => {
-        directive.typeahead = of(component.states);
-        directive.ngOnInit();
+    it('should get a value for typeaheadMinLength if user added it', () => {
+      directive.typeaheadMinLength = 4;
 
-        expect(directive.typeaheadAsync).toBeTruthy();
-      });
+      directive.ngOnInit();
 
-      it('should not render the typeahead-container', () => {
-        const typeaheadContainer = fixture.debugElement.query(
-          By.css('typeahead-container')
-        );
+      expect(directive.typeaheadMinLength).toBe(4);
+    });
 
-        expect(typeaheadContainer).toBeNull();
-      });
+    it('should set a default value for typeaheadAsync', () => {
+      expect(directive.typeaheadAsync).toBeFalsy();
+    });
+    it('should set a default value for typeaheadHideResultsOnBlur', () => {
+      expect(directive.typeaheadHideResultsOnBlur).toBeTruthy();
+    });
 
-      it('should not set the container reference', () => {
-        expect(directive._container).toBeFalsy();
-      });
+    it('should not set the container reference', () => {
+      expect(directive._container).toBeFalsy();
     });
 
-    describe('onChange', () => {
-      beforeEach(
-        fakeAsync(() => {
-          inputElement.value = 'Ala';
-          fireEvent(inputElement, 'input');
+    it('should set a default value for typeaheadWaitMs', () => {
+      expect(directive.typeaheadWaitMs).toBe(0);
+    });
 
-          fixture.detectChanges();
-          tick(100);
-        })
-      );
+    it('should set a default value for typeaheadSelectFirstItem', () => {
+      expect(directive.typeaheadSelectFirstItem).toBeTruthy();
+    });
 
-      it('should render the typeahead-container child element', () => {
-        const typeaheadContainer = fixture.debugElement.nativeElement.querySelector(
-          'typeahead-container'
-        );
-        expect(typeaheadContainer).not.toBeNull();
-      });
+    it('should typeaheadAsync to false, if typeahead is an observable', () => {
+      directive.typeahead = of(component.states);
 
-      it('should set the container reference', () => {
-        expect(directive._container).toBeTruthy();
-      });
+      directive.ngOnInit();
 
-      it(
-        'should result in a total of 2 matches, when "Ala" is entered',
-        fakeAsync(() => {
-          expect(directive.matches.length).toBe(2);
-        })
-      );
+      expect(directive.typeaheadAsync).toBeTruthy();
+    });
 
-      it(
-        'should result in 2 item matches, when "Ala" is entered',
-        fakeAsync(() => {
-          expect(directive.matches).toContain(
-            new TypeaheadMatch(
-              {id: 1, name: 'Alabama', region: 'South'},
-              'Alabama'
-            )
-          );
-          expect(directive.matches).toContain(
-            new TypeaheadMatch(
-              {id: 2, name: 'Alaska', region: 'West'},
-              'Alaska'
-            )
-          );
-        })
+    it('should not render the typeahead-container', () => {
+      const typeaheadContainer = fixture.debugElement.query(
+        By.css('typeahead-container')
       );
 
-      it(
-        'should result in 0 matches, when input does not match',
-        fakeAsync(() => {
-          inputElement.value = 'foo';
-          fireEvent(inputElement, 'input');
+      expect(typeaheadContainer).toBeNull();
+    });
+  });
 
-          fixture.detectChanges();
-          tick(100);
+  describe('onInput', () => {
+    it('should be called show method', fakeAsync(() => {
+        inputElement.value = 'a';
+        inputElement.dispatchEvent(new Event('input'));
+        tick();
+
+        expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+      })
+    );
+
+    it('and dropup equal true should be called show method', fakeAsync(() => {
+        directive.dropup = true;
+        inputElement.value = 'al';
+        inputElement.dispatchEvent(new Event('input'));
+        tick();
+
+        expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+      })
+    );
+
+    it('if value was changed to invalid should be called hide method', fakeAsync(() => {
+        inputElement.value = 'al';
+        inputElement.dispatchEvent(new Event('input'));
+        tick();
+
+        inputElement.value = ' ';
+        inputElement.dispatchEvent(new Event('input'));
+        tick();
+
+        expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+      })
+    );
+
+    it('if value equal 0 should be called hide method', fakeAsync(() => {
+        inputElement.value = ' ';
+        inputElement.dispatchEvent(new Event('input'));
+        tick();
+
+        expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+      })
+    );
+
+    it('if click event triggers on outside element should be called onOutsideClick method',
+      fakeAsync(() => {
+        inputElement.value = 'al';
+        inputElement.dispatchEvent(new Event('input'));
+        tick();
+
+        inputElement.value = ' ';
+        document.dispatchEvent(new Event('click'));
+        tick();
+
+        expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+      })
+    );
+  });
 
-          expect(directive.matches.length).toBe(0);
-        })
-      );
+  describe('onFocus', () => {
+    it('should work if typeaheadMinLength equal 0', fakeAsync(() => {
+      directive.typeaheadMinLength = 0;
+      inputElement.dispatchEvent(new Event('click'));
+      tick();
 
-      it(
-        'should not display null item',
-        fakeAsync(() => {
-          component.states.push({id: 3, name: null, region: 'West'});
-          inputElement.value = 'Ala';
-          fireEvent(inputElement, 'input');
-          fixture.detectChanges();
-          tick(100);
-
-          expect(directive.matches.length).toBe(2);
-        })
-      );
-    });
+      expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+    }));
 
-    describe('onChange grouped', () => {
-      beforeEach(
-        fakeAsync(() => {
-          inputElement.value = 'Ala';
-          fireEvent(inputElement, 'input');
-          directive.typeaheadGroupField = 'region';
+    it('should not work if typeaheadMinLength equal 0', fakeAsync(() => {
+      inputElement.dispatchEvent(new Event('click'));
+      tick();
 
-          fixture.detectChanges();
-          tick(100);
-        })
-      );
+      expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+    }));
+  });
 
-      it(
-        'should result in a total of 4 matches, when "Ala" is entered',
-        fakeAsync(() => {
-          expect(directive.matches.length).toBe(4);
-        })
+  describe('changeModel tests', () => {
+    it('should set the selectedState value', () => {
+      directive.changeModel(
+        new TypeaheadMatch(
+          {id: 1, name: 'Alabama', region: 'South'},
+          'Alabama'
+        )
       );
+      expect(component.selectedState).toBe('Alabama');
+    });
+  });
 
-      it(
-        'should result in 2 header matches, when "Ala" is entered',
-        fakeAsync(() => {
-          expect(directive.matches).toContain(
-            new TypeaheadMatch('South', 'South', true)
-          );
-          expect(directive.matches).toContain(
-            new TypeaheadMatch('West', 'West', true)
-          );
-        })
-      );
+  describe('onChange grouped', () => {
+    beforeEach(
+      fakeAsync(() => {
+        inputElement.value = 'Ala';
+        fireEvent(inputElement, 'input');
+        directive.typeaheadGroupField = 'region';
 
-      it(
-        'should result in 2 item matches, when "Ala" is entered',
-        fakeAsync(() => {
-          expect(directive.matches).toContain(
-            new TypeaheadMatch(
-              {id: 1, name: 'Alabama', region: 'South'},
-              'Alabama'
-            )
-          );
-          expect(directive.matches).toContain(
-            new TypeaheadMatch(
-              {id: 2, name: 'Alaska', region: 'West'},
-              'Alaska'
-            )
-          );
-        })
-      );
-    });
+        fixture.detectChanges();
+        tick(100);
+      })
+    );
+
+    it(
+      'should result in a total of 4 matches, when "Ala" is entered',
+      fakeAsync(() => {
+        expect(directive.matches.length).toBe(4);
+      })
+    );
+
+    it(
+      'should result in 2 header matches, when "Ala" is entered',
+      fakeAsync(() => {
+        expect(directive.matches).toContain(
+          new TypeaheadMatch('South', 'South', true)
+        );
+        expect(directive.matches).toContain(
+          new TypeaheadMatch('West', 'West', true)
+        );
+      })
+    );
 
-    describe('changeModel', () => {
-      it('should set the selectedState value', () => {
-        directive.changeModel(
+    it(
+      'should result in 2 item matches, when "Ala" is entered',
+      fakeAsync(() => {
+        expect(directive.matches).toContain(
           new TypeaheadMatch(
             {id: 1, name: 'Alabama', region: 'South'},
             'Alabama'
           )
         );
+        expect(directive.matches).toContain(
+          new TypeaheadMatch(
+            {id: 2, name: 'Alaska', region: 'West'},
+            'Alaska'
+          )
+        );
+      })
+    );
+  });
 
-        expect(component.selectedState).toBe('Alabama');
-      });
-    });
-
-    describe('onBlur', () => {
-      beforeEach(
-        fakeAsync(() => {
-          inputElement.value = 'Alab';
-          fireEvent(inputElement, 'input');
-
-          fixture.detectChanges();
-          tick(100);
-        })
-      );
+  describe('onBlur', () => {
+    it('blur event should send the correct active item', fakeAsync(() => {
+      inputElement.value = 'Alab';
+      inputElement.dispatchEvent(new Event('input'));
+      tick();
 
-      it('blur event should send the correct active item', () => {
-        spyOn(fixture.componentInstance, 'onBlurEvent').and.callFake((param: any) => {
-          expect(param.item.id).toBe(1);
-        });
-        directive.onBlur();
-        fixture.detectChanges();
+      spyOn(fixture.componentInstance, 'onBlurEvent').and.callFake(param => {
+        expect(param.item.id).toBe(1);
       });
-    });
+      directive.onBlur();
+      expect(directive._container.isFocused).toBeFalsy();
+      fixture.detectChanges();
+    }));
 
-    describe('if typeaheadHideResultsOnBlur', () => {
-      beforeEach(
-        fakeAsync(() => {
-          inputElement.value = 'Ala';
-          fireEvent(inputElement, 'input');
-          directive.typeaheadHideResultsOnBlur = false;
-          fixture.detectChanges();
-          tick(100);
-        })
-      );
+  });
 
-      it('equal true should be opened',
-        fakeAsync(() => {
-          dispatchMouseEvent(document, 'click');
-          tick();
+  describe('if typeaheadHideResultsOnBlur', () => {
+    beforeEach(
+      fakeAsync(() => {
+        inputElement.value = 'Ala';
+        fireEvent(inputElement, 'input');
+        directive.typeaheadHideResultsOnBlur = false;
+        fixture.detectChanges();
+        tick(100);
+      })
+    );
+
+    it('equal true should be opened',
+      fakeAsync(() => {
+        dispatchMouseEvent(document, 'click');
+        tick();
+
+        expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+      })
+    );
+
+    it('equal false should be closed',
+      fakeAsync(() => {
+        directive.typeaheadHideResultsOnBlur = true;
+        dispatchMouseEvent(document, 'click');
+        tick();
+
+        expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+      })
+    );
+  });
 
-          expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
-        })
-      );
+  describe('onChange', () => {
+    beforeEach(
+      fakeAsync(() => {
+        inputElement.value = 'Ala';
+        fireEvent(inputElement, 'input');
 
-      it('equal false should be closed',
-        fakeAsync(() => {
-          directive.typeaheadHideResultsOnBlur = true;
-          dispatchMouseEvent(document, 'click');
-          tick();
+        fixture.detectChanges();
+        tick(100);
+      })
+    );
 
-          expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
-        })
+    it('should render the typeahead-container child element', () => {
+      const typeaheadContainer = fixture.debugElement.nativeElement.querySelector(
+        'typeahead-container'
       );
+      expect(typeaheadContainer).not.toBeNull();
     });
-  });
-
-  describe('Typeahead', () => {
-    const inputValue = `
-    <input class="input" [(ngModel)]="selectedState"
-           [typeahead]="statesValue">
-  `;
-
-    beforeEach(() => {
-      TestBed.configureTestingModule({
-        declarations: [TestTypeaheadComponent],
-        imports: [TypeaheadModule.forRoot(), FormsModule]
-      });
 
-      TestBed.overrideComponent(TestTypeaheadComponent, {
-        set: {template: inputValue}
-      });
+    it('should set the container reference', () => {
+      expect(directive._container).toBeTruthy();
+    });
 
-      fixture = TestBed.createComponent(TestTypeaheadComponent);
+    it('should result in a total of 2 matches, when "Ala" is entered', fakeAsync(() => {
+        expect(directive.matches.length).toBe(2);
+      })
+    );
 
-      fixture.detectChanges();
+    it('should result in 2 item matches, when "Ala" is entered', fakeAsync(() => {
+        expect(directive.matches).toContain(
+          new TypeaheadMatch(
+            {id: 1, name: 'Alabama', region: 'South'},
+            'Alabama'
+          )
+        );
+        expect(directive.matches).toContain(
+          new TypeaheadMatch(
+            {id: 2, name: 'Alaska', region: 'West'},
+            'Alaska'
+          )
+        );
+      })
+    );
 
-      component = fixture.componentInstance;
-      inputElement = fixture.debugElement.query(By.css('.input'))
-        .nativeElement as HTMLInputElement;
+    it('should result in 0 matches, when input does not match', fakeAsync(() => {
+        inputElement.value = 'foo';
+        fireEvent(inputElement, 'input');
+        fixture.detectChanges();
+        tick(100);
 
-      // get the typeahead directive instance
-      const inputs = fixture.debugElement.queryAll(
-        By.directive(TypeaheadDirective)
-      );
-      directive = inputs.map(
-        (de: DebugElement) =>
-          de.injector.get<TypeaheadDirective>(TypeaheadDirective)
-      )[0];
-    });
+        expect(directive.matches.length).toBe(0);
+      })
+    );
 
-    describe('if gets null', () => {
-      beforeEach(
-        fakeAsync(() => {
-          inputElement.value = 'Ala';
-          fireEvent(inputElement, 'input');
-          fixture.detectChanges();
-          tick(100);
-        })
-      );
+    it('should not display null item', fakeAsync(() => {
+        component.states.push({id: 3, name: null, region: 'West'});
+        inputElement.value = 'Ala';
+        fireEvent(inputElement, 'input');
+        fixture.detectChanges();
+        tick(100);
+
+        expect(directive.matches.length).toBe(2);
+      })
+    );
+
+    it('should be triggered hide method if esc was clicked', fakeAsync(() => {
+      expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 27} as {[key: string]: number}));
+      tick();
+
+      expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+    }));
+
+    it('should be triggered hide method if enter was clicked', fakeAsync(() => {
+      expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 13} as {[key: string]: number}));
+      tick();
+
+      expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+    }));
+
+    it('should not be triggered prevActiveMatch method if up was clicked', fakeAsync(() => {
+      inputElement.value = ' ';
+      inputElement.dispatchEvent(new Event('input'));
+      tick();
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 38} as {[key: string]: number}));
+      tick();
+
+      expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+    }));
+
+    it('should be triggered prevActiveMatch method if up was clicked', fakeAsync(() => {
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 38} as {[key: string]: number}));
+      tick();
+
+      expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+    }));
+
+    it('should not be triggered nextActiveMatch method if down was clicked', fakeAsync(() => {
+      inputElement.value = ' ';
+      inputElement.dispatchEvent(new Event('input'));
+      tick();
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 40} as {[key: string]: number}));
+      tick();
+
+      expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+    }));
+
+    it('should be triggered nextActiveMatch method if down was clicked', fakeAsync(() => {
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 40} as {[key: string]: number}));
+      tick();
+
+      expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+    }));
+
+    it('should not close typeahead container if Ctrl was clicked', fakeAsync(() => {
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 45} as {[key: string]: number}));
+      tick();
+
+      expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+    }));
+  });
 
-      it('shoul not call typeaheadLoading',
-        fakeAsync(() => {
-          directive.ngOnInit();
+  describe('onKeydown', () => {
+    beforeEach(
+      fakeAsync(() => {
+        inputElement.value = 'Ala';
+        fireEvent(inputElement, 'input');
+        fixture.detectChanges();
+        tick(100);
+      })
+    );
+
+    it('should not be triggered show method', fakeAsync(() => {
+      expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 9} as {[key: string]: number}));
+      tick();
+
+      expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+    }));
+
+    it('should not be triggered hide method', fakeAsync(() => {
+      inputElement.value = ' ';
+      inputElement.dispatchEvent(new Event('input'));
+      tick();
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 9} as {[key: string]: number}));
+      tick();
+      expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+    }));
+
+    it('should close container if Enter was clicked', fakeAsync(() => {
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 13} as {[key: string]: number}));
+      tick();
+      expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+    }));
+
+    it('should not close typeahead container if Ctrl was clicked', fakeAsync(() => {
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 45} as {[key: string]: number}));
+      tick();
+
+      expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+    }));
+
+    it('should close typeahead container if Tab was clicked', fakeAsync(() => {
+      inputElement.value = ' ';
+      inputElement.dispatchEvent(new Event('input'));
+      tick();
+
+      directive.typeaheadSelectFirstItem = false;
+      directive.isActiveItemChanged = true;
+      inputElement.value = 'Alab';
+      inputElement.dispatchEvent(new Event('input'));
+      tick();
+      /* tslint:disable:no-object-literal-type-assertion */
+      inputElement.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 9} as {[key: string]: number}));
+      tick();
+
+      expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+    }));
+  });
 
-          directive.typeaheadLoading.subscribe((value: any) => {
-            expect(value).not.toBeFalsy();
-          });
-        })
-      );
-    });
+  describe('if typeaheadHideResultsOnBlur', () => {
+    beforeEach(
+      fakeAsync(() => {
+        inputElement.value = 'Ala';
+        fireEvent(inputElement, 'input');
+        directive.typeaheadHideResultsOnBlur = false;
+        fixture.detectChanges();
+        tick(100);
+      })
+    );
+
+    it('equal true should be opened',
+      fakeAsync(() => {
+        document.dispatchEvent(new Event('click'));
+        tick();
+
+        expect(fixture.nativeElement.querySelector('.dropdown').classList).toContain('open');
+      })
+    );
+
+    it('equal false should be closed',
+      fakeAsync(() => {
+        directive.typeaheadHideResultsOnBlur = true;
+        document.dispatchEvent(new Event('click'));
+        tick();
+
+        expect(fixture.debugElement.query(By.css('typeahead-container'))).toBeNull();
+      })
+    );
   });
 });
diff --git a/src/tabs/package.json b/src/tabs/package.json
index 5369b167b2..45ea8d238e 100644
--- a/src/tabs/package.json
+++ b/src/tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/tabs",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/timepicker/package.json b/src/timepicker/package.json
index 15f1f4f75d..043c3e6ff9 100644
--- a/src/timepicker/package.json
+++ b/src/timepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/timepicker",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/tooltip/package.json b/src/tooltip/package.json
index dcee9b6be3..44d62d0171 100644
--- a/src/tooltip/package.json
+++ b/src/tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/tooltip",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/tooltip/tooltip-container.component.ts b/src/tooltip/tooltip-container.component.ts
index 4230689c2f..93c395fc45 100644
--- a/src/tooltip/tooltip-container.component.ts
+++ b/src/tooltip/tooltip-container.component.ts
@@ -14,6 +14,7 @@ import { isBs3 } from 'ngx-bootstrap/utils';
     '[class]':
       '"tooltip in tooltip-" + placement + " " + "bs-tooltip-" + placement + " " + placement + " " + containerClass',
     '[class.show]': '!isBs3',
+    '[class.bs3]': 'isBs3',
     '[attr.id]': 'this.id',
     role: 'tooltip'
   },
@@ -23,13 +24,17 @@ import { isBs3 } from 'ngx-bootstrap/utils';
       display: block;
       pointer-events: none;
     }
-    :host.bs-tooltip-top .arrow, :host.bs-tooltip-bottom .arrow {
-      left: 50%;
-      transform: translateX(-50%);
+    :host.bs3.tooltip.top>.arrow {
+      margin-left: -2px;
     }
-    :host.bs-tooltip-left .arrow, :host.bs-tooltip-right .arrow {
-      top: 50%;
-      transform: translateY(-50%);
+    :host.bs3.tooltip.bottom {
+      margin-top: 0px;
+    }
+    :host.bs3.bs-tooltip-left, :host.bs3.bs-tooltip-right{
+      margin: 0px;
+    }
+    :host.bs3.bs-tooltip-right .arrow, :host.bs3.bs-tooltip-left .arrow {
+      margin: .3rem 0;
     }
   `
   ],
diff --git a/src/typeahead/package.json b/src/typeahead/package.json
index 436b331ebe..938b60912e 100644
--- a/src/typeahead/package.json
+++ b/src/typeahead/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/typeahead",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {
diff --git a/src/typeahead/typeahead-container.component.ts b/src/typeahead/typeahead-container.component.ts
index 40211ca243..bcb288f4fa 100644
--- a/src/typeahead/typeahead-container.component.ts
+++ b/src/typeahead/typeahead-container.component.ts
@@ -26,7 +26,14 @@ import { TypeaheadDirective } from './typeahead.directive';
     '[style.visibility]': `typeaheadScrollable ? 'hidden' : 'visible'`,
     '[class.dropup]': 'dropup',
     style: 'position: absolute;display: block;'
-  }
+  },
+  styles: [
+    `
+    :host.dropdown {
+      z-index: 1000;
+    }
+  `
+  ]
 })
 export class TypeaheadContainerComponent {
   parent: TypeaheadDirective;
@@ -54,7 +61,8 @@ export class TypeaheadContainerComponent {
   @ViewChildren('liElements')
   private liElements: QueryList<ElementRef>;
 
-  constructor(element: ElementRef, private renderer: Renderer2) {
+  constructor(element: ElementRef,
+              private renderer: Renderer2) {
     this.element = element;
   }
 
@@ -100,8 +108,14 @@ export class TypeaheadContainerComponent {
     return this.parent ? this.parent.typeaheadItemTemplate : undefined;
   }
 
-  selectActiveMatch(): void {
-    this.selectMatch(this._active);
+  selectActiveMatch(isActiveItemChanged?: boolean): void {
+    if (this._active && this.parent.typeaheadSelectFirstItem) {
+      this.selectMatch(this._active);
+    }
+
+    if (!this.parent.typeaheadSelectFirstItem && isActiveItemChanged) {
+      this.selectMatch(this._active);
+    }
   }
 
   prevActiveMatch(): void {
diff --git a/src/typeahead/typeahead.config.ts b/src/typeahead/typeahead.config.ts
index 50e375ed42..9a92337d85 100644
--- a/src/typeahead/typeahead.config.ts
+++ b/src/typeahead/typeahead.config.ts
@@ -5,4 +5,10 @@ import { Injectable } from '@angular/core';
 export class TypeaheadConfig {
   /** used to hide results on blur */
   hideResultsOnBlur = true;
+  /** used to choose the first item in typeahead container */
+  selectFirstItem = true;
+  /** used to choose set minimal no of characters that needs to
+   * be entered before typeahead kicks-in
+   */
+  minLength = 1;
 }
diff --git a/src/typeahead/typeahead.directive.ts b/src/typeahead/typeahead.directive.ts
index 74355a625d..99e1e8b00d 100644
--- a/src/typeahead/typeahead.directive.ts
+++ b/src/typeahead/typeahead.directive.ts
@@ -19,9 +19,9 @@ import { from, Subscription, isObservable } from 'rxjs';
 import { ComponentLoader, ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 import { TypeaheadContainerComponent } from './typeahead-container.component';
 import { TypeaheadMatch } from './typeahead-match.class';
+import { TypeaheadConfig } from './typeahead.config';
 import { getValueFromObject, latinize, tokenize } from './typeahead-utils';
 import { debounceTime, filter, mergeMap, switchMap, toArray } from 'rxjs/operators';
-import { TypeaheadConfig } from './typeahead.config';
 
 @Directive({selector: '[typeahead]', exportAs: 'bs-typeahead'})
 export class TypeaheadDirective implements OnInit, OnDestroy {
@@ -86,6 +86,11 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
   @Input() typeaheadOptionsInScrollableView = 5;
   /** used to hide result on blur */
   @Input() typeaheadHideResultsOnBlur: boolean;
+  /** fired when an options list was opened and the user clicked Tab
+   * If a value equal true, it will be chosen first or active item in the list
+   * If value equal false, it will be chosen an active item in the list or nothing
+   */
+  @Input() typeaheadSelectFirstItem = true;
   /** fired when 'busy' state of this component was changed,
    * fired on async mode only, returns boolean
    */
@@ -96,7 +101,7 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
   @Output() typeaheadNoResults = new EventEmitter<boolean>();
   /** fired when option was selected, return object with data of this option */
   @Output() typeaheadOnSelect = new EventEmitter<TypeaheadMatch>();
-  /** fired when blur event occurres. returns the active item */
+  /** fired when blur event occurs. returns the active item */
     // tslint:disable-next-line:no-any
   @Output() typeaheadOnBlur = new EventEmitter<any>();
 
@@ -124,6 +129,7 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
     // @Input() protected typeaheadFocusOnSelect:boolean;
 
   _container: TypeaheadContainerComponent;
+  isActiveItemChanged = false;
   isTypeaheadOptionsListActive = false;
 
   // tslint:disable-next-line:no-any
@@ -151,7 +157,11 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
     )
       .provide({ provide: TypeaheadConfig, useValue: config });
 
-    Object.assign(this, { typeaheadHideResultsOnBlur: config.hideResultsOnBlur });
+    Object.assign(this,
+      { typeaheadHideResultsOnBlur: config.hideResultsOnBlur,
+               typeaheadSelectFirstItem: config.selectFirstItem,
+               typeaheadMinLength: config.minLength
+      });
   }
 
   ngOnInit(): void {
@@ -218,6 +228,7 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
       // up
       /* tslint:disable-next-line: deprecation */
       if (event.keyCode === 38 || event.key === 'ArrowUp') {
+        this.isActiveItemChanged = true;
         this._container.prevActiveMatch();
 
         return;
@@ -226,18 +237,11 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
       // down
       /* tslint:disable-next-line: deprecation */
       if (event.keyCode === 40 || event.key === 'ArrowDown') {
+        this.isActiveItemChanged = true;
         this._container.nextActiveMatch();
 
         return;
       }
-
-      // enter, tab
-      /* tslint:disable-next-line: deprecation */
-      if (event.keyCode === 13 || event.key === 'Enter') {
-        this._container.selectActiveMatch();
-
-        return;
-      }
     }
   }
 
@@ -264,21 +268,20 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
       return;
     }
 
-    // if an item is visible - prevent form submission
     /* tslint:disable-next-line: deprecation */
-    if (event.keyCode === 13 || event.key === 'Enter') {
+    if (event.keyCode === 9 || event.key === 'Tab' || event.keyCode === 13 || event.key === 'Enter') {
       event.preventDefault();
+      if (this.typeaheadSelectFirstItem) {
+        this._container.selectActiveMatch();
 
-      return;
-    }
-
-    // if an item is visible - don't change focus
-    /* tslint:disable-next-line: deprecation */
-    if (event.keyCode === 9 || event.key === 'Tab') {
-      event.preventDefault();
-      this._container.selectActiveMatch();
+        return;
+      }
 
-      return;
+      if (!this.typeaheadSelectFirstItem) {
+        this._container.selectActiveMatch(this.isActiveItemChanged);
+        this.isActiveItemChanged = false;
+        this.hide();
+      }
     }
   }
 
diff --git a/src/utils/package.json b/src/utils/package.json
index 44f0971615..757e80346b 100644
--- a/src/utils/package.json
+++ b/src/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/utils",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Native Angular Bootstrap Components",
   "private": true,
   "ngPackage": {