@daffodil/design 0.81.1 → 0.83.0

package/fesm2022/daffodil-design-sidebar.mjs

@@ -102,9 +102,13 @@ const getAnimationState$1 = (open, mode) => {
 const getSidebarAnimationWidth = (side, width) => side === 'left' ? -1 * width + 'px' : width + 'px';
 
 /**
- * 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`.
+ * DaffSidebarComponent is heavily based upon the work done by the `@angular/components`
+ * team on `mat-drawer` and `mat-sidenav`. It's intended to be a simplified version
+ * (with a different design) of `mat-drawer`.
+ *
+ * ```html
+ * <daff-sidebar></daff-sidebar>
+ * ```
  */
 class DaffSidebarComponent {
     /**
@@ -121,6 +125,8 @@ class DaffSidebarComponent {
     }
     ;
     /**
+     * @docs-private
+     *
      * The animation state of the sidebar.
      */
     get transformSidebar() {
@@ -130,11 +136,16 @@ class DaffSidebarComponent {
         };
     }
     /**
+     * @docs-private
+     *
      * The width of the sidebar.
      */
     get width() {
         return this._elementRef.nativeElement.offsetWidth;
     }
+    /**
+     * @docs-private
+     */
     get open() {
         return this.openDirective.open;
     }
@@ -146,7 +157,7 @@ class DaffSidebarComponent {
         this.openDirective = openDirective;
         this._doc = _doc;
         /**
-         * Event fired when `ESC` key is pressed when the sidebar has focus
+         * Event fired when `ESC` key is pressed when the sidebar has focus.
          */
         this.escapePressed = new EventEmitter();
         /**
@@ -170,6 +181,8 @@ class DaffSidebarComponent {
         });
     }
     /**
+     * @docs-private
+     *
      * Animation event that can be used to hook into when the transformSidebar
      * animation begins. This is used in sidebar to determine when to show the
      * visibility of the sidebar so that the animation does not jump as the element is shown.
@@ -180,6 +193,8 @@ class DaffSidebarComponent {
         }
     }
     /**
+     * @docs-private
+     *
      * Animation event that can be used to hook into when the
      * transformSidebar animation is complete.
      */
@@ -204,6 +219,8 @@ class DaffSidebarComponent {
             }
         }
         /**
+         * @docs-private
+         *
          * This is used in sidebar to determine when to hide the visibility
          * of the sidebar so that the animation does not jump as the element is hidden.
          */
@@ -215,29 +232,29 @@ class DaffSidebarComponent {
         }
     }
     /**
-     * Reveal the contents of the sidebar
+     * Reveal the contents of the sidebar.
      */
     reveal() {
         this.openDirective.reveal();
     }
     /**
-     * Hide the contents of the sidebar
+     * Hide the contents of the sidebar.
      */
     hide() {
         this.openDirective.hide();
     }
     /**
-     * Toggle the visibility of the sidebar
+     * Toggle the visibility of the sidebar.
      */
     toggle() {
         this.openDirective.toggle();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ConfigurableFocusTrapFactory }, { token: i2.DaffFocusStackService }, { token: i2.DaffOpenableDirective }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffSidebarComponent, isStandalone: true, selector: "daff-sidebar", inputs: { side: "side", mode: "mode" }, outputs: { escapePressed: "escapePressed" }, host: { listeners: { "@transformSidebar.start": "onAnimationStart($event)", "@transformSidebar.done": "onAnimationComplete($event)" }, properties: { "class": "this.classes", "@transformSidebar": "this.transformSidebar" } }, hostDirectives: [{ directive: i2.DaffOpenableDirective, inputs: ["open", "open"], outputs: ["toggled", "toggled"] }], ngImport: i0, template: "<ng-content select=\"daff-sidebar-header\"></ng-content>\n<div class=\"daff-sidebar__body\">\n\t<ng-content></ng-content>\n</div>\n<ng-content select=\"daff-sidebar-footer\"></ng-content>", styles: [":host{display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;width:15rem}:host.left{width:var(--daff-sidebar-left-width, 15rem)}:host.right{width:var(--daff-sidebar-right-width, 15rem)}:host.side-fixed{visibility:hidden;position:fixed;bottom:0;z-index:5;top:var(--daff-sidebar-side-fixed-top-shift);height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}@media (min-width: 1024px){:host.side-fixed{visibility:visible}}:host.over,:host.under{position:fixed;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:7}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport).side-fixed{position:sticky}:host-context(.daff-sidebar-viewport.beside).side-fixed{top:0;height:100%}.daff-sidebar__body{flex-grow:1;height:100%;overflow-y:auto}\n"], animations: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ConfigurableFocusTrapFactory }, { token: i2.DaffFocusStackService }, { token: i2.DaffOpenableDirective }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffSidebarComponent, isStandalone: true, selector: "daff-sidebar", inputs: { side: "side", mode: "mode" }, outputs: { escapePressed: "escapePressed" }, host: { listeners: { "@transformSidebar.start": "onAnimationStart($event)", "@transformSidebar.done": "onAnimationComplete($event)" }, properties: { "class": "this.classes", "@transformSidebar": "this.transformSidebar" } }, hostDirectives: [{ directive: i2.DaffOpenableDirective, inputs: ["open", "open"], outputs: ["toggled", "toggled"] }], ngImport: i0, template: "<ng-content select=\"daff-sidebar-header\"></ng-content>\n<div class=\"daff-sidebar__body\">\n\t<ng-content></ng-content>\n</div>\n<ng-content select=\"daff-sidebar-footer\"></ng-content>", styles: [":host{display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;width:15rem}:host.left{width:var(--daff-sidebar-left-width, 15rem)}:host.right{width:var(--daff-sidebar-right-width, 15rem)}:host.side-fixed{visibility:hidden;position:fixed;bottom:0;z-index:5;top:var(--daff-sidebar-side-fixed-top-shift);height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}@media (min-width: 1024px){:host.side-fixed{visibility:visible}}:host.over,:host.under{position:fixed;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:7}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport).side-fixed{position:sticky}:host-context(.daff-sidebar-viewport.beside).side-fixed{top:0;height:100%}.daff-sidebar__body{flex-grow:1;height:100%;overflow-y:auto}\n"], animations: [
             daffSidebarAnimations.transformSidebar,
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{
                             directive: DaffOpenableDirective,
@@ -245,7 +262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                             outputs: ['toggled'],
                         }], animations: [
                         daffSidebarAnimations.transformSidebar,
-                    ], standalone: true, template: "<ng-content select=\"daff-sidebar-header\"></ng-content>\n<div class=\"daff-sidebar__body\">\n\t<ng-content></ng-content>\n</div>\n<ng-content select=\"daff-sidebar-footer\"></ng-content>", styles: [":host{display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;width:15rem}:host.left{width:var(--daff-sidebar-left-width, 15rem)}:host.right{width:var(--daff-sidebar-right-width, 15rem)}:host.side-fixed{visibility:hidden;position:fixed;bottom:0;z-index:5;top:var(--daff-sidebar-side-fixed-top-shift);height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}@media (min-width: 1024px){:host.side-fixed{visibility:visible}}:host.over,:host.under{position:fixed;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:7}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport).side-fixed{position:sticky}:host-context(.daff-sidebar-viewport.beside).side-fixed{top:0;height:100%}.daff-sidebar__body{flex-grow:1;height:100%;overflow-y:auto}\n"] }]
+                    ], template: "<ng-content select=\"daff-sidebar-header\"></ng-content>\n<div class=\"daff-sidebar__body\">\n\t<ng-content></ng-content>\n</div>\n<ng-content select=\"daff-sidebar-footer\"></ng-content>", styles: [":host{display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;width:15rem}:host.left{width:var(--daff-sidebar-left-width, 15rem)}:host.right{width:var(--daff-sidebar-right-width, 15rem)}:host.side-fixed{visibility:hidden;position:fixed;bottom:0;z-index:5;top:var(--daff-sidebar-side-fixed-top-shift);height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}@media (min-width: 1024px){:host.side-fixed{visibility:visible}}:host.over,:host.under{position:fixed;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:7}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport).side-fixed{position:sticky}:host-context(.daff-sidebar-viewport.beside).side-fixed{top:0;height:100%}.daff-sidebar__body{flex-grow:1;height:100%;overflow-y:auto}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.ConfigurableFocusTrapFactory }, { type: i2.DaffFocusStackService }, { type: i2.DaffOpenableDirective }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -269,16 +286,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 args: ['@transformSidebar.done', ['$event']]
             }] } });
 
+/**
+ * Sidebar footer is a child component of the sidebar that is used to display a
+ * footer container, positioned at the bottom of a sidebar.
+ *
+ * ```html
+ * <daff-sidebar-footer></daff-sidebar-footer>
+ * ```
+ */
 class DaffSidebarFooterComponent {
     constructor() {
+        /**
+         * @docs-private
+         */
         this.class = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffSidebarFooterComponent, isStandalone: true, selector: "daff-sidebar-footer", host: { properties: { "class.daff-sidebar-footer": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;width:100%;flex-grow:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffSidebarFooterComponent, isStandalone: true, selector: "daff-sidebar-footer", host: { properties: { "class.daff-sidebar-footer": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;width:100%;flex-grow:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-sidebar-footer', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block;width:100%;flex-grow:0}\n"] }]
+            args: [{ selector: 'daff-sidebar-footer', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;flex-grow:0}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-sidebar-footer']
@@ -291,10 +319,10 @@ class DaffSidebarHeaderActionDirective {
          */
         this.class = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarHeaderActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: DaffSidebarHeaderActionDirective, isStandalone: true, selector: "[daffSidebarHeaderAction]", host: { properties: { "class.daff-sidebar-header__action": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarHeaderActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffSidebarHeaderActionDirective, isStandalone: true, selector: "[daffSidebarHeaderAction]", host: { properties: { "class.daff-sidebar-header__action": "this.class" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarHeaderActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarHeaderActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSidebarHeaderAction]',
@@ -305,6 +333,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 args: ['class.daff-sidebar-header__action']
             }] } });
 
+/**
+ * Sidebar header title is a child directive of `DaffSidebarHeaderComponent`
+ * that can be used to provide a title for the sidebar.
+ *
+ * ```html
+ * <div daffSidebarHeaderTitle>Title</div>
+ * ```
+ */
 class DaffSidebarHeaderTitleDirective {
     constructor() {
         /**
@@ -312,38 +348,55 @@ class DaffSidebarHeaderTitleDirective {
          */
         this.class = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: DaffSidebarHeaderTitleDirective, isStandalone: true, selector: "[daffSidebarHeaderTitle]", host: { properties: { "class.daff-sidebar-header__title": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffSidebarHeaderTitleDirective, isStandalone: true, selector: "[daffSidebarHeaderTitle]", host: { properties: { "class.daff-sidebar-header__title": "this.class" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarHeaderTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarHeaderTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSidebarHeaderTitle]',
-                    standalone: true,
                 }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-sidebar-header__title']
             }] } });
 
+/**
+ * Sidebar header is a child component of the sidebar that is used to display a header container,
+ * positioned at the top of a sidebar. It includes an optional title (`[daffSidebarHeaderTitle]`)
+ * slot and a slot to render any custom content.
+ *
+ * ```html
+ * <daff-sidebar-header></daff-sidebar-header>
+ * ```
+ */
 class DaffSidebarHeaderComponent {
     constructor() {
+        /**
+         * @docs-private
+         */
         this.faTimes = faTimes;
+        /**
+         * @docs-private
+         */
         this.class = true;
-        /** Whether or not a sidebar header displays the close icon */
+        /** Whether or not a sidebar header should display the close icon. */
         this.dismissible = false;
         /**
          * Output event triggered when the close icon is clicked.
          */
         this.closeSidebar = new EventEmitter();
     }
+    /**
+     * @docs-private
+     */
     onCloseSidebar(event) {
         this.closeSidebar.emit();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffSidebarHeaderComponent, isStandalone: true, selector: "daff-sidebar-header", inputs: { dismissible: "dismissible" }, outputs: { closeSidebar: "closeSidebar" }, host: { properties: { "class.daff-sidebar-header": "this.class", "class.dismissible": "this.dismissible" } }, ngImport: i0, template: "<button class=\"daff-sidebar-header__close-icon\" aria-label=\"Close Sidebar\" *ngIf=\"dismissible\" (click)=\"onCloseSidebar($event)\">\n  <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\" size=\"lg\"></fa-icon>\n</button>\n<div class=\"daff-sidebar-header__content\">\n  <ng-content></ng-content>\n</div>", styles: [".daff-sidebar-header{display:flex;align-items:center;position:relative;padding:0 1rem;min-height:3rem;max-height:3rem;width:100%}.daff-sidebar-header__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;appearance:none;background:none;border:none;color:currentColor;height:3rem;margin:0;min-height:3rem;min-width:3rem;padding:0;width:3rem;left:initial;right:0;top:0}.daff-sidebar-header__title,.daff-sidebar-header__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1rem;font-weight:500}.daff-sidebar-header__close-icon+.daff-sidebar-header__content{margin:0 1.75rem 0 0}.daff-sidebar.right .daff-sidebar-header__close-icon{left:0;right:initial}.daff-sidebar.right .daff-sidebar-header__close-icon+.daff-sidebar-header__title,.daff-sidebar.right .daff-sidebar-header__close-icon+.daff-sidebar-header__content{margin:0 0 0 1.75rem}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffSidebarHeaderComponent, isStandalone: true, selector: "daff-sidebar-header", inputs: { dismissible: "dismissible" }, outputs: { closeSidebar: "closeSidebar" }, host: { properties: { "class.daff-sidebar-header": "this.class", "class.dismissible": "this.dismissible" } }, ngImport: i0, template: "<button class=\"daff-sidebar-header__close-icon\" aria-label=\"Close Sidebar\" *ngIf=\"dismissible\" (click)=\"onCloseSidebar($event)\">\n  <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\" size=\"lg\"></fa-icon>\n</button>\n<div class=\"daff-sidebar-header__content\">\n  <ng-content></ng-content>\n</div>", styles: [".daff-sidebar-header{display:flex;align-items:center;position:relative;padding:0 1rem;min-height:3rem;max-height:3rem;width:100%}.daff-sidebar-header__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;appearance:none;background:none;border:none;color:currentColor;height:3rem;margin:0;min-height:3rem;min-width:3rem;padding:0;width:3rem;left:initial;right:0;top:0}.daff-sidebar-header__title,.daff-sidebar-header__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1rem;font-weight:500}.daff-sidebar-header__close-icon+.daff-sidebar-header__content{margin:0 1.75rem 0 0}.daff-sidebar.right .daff-sidebar-header__close-icon{left:0;right:initial}.daff-sidebar.right .daff-sidebar-header__close-icon+.daff-sidebar-header__title,.daff-sidebar.right .daff-sidebar-header__close-icon+.daff-sidebar-header__content{margin:0 0 0 1.75rem}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-sidebar-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FaIconComponent,
@@ -498,6 +551,9 @@ const getAnimationState = (interactable) => interactable ? 'interactable' : 'non
 
 class DaffSidebarViewportBackdropComponent {
     constructor() {
+        /**
+         * @docs-private
+         */
         this.interactableClass = true;
         /**
          * Determines whether or not the backdrop is transparent.
@@ -517,37 +573,51 @@ class DaffSidebarViewportBackdropComponent {
          */
         this.backdropClicked = new EventEmitter();
     }
+    /**
+     * @docs-private
+     */
     ngOnInit() {
         this.interactableClass = this.interactable;
     }
     /**
+     * @docs-private
+     *
      * Animation hook for that controls the backdrops
      * entrance and fade animations.
      */
     get fadeBackdropTrigger() {
         return getAnimationState(this.interactable);
     }
+    /**
+     * @docs-private
+     */
     animationDone(e) {
         this.interactableClass = !(e.toState === ':leave' || e.toState === 'non-interactable');
     }
+    /**
+     * @docs-private
+     */
     animationStart(e) {
         if (e.toState === ':enter' || e.toState === 'interactable') {
             this.interactableClass = true;
         }
     }
+    /**
+     * @docs-private
+     */
     onBackdropClicked() {
         this.backdropClicked.emit();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarViewportBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffSidebarViewportBackdropComponent, isStandalone: true, selector: "daff-sidebar-viewport-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", "class.transparent": "this.transparent", "class.fullscreen": "this.fullscreen", "@fadeBackdrop": "this.fadeBackdropTrigger" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;background:#0000004d;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;pointer-events:auto;height:100%;width:100%;visibility:hidden;z-index:6}:host.interactable{visibility:visible;pointer-events:all;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.transparent{background:none}:host:focus,:host:active,:host:visited{outline:0}:host.fullscreen{position:absolute}\n"], animations: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarViewportBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffSidebarViewportBackdropComponent, isStandalone: true, selector: "daff-sidebar-viewport-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", "class.transparent": "this.transparent", "class.fullscreen": "this.fullscreen", "@fadeBackdrop": "this.fadeBackdropTrigger" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;background:#0000004d;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;pointer-events:auto;height:100%;width:100%;visibility:hidden;z-index:6}:host.interactable{visibility:visible;pointer-events:all;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.transparent{background:none}:host:focus,:host:active,:host:visited{outline:0}:host.fullscreen{position:absolute}\n"], animations: [
             daffSidebarViewportBackdropAnimations.fadeBackdrop,
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarViewportBackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarViewportBackdropComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-sidebar-viewport-backdrop', template: '<ng-content></ng-content>', animations: [
                         daffSidebarViewportBackdropAnimations.fadeBackdrop,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block;background:#0000004d;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;pointer-events:auto;height:100%;width:100%;visibility:hidden;z-index:6}:host.interactable{visibility:visible;pointer-events:all;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.transparent{background:none}:host:focus,:host:active,:host:visited{outline:0}:host.fullscreen{position:absolute}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;background:#0000004d;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;pointer-events:auto;height:100%;width:100%;visibility:hidden;z-index:6}:host.interactable{visibility:visible;pointer-events:all;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.transparent{background:none}:host:focus,:host:active,:host:visited{outline:0}:host.fullscreen{position:absolute}\n"] }]
         }], propDecorators: { interactableClass: [{
                 type: HostBinding,
                 args: ['class.interactable']
@@ -580,27 +650,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }] } });
 
 /**
- * The DaffSidebarViewportComponent is the "holder" of sidebars throughout an entire application.
+ * DaffSidebarViewportComponent serves as the container for managing sidebars across an entire application.
+ * Because it's a functional component, it supports multiple simultaneously open sidebar and is designed to
+ * handle these scenarios gracefully.
  *
- * `<daff-sidebar-viewport>` should only ever be used once in an application,
- * but it's possible for there to be multiple sidebars of many modes
- * at the same time. See {@link DaffSidebarMode}.
+ * > However, there is one key contraint: only one sidebar per **mode** is allowed
+ * on each **side** (e.g., left or right) at any given time.
  *
- * Since this is a functional component, it's possible to have multiple "open" sidebars
- * at the same time. As a result, this component attempts to gracefully handle these situations.
- * However, importantly, there can only be one sidebar of each mode, on each side, at any given time.
+ * If this constraint is violated, the component will throw an exception to prevent unintended behavior.
  *
- * If this is violated, this component will throw an exception.
- *
- * @example Using the sidebar viewport
  * ```html
  * <daff-sidebar-viewport>
  *    <daff-sidebar></daff-sidebar>
- *    <p>Site content</p>
+ *    <div>Site content</div>
  * </daff-sidebar-viewport>
  * ```
  */
 class DaffSidebarViewportComponent {
+    /**
+     * @docs-private
+     */
     get classes() {
         return {
             'daff-sidebar-viewport': true,
@@ -610,14 +679,23 @@ class DaffSidebarViewportComponent {
         };
     }
     ;
+    /**
+     * @docs-private
+     */
     get isNavOnSide() {
         return this.navPlacement === DaffNavPlacementEnum.BESIDE;
     }
+    /**
+     * @docs-private
+     */
     onContentAnimationStart(e) {
         if (e.toState === 'open') {
             this._elementRef.nativeElement.style.overflow = 'clip';
         }
     }
+    /**
+     * @docs-private
+     */
     onContentAnimationDone(e) {
         if (e.toState === 'closed') {
             this._elementRef.nativeElement.style.overflow = null;
@@ -629,10 +707,12 @@ class DaffSidebarViewportComponent {
         this.bodyScroll = bodyScroll;
         this.parentViewport = parentViewport;
         this.scroll = scroll;
+        /**
+         * @docs-private
+         */
         this.hostClass = true;
         /**
-         * The placement of the nav in relation to the sidebar. The default is set to `top`.
-         * Note that this is really only available when there is a `side-fixed` sidebar.
+         * The placement of the nav in relation to the sidebar. Note that this is really only available when there is a `side-fixed` sidebar.
          */
         this.navPlacement = DaffNavPlacementEnum.ABOVE;
         /**
@@ -643,10 +723,14 @@ class DaffSidebarViewportComponent {
         this._isPaddedLeft = false;
         this._isPaddedRight = false;
         /**
+         * @docs-private
+         *
          * Whether or not the backdrop is interactable
          */
         this._backdropInteractable = false;
         /**
+         * @docs-private
+         *
          * The animation state
          */
         this._animationState = { value: DaffSidebarAnimationStates.CLOSED, params: { shift: '0px' } };
@@ -655,6 +739,9 @@ class DaffSidebarViewportComponent {
          */
         this.backdropClicked = new EventEmitter();
     }
+    /**
+     * @docs-private
+     */
     ngAfterContentChecked() {
         const nextShift = sidebarViewportContentShift(this.sidebars) + 'px';
         if (this._shift !== nextShift) {
@@ -688,6 +775,9 @@ class DaffSidebarViewportComponent {
         this._isPaddedLeft = isSidebarViewportContentPadded(this.sidebars, 'left');
         this._isPaddedRight = isSidebarViewportContentPadded(this.sidebars, 'right');
     }
+    /**
+     * @docs-private
+     */
     ngOnDestroy() {
         if (!this.parentViewport && !hasParentViewport(this._elementRef.nativeElement)) {
             this.bodyScroll.enable();
@@ -710,22 +800,23 @@ class DaffSidebarViewportComponent {
     }
     /**
      * @docs-private
-     * The called when the backdrop of the viewport is clicked upon.
+     *
+     * Called when the backdrop of the viewport is clicked upon.
      */
     _backdropClicked() {
         this.backdropClicked.emit();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarViewportComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DAFF_SIDEBAR_SCROLL_TOKEN, skipSelf: true }, { token: DaffSidebarViewportComponent, optional: true, skipSelf: true }, { token: DAFF_SIDEBAR_SCROLL_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffSidebarViewportComponent, isStandalone: true, selector: "daff-sidebar-viewport", inputs: { navPlacement: "navPlacement" }, outputs: { backdropClicked: "backdropClicked" }, host: { properties: { "class.daff-sidebar-viewport": "this.hostClass", "class": "this.classes" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarViewportComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DAFF_SIDEBAR_SCROLL_TOKEN, skipSelf: true }, { token: DaffSidebarViewportComponent, optional: true, skipSelf: true }, { token: DAFF_SIDEBAR_SCROLL_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffSidebarViewportComponent, isStandalone: true, selector: "daff-sidebar-viewport", inputs: { navPlacement: "navPlacement" }, outputs: { backdropClicked: "backdropClicked" }, host: { properties: { "class.daff-sidebar-viewport": "this.hostClass", "class": "this.classes" } }, providers: [
             {
                 provide: DAFF_SIDEBAR_SCROLL_TOKEN,
                 useFactory: daffSidebarViewportScrollFactory,
             },
-        ], queries: [{ propertyName: "sidebars", predicate: DaffSidebarComponent }], ngImport: i0, template: "<daff-sidebar-viewport-backdrop\n  [@transformContent]=\"_animationState\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\">\n</daff-sidebar-viewport-backdrop>\n\n<div class=\"daff-sidebar-viewport__nav\"\n  [@transformContent]=\"_animationState\">\n    <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n</div>\n\n<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<div class=\"daff-sidebar-viewport__content\"\n  [@transformContent]=\"_animationState\"\n  (@transformContent.start)=\"onContentAnimationStart($event)\"\n  (@transformContent.done)=\"onContentAnimationDone($event)\">\n  <div class=\"daff-sidebar-viewport__inner\">\n      <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>\n", styles: [":host{display:flex;min-height:100dvh;position:relative;width:100%;z-index:1}:host.pad-left .daff-sidebar-viewport__inner{padding-left:0}@media (min-width: 1024px){:host.pad-left .daff-sidebar-viewport__inner{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:0}@media (min-width: 1024px){:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-right .daff-sidebar-viewport__inner{padding-right:0}@media (min-width: 1024px){:host.pad-right .daff-sidebar-viewport__inner{padding-right:var(--daff-sidebar-right-width, 240px)}}:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:0}@media (min-width: 1024px){:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:var(--daff-sidebar-right-width, 240px)}}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;z-index:3;min-height:100%}.daff-sidebar-viewport__nav{position:fixed;top:0;width:100%;z-index:4}.daff-sidebar-viewport__nav:empty{display:none}.daff-sidebar-viewport__nav:not(:empty)~.daff-sidebar-viewport__content{margin-top:var(--daff-sidebar-side-fixed-top-shift)}:host-context(daff-sidebar-viewport daff-sidebar-viewport){transform:translate(0);min-height:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"], dependencies: [{ kind: "component", type: DaffSidebarViewportBackdropComponent, selector: "daff-sidebar-viewport-backdrop", inputs: ["transparent", "interactable", "fullscreen"], outputs: ["backdropClicked"] }], animations: [
+        ], queries: [{ propertyName: "sidebars", predicate: DaffSidebarComponent }], ngImport: i0, template: "<daff-sidebar-viewport-backdrop\n  [@transformContent]=\"_animationState\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\">\n</daff-sidebar-viewport-backdrop>\n\n<div class=\"daff-sidebar-viewport__nav\"\n  [@transformContent]=\"_animationState\">\n    <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n</div>\n\n<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<div class=\"daff-sidebar-viewport__content\"\n  [@transformContent]=\"_animationState\"\n  (@transformContent.start)=\"onContentAnimationStart($event)\"\n  (@transformContent.done)=\"onContentAnimationDone($event)\">\n  <div class=\"daff-sidebar-viewport__inner\">\n      <ng-content></ng-content>\n      <div class=\"daff-sidebar-viewport__footer\">\n        <ng-content select=\"[daff-sidebar-viewport-footer]\"></ng-content>\n      </div>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>\n", styles: [":host{display:flex;min-height:100dvh;position:relative;width:100%;z-index:1}:host .daff-sidebar-viewport__inner{display:flex;flex-direction:column;height:100%}:host.pad-left .daff-sidebar-viewport__inner{padding-left:0}@media (min-width: 1024px){:host.pad-left .daff-sidebar-viewport__inner{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:0}@media (min-width: 1024px){:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-right .daff-sidebar-viewport__inner{padding-right:0}@media (min-width: 1024px){:host.pad-right .daff-sidebar-viewport__inner{padding-right:var(--daff-sidebar-right-width, 240px)}}:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:0}@media (min-width: 1024px){:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:var(--daff-sidebar-right-width, 240px)}}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;z-index:3;min-height:100%}.daff-sidebar-viewport__nav{position:fixed;top:0;width:100%;z-index:4}.daff-sidebar-viewport__nav:empty{display:none}.daff-sidebar-viewport__nav:not(:empty)~.daff-sidebar-viewport__content{margin-top:var(--daff-sidebar-side-fixed-top-shift)}.daff-sidebar-viewport__footer{margin-top:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport){transform:translate(0);min-height:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"], dependencies: [{ kind: "component", type: DaffSidebarViewportBackdropComponent, selector: "daff-sidebar-viewport-backdrop", inputs: ["transparent", "interactable", "fullscreen"], outputs: ["backdropClicked"] }], animations: [
             daffSidebarAnimations.transformContent,
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarViewportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarViewportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-sidebar-viewport', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         daffSidebarAnimations.transformContent,
@@ -736,7 +827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         },
                     ], imports: [
                         DaffSidebarViewportBackdropComponent,
-                    ], template: "<daff-sidebar-viewport-backdrop\n  [@transformContent]=\"_animationState\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\">\n</daff-sidebar-viewport-backdrop>\n\n<div class=\"daff-sidebar-viewport__nav\"\n  [@transformContent]=\"_animationState\">\n    <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n</div>\n\n<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<div class=\"daff-sidebar-viewport__content\"\n  [@transformContent]=\"_animationState\"\n  (@transformContent.start)=\"onContentAnimationStart($event)\"\n  (@transformContent.done)=\"onContentAnimationDone($event)\">\n  <div class=\"daff-sidebar-viewport__inner\">\n      <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>\n", styles: [":host{display:flex;min-height:100dvh;position:relative;width:100%;z-index:1}:host.pad-left .daff-sidebar-viewport__inner{padding-left:0}@media (min-width: 1024px){:host.pad-left .daff-sidebar-viewport__inner{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:0}@media (min-width: 1024px){:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-right .daff-sidebar-viewport__inner{padding-right:0}@media (min-width: 1024px){:host.pad-right .daff-sidebar-viewport__inner{padding-right:var(--daff-sidebar-right-width, 240px)}}:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:0}@media (min-width: 1024px){:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:var(--daff-sidebar-right-width, 240px)}}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;z-index:3;min-height:100%}.daff-sidebar-viewport__nav{position:fixed;top:0;width:100%;z-index:4}.daff-sidebar-viewport__nav:empty{display:none}.daff-sidebar-viewport__nav:not(:empty)~.daff-sidebar-viewport__content{margin-top:var(--daff-sidebar-side-fixed-top-shift)}:host-context(daff-sidebar-viewport daff-sidebar-viewport){transform:translate(0);min-height:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"] }]
+                    ], template: "<daff-sidebar-viewport-backdrop\n  [@transformContent]=\"_animationState\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\">\n</daff-sidebar-viewport-backdrop>\n\n<div class=\"daff-sidebar-viewport__nav\"\n  [@transformContent]=\"_animationState\">\n    <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n</div>\n\n<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<div class=\"daff-sidebar-viewport__content\"\n  [@transformContent]=\"_animationState\"\n  (@transformContent.start)=\"onContentAnimationStart($event)\"\n  (@transformContent.done)=\"onContentAnimationDone($event)\">\n  <div class=\"daff-sidebar-viewport__inner\">\n      <ng-content></ng-content>\n      <div class=\"daff-sidebar-viewport__footer\">\n        <ng-content select=\"[daff-sidebar-viewport-footer]\"></ng-content>\n      </div>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>\n", styles: [":host{display:flex;min-height:100dvh;position:relative;width:100%;z-index:1}:host .daff-sidebar-viewport__inner{display:flex;flex-direction:column;height:100%}:host.pad-left .daff-sidebar-viewport__inner{padding-left:0}@media (min-width: 1024px){:host.pad-left .daff-sidebar-viewport__inner{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:0}@media (min-width: 1024px){:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-right .daff-sidebar-viewport__inner{padding-right:0}@media (min-width: 1024px){:host.pad-right .daff-sidebar-viewport__inner{padding-right:var(--daff-sidebar-right-width, 240px)}}:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:0}@media (min-width: 1024px){:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:var(--daff-sidebar-right-width, 240px)}}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;z-index:3;min-height:100%}.daff-sidebar-viewport__nav{position:fixed;top:0;width:100%;z-index:4}.daff-sidebar-viewport__nav:empty{display:none}.daff-sidebar-viewport__nav:not(:empty)~.daff-sidebar-viewport__content{margin-top:var(--daff-sidebar-side-fixed-top-shift)}.daff-sidebar-viewport__footer{margin-top:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport){transform:translate(0);min-height:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DAFF_SIDEBAR_SCROLL_TOKEN]
@@ -771,27 +862,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 class DaffSidebarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarModule, imports: [CommonModule,
             A11yModule,
             DaffSidebarComponent,
             DaffSidebarViewportComponent,
             DaffSidebarHeaderComponent,
             DaffSidebarFooterComponent,
             DaffSidebarHeaderTitleDirective,
-            DaffSidebarHeaderActionDirective,
-            DaffSidebarViewportBackdropComponent], exports: [DaffSidebarComponent,
+            DaffSidebarHeaderActionDirective], exports: [DaffSidebarComponent,
             DaffSidebarViewportComponent,
             DaffSidebarHeaderComponent,
             DaffSidebarFooterComponent,
             DaffSidebarHeaderTitleDirective,
-            DaffSidebarHeaderActionDirective,
-            DaffSidebarViewportBackdropComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarModule, imports: [CommonModule,
+            DaffSidebarHeaderActionDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarModule, imports: [CommonModule,
             A11yModule,
             DaffSidebarHeaderComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffSidebarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSidebarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -803,7 +892,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         DaffSidebarFooterComponent,
                         DaffSidebarHeaderTitleDirective,
                         DaffSidebarHeaderActionDirective,
-                        DaffSidebarViewportBackdropComponent,
                     ],
                     exports: [
                         DaffSidebarComponent,
@@ -812,7 +900,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         DaffSidebarFooterComponent,
                         DaffSidebarHeaderTitleDirective,
                         DaffSidebarHeaderActionDirective,
-                        DaffSidebarViewportBackdropComponent,
                     ],
                 }]
         }] });
@@ -869,6 +956,9 @@ const FLOATING_MODES = [
  */
 const daffSidebarIsFloatingMode = (mode) => FLOATING_MODES.includes(mode);
 
+/**
+ * @docs-private
+ */
 const DAFF_SIDEBAR_COMPONENTS = [
     DaffSidebarComponent,
     DaffSidebarViewportComponent,
@@ -876,12 +966,11 @@ const DAFF_SIDEBAR_COMPONENTS = [
     DaffSidebarFooterComponent,
     DaffSidebarHeaderTitleDirective,
     DaffSidebarHeaderActionDirective,
-    DaffSidebarViewportBackdropComponent,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_SIDEBAR_COMPONENTS, DaffSidebarComponent, DaffSidebarFooterComponent, DaffSidebarHeaderActionDirective, DaffSidebarHeaderComponent, DaffSidebarHeaderTitleDirective, DaffSidebarModule, DaffSidebarService, DaffSidebarViewportBackdropComponent, DaffSidebarViewportComponent, daffSidebarIsDockedMode, daffSidebarIsFloatingMode };
+export { DAFF_SIDEBAR_COMPONENTS, DaffSidebarComponent, DaffSidebarFooterComponent, DaffSidebarHeaderActionDirective, DaffSidebarHeaderComponent, DaffSidebarHeaderTitleDirective, DaffSidebarModule, DaffSidebarService, DaffSidebarViewportComponent, daffSidebarIsDockedMode, daffSidebarIsFloatingMode };
 //# sourceMappingURL=daffodil-design-sidebar.mjs.map