ng-sidebar - npm Package Compare versions

Comparing version 3.2.2 to 3.3.0

lib/sidebar-container.component.d.ts

@@ -1,12 +0,14 @@
-import { AfterContentInit, ChangeDetectorRef, OnDestroy, QueryList } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, QueryList } from '@angular/core';
 import { Sidebar } from './sidebar.component';
-export declare class SidebarContainer implements AfterContentInit, OnDestroy {
+export declare class SidebarContainer implements AfterContentInit, OnChanges, OnDestroy {
     private _ref;
     backdropClass: string;
+    allowSidebarBackdropControl: boolean;
+    showBackdrop: boolean;
+    showBackdropChange: EventEmitter<boolean>;
     /** @internal */
-    _showBackdrop: boolean;
-    /** @internal */
     _sidebars: QueryList<Sidebar>;
     constructor(_ref: ChangeDetectorRef);
     ngAfterContentInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -13,0 +15,0 @@ /**

lib/sidebar-container.component.js

@@ -17,4 +17,5 @@ "use strict";
         this._ref = _ref;
-        /** @internal */
-        this._showBackdrop = false;
+        this.allowSidebarBackdropControl = true;
+        this.showBackdrop = false;
+        this.showBackdropChange = new core_1.EventEmitter();
     }
@@ -29,2 +30,7 @@ SidebarContainer.prototype.ngAfterContentInit = function () {
     };
+    SidebarContainer.prototype.ngOnChanges = function (changes) {
+        if (changes['showBackdrop']) {
+            this.showBackdropChange.emit(changes['showBackdrop'].currentValue);
+        }
+    };
     SidebarContainer.prototype.ngOnDestroy = function () {
@@ -107,3 +113,3 @@ this._unsubscribe();
     SidebarContainer.prototype._onToggle = function () {
-        if (this._sidebars) {
+        if (this._sidebars && this.allowSidebarBackdropControl) {
             var hasOpen = false;
@@ -119,3 +125,4 @@ var _sidebars = this._sidebars.toArray();
             }
-            this._showBackdrop = hasOpen;
+            this.showBackdrop = hasOpen;
+            this.showBackdropChange.emit(hasOpen);
         }
@@ -131,2 +138,14 @@ this._markForCheck();
 __decorate([
+    core_1.Input(),
+    __metadata("design:type", Boolean)
+], SidebarContainer.prototype, "allowSidebarBackdropControl", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", Boolean)
+], SidebarContainer.prototype, "showBackdrop", void 0);
+__decorate([
+    core_1.Output(),
+    __metadata("design:type", Object)
+], SidebarContainer.prototype, "showBackdropChange", void 0);
+__decorate([
     core_1.ContentChildren(sidebar_component_1.Sidebar),
@@ -138,3 +157,3 @@ __metadata("design:type", core_1.QueryList)
         selector: 'ng-sidebar-container',
-        template: "\n    <ng-content select=\"ng-sidebar\"></ng-content>\n\n    <div *ngIf=\"_showBackdrop\"\n      aria-hidden=\"true\"\n      class=\"ng-sidebar__backdrop\"\n      [ngClass]=\"backdropClass\"></div>\n\n    <div class=\"ng-sidebar__content\" [ngStyle]=\"_getStyles()\">\n      <ng-content></ng-content>\n    </div>\n  ",
+        template: "\n    <ng-content select=\"ng-sidebar\"></ng-content>\n\n    <div *ngIf=\"showBackdrop\"\n      aria-hidden=\"true\"\n      class=\"ng-sidebar__backdrop\"\n      [ngClass]=\"backdropClass\"></div>\n\n    <div class=\"ng-sidebar__content\" [ngStyle]=\"_getStyles()\">\n      <ng-content></ng-content>\n    </div>\n  ",
         styles: ["\n    ng-sidebar-container {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n    }\n\n    .ng-sidebar__backdrop {\n      background: #000;\n      height: 100%;\n      left: 0;\n      opacity: 0.75;\n      pointer-events: auto;\n      position: fixed;\n      top: 0;\n      width: 100%;\n      z-index: 99999998;\n    }\n\n    .ng-sidebar__content {\n      display: block;\n      height: 100%;\n      overflow: auto;\n    }\n  "],
@@ -141,0 +160,0 @@ changeDetection: core_1.ChangeDetectionStrategy.OnPush,

lib/sidebar-container.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"SidebarContainer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-sidebar-container","template":"\n    <ng-content select=\"ng-sidebar\"></ng-content>\n\n    <div *ngIf=\"_showBackdrop\"\n      aria-hidden=\"true\"\n      class=\"ng-sidebar__backdrop\"\n      [ngClass]=\"backdropClass\"></div>\n\n    <div class=\"ng-sidebar__content\" [ngStyle]=\"_getStyles()\">\n      <ng-content></ng-content>\n    </div>\n  ","styles":["\n    ng-sidebar-container {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n    }\n\n    .ng-sidebar__backdrop {\n      background: #000;\n      height: 100%;\n      left: 0;\n      opacity: 0.75;\n      pointer-events: auto;\n      position: fixed;\n      top: 0;\n      width: 100%;\n      z-index: 99999998;\n    }\n\n    .ng-sidebar__content {\n      display: block;\n      height: 100%;\n      overflow: auto;\n    }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"backdropClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_sidebars":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./sidebar.component","name":"Sidebar"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_getStyles":[{"__symbolic":"method"}],"_subscribe":[{"__symbolic":"method"}],"_unsubscribe":[{"__symbolic":"method"}],"_markForCheck":[{"__symbolic":"method"}],"_onToggle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SidebarContainer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-sidebar-container","template":"\n    <ng-content select=\"ng-sidebar\"></ng-content>\n\n    <div *ngIf=\"_showBackdrop\"\n      aria-hidden=\"true\"\n      class=\"ng-sidebar__backdrop\"\n      [ngClass]=\"backdropClass\"></div>\n\n    <div class=\"ng-sidebar__content\" [ngStyle]=\"_getStyles()\">\n      <ng-content></ng-content>\n    </div>\n  ","styles":["\n    ng-sidebar-container {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n    }\n\n    .ng-sidebar__backdrop {\n      background: #000;\n      height: 100%;\n      left: 0;\n      opacity: 0.75;\n      pointer-events: auto;\n      position: fixed;\n      top: 0;\n      width: 100%;\n      z-index: 99999998;\n    }\n\n    .ng-sidebar__content {\n      display: block;\n      height: 100%;\n      overflow: auto;\n    }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"backdropClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_sidebars":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./sidebar.component","name":"Sidebar"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_getStyles":[{"__symbolic":"method"}],"_subscribe":[{"__symbolic":"method"}],"_unsubscribe":[{"__symbolic":"method"}],"_markForCheck":[{"__symbolic":"method"}],"_onToggle":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"SidebarContainer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-sidebar-container","template":"\n    <ng-content select=\"ng-sidebar\"></ng-content>\n\n    <div *ngIf=\"showBackdrop\"\n      aria-hidden=\"true\"\n      class=\"ng-sidebar__backdrop\"\n      [ngClass]=\"backdropClass\"></div>\n\n    <div class=\"ng-sidebar__content\" [ngStyle]=\"_getStyles()\">\n      <ng-content></ng-content>\n    </div>\n  ","styles":["\n    ng-sidebar-container {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n    }\n\n    .ng-sidebar__backdrop {\n      background: #000;\n      height: 100%;\n      left: 0;\n      opacity: 0.75;\n      pointer-events: auto;\n      position: fixed;\n      top: 0;\n      width: 100%;\n      z-index: 99999998;\n    }\n\n    .ng-sidebar__content {\n      display: block;\n      height: 100%;\n      overflow: auto;\n    }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"backdropClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowSidebarBackdropControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showBackdropChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_sidebars":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./sidebar.component","name":"Sidebar"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_getStyles":[{"__symbolic":"method"}],"_subscribe":[{"__symbolic":"method"}],"_unsubscribe":[{"__symbolic":"method"}],"_markForCheck":[{"__symbolic":"method"}],"_onToggle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SidebarContainer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-sidebar-container","template":"\n    <ng-content select=\"ng-sidebar\"></ng-content>\n\n    <div *ngIf=\"showBackdrop\"\n      aria-hidden=\"true\"\n      class=\"ng-sidebar__backdrop\"\n      [ngClass]=\"backdropClass\"></div>\n\n    <div class=\"ng-sidebar__content\" [ngStyle]=\"_getStyles()\">\n      <ng-content></ng-content>\n    </div>\n  ","styles":["\n    ng-sidebar-container {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n    }\n\n    .ng-sidebar__backdrop {\n      background: #000;\n      height: 100%;\n      left: 0;\n      opacity: 0.75;\n      pointer-events: auto;\n      position: fixed;\n      top: 0;\n      width: 100%;\n      z-index: 99999998;\n    }\n\n    .ng-sidebar__content {\n      display: block;\n      height: 100%;\n      overflow: auto;\n    }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"backdropClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowSidebarBackdropControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showBackdropChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_sidebars":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./sidebar.component","name":"Sidebar"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_getStyles":[{"__symbolic":"method"}],"_subscribe":[{"__symbolic":"method"}],"_unsubscribe":[{"__symbolic":"method"}],"_markForCheck":[{"__symbolic":"method"}],"_onToggle":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "ng-sidebar",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "Angular 2+ sidebar component.",
@@ -48,7 +48,7 @@ "repository": {
     "rimraf": "^2.5.4",
-    "rxjs": "5.1.0",
+    "rxjs": "5.1.1",
     "tslint": "^4.4.2",
     "typescript": "^2.1.6",
-    "zone.js": "^0.7.6"
+    "zone.js": "^0.7.7"
   }
 }

README.md

@@ -153,4 +153,11 @@ # ng-sidebar
 | 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. |
 
+#### 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)]`). |
+
 ### `<ng-sidebar>`
@@ -171,3 +178,3 @@
 | 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 open. |
+| 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`. |
 | closeOnClickOutside | boolean | `false` | Whether clicking outside of the open sidebar will close it. |
@@ -174,0 +181,0 @@ | keyClose | boolean | `false` | Close the sidebar when a keyboard button is pressed. |

src/sidebar-container.component.ts

@@ -7,4 +7,8 @@ import {
   ContentChildren,
+  EventEmitter,
   Input,
+  OnChanges,
   OnDestroy,
+  Output,
+  SimpleChanges,
   QueryList,
@@ -22,3 +26,3 @@ ViewEncapsulation
 
-    <div *ngIf="_showBackdrop"
+    <div *ngIf="showBackdrop"
       aria-hidden="true"
@@ -60,7 +64,8 @@ class="ng-sidebar__backdrop"
 })
-export class SidebarContainer implements AfterContentInit, OnDestroy {
+export class SidebarContainer implements AfterContentInit, OnChanges, OnDestroy {
   @Input() backdropClass: string;
+  @Input() allowSidebarBackdropControl: boolean = true;
 
-  /** @internal */
-  _showBackdrop: boolean = false;
+  @Input() showBackdrop: boolean = false;
+  @Output() showBackdropChange = new EventEmitter<boolean>();
 
@@ -82,2 +87,8 @@ /** @internal */
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['showBackdrop']) {
+      this.showBackdropChange.emit(changes['showBackdrop'].currentValue);
+    }
+  }
+
   ngOnDestroy(): void {
@@ -176,3 +187,3 @@ this._unsubscribe();
   private _onToggle(): void {
-    if (this._sidebars) {
+    if (this._sidebars && this.allowSidebarBackdropControl) {
       let hasOpen = false;
@@ -191,3 +202,4 @@
 
-      this._showBackdrop = hasOpen;
+      this.showBackdrop = hasOpen;
+      this.showBackdropChange.emit(hasOpen);
     }
@@ -194,0 +206,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91364

increased by3.52%

Lines of code

1621

increased by2.01%

Number of lines in readme file

193

increased by3.76%

No dependency changes