feat(offcanvas): added new module offcanvas.

.gitignore

@@ -50,3 +50,5 @@ scully.log
 /schematics/**/*.js
 /schematics/**/*.js.map
 /schematics/**/*.d.ts
+
+.angular

.vscode/extensions.json

@@ -6,4 +6,4 @@
     "esbenp.prettier-vscode",
     "firsttris.vscode-jest-runner"
   ]
-}
+}

apps/ngx-bootstrap-docs-e2e/src/integration/offcanvas_page_spec.ts

@@ -0,0 +1,126 @@
+import { OffcanvasPo } from '../support/offcanvas.po';
+
+describe('Offcanvas page testing suite', () => {
+  const offcanvas = new OffcanvasPo();
+
+  beforeEach(() => offcanvas.navigateTo());
+
+  describe('Basic offcanvas', () => {
+    const basic = offcanvas.exampleDemosArr.basic;
+    const element = offcanvas.exampleDemosArr.offcanvasElement;
+    const backdrop = offcanvas.exampleDemosArr.backdropElement;
+    const header = offcanvas.exampleDemosArr.headerElement;
+
+    it('when user click on button element should appear with default configuration', () => {
+      offcanvas.checkClass(`${basic} ${element}`, 'show', true);
+      offcanvas.clickOnBtn(`${basic}`);
+      offcanvas.checkClass(`${basic} ${element}`, 'show');
+      offcanvas.checkClass(`body ${backdrop}`, 'show');
+      offcanvas.checkTextContent(`${basic} ${element} ${header} h5`, '');
+      offcanvas.clickOnBtn(`${basic} ${element} ${header}`);
+      offcanvas.checkClass(`${basic} ${element}`, 'show', true);
+    });
+  });
+
+  describe('Header Title offcanvas', () => {
+    const headerTitle = offcanvas.exampleDemosArr.headerTitle;
+    const element = offcanvas.exampleDemosArr.offcanvasElement;
+    const backdrop = offcanvas.exampleDemosArr.backdropElement;
+    const header = offcanvas.exampleDemosArr.headerElement;
+
+    it('when user click on button element should appear with new header Title', () => {
+      offcanvas.checkClass(`${headerTitle} ${element}`, 'show', true);
+      offcanvas.clickOnBtn(`${headerTitle}`);
+      offcanvas.checkClass(`${headerTitle} ${element}`, 'show');
+      offcanvas.checkClass(`body ${backdrop}`, 'show');
+      offcanvas.checkTextContent(`${headerTitle} ${element} ${header} h5`, 'Added Header Title');
+      offcanvas.clickOnBtn(`${headerTitle} ${element} ${header}`);
+      offcanvas.checkClass(`${headerTitle} ${element}`, 'show', true);
+    });
+  });
+
+  describe('Different placement of offcanvas', () => {
+    const differentPosition = offcanvas.exampleDemosArr.differentPosition;
+    const element = offcanvas.exampleDemosArr.offcanvasElement;
+    const header = offcanvas.exampleDemosArr.headerElement;
+
+    const POSITION_CLASSNAME = {
+      start: 'offcanvas-start',
+      end: 'offcanvas-end',
+      top: 'offcanvas-top',
+      bottom: 'offcanvas-bottom'
+    };
+
+    const BUTTON_INDEX = {
+      start: 0,
+      end: 1,
+      top: 2,
+      bottom: 3
+    };
+
+    const availablePosition = Object.keys(POSITION_CLASSNAME);
+
+    it('when user click on button element should appears with new header Title', () => {
+      offcanvas.checkClass(`${differentPosition} ${element}`, 'show', true);
+      for (let i = 0; i < availablePosition.length - 1; i++) {
+        const position = availablePosition[i];
+        offcanvas.clickOnBtn(`${differentPosition}`, BUTTON_INDEX[position]);
+        offcanvas.checkClass(`${differentPosition} ${element}`, 'show');
+        offcanvas.checkClass(`${differentPosition} ${element}`, POSITION_CLASSNAME[position]);
+        offcanvas.clickOnBtn(`${differentPosition} ${element} ${header}`);
+        offcanvas.checkClass(`${differentPosition} ${element}`, 'show', true);
+      }
+    });
+  });
+
+  describe('Backdrop of offcanvas', () => {
+    const backdropSelector = offcanvas.exampleDemosArr.backdrop;
+    const element = offcanvas.exampleDemosArr.offcanvasElement;
+    const header = offcanvas.exampleDemosArr.headerElement;
+    const backdrop = offcanvas.exampleDemosArr.backdropElement;
+
+    it('when user click on button element should appears with/without backdrop', () => {
+      offcanvas.checkClass(`${backdropSelector} ${element}`, 'show', true);
+      offcanvas.clickOnBtn(`${backdropSelector}`, 1);
+      offcanvas.checkClass(`${backdropSelector} ${element}`, 'show');
+      offcanvas.checkClass(`body ${backdrop}`, 'show');
+      offcanvas.clickOnBtn(`${backdropSelector} ${element} ${header}`);
+      offcanvas.clickOnBtn(`${backdropSelector}`, 0);
+      offcanvas.clickOnBtn(`${backdropSelector}`, 1);
+      offcanvas.checkClass(`${backdropSelector} ${element}`, 'show');
+      offcanvas.checkBackdropInDom(`body ${backdrop}`);
+    });
+  });
+
+  describe('Events offcanvas', () => {
+    const eventSelector = offcanvas.exampleDemosArr.triggerEvent;
+    const element = offcanvas.exampleDemosArr.offcanvasElement;
+    const header = offcanvas.exampleDemosArr.headerElement;
+
+    it('when user opens element should appears true in pre tag, after closing it should be changed on false', () => {
+      offcanvas.checkClass(`${eventSelector} ${element}`, 'show', true);
+      offcanvas.clickOnBtn(`${eventSelector}`);
+      offcanvas.checkTextContent(`${eventSelector} pre`, 'true');
+      offcanvas.clickOnBtn(`${eventSelector} ${element} ${header}`);
+      offcanvas.checkTextContent(`${eventSelector} pre`, 'false');
+    });
+  });
+
+  describe('Ways to use', () => {
+    const waysToUseSelector = offcanvas.exampleDemosArr.waysToUse;
+    const element = offcanvas.exampleDemosArr.offcanvasElement;
+    const header = offcanvas.exampleDemosArr.headerElement;
+    const backdrop = offcanvas.exampleDemosArr.backdropElement;
+
+    it('when user opens element should appears true in pre tag, after closing it should be changed on false', () => {
+      offcanvas.checkClass(`${waysToUseSelector} ${element}`, 'show', true);
+      offcanvas.clickOnBtn(`${waysToUseSelector}`, 0);
+      offcanvas.checkClass(`${waysToUseSelector} ${element}`, 'show');
+      offcanvas.clickOnBtn(`${waysToUseSelector} ${element} ${header}`);
+      offcanvas.clickOnBtn(`${waysToUseSelector}`, 1);
+      offcanvas.checkClass(`${waysToUseSelector} ${element}`, 'show');
+      offcanvas.clickOnBackdrop(`body ${backdrop}`);
+      offcanvas.checkClass(`${waysToUseSelector} ${element}`, 'show', true);
+    });
+  });
+});

apps/ngx-bootstrap-docs-e2e/src/support/offcanvas.po.ts

@@ -0,0 +1,44 @@
+import { BaseComponent } from './base.component';
+import Agent = Cypress.Agent;
+
+export class OffcanvasPo extends BaseComponent {
+  pageUrl = '#/components/offcanvas';
+  pageTitle = 'Offcanvas';
+  ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/offcanvas';
+
+  exampleDemosArr = {
+    basic: 'tab[heading="Overview"] basic',
+    backdrop: 'tab[heading="Overview"] backdrop',
+    backdropScrolling: 'tab[heading="Overview"] backdrop-scrolling',
+    differentPosition: 'tab[heading="Overview"] different-position',
+    headerTitle: 'tab[heading="Overview"] header-title',
+    triggerEvent: 'tab[heading="Overview"] trigger-event',
+    waysToUse: 'tab[heading="Overview"] use-ways',
+    offcanvasElement: '.offcanvas',
+    backdropElement: '.offcanvas-backdrop',
+    headerElement: '.offcanvas-header'
+  };
+
+  checkClass(baseSelector: string, classValue: string, not = false) {
+    if (!not) {
+      cy.get(`${baseSelector}`).should('to.have.class', classValue);
+      return;
+    }
+
+    cy.get(`${baseSelector}`).should('not.have.class', classValue);
+  }
+
+  checkTextContent(baseSelector: string, expectedContent: string) {
+    cy.get(`${baseSelector}`)
+      .invoke('text')
+      .should('to.contains', expectedContent);
+  }
+
+  checkBackdropInDom(baseSelector: string) {
+    cy.get(`${baseSelector}`).should('not.exist');
+  }
+
+  clickOnBackdrop(baseSelector: string) {
+    cy.get(`${ baseSelector }`).click();
+  }
+}

apps/ngx-bootstrap-docs/src/app/app.routing.ts

@@ -7,6 +7,7 @@ import {
   SchematicsComponent,
   ConstructionPageComponent
 } from "@ngx-bootstrap-doc/docs";
+import { DemoOffcanvasModule } from "@ngx-bootstrap-doc/offcanvas";
 
 export const routes: Routes = [
   {
@@ -127,6 +128,11 @@ export const routes: Routes = [
         path: 'typeahead',
         data: ['Typeahead', {moduleName: 'TypeaheadModule', moduleFolder: 'typeahead', sideBarParentTitle: 'components', parentRoute: 'components'}],
         loadChildren: () => import('@ngx-bootstrap-doc/typeahead').then(m => m.DemoTypeaheadModule)
+      },
+      {
+        path: 'offcanvas',
+        data: ['Offcanvas', {moduleName: 'OffcanvasModule', moduleFolder: 'offcanvas', sideBarParentTitle: 'components', parentRoute: 'components'}],
+        loadChildren: () => import('@ngx-bootstrap-doc/offcanvas').then(m => m.DemoOffcanvasModule)
       }
     ]},
   {

apps/ngx-bootstrap-docs/src/assets/css/adaptive.scss

@@ -5,11 +5,11 @@
   .header {
     position: fixed;
     top: 0;
-    z-index: 1090;
+    z-index: 1030;
   }
 
   .header-dropdown {
-    z-index: 1090;
+    z-index: 1030;
   }
 
   .modal-backdrop {

apps/ngx-bootstrap-docs/src/assets/css/style.scss

@@ -1,5 +1,6 @@
 @import "sidebar";
 @import "bs-datepicker";
+//@import "offcanvas";
 
 /* HEADER */
 

apps/ngx-bootstrap-docs/src/ng-api-doc.ts

@@ -773,6 +773,23 @@ export const ngdoc: any = {
     "methods": [],
     "properties": []
   },
+  "BackdropComponent": {
+    "fileName": "src/component-loader/entries-components/backdrop/backdrop.component.ts",
+    "className": "BackdropComponent",
+    "description": "<p>This component will be added as background layout for modals if enabled</p>\n",
+    "selector": "bs-modal-backdrop",
+    "inputs": [],
+    "outputs": [],
+    "properties": [],
+    "methods": []
+  },
+  "BackdropService": {
+    "fileName": "src/component-loader/entries-components/backdrop/backdrop.service.ts",
+    "className": "BackdropService",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
   "ListenOptions": {
     "fileName": "src/utils/triggers.ts",
     "className": "ListenOptions",
@@ -1020,6 +1037,11 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>sets use adaptive position</p>\n"
       },
+      {
+        "name": "allowedPositions",
+        "type": "string[]",
+        "description": "<p>Set allowed positions of container.</p>\n"
+      },
       {
         "name": "clearButtonLabel",
         "defaultValue": "Clear",
@@ -2695,16 +2717,6 @@ export const ngdoc: any = {
     ],
     "properties": []
   },
-  "ModalBackdropComponent": {
-    "fileName": "src/modal/modal-backdrop.component.ts",
-    "className": "ModalBackdropComponent",
-    "description": "<p>This component will be added as background layout for modals if enabled</p>\n",
-    "selector": "bs-modal-backdrop",
-    "inputs": [],
-    "outputs": [],
-    "properties": [],
-    "methods": []
-  },
   "ModalContainerComponent": {
     "fileName": "src/modal/modal-container.component.ts",
     "className": "ModalContainerComponent",
@@ -2903,6 +2915,80 @@ export const ngdoc: any = {
     "methods": [],
     "properties": []
   },
+  "OffcanvasContainerComponent": {
+    "fileName": "src/offcanvas/offcanvas-container.component.ts",
+    "className": "OffcanvasContainerComponent",
+    "description": "",
+    "selector": "offcanvas",
+    "inputs": [
+      {
+        "name": "config",
+        "type": "OffcanvasConfigType | Partial<OffcanvasConfigType>",
+        "description": "<p>allows to set offcanvas configuration via element property</p>\n"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "isOpened",
+        "description": "<p>Emits event when the opened state changes</p>\n"
+      }
+    ],
+    "properties": [],
+    "methods": []
+  },
+  "OffcanvasConfig": {
+    "fileName": "src/offcanvas/offcanvas.config.ts",
+    "className": "OffcanvasConfig",
+    "description": "<p>Default offcanvas configuration</p>\n",
+    "methods": [],
+    "properties": [
+      {
+        "name": "backdrop",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>in default configuration backdrop is available</p>\n"
+      },
+      {
+        "name": "backdropScrolling",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>in default configuration backdrop scrolling is enabled</p>\n"
+      },
+      {
+        "name": "headerTitle",
+        "type": "string",
+        "description": "<p>default headerTitle is empty</p>\n"
+      },
+      {
+        "name": "placement",
+        "defaultValue": "start",
+        "type": "Partial<AvailablePlacement>",
+        "description": "<p>default placement of element is left side</p>\n"
+      }
+    ]
+  },
+  "OffcanvasDirective": {
+    "fileName": "src/offcanvas/offcanvas.directive.ts",
+    "className": "OffcanvasDirective",
+    "description": "",
+    "selector": "[offcanvas]",
+    "exportAs": "offcanvas",
+    "inputs": [
+      {
+        "name": "config",
+        "type": "OffcanvasConfigType",
+        "description": "<p>allows to set offcanvas configuration via element property</p>\n"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "isOpened",
+        "description": "<p>Emits when the opened state changes</p>\n"
+      }
+    ],
+    "properties": [],
+    "methods": []
+  },
   "ConfigModel": {
     "fileName": "src/pagination/models/index.ts",
     "className": "ConfigModel",
@@ -3338,7 +3424,7 @@ export const ngdoc: any = {
     "properties": [
       {
         "name": "popoverId",
-        "type": "number",
+        "type": "string",
         "description": "<p>unique id popover - use for aria-describedby</p>\n"
       }
     ],

libs/doc-pages/accordion/src/lib/demos/basic/basic.html

@@ -12,3 +12,4 @@
     <p>Some content</p>
   </accordion-group>
 </accordion>
+

libs/doc-pages/offcanvas/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR