ng-sidebar9plus 12.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 - present Eugene Cheung
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,240 @@
+# ng-sidebar9plus
+
+⚠️　**This package is forked form deprecated package **[ng-sidebar](https://www.npmjs.com/package/ng-sidebar)** .** ⚠️
+
+---
+
+[![NPM](https://nodei.co/npm/ng-sidebar.png?compact=true)](https://nodei.co/npm/ng-sidebar)
+
+**[Demo](https://echeung.me/ng-sidebar)**
+
+*Formerly called [ng-sidebar](https://github.com/arkon/ng-sidebar)*
+
+An Angular sidebar component.
+
+
+## Installation
+
+```shell
+npm install --save ng-sidebar9plus
+```
+
+### SystemJS configuration
+
+If you're using SystemJS, be sure to add the appropriate settings to your SystemJS config:
+
+```js
+const map = {
+  // ...
+  'ng-sidebar9plus': 'node_modules/ng-sidebar9plus',
+  // ...
+};
+
+const packages = {
+  // ...
+  'ng-sidebar9plus': {
+    main: 'lib/index',
+    defaultExtension: 'js'
+  },
+  // ...
+};
+```
+
+
+## Changelog
+
+See the [releases page](https://github.com/arkon/ng-sidebar/releases) on GitHub.
+
+
+## Usage
+
+Add `SidebarModule` to your app module:
+
+```typescript
+import { SidebarModule } from 'ng-sidebar';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, SidebarModule.forRoot()],
+  bootstrap: [AppComponent],
+})
+class AppModule {}
+```
+
+In your app component, simply use add a `<ng-sidebar-container>` wrapper, then place your `<ng-sidebar>`(s) and content within it.
+Your page content should be in some container with a `ng-sidebar-content` attribute.
+
+```typescript
+@Component({
+  selector: 'app',
+  template: `
+    <!-- Container for sidebar(s) + page content -->
+    <ng-sidebar-container>
+
+      <!-- A sidebar -->
+      <ng-sidebar [(opened)]="_opened">
+        <p>Sidebar contents</p>
+      </ng-sidebar>
+
+      <!-- Page content -->
+      <div ng-sidebar-content>
+        <button (click)="_toggleSidebar()">Toggle sidebar</button>
+      </div>
+
+    </ng-sidebar-container>
+  `
+})
+class AppComponent {
+  private _opened: boolean = false;
+
+  private _toggleSidebar() {
+    this._opened = !this._opened;
+  }
+}
+```
+
+If nothing seems to show up, your wrappers' heights may be collapsing. Try adding a height (e.g. `height: 100vh;`) to the wrapper `<ng-sidebar-container>` or other wrapper elements you may have. (See [issue #100](https://github.com/arkon/ng-sidebar/issues/100) for more info.)
+
+A directive is also provided to easily close the sidebar by clicking something inside it:
+
+```html
+<ng-sidebar>
+  <a closeSidebar>Closes the sidebar</a>
+</ng-sidebar>
+```
+
+You can also use the `open()` and `close()` functions:
+
+```html
+<ng-sidebar #sidebar>
+  <button (click)="sidebar.close()">Close sidebar</button>
+</ng-sidebar>
+
+<button (click)="sidebar.open()">Open sidebar</button>
+```
+
+
+## Functions
+
+The sidebar has a few public functions:
+
+| Function | Description |
+| -------- | ----------- |
+| `open()` | Opens the sidebar. |
+| `close()` | Closes the sidebar. |
+| `triggerRerender()` | Manually trigger a re-render of the container. Useful if the sidebar contents might change. |
+
+
+## Styling
+
+Various class names are attached to the sidebar and container for easier styling.
+
+If you are using Angular's default emulated view encapsulation, you may have to use the `>>>` selector to target the sidebar's classes. Check out [Angular's documentation](https://angular.io/guide/component-styles#deep) for more details. Note that the `/deep/` selector [will soon be deprecated](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/68qSZM5QMRQ/pT2YCqZSomAJ).
+
+### Sidebar
+
+| Class name | Description |
+| ---------- | ----------- |
+| `ng-sidebar` | Always on the sidebar element. |
+| `ng-sidebar--opened` | When `opened` is `true`. |
+| `ng-sidebar--closed` | When `opened` is `false`. |
+| `ng-sidebar--left` | When `position` is `'left'` (or the `'start'`/`'end'` aliases are equivalent to `'left'`). |
+| `ng-sidebar--right` | When `position` is `'right'` (or the `'start'`/`'end'` aliases are equivalent to `'right'`). |
+| `ng-sidebar--top` | When `position` is `'top'`. |
+| `ng-sidebar--bottom` | When `position` is `'bottom'`. |
+| `ng-sidebar--over` | When `mode` is `'over'`. |
+| `ng-sidebar--push` | When `mode` is `'push'`. |
+| `ng-sidebar--slide` | When `mode` is `'slide'`. |
+| `ng-sidebar--docked` | When the sidebar is docked (i.e. it is "closed" and `dock` is `true`). |
+| `ng-sidebar--inert` | Ignores pointer clicks. Class is applied when the sidebar is closed. |
+| `ng-sidebar--animate` | When `animate` is `true` for a sidebar. |
+
+### Backdrop
+
+| Class name | Description |
+| ---------- | ----------- |
+| `ng-sidebar__backdrop` | Class of the backdrop `div`. Note that the `div` is only in the DOM when the backdrop is shown. |
+
+### Page content
+
+| Class name | Description |
+| ---------- | ----------- |
+| `ng-sidebar__content` | Class of the wrapper `div` for the page content. |
+| `ng-sidebar__content--animate` | When `animate` is `true` for the container. |
+
+
+
+## Options
+
+### `<ng-sidebar-container>`
+
+### Inputs
+
+| Property name | Type | Default | Description |
+| ------------- | ---- | ------- | ----------- |
+| contentClass | string | | Additional class name on the `div` wrapping the page contents. |
+| backdropClass | string | | Additional class name on the overlay element. |
+| showBackdrop | boolean | `false` | Controls the backdrop state of the sidebar container. This should be two-way bound. |
+| allowSidebarBackdropControl | boolean | `true` | Determines if the container component respects the sidebar's `showBackdrop` input option. |
+| animate | boolean | `true` | Animates the container sliding. |
+
+#### Outputs
+
+| Property name | Callback arguments | Description |
+| ------------- | ------------------ | ----------- |
+| showBackdropChange | `showBackdrop: boolean` | Emitted when `showBackdrop` is modified. This allows for you to do "two-way binding" (i.e. `[(showBackdrop)]`). |
+| onBackdropClicked | | Emitted when a backdrop is clicked. |
+
+
+### `<ng-sidebar>`
+
+#### Inputs
+
+| Property name | Type | Default | Description |
+| ------------- | ---- | ------- | ----------- |
+| opened | boolean | `false` | Controls the opened state of the sidebar. This should be two-way bound. |
+| mode | `'over'`, `'push'`, `'slide'` | `'over'` | See the "Modes" section. |
+| dock | boolean | `false` | Show the sidebar as docked when closed. |
+| dockedSize | string | `'0px'` | When `mode` is set to `'dock'`, this value indicates how much of the sidebar is still visible when "closed". |
+| position | `'left'`, `'right'`, `'top'`, `'bottom'`, `'start'`, `'end'` | `'start'` | What side the sidebar should be docked to. `'start'` and `'end'` are aliases that respect the page's language (e.g. `start` is the same as `left` for English, but would be `right` for Hebrew. |
+| autoCollapseHeight | number | | Window height in pixels in which to automatically close the sidebar. |
+| autoCollapseWidth | number | | Window width in pixels in which to automatically close the sidebar. |
+| autoCollapseOnInit | boolean | `true` | Collapse sidebar based on `autoCollapseHeight` and/or `autoCollapseWidth` on initial render as needed. |
+| animate | boolean | `true` | Animate the opening/closing of the sidebar. |
+| sidebarClass | string | | Additional class name on the sidebar element. |
+| ariaLabel | string | | Value for the sidebar's `aria-label` attribute. |
+| trapFocus | boolean | `false` | Keeps focus within the sidebar when open. Note that this only works if there's one sidebar open at a time. |
+| autoFocus | boolean | `true` | Automatically focus the first focusable element in the sidebar when opened. |
+| showBackdrop | boolean | `false` | If a translucent black backdrop overlay should appear over the page contents when the sidebar is opened.  This is ignored if the sidebar's parent container has its `allowSidebarBackdropControl` property set to `true`. |
+| closeOnClickBackdrop | boolean | `false` | Whether clicking on the backdrop of the open sidebar will close it. |
+| closeOnClickOutside | boolean | `false` | Whether clicking outside of the open sidebar will close it. |
+| keyClose | boolean | `false` | Close the sidebar when a keyboard button is pressed. |
+| keyCode | number | `27` | The [key code](http://keycode.info/) for `keyClose`. |
+
+#### Outputs
+
+| Property name | Callback arguments | Description |
+| ------------- | ------------------ | ----------- |
+| onContentInit | | Corresponds with `ngAfterContentInit` lifecycle event of the sidebar component. |
+| openedChange | `opened: boolean` | Emitted when `opened` is modified. This allows for you to do "two-way binding" (i.e. `[(opened)]`). |
+| onOpenStart | | Emitted when the sidebar is opening. |
+| onOpened | | Emitted when the sidebar is opened. |
+| onCloseStart | | Emitted when the sidebar is closing. |
+| onClosed | | Emitted when the sidebar is closed. |
+| onTransitionEnd | | Emitted when the animation for opening or closing ends. |
+| onModeChange | `mode: string` | Emitted when `mode` is changed. |
+| onPositionChange | `position: string` | Emitted when `position` is changed. |
+
+#### Modes
+
+##### `over`
+
+This is the default mode. The sidebar slides in over the page contents.
+
+##### `push`
+
+The page contents is pushed to make space for the sidebar.
+
+##### `slide`
+
+The entire page slides over to show the sidebar. Note that this only works if you have one sidebar open at a time.

package/lib_commonjs/close.directive.d.ts

@@ -0,0 +1,9 @@
+import { Sidebar } from './sidebar.component';
+import * as i0 from "@angular/core";
+export declare class CloseSidebar {
+    private _sidebar;
+    constructor(_sidebar: Sidebar);
+    _onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CloseSidebar, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CloseSidebar, "[closeSidebar]", never, {}, {}, never>;
+}

package/lib_commonjs/close.directive.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseSidebar = void 0;
+var core_1 = require("@angular/core");
+var sidebar_component_1 = require("./sidebar.component");
+var i0 = require("@angular/core");
+var i1 = require("./sidebar.component");
+var CloseSidebar = (function () {
+    function CloseSidebar(_sidebar) {
+        this._sidebar = _sidebar;
+    }
+    CloseSidebar.prototype._onClick = function () {
+        if (this._sidebar) {
+            this._sidebar.close();
+        }
+    };
+    CloseSidebar.ɵfac = function CloseSidebar_Factory(t) { return new (t || CloseSidebar)(i0.ɵɵdirectiveInject(i1.Sidebar)); };
+    CloseSidebar.ɵdir = i0.ɵɵdefineDirective({ type: CloseSidebar, selectors: [["", "closeSidebar", ""]], hostBindings: function CloseSidebar_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function CloseSidebar_click_HostBindingHandler() { return ctx._onClick(); });
+        } } });
+    return CloseSidebar;
+}());
+exports.CloseSidebar = CloseSidebar;
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CloseSidebar, [{
+        type: core_1.Directive,
+        args: [{
+                selector: '[closeSidebar]',
+                host: {
+                    '(click)': '_onClick()'
+                }
+            }]
+    }], function () { return [{ type: i1.Sidebar }]; }, null); })();

package/lib_commonjs/index.d.ts

@@ -0,0 +1,4 @@
+export { SidebarContainer } from './sidebar-container.component';
+export { Sidebar } from './sidebar.component';
+export { CloseSidebar } from './close.directive';
+export { SidebarModule } from './sidebar.module';

package/lib_commonjs/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarModule = exports.CloseSidebar = exports.Sidebar = exports.SidebarContainer = void 0;
+var sidebar_container_component_1 = require("./sidebar-container.component");
+Object.defineProperty(exports, "SidebarContainer", { enumerable: true, get: function () { return sidebar_container_component_1.SidebarContainer; } });
+var sidebar_component_1 = require("./sidebar.component");
+Object.defineProperty(exports, "Sidebar", { enumerable: true, get: function () { return sidebar_component_1.Sidebar; } });
+var close_directive_1 = require("./close.directive");
+Object.defineProperty(exports, "CloseSidebar", { enumerable: true, get: function () { return close_directive_1.CloseSidebar; } });
+var sidebar_module_1 = require("./sidebar.module");
+Object.defineProperty(exports, "SidebarModule", { enumerable: true, get: function () { return sidebar_module_1.SidebarModule; } });

package/lib_commonjs/sidebar-container.component.d.ts

@@ -0,0 +1,29 @@
+import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { Sidebar } from './sidebar.component';
+import * as i0 from "@angular/core";
+export declare class SidebarContainer implements AfterContentInit, OnChanges, OnDestroy {
+    private _ref;
+    animate: boolean;
+    allowSidebarBackdropControl: boolean;
+    showBackdrop: boolean;
+    showBackdropChange: EventEmitter<boolean>;
+    onBackdropClicked: EventEmitter<null>;
+    contentClass: string;
+    backdropClass: string;
+    private _sidebars;
+    private _isBrowser;
+    constructor(_ref: ChangeDetectorRef, platformId: Object);
+    ngAfterContentInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    _addSidebar(sidebar: Sidebar): void;
+    _removeSidebar(sidebar: Sidebar): void;
+    _getContentStyle(): CSSStyleDeclaration;
+    _onBackdropClicked(): void;
+    private _subscribe;
+    private _unsubscribe;
+    private _onToggle;
+    private _markForCheck;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarContainer, "ng-sidebar-container", never, { "animate": "animate"; "allowSidebarBackdropControl": "allowSidebarBackdropControl"; "showBackdrop": "showBackdrop"; "contentClass": "contentClass"; "backdropClass": "backdropClass"; }, { "showBackdropChange": "showBackdropChange"; "onBackdropClicked": "onBackdropClicked"; }, never, ["ng-sidebar,[ng-sidebar]", "[ng-sidebar-content]"]>;
+}

package/lib_commonjs/sidebar-container.component.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarContainer = void 0;
+var core_1 = require("@angular/core");
+var common_1 = require("@angular/common");
+var i0 = require("@angular/core");
+var i1 = require("@angular/common");
+function SidebarContainer_div_0_Template(rf, ctx) { if (rf & 1) {
+    var _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵlistener("click", function SidebarContainer_div_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r2); var ctx_r1 = i0.ɵɵnextContext(); return ctx_r1._onBackdropClicked(); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    var ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.backdropClass);
+} }
+var _c0 = [[["ng-sidebar"], ["", "ng-sidebar", ""]], [["", "ng-sidebar-content", ""]]];
+var _c1 = ["ng-sidebar,[ng-sidebar]", "[ng-sidebar-content]"];
+var SidebarContainer = (function () {
+    function SidebarContainer(_ref, platformId) {
+        this._ref = _ref;
+        this.animate = true;
+        this.allowSidebarBackdropControl = true;
+        this.showBackdrop = false;
+        this.showBackdropChange = new core_1.EventEmitter();
+        this.onBackdropClicked = new core_1.EventEmitter();
+        this._sidebars = [];
+        this._isBrowser = common_1.isPlatformBrowser(platformId);
+    }
+    SidebarContainer.prototype.ngAfterContentInit = function () {
+        if (!this._isBrowser) {
+            return;
+        }
+        this._onToggle();
+    };
+    SidebarContainer.prototype.ngOnChanges = function (changes) {
+        if (!this._isBrowser) {
+            return;
+        }
+        if (changes['showBackdrop']) {
+            this.showBackdropChange.emit(changes['showBackdrop'].currentValue);
+        }
+    };
+    SidebarContainer.prototype.ngOnDestroy = function () {
+        if (!this._isBrowser) {
+            return;
+        }
+        this._unsubscribe();
+    };
+    SidebarContainer.prototype._addSidebar = function (sidebar) {
+        this._sidebars.push(sidebar);
+        this._subscribe(sidebar);
+    };
+    SidebarContainer.prototype._removeSidebar = function (sidebar) {
+        var index = this._sidebars.indexOf(sidebar);
+        if (index !== -1) {
+            this._sidebars.splice(index, 1);
+        }
+    };
+    SidebarContainer.prototype._getContentStyle = function () {
+        var left = 0, right = 0, top = 0, bottom = 0;
+        var transformStyle = '';
+        var heightStyle = '';
+        var widthStyle = '';
+        for (var _i = 0, _a = this._sidebars; _i < _a.length; _i++) {
+            var sidebar = _a[_i];
+            if (sidebar._isModeSlide) {
+                if (sidebar.opened) {
+                    var transformDir = sidebar._isLeftOrRight ? 'X' : 'Y';
+                    var transformAmt = "" + (sidebar._isLeftOrTop ? '' : '-') + (sidebar._isLeftOrRight ? sidebar._width : sidebar._height);
+                    transformStyle = "translate" + transformDir + "(" + transformAmt + "px)";
+                }
+            }
+            if ((sidebar._isModePush && sidebar.opened) || sidebar.dock) {
+                var paddingAmt = 0;
+                if (sidebar._isModeSlide && sidebar.opened) {
+                    if (sidebar._isLeftOrRight) {
+                        widthStyle = '100%';
+                    }
+                    else {
+                        heightStyle = '100%';
+                    }
+                }
+                else {
+                    if (sidebar._isDocked || (sidebar._isModeOver && sidebar.dock)) {
+                        paddingAmt = sidebar._dockedSize;
+                    }
+                    else {
+                        paddingAmt = sidebar._isLeftOrRight ? sidebar._width : sidebar._height;
+                    }
+                }
+                switch (sidebar.position) {
+                    case 'left':
+                        left = Math.max(left, paddingAmt);
+                        break;
+                    case 'right':
+                        right = Math.max(right, paddingAmt);
+                        break;
+                    case 'top':
+                        top = Math.max(top, paddingAmt);
+                        break;
+                    case 'bottom':
+                        bottom = Math.max(bottom, paddingAmt);
+                        break;
+                }
+            }
+        }
+        return {
+            padding: top + "px " + right + "px " + bottom + "px " + left + "px",
+            webkitTransform: transformStyle,
+            transform: transformStyle,
+            height: heightStyle,
+            width: widthStyle
+        };
+    };
+    SidebarContainer.prototype._onBackdropClicked = function () {
+        var backdropClicked = false;
+        for (var _i = 0, _a = this._sidebars; _i < _a.length; _i++) {
+            var sidebar = _a[_i];
+            if (sidebar.opened && sidebar.showBackdrop && sidebar.closeOnClickBackdrop) {
+                sidebar.close();
+                backdropClicked = true;
+            }
+        }
+        if (backdropClicked) {
+            this.onBackdropClicked.emit();
+        }
+    };
+    SidebarContainer.prototype._subscribe = function (sidebar) {
+        var _this = this;
+        sidebar.onOpenStart.subscribe(function () { return _this._onToggle(); });
+        sidebar.onOpened.subscribe(function () { return _this._markForCheck(); });
+        sidebar.onCloseStart.subscribe(function () { return _this._onToggle(); });
+        sidebar.onClosed.subscribe(function () { return _this._markForCheck(); });
+        sidebar.onModeChange.subscribe(function () { return _this._markForCheck(); });
+        sidebar.onPositionChange.subscribe(function () { return _this._markForCheck(); });
+        sidebar._onRerender.subscribe(function () { return _this._markForCheck(); });
+    };
+    SidebarContainer.prototype._unsubscribe = function () {
+        for (var _i = 0, _a = this._sidebars; _i < _a.length; _i++) {
+            var sidebar = _a[_i];
+            sidebar.onOpenStart.unsubscribe();
+            sidebar.onOpened.unsubscribe();
+            sidebar.onCloseStart.unsubscribe();
+            sidebar.onClosed.unsubscribe();
+            sidebar.onModeChange.unsubscribe();
+            sidebar.onPositionChange.unsubscribe();
+            sidebar._onRerender.unsubscribe();
+        }
+    };
+    SidebarContainer.prototype._onToggle = function () {
+        var _this = this;
+        if (this._sidebars.length > 0 && this.allowSidebarBackdropControl) {
+            var hasOpen = this._sidebars.some(function (sidebar) { return sidebar.opened && sidebar.showBackdrop; });
+            this.showBackdrop = hasOpen;
+            this.showBackdropChange.emit(hasOpen);
+        }
+        setTimeout(function () {
+            _this._markForCheck();
+        });
+    };
+    SidebarContainer.prototype._markForCheck = function () {
+        this._ref.markForCheck();
+    };
+    SidebarContainer.ɵfac = function SidebarContainer_Factory(t) { return new (t || SidebarContainer)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(core_1.PLATFORM_ID)); };
+    SidebarContainer.ɵcmp = i0.ɵɵdefineComponent({ type: SidebarContainer, selectors: [["ng-sidebar-container"]], inputs: { animate: "animate", allowSidebarBackdropControl: "allowSidebarBackdropControl", showBackdrop: "showBackdrop", contentClass: "contentClass", backdropClass: "backdropClass" }, outputs: { showBackdropChange: "showBackdropChange", onBackdropClicked: "onBackdropClicked" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1, decls: 4, vars: 5, consts: [["aria-hidden", "true", "class", "ng-sidebar__backdrop", 3, "ngClass", "click", 4, "ngIf"], [1, "ng-sidebar__content", 3, "ngClass", "ngStyle"], ["aria-hidden", "true", 1, "ng-sidebar__backdrop", 3, "ngClass", "click"]], template: function SidebarContainer_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵtemplate(0, SidebarContainer_div_0_Template, 1, 1, "div", 0);
+            i0.ɵɵprojection(1);
+            i0.ɵɵelementStart(2, "div", 1);
+            i0.ɵɵprojection(3, 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.showBackdrop);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("ng-sidebar__content--animate", ctx.animate);
+            i0.ɵɵproperty("ngClass", ctx.contentClass)("ngStyle", ctx._getContentStyle());
+        } }, directives: [i1.NgIf, i1.NgClass, i1.NgStyle], styles: ["[_nghost-%COMP%] {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      height: 100%;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .ng-sidebar__backdrop[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      background: #000;\n      opacity: 0.75;\n      pointer-events: auto;\n      z-index: 1;\n    }\n\n    .ng-sidebar__content[_ngcontent-%COMP%] {\n      -webkit-overflow-scrolling: touch;\n      overflow: auto;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n\n    .ng-sidebar__content--animate[_ngcontent-%COMP%] {\n      -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1), padding 0.3s cubic-bezier(0, 0, 0.3, 1);\n      transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1), padding 0.3s cubic-bezier(0, 0, 0.3, 1);\n    }"], changeDetection: 0 });
+    return SidebarContainer;
+}());
+exports.SidebarContainer = SidebarContainer;
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidebarContainer, [{
+        type: core_1.Component,
+        args: [{
+                selector: 'ng-sidebar-container',
+                template: "\n    <div *ngIf=\"showBackdrop\"\n      aria-hidden=\"true\"\n      class=\"ng-sidebar__backdrop\"\n      [ngClass]=\"backdropClass\"\n      (click)=\"_onBackdropClicked()\"></div>\n\n    <ng-content select=\"ng-sidebar,[ng-sidebar]\"></ng-content>\n\n    <div class=\"ng-sidebar__content\"\n      [class.ng-sidebar__content--animate]=\"animate\"\n      [ngClass]=\"contentClass\"\n      [ngStyle]=\"_getContentStyle()\">\n      <ng-content select=\"[ng-sidebar-content]\"></ng-content>\n    </div>\n  ",
+                styles: ["\n    :host {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      height: 100%;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .ng-sidebar__backdrop {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      background: #000;\n      opacity: 0.75;\n      pointer-events: auto;\n      z-index: 1;\n    }\n\n    .ng-sidebar__content {\n      -webkit-overflow-scrolling: touch;\n      overflow: auto;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n\n    .ng-sidebar__content--animate {\n      -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1), padding 0.3s cubic-bezier(0, 0, 0.3, 1);\n      transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1), padding 0.3s cubic-bezier(0, 0, 0.3, 1);\n    }\n  "],
+                changeDetection: core_1.ChangeDetectionStrategy.OnPush
+            }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: Object, decorators: [{
+                type: core_1.Inject,
+                args: [core_1.PLATFORM_ID]
+            }] }]; }, { animate: [{
+            type: core_1.Input
+        }], allowSidebarBackdropControl: [{
+            type: core_1.Input
+        }], showBackdrop: [{
+            type: core_1.Input
+        }], showBackdropChange: [{
+            type: core_1.Output
+        }], onBackdropClicked: [{
+            type: core_1.Output
+        }], contentClass: [{
+            type: core_1.Input
+        }], backdropClass: [{
+            type: core_1.Input
+        }] }); })();

package/lib_commonjs/sidebar.component.d.ts

@@ -0,0 +1,86 @@
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { SidebarContainer } from './sidebar-container.component';
+import * as i0 from "@angular/core";
+export declare class Sidebar implements AfterContentInit, OnInit, OnChanges, OnDestroy {
+    private _container;
+    private _ref;
+    opened: boolean;
+    openedChange: EventEmitter<boolean>;
+    mode: 'over' | 'push' | 'slide';
+    dock: boolean;
+    dockedSize: string;
+    position: 'start' | 'end' | 'left' | 'right' | 'top' | 'bottom';
+    animate: boolean;
+    autoCollapseHeight: number;
+    autoCollapseWidth: number;
+    autoCollapseOnInit: boolean;
+    sidebarClass: string;
+    ariaLabel: string;
+    trapFocus: boolean;
+    autoFocus: boolean;
+    showBackdrop: boolean;
+    closeOnClickBackdrop: boolean;
+    closeOnClickOutside: boolean;
+    keyClose: boolean;
+    keyCode: number;
+    onContentInit: EventEmitter<null>;
+    onOpenStart: EventEmitter<null>;
+    onOpened: EventEmitter<null>;
+    onCloseStart: EventEmitter<null>;
+    onClosed: EventEmitter<null>;
+    onTransitionEnd: EventEmitter<null>;
+    onModeChange: EventEmitter<string>;
+    onPositionChange: EventEmitter<string>;
+    _onRerender: EventEmitter<null>;
+    _elSidebar: ElementRef;
+    private _focusableElementsString;
+    private _focusableElements;
+    private _focusedBeforeOpen;
+    private _tabIndexAttr;
+    private _tabIndexIndicatorAttr;
+    private _wasCollapsed;
+    private _shouldAnimate;
+    private _clickEvent;
+    private _onClickOutsideAttached;
+    private _onKeyDownAttached;
+    private _onResizeAttached;
+    private _isBrowser;
+    constructor(_container: SidebarContainer, _ref: ChangeDetectorRef, platformId: Object);
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    open(): void;
+    close(): void;
+    triggerRerender(): void;
+    _getStyle(): CSSStyleDeclaration;
+    _onTransitionEnd(e: TransitionEvent): void;
+    private get _shouldTrapFocus();
+    private _focusFirstItem;
+    private _onFocusTrap;
+    private _setFocused;
+    private _initCloseListeners;
+    private _initCloseClickListener;
+    private _initCloseKeyDownListener;
+    private _destroyCloseListeners;
+    private _destroyCloseClickListener;
+    private _destroyCloseKeyDownListener;
+    private _onClickOutside;
+    private _onKeyDown;
+    private _initCollapseListeners;
+    private _destroyCollapseListeners;
+    private _collapse;
+    get _height(): number;
+    get _width(): number;
+    get _dockedSize(): number;
+    get _isModeOver(): boolean;
+    get _isModePush(): boolean;
+    get _isModeSlide(): boolean;
+    get _isDocked(): boolean;
+    get _isLeftOrTop(): boolean;
+    get _isLeftOrRight(): boolean;
+    get _isInert(): boolean;
+    private _normalizePosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Sidebar, [{ optional: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Sidebar, "ng-sidebar", never, { "opened": "opened"; "mode": "mode"; "dock": "dock"; "dockedSize": "dockedSize"; "position": "position"; "animate": "animate"; "autoCollapseHeight": "autoCollapseHeight"; "autoCollapseWidth": "autoCollapseWidth"; "autoCollapseOnInit": "autoCollapseOnInit"; "sidebarClass": "sidebarClass"; "ariaLabel": "ariaLabel"; "trapFocus": "trapFocus"; "autoFocus": "autoFocus"; "showBackdrop": "showBackdrop"; "closeOnClickBackdrop": "closeOnClickBackdrop"; "closeOnClickOutside": "closeOnClickOutside"; "keyClose": "keyClose"; "keyCode": "keyCode"; }, { "openedChange": "openedChange"; "onContentInit": "onContentInit"; "onOpenStart": "onOpenStart"; "onOpened": "onOpened"; "onCloseStart": "onCloseStart"; "onClosed": "onClosed"; "onTransitionEnd": "onTransitionEnd"; "onModeChange": "onModeChange"; "onPositionChange": "onPositionChange"; "_onRerender": "_onRerender"; }, never, ["*"]>;
+}