@daffodil/design 0.77.0 → 0.78.0

package/fesm2022/daffodil-design-sidebar.mjs

@@ -6,7 +6,7 @@ import { EventEmitter, Component, ChangeDetectionStrategy, Inject, HostBinding,
 import { fromEvent, BehaviorSubject } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import * as i2 from '@daffodil/design';
-import { daffFocusableElementsSelector } from '@daffodil/design';
+import { daffFocusableElementsSelector, DaffOpenableDirective } from '@daffodil/design';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
 /**
@@ -122,7 +122,7 @@ class DaffSidebarComponent {
      */
     get transformSidebar() {
         return {
-            value: getAnimationState$1(this.open, this.mode),
+            value: getAnimationState$1(this.openDirective.open, this.mode),
             params: { width: getSidebarAnimationWidth(this.side, this.width) },
         };
     }
@@ -132,11 +132,15 @@ class DaffSidebarComponent {
     get width() {
         return this._elementRef.nativeElement.offsetWidth;
     }
-    constructor(_elementRef, _ngZone, _focusTrapFactory, _focusStack, _doc) {
+    get open() {
+        return this.openDirective.open;
+    }
+    constructor(_elementRef, _ngZone, _focusTrapFactory, _focusStack, openDirective, _doc) {
         this._elementRef = _elementRef;
         this._ngZone = _ngZone;
         this._focusTrapFactory = _focusTrapFactory;
         this._focusStack = _focusStack;
+        this.openDirective = openDirective;
         this._doc = _doc;
         /**
          * Event fired when `ESC` key is pressed when the sidebar has focus
@@ -150,10 +154,6 @@ class DaffSidebarComponent {
          * 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.
@@ -208,17 +208,39 @@ class DaffSidebarComponent {
             this._elementRef.nativeElement.style.visibility = 'hidden';
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ConfigurableFocusTrapFactory }, { token: i2.DaffFocusStackService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffSidebarComponent, selector: "daff-sidebar", inputs: { side: "side", mode: "mode", open: "open" }, outputs: { escapePressed: "escapePressed" }, host: { listeners: { "@transformSidebar.start": "onAnimationStart($event)", "@transformSidebar.done": "onAnimationComplete($event)" }, properties: { "class": "this.classes", "@transformSidebar": "this.transformSidebar" } }, 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;width:240px;flex-shrink:0;overflow-y:auto}:host.side-fixed{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}: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: [
+    /**
+     * Reveal the contents of the sidebar
+     */
+    reveal() {
+        this.openDirective.reveal();
+    }
+    /**
+     * Hide the contents of the sidebar
+     */
+    hide() {
+        this.openDirective.hide();
+    }
+    /**
+     * Toggle the visibility of the sidebar
+     */
+    toggle() {
+        this.openDirective.toggle();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", 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: "18.2.2", 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:240px}:host.left{width:var(--daff-sidebar-left-width, 240px)}:host.right{width:var(--daff-sidebar-right-width, 240px)}: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: "18.2.2", ngImport: i0, type: DaffSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+            args: [{ selector: 'daff-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{
+                            directive: DaffOpenableDirective,
+                            inputs: ['open'],
+                            outputs: ['toggled'],
+                        }], animations: [
                         daffSidebarAnimations.transformSidebar,
-                    ], 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;width:240px;flex-shrink:0;overflow-y:auto}:host.side-fixed{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}: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: undefined, decorators: [{
+                    ], 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:240px}:host.left{width:var(--daff-sidebar-left-width, 240px)}:host.right{width:var(--daff-sidebar-right-width, 240px)}: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]
                 }] }], propDecorators: { classes: [{
@@ -233,8 +255,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Input
             }], mode: [{
                 type: Input
-            }], open: [{
-                type: Input
             }], onAnimationStart: [{
                 type: HostListener,
                 args: ['@transformSidebar.start', ['$event']]
@@ -248,11 +268,11 @@ class DaffSidebarFooterComponent {
         this.class = true;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffSidebarFooterComponent, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", 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: "18.2.2", ngImport: i0, type: DaffSidebarFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-sidebar-footer', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;flex-grow:0}\n"] }]
+            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"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-sidebar-footer']
@@ -266,12 +286,13 @@ class DaffSidebarHeaderActionDirective {
         this.class = true;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarHeaderActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: DaffSidebarHeaderActionDirective, selector: "[daffSidebarHeaderAction]", host: { properties: { "class.daff-sidebar-header__action": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: DaffSidebarHeaderActionDirective, isStandalone: true, selector: "[daffSidebarHeaderAction]", host: { properties: { "class.daff-sidebar-header__action": "this.class" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarHeaderActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSidebarHeaderAction]',
+                    standalone: true,
                 }]
         }], propDecorators: { class: [{
                 type: HostBinding,
@@ -286,12 +307,13 @@ class DaffSidebarHeaderTitleDirective {
         this.class = true;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: DaffSidebarHeaderTitleDirective, selector: "[daffSidebarHeaderTitle]", host: { properties: { "class.daff-sidebar-header__title": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: DaffSidebarHeaderTitleDirective, isStandalone: true, selector: "[daffSidebarHeaderTitle]", host: { properties: { "class.daff-sidebar-header__title": "this.class" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarHeaderTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSidebarHeaderTitle]',
+                    standalone: true,
                 }]
         }], propDecorators: { class: [{
                 type: HostBinding,
@@ -303,11 +325,11 @@ class DaffSidebarHeaderComponent {
         this.class = true;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffSidebarHeaderComponent, selector: "daff-sidebar-header", host: { properties: { "class.daff-sidebar-header": "this.class" } }, ngImport: i0, template: "<ng-content select=\"[daffSidebarHeaderAction]\"></ng-content>\n<ng-content select=\"[daffSidebarHeaderTitle]\"></ng-content>\n<ng-content></ng-content>", styles: [".daff-sidebar-header{display:flex;align-items:center;position:relative;width:100%}.daff-sidebar-header__action{position:absolute}.daff-sidebar-header__title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1rem;font-weight:500}.daff-sidebar-header__action+.daff-sidebar-header__title{margin:0 0 0 29px}.daff-sidebar .daff-sidebar-header{padding:16px}.daff-sidebar .daff-sidebar-header__action{position:absolute;left:0;right:initial;top:0}.daff-sidebar.right .daff-sidebar-header__action{left:initial;right:0}.daff-sidebar.right .daff-sidebar-header__title{margin:0 29px 0 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffSidebarHeaderComponent, isStandalone: true, selector: "daff-sidebar-header", host: { properties: { "class.daff-sidebar-header": "this.class" } }, ngImport: i0, template: "<ng-content select=\"[daffSidebarHeaderAction]\"></ng-content>\n<ng-content select=\"[daffSidebarHeaderTitle]\"></ng-content>\n<ng-content></ng-content>", styles: [".daff-sidebar-header{display:flex;align-items:center;position:relative;width:100%}.daff-sidebar-header__action{position:absolute}.daff-sidebar-header__title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1rem;font-weight:500}.daff-sidebar-header__action+.daff-sidebar-header__title{margin:0 0 0 29px}.daff-sidebar .daff-sidebar-header{padding:16px}.daff-sidebar .daff-sidebar-header__action{position:absolute;left:0;right:initial;top:0}.daff-sidebar.right .daff-sidebar-header__action{left:initial;right:0}.daff-sidebar.right .daff-sidebar-header__title{margin:0 29px 0 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-sidebar-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[daffSidebarHeaderAction]\"></ng-content>\n<ng-content select=\"[daffSidebarHeaderTitle]\"></ng-content>\n<ng-content></ng-content>", styles: [".daff-sidebar-header{display:flex;align-items:center;position:relative;width:100%}.daff-sidebar-header__action{position:absolute}.daff-sidebar-header__title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1rem;font-weight:500}.daff-sidebar-header__action+.daff-sidebar-header__title{margin:0 0 0 29px}.daff-sidebar .daff-sidebar-header{padding:16px}.daff-sidebar .daff-sidebar-header__action{position:absolute;left:0;right:initial;top:0}.daff-sidebar.right .daff-sidebar-header__action{left:initial;right:0}.daff-sidebar.right .daff-sidebar-header__title{margin:0 29px 0 0}\n"] }]
+            args: [{ selector: 'daff-sidebar-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content select=\"[daffSidebarHeaderAction]\"></ng-content>\n<ng-content select=\"[daffSidebarHeaderTitle]\"></ng-content>\n<ng-content></ng-content>", styles: [".daff-sidebar-header{display:flex;align-items:center;position:relative;width:100%}.daff-sidebar-header__action{position:absolute}.daff-sidebar-header__title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1rem;font-weight:500}.daff-sidebar-header__action+.daff-sidebar-header__title{margin:0 0 0 29px}.daff-sidebar .daff-sidebar-header{padding:16px}.daff-sidebar .daff-sidebar-header__action{position:absolute;left:0;right:initial;top:0}.daff-sidebar.right .daff-sidebar-header__action{left:initial;right:0}.daff-sidebar.right .daff-sidebar-header__title{margin:0 29px 0 0}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-sidebar-header']
@@ -382,21 +404,21 @@ const daffSidebarViewportScrollFactory = () => {
 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.
+ * Given a list of sidebars, compute the whether or not the content is padded.
  */
-const sidebarViewportContentPadding = (sidebars, side) => sidebars.reduce((acc, sidebar) => {
+const isSidebarViewportContentPadded = (sidebars, side) => sidebars.reduce((acc, sidebar) => {
     if (!(sidebar.mode === "side-fixed" /* DaffSidebarModeEnum.SideFixed */ && sidebar.open)) {
-        return acc;
+        return acc || false;
     }
     if (sidebar.side === side) {
-        return sidebar.width;
+        return true;
     }
     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);
+}, false);
 
 const isViewportContentShifted = (mode, open) => (mode === 'under' && open);
 /**
@@ -486,7 +508,7 @@ class DaffSidebarViewportBackdropComponent {
         this.backdropClicked.emit();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarViewportBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DaffSidebarViewportBackdropComponent, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", 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 }); }
 }
@@ -494,7 +516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             type: Component,
             args: [{ selector: 'daff-sidebar-viewport-backdrop', template: '<ng-content></ng-content>', animations: [
                         daffSidebarViewportBackdropAnimations.fadeBackdrop,
-                    ], 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"] }]
+                    ], 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"] }]
         }], propDecorators: { interactableClass: [{
                 type: HostBinding,
                 args: ['class.interactable']
@@ -550,6 +572,8 @@ class DaffSidebarViewportComponent {
         return {
             'daff-sidebar-viewport': true,
             [this.navPlacement]: true,
+            'pad-left': this._isPaddedLeft,
+            'pad-right': this._isPaddedRight,
         };
     }
     ;
@@ -583,22 +607,8 @@ class DaffSidebarViewportComponent {
          * right when there are child sidebars.
          */
         this._shift = '0px';
-        /**
-         * The left padding on the content when left side-fixed sidebars are open.
-         */
-        this._contentPadLeft = 0;
-        /**
-         * The left padding on the nav when left side-fixed sidebars are open.
-         */
-        this._navPadLeft = 0;
-        /**
-         * The right padding on the content when right side-fixed sidebars are open.
-         */
-        this._contentPadRight = 0;
-        /**
-         * The right padding on the content when right side-fixed sidebars are open.
-         */
-        this._navPadRight = 0;
+        this._isPaddedLeft = false;
+        this._isPaddedRight = false;
         /**
          * Whether or not the backdrop is interactable
          */
@@ -642,20 +652,8 @@ class DaffSidebarViewportComponent {
             }
         }
         ;
-        const nextLeftPadding = sidebarViewportContentPadding(this.sidebars, 'left');
-        if (this._contentPadLeft !== nextLeftPadding) {
-            this._contentPadLeft = nextLeftPadding;
-            this._navPadLeft = this.isNavOnSide ? this._contentPadLeft : null;
-            this.updateAnimationState();
-            this.cdRef.markForCheck();
-        }
-        const nextRightPadding = sidebarViewportContentPadding(this.sidebars, 'right');
-        if (this._contentPadRight !== nextRightPadding) {
-            this._contentPadRight = nextRightPadding;
-            this._navPadRight = this.isNavOnSide ? this._contentPadRight : null;
-            this.updateAnimationState();
-            this.cdRef.markForCheck();
-        }
+        this._isPaddedLeft = isSidebarViewportContentPadded(this.sidebars, 'left');
+        this._isPaddedRight = isSidebarViewportContentPadded(this.sidebars, 'right');
     }
     ngOnDestroy() {
         if (!this.parentViewport && !hasParentViewport(this._elementRef.nativeElement)) {
@@ -685,9 +683,12 @@ class DaffSidebarViewportComponent {
         this.backdropClicked.emit();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", 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: "18.2.2", type: DaffSidebarViewportComponent, 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: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<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  [style.padding-left.px]=\"_navPadLeft\"\n  [style.padding-right.px]=\"_navPadRight\">\n    <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n</div>\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    [style.padding-left.px]=\"_contentPadLeft\"\n    [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>\n", styles: [":host{display:flex;min-height:100dvh;position:relative;width:100%;z-index:1}.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: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", 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: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<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<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: [
             daffSidebarAnimations.transformContent,
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -696,8 +697,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             args: [{ selector: 'daff-sidebar-viewport', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         daffSidebarAnimations.transformContent,
                     ], providers: [
-                        { provide: DAFF_SIDEBAR_SCROLL_TOKEN, useFactory: daffSidebarViewportScrollFactory },
-                    ], template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<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  [style.padding-left.px]=\"_navPadLeft\"\n  [style.padding-right.px]=\"_navPadRight\">\n    <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n</div>\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    [style.padding-left.px]=\"_contentPadLeft\"\n    [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>\n", styles: [":host{display:flex;min-height:100dvh;position:relative;width:100%;z-index:1}.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"] }]
+                        {
+                            provide: DAFF_SIDEBAR_SCROLL_TOKEN,
+                            useFactory: daffSidebarViewportScrollFactory,
+                        },
+                    ], standalone: true, imports: [
+                        DaffSidebarViewportBackdropComponent,
+                    ], template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<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<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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DAFF_SIDEBAR_SCROLL_TOKEN]
@@ -728,16 +734,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Output
             }] } });
 
+/**
+ * @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS}
+ */
 class DaffSidebarModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarModule, declarations: [DaffSidebarComponent,
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: DaffSidebarModule, imports: [CommonModule,
+            A11yModule,
+            DaffSidebarComponent,
             DaffSidebarViewportComponent,
             DaffSidebarHeaderComponent,
             DaffSidebarFooterComponent,
             DaffSidebarHeaderTitleDirective,
             DaffSidebarHeaderActionDirective,
-            DaffSidebarViewportBackdropComponent], imports: [CommonModule,
-            A11yModule], exports: [DaffSidebarComponent,
+            DaffSidebarViewportBackdropComponent], exports: [DaffSidebarComponent,
             DaffSidebarViewportComponent,
             DaffSidebarHeaderComponent,
             DaffSidebarFooterComponent,
@@ -753,8 +763,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     imports: [
                         CommonModule,
                         A11yModule,
-                    ],
-                    declarations: [
                         DaffSidebarComponent,
                         DaffSidebarViewportComponent,
                         DaffSidebarHeaderComponent,
@@ -827,9 +835,19 @@ const FLOATING_MODES = [
  */
 const daffSidebarIsFloatingMode = (mode) => FLOATING_MODES.includes(mode);
 
+const DAFF_SIDEBAR_COMPONENTS = [
+    DaffSidebarComponent,
+    DaffSidebarViewportComponent,
+    DaffSidebarHeaderComponent,
+    DaffSidebarFooterComponent,
+    DaffSidebarHeaderTitleDirective,
+    DaffSidebarHeaderActionDirective,
+    DaffSidebarViewportBackdropComponent,
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DaffSidebarComponent, DaffSidebarFooterComponent, DaffSidebarHeaderActionDirective, DaffSidebarHeaderComponent, DaffSidebarHeaderTitleDirective, DaffSidebarModule, DaffSidebarService, DaffSidebarViewportBackdropComponent, DaffSidebarViewportComponent, daffSidebarIsDockedMode, daffSidebarIsFloatingMode };
+export { DAFF_SIDEBAR_COMPONENTS, DaffSidebarComponent, DaffSidebarFooterComponent, DaffSidebarHeaderActionDirective, DaffSidebarHeaderComponent, DaffSidebarHeaderTitleDirective, DaffSidebarModule, DaffSidebarService, DaffSidebarViewportBackdropComponent, DaffSidebarViewportComponent, daffSidebarIsDockedMode, daffSidebarIsFloatingMode };
 //# sourceMappingURL=daffodil-design-sidebar.mjs.map