@daffodil/design 0.61.0 → 0.62.0

package/fesm2020/daffodil-design.mjs

@@ -2558,7 +2558,7 @@ const daffAccordionAnimations = {
     ]),
 };
 
-const getAnimationState$2 = (open) => {
+const getAnimationState$3 = (open) => {
     if (open) {
         return 'open';
     }
@@ -2591,11 +2591,11 @@ class DaffAccordionItemComponent {
      */
     ngOnInit() {
         this._open = this.initiallyActive ? this.initiallyActive : this._open;
-        this._animationState = getAnimationState$2(this._open);
+        this._animationState = getAnimationState$3(this._open);
     }
     toggleActive() {
         this._open = !this._open;
-        this._animationState = getAnimationState$2(this._open);
+        this._animationState = getAnimationState$3(this._open);
     }
 }
 /** @nocollapse */ DaffAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2676,11 +2676,11 @@ class DaffNavAccordionItemComponent {
             this._level = this.navAccordionItemParent._level + 1;
         }
         this._open = this.initiallyActive ? this.initiallyActive : this._open;
-        this._animationState = getAnimationState$2(this._open);
+        this._animationState = getAnimationState$3(this._open);
     }
     toggleActive() {
         this._open = !this._open;
-        this._animationState = getAnimationState$2(this._open);
+        this._animationState = getAnimationState$3(this._open);
     }
 }
 /** @nocollapse */ DaffNavAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffNavAccordionItemComponent, deps: [{ token: DaffAccordionComponent }, { token: DaffNavAccordionItemComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
@@ -2877,6 +2877,10 @@ const backdropTransitionOut = 'cubic-bezier(0.4, 0.0, 1, 1)';
 const backdropTransitionIn = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
 const daffBackdropAnimations = {
     fadeBackdrop: trigger('fadeBackdrop', [
+        state('interactable', style({ opacity: 1 })),
+        state('non-interactable', style({ opacity: 0 })),
+        transition('interactable => non-interactable', animate(animationDuration + ' ' + backdropTransitionOut)),
+        transition('non-interactable => interactable', animate(animationDuration + ' ' + backdropTransitionIn)),
         transition(':enter', [
             style({ opacity: 0 }),
             animate(animationDuration + ' ' + backdropTransitionIn, style({ opacity: 1 })),
@@ -2887,6 +2891,8 @@ const daffBackdropAnimations = {
     ]),
 };
 
+const getAnimationState$2 = (interactable) => interactable ? 'interactable' : 'non-interactable';
+
 class DaffBackdropComponent {
     constructor() {
         /**
@@ -2894,6 +2900,10 @@ class DaffBackdropComponent {
          */
         // eslint-disable-next-line @typescript-eslint/no-inferrable-types
         this.transparent = false;
+        /**
+         * Determines whether or not the backdrop is interactable.
+         */
+        this.interactable = true;
         /**
          * Boolean property that determines whether or not the
          * backdrop should fill up its containing window.
@@ -2904,34 +2914,64 @@ class DaffBackdropComponent {
          * Output event triggered when the backdrop is clicked.
          */
         this.backdropClicked = new EventEmitter();
+        this.interactableClass = true;
+    }
+    ngOnInit() {
+        this.interactableClass = this.interactable;
     }
     /**
      * Animation hook for that controls the backdrops
      * entrance and fade animations.
      */
+    get fadeBackdropTrigger() {
+        return getAnimationState$2(this.interactable);
+    }
+    animationDone(e) {
+        this.interactableClass = !(e.toState === ':leave' || e.toState === 'non-interactable');
+    }
+    animationStart(e) {
+        if (e.toState === ':enter' || e.toState === 'interactable') {
+            this.interactableClass = true;
+        }
+    }
+    /**
+     * @deprecated
+     * Backdrop event that triggers when the backdrop element is clicked.
+     */
     onBackdropClicked() {
         this.backdropClicked.emit();
     }
 }
 /** @nocollapse */ DaffBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffBackdropComponent, selector: "daff-backdrop", inputs: { transparent: "transparent", fullscreen: "fullscreen" }, outputs: { backdropClicked: "backdropClicked" }, host: { listeners: { "click": "onBackdropClicked()" }, properties: { "@fadeBackdrop": "this.onBackdropClicked" } }, ngImport: i0, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0)}.daff-backdrop{background:rgba(0,0,0,.3);height:100%;width:100%}.daff-backdrop--transparent{background:none}.daff-backdrop:focus,.daff-backdrop:active,.daff-backdrop:visited{outline:0}.daff-backdrop--fullscreen{position:absolute}\n"], animations: [
+/** @nocollapse */ DaffBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffBackdropComponent, selector: "daff-backdrop", inputs: { transparent: "transparent", interactable: "interactable", fullscreen: "fullscreen" }, outputs: { backdropClicked: "backdropClicked" }, host: { listeners: { "@fadeBackdrop.done": "animationDone($event)", "@fadeBackdrop.start": "animationStart($event)", "click": "onBackdropClicked()" }, properties: { "class.interactable": "this.interactableClass", "@fadeBackdrop": "this.fadeBackdropTrigger" } }, ngImport: i0, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);visibility:hidden;pointer-events:none}:host.interactable{visibility:visible;pointer-events:all;cursor:pointer;-webkit-user-select:none;user-select:none}.daff-backdrop{background:rgba(0,0,0,.3);height:100%;width:100%}.daff-backdrop--transparent{background:none}.daff-backdrop:focus,.daff-backdrop:active,.daff-backdrop:visited{outline:0}.daff-backdrop--fullscreen{position:absolute}\n"], animations: [
         daffBackdropAnimations.fadeBackdrop,
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffBackdropComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-backdrop', animations: [
                         daffBackdropAnimations.fadeBackdrop,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0)}.daff-backdrop{background:rgba(0,0,0,.3);height:100%;width:100%}.daff-backdrop--transparent{background:none}.daff-backdrop:focus,.daff-backdrop:active,.daff-backdrop:visited{outline:0}.daff-backdrop--fullscreen{position:absolute}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);visibility:hidden;pointer-events:none}:host.interactable{visibility:visible;pointer-events:all;cursor:pointer;-webkit-user-select:none;user-select:none}.daff-backdrop{background:rgba(0,0,0,.3);height:100%;width:100%}.daff-backdrop--transparent{background:none}.daff-backdrop:focus,.daff-backdrop:active,.daff-backdrop:visited{outline:0}.daff-backdrop--fullscreen{position:absolute}\n"] }]
         }], propDecorators: { transparent: [{
                 type: Input
+            }], interactable: [{
+                type: Input
             }], fullscreen: [{
                 type: Input
             }], backdropClicked: [{
                 type: Output
-            }], onBackdropClicked: [{
+            }], interactableClass: [{
+                type: HostBinding,
+                args: ['class.interactable']
+            }], fadeBackdropTrigger: [{
                 type: HostBinding,
                 args: ['@fadeBackdrop']
-            }, {
+            }], animationDone: [{
+                type: HostListener,
+                args: ['@fadeBackdrop.done', ['$event']]
+            }], animationStart: [{
+                type: HostListener,
+                args: ['@fadeBackdrop.start', ['$event']]
+            }], onBackdropClicked: [{
                 type: HostListener,
                 args: ['click']
             }] } });
@@ -4338,8 +4378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }]
         }] });
 
-const duration = '350ms';
-const sidebarAnimateRemainTransition = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
+const duration = '200ms';
 const sidebarAnimateInTransition = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
 const sidebarAnimateOutTransition = 'cubic-bezier(0.4, 0.0, 1, 1)';
 const daffSidebarAnimations = {
@@ -4348,15 +4387,32 @@ const daffSidebarAnimations = {
         // 1. 3d transforms causes text to appear blurry on IE and Edge.
         state('open', style({
             transform: 'none',
-            visibility: 'visible',
         })),
+        state('closed', style({
+            transform: 'translateX({{width}})',
+        }), { params: { width: '-240px' } }),
         transition('open => closed', animate(duration + ' ' + sidebarAnimateOutTransition)),
         transition('closed => open', animate(duration + ' ' + sidebarAnimateInTransition)),
     ]),
     transformContent: trigger('transformContent', [
+        // We remove the `transform` here completely, rather than setting it to zero, because:
+        // 1. 3d transforms causes text to appear blurry on IE and Edge.
         state('closed', style({
             transform: 'none',
         })),
+        state('open', style({
+            transform: 'translateX({{shift}})',
+        }), { params: { shift: '-240px' } }),
+        transition('open => closed', animate(duration + ' ' + sidebarAnimateInTransition)),
+        transition('closed => open', animate(duration + ' ' + sidebarAnimateOutTransition)),
+    ]),
+    backdropTrigger: trigger('backdropTrigger', [
+        state('open', style({
+            opacity: 1,
+        })),
+        state('closed', style({
+            opacity: 0,
+        })),
         transition('open => closed', animate(duration + ' ' + sidebarAnimateOutTransition)),
         transition('closed => open', animate(duration + ' ' + sidebarAnimateInTransition)),
     ]),
@@ -4365,11 +4421,12 @@ var DaffSidebarAnimationStates;
 (function (DaffSidebarAnimationStates) {
     DaffSidebarAnimationStates["OPEN"] = "open";
     DaffSidebarAnimationStates["CLOSED"] = "closed";
+    DaffSidebarAnimationStates["NONE"] = "none";
 })(DaffSidebarAnimationStates || (DaffSidebarAnimationStates = {}));
 
 const getAnimationState = (open, enabled = true) => {
     if (!enabled) {
-        return 'open';
+        return 'none';
     }
     if (open && enabled) {
         return 'open';
@@ -4379,21 +4436,33 @@ const getAnimationState = (open, enabled = true) => {
     }
 };
 
+const getSidebarAnimationWidth = (side, width) => side === 'left' ? -1 * width + 'px' : width + 'px';
+
 /**
- * DaffSidebar is heavily based upon the work done by the @angular/material2
+ * DaffSidebarComponent is heavily based upon the work done by the @angular/components
  * team on `mat-drawer` and `mat-sidenav`. `daff-sidebar` is intended to be
- * a simplified version (with a different design) of `mat-drawer` which
- * follows a stricter "dumb" component pattern than `mat-drawer`
+ * a simplified version (with a different design) of `mat-drawer`.
  */
 class DaffSidebarComponent {
     constructor(_elementRef, _ngZone) {
         this._elementRef = _elementRef;
         this._ngZone = _ngZone;
-        this.class = true;
         /**
          * Event fired when `ESC` key is pressed when the sidebar has focus
          */
         this.escapePressed = new EventEmitter();
+        /**
+         * What side of the viewport to show the sidebar on.
+         */
+        this.side = 'left';
+        /**
+         * The mode of the sidebar.
+         */
+        this.mode = 'side';
+        /**
+         * Whether or not the sidebar is open.
+         */
+        this.open = false;
         /**
          * Listen to `keydown` events outside the zone so that change detection is not run every
          * time a key is pressed. Instead we re-enter the zone only if the `ESC` key is pressed.
@@ -4406,128 +4475,211 @@ class DaffSidebarComponent {
             }));
         });
     }
+    /**
+     * The CSS classes set.
+     */
+    get classes() {
+        return {
+            'daff-sidebar': true,
+            [this.side]: true,
+            [this.mode]: true,
+        };
+    }
+    ;
+    /**
+     * The animation state of the sidebar.
+     */
+    get transformSidebar() {
+        return {
+            value: getAnimationState(this.open, this.mode === 'over' || this.mode === 'side-fixed'),
+            params: { width: getSidebarAnimationWidth(this.side, this.width) },
+        };
+    }
+    /**
+     * The width of the sidebar.
+     */
+    get width() {
+        return this._elementRef.nativeElement.offsetWidth;
+    }
 }
 /** @nocollapse */ DaffSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarComponent, selector: "daff-sidebar", outputs: { escapePressed: "escapePressed" }, host: { properties: { "class.daff-sidebar": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}.daff-sidebar{display:block;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ DaffSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarComponent, selector: "daff-sidebar", inputs: { side: "side", mode: "mode", open: "open" }, outputs: { escapePressed: "escapePressed" }, host: { properties: { "class": "this.classes", "@transformSidebar": "this.transformSidebar" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;width:240px;flex-shrink:0;overflow:auto}:host.side-fixed{position:fixed;top:var(--daff-sidebar-side-fixed-top-shift);bottom:0;z-index:4;height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}:host.over,:host.under{position:absolute;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:5}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport >).side-fixed{position:sticky}\n"], animations: [
+        daffSidebarAnimations.transformSidebar,
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-sidebar', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.daff-sidebar{display:block;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { class: [{
+            args: [{ selector: 'daff-sidebar', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        daffSidebarAnimations.transformSidebar,
+                    ], styles: [":host{display:block;width:240px;flex-shrink:0;overflow:auto}:host.side-fixed{position:fixed;top:var(--daff-sidebar-side-fixed-top-shift);bottom:0;z-index:4;height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}:host.over,:host.under{position:absolute;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:5}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport >).side-fixed{position:sticky}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { classes: [{
                 type: HostBinding,
-                args: ['class.daff-sidebar']
+                args: ['class']
+            }], transformSidebar: [{
+                type: HostBinding,
+                args: ['@transformSidebar']
             }], escapePressed: [{
                 type: Output
+            }], side: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], open: [{
+                type: Input
             }] } });
 
+/**
+ * Determines, given a list of sidebars, whether or not the backdrop is interactable (typically clickable).
+ */
+const sidebarViewportBackdropInteractable = (sidebars) => sidebars.reduce((acc, sidebar) => ((sidebar.mode === 'over' || sidebar.mode === 'under') && sidebar.open) || acc, false);
+
+/**
+ * Given a list of sidebars, compute the associated content shift.
+ */
+const sidebarViewportContentPadding = (sidebars, side) => sidebars.reduce((acc, sidebar) => {
+    if (!(sidebar.mode === "side-fixed" /* SideFixed */ && sidebar.open)) {
+        return acc;
+    }
+    if (sidebar.side === side) {
+        return sidebar.width;
+    }
+    else {
+        // This component is "stateless", its possible to have two open "under" sidebars.
+        // As such, we defer to "left" being open by default.
+        return acc;
+    }
+}, 0);
+
+const isViewportContentShifted = (mode, open) => (mode === 'under' && open);
+/**
+ * Given a list of sidebars, compute the associated content shift.
+ */
+const sidebarViewportContentShift = (sidebars) => sidebars.reduce((acc, sidebar) => {
+    if (!isViewportContentShifted(sidebar.mode, sidebar.open)) {
+        return acc;
+    }
+    if (sidebar.side === 'left') {
+        return sidebar.width;
+    }
+    else if (sidebar.side === 'right' && acc === 0) {
+        return -1 * sidebar.width;
+    }
+    else {
+        // This component is "stateless", its possible to have two open "under" sidebars.
+        // As such, we defer to "left" being open by default.
+        return acc;
+    }
+}, 0);
+
+/**
+ * The DaffSidebarViewport is the "holder" of sidebars throughout an entire application.
+ * It's generally only used once, like
+ *
+ * ```html
+ * <daff-sidebar-viewport>
+ *    <daff-sidebar></daff-sidebar>
+ *    <p>Some Content</p>
+ * </daff-sidebar-viewport>
+ * ```
+ *
+ * Importantly, its possible for there to be multiple sidebars of many modes
+ * at the same time. @see {@link DaffSidebarMode }
+ *
+ * Since this is a functional component, it's possible to have multiple "open" sidebars
+ * within at the same time. As a result, this component attempts to
+ * gracefully handle these situations. However, importantly, this sidebar
+ * has a constraint, there's only allowed to be one sidebar,
+ * of each mode, on each side, at any given time. If this is violated,
+ * this component will throw an exception.
+ */
 class DaffSidebarViewportComponent {
-    constructor(ref) {
-        this.ref = ref;
+    constructor(cdRef) {
+        this.cdRef = cdRef;
         /**
-         * Internal tracking variable for the state of sidebar viewport.
-         *
-         * @docs-private
+         * The number of pixels that the main content of the page should be shifted to
+         * right when there are child sidebars.
          */
-        this._opened = false;
+        this._shift = '0px';
         /**
-         * @docs-private
+         * The left padding on the content when left side-fixed sidebars are open.
          */
-        this._mode = 'side';
+        this._contentPadLeft = 0;
         /**
-         * Input state for whether or not the backdrop is
-         * "visible" to the human eye
+         * The right padding on the content when right side-fixed sidebars are open.
          */
-        // eslint-disable-next-line @typescript-eslint/no-inferrable-types
-        this.backdropIsVisible = true;
+        this._contentPadRight = 0;
+        /**
+         * Whether or not the backdrop is interactable
+         */
+        this._backdropInteractable = false;
+        /**
+         * The animation state
+         */
+        this._animationState = { value: 'closed', params: { shift: '0px' } };
         /**
          * Event fired when the backdrop is clicked
          * This is often used to close the sidebar
          */
         this.backdropClicked = new EventEmitter();
     }
-    /**
-     * The mode to put the sidebar in
-     */
-    get mode() {
-        return this._mode;
-    }
-    set mode(value) {
-        this._mode = value;
-        this._animationState = getAnimationState(this.opened, this.animationsEnabled);
-    }
-    /**
-     * Property for the "opened" state of the sidebar
-     */
-    get opened() {
-        return this._opened;
-    }
-    set opened(value) {
-        this._opened = value;
-        this._animationState = getAnimationState(value, this.animationsEnabled);
-    }
-    /**
-     * @docs-private
-     */
-    get animationsEnabled() {
-        return (this.mode === 'over' || this.mode === 'push') ? true : false;
-    }
-    /**
-     * @docs-private
-     */
-    ngOnInit() {
-        this._animationState = getAnimationState(this.opened, this.animationsEnabled);
+    ngAfterContentChecked() {
+        const nextShift = sidebarViewportContentShift(this.sidebars) + 'px';
+        if (this._shift !== nextShift) {
+            this._shift = nextShift;
+            this.updateAnimationState();
+            this.cdRef.markForCheck();
+        }
+        const nextBackdropInteractable = sidebarViewportBackdropInteractable(this.sidebars);
+        if (this._backdropInteractable !== nextBackdropInteractable) {
+            this._backdropInteractable = nextBackdropInteractable;
+            this.updateAnimationState();
+            this.cdRef.markForCheck();
+        }
+        ;
+        const nextLeftPadding = sidebarViewportContentPadding(this.sidebars, 'left');
+        if (this._contentPadLeft !== nextLeftPadding) {
+            this._contentPadLeft = nextLeftPadding;
+            this.updateAnimationState();
+            this.cdRef.markForCheck();
+        }
+        const nextRightPadding = sidebarViewportContentPadding(this.sidebars, 'right');
+        if (this._contentPadRight !== nextRightPadding) {
+            this._contentPadRight = nextRightPadding;
+            this.updateAnimationState();
+            this.cdRef.markForCheck();
+        }
     }
     /**
      * @docs-private
+     *
+     * Updates the animation state of the viewport depending upon the state
+     * of all sidebars within the viewport.
      */
-    ngAfterViewInit() {
-        if (this.sidebar) {
-            this.sidebar.escapePressed.subscribe(() => {
-                this.onEscape();
-            });
-        }
+    updateAnimationState() {
+        this._animationState = {
+            value: getAnimationState(this.sidebars.reduce((acc, sidebar) => acc || isViewportContentShifted(sidebar.mode, sidebar.open), false)),
+            params: { shift: this._shift },
+        };
     }
     /**
      * @docs-private
+     * The called when the backdrop of the viewport is clicked upon.
      */
     _backdropClicked() {
         this.backdropClicked.emit();
     }
-    /**
-     * @docs-private
-     */
-    get hasBackdrop() {
-        return (this.mode === 'over' || this.mode === 'push');
-    }
-    /**
-     * @docs-private
-     */
-    onEscape() {
-        if (this.hasBackdrop) {
-            this.opened = false;
-            this.ref.markForCheck();
-        }
-    }
 }
 /** @nocollapse */ DaffSidebarViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarViewportComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffSidebarViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", inputs: { mode: "mode", backdropIsVisible: "backdropIsVisible", opened: "opened" }, outputs: { backdropClicked: "backdropClicked" }, queries: [{ propertyName: "sidebar", first: true, predicate: DaffSidebarComponent, descendants: true }], ngImport: i0, template: "<div class=\"daff-sidebar-viewport {{ mode }}\">\n  <div class=\"daff-sidebar-viewport__sidebar\" [@transformSidebar]=\"_animationState\" [cdkTrapFocus]=\"opened && (mode === 'over' || mode === 'push')\">\n    <ng-content select=\"daff-sidebar\" (escapePressed)=\"onEscape($event)\"></ng-content>\n  </div>\n\n  <daff-backdrop \n  class=\"daff-sidebar-viewport__backdrop\" \n  *ngIf=\"hasBackdrop && _opened\"\n  [transparent]=\"!backdropIsVisible\" \n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n  <div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".daff-sidebar-viewport{display:flex;min-height:100%;position:relative;width:100%;z-index:1}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:2}.daff-sidebar-viewport__sidebar{flex-shrink:0;width:250px;will-change:transform,visibility;z-index:4}.daff-sidebar-viewport__backdrop{cursor:pointer;height:100%;position:absolute;width:100%;z-index:3}.daff-sidebar-viewport.push>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}.daff-sidebar-viewport.push>.daff-sidebar-viewport__content{transform:translate(250px)}.daff-sidebar-viewport.over>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}\n"], components: [{ type: DaffBackdropComponent, selector: "daff-backdrop", inputs: ["transparent", "fullscreen"], outputs: ["backdropClicked"] }], directives: [{ type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
-        daffSidebarAnimations.transformSidebar,
+/** @nocollapse */ DaffSidebarViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", outputs: { backdropClicked: "backdropClicked" }, queries: [{ propertyName: "sidebars", predicate: DaffSidebarComponent }], ngImport: i0, template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<daff-backdrop\n  [@transformContent]=\"_animationState\"\n  class=\"daff-sidebar-viewport__backdrop\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n<div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n  <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n  <div class=\"daff-sidebar-viewport__inner\" [style.padding-left.px]=\"_contentPadLeft\" [style.padding-right.px]=\"_contentPadRight\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>", styles: [":host{overflow:hidden;display:flex;min-height:100%;position:relative;width:100%;z-index:1;height:100vh;height:100dvh}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:3;overflow-y:auto;height:100%}.daff-sidebar-viewport__sidebar{flex-shrink:0}.daff-sidebar-viewport__backdrop{height:100%;position:absolute;width:100%;z-index:4}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"], components: [{ type: DaffBackdropComponent, selector: "daff-backdrop", inputs: ["transparent", "interactable", "fullscreen"], outputs: ["backdropClicked"] }], animations: [
         daffSidebarAnimations.transformContent,
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarViewportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-sidebar-viewport', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        daffSidebarAnimations.transformSidebar,
                         daffSidebarAnimations.transformContent,
-                    ], template: "<div class=\"daff-sidebar-viewport {{ mode }}\">\n  <div class=\"daff-sidebar-viewport__sidebar\" [@transformSidebar]=\"_animationState\" [cdkTrapFocus]=\"opened && (mode === 'over' || mode === 'push')\">\n    <ng-content select=\"daff-sidebar\" (escapePressed)=\"onEscape($event)\"></ng-content>\n  </div>\n\n  <daff-backdrop \n  class=\"daff-sidebar-viewport__backdrop\" \n  *ngIf=\"hasBackdrop && _opened\"\n  [transparent]=\"!backdropIsVisible\" \n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n  <div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".daff-sidebar-viewport{display:flex;min-height:100%;position:relative;width:100%;z-index:1}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:2}.daff-sidebar-viewport__sidebar{flex-shrink:0;width:250px;will-change:transform,visibility;z-index:4}.daff-sidebar-viewport__backdrop{cursor:pointer;height:100%;position:absolute;width:100%;z-index:3}.daff-sidebar-viewport.push>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}.daff-sidebar-viewport.push>.daff-sidebar-viewport__content{transform:translate(250px)}.daff-sidebar-viewport.over>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { sidebar: [{
-                type: ContentChild,
-                args: [DaffSidebarComponent]
-            }], mode: [{
-                type: Input
-            }], backdropIsVisible: [{
-                type: Input
-            }], opened: [{
-                type: Input
+                    ], template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<daff-backdrop\n  [@transformContent]=\"_animationState\"\n  class=\"daff-sidebar-viewport__backdrop\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n<div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n  <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n  <div class=\"daff-sidebar-viewport__inner\" [style.padding-left.px]=\"_contentPadLeft\" [style.padding-right.px]=\"_contentPadRight\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>", styles: [":host{overflow:hidden;display:flex;min-height:100%;position:relative;width:100%;z-index:1;height:100vh;height:100dvh}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:3;overflow-y:auto;height:100%}.daff-sidebar-viewport__sidebar{flex-shrink:0}.daff-sidebar-viewport__backdrop{height:100%;position:absolute;width:100%;z-index:4}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { sidebars: [{
+                type: ContentChildren,
+                args: [DaffSidebarComponent, { descendants: false }]
             }], backdropClicked: [{
                 type: Output
             }] } });