@daffodil/design 0.66.0 → 0.67.0

package/fesm2022/daffodil-design-sidebar.mjs

@@ -0,0 +1,670 @@
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Inject, HostBinding, Output, Input, HostListener, Directive, ViewEncapsulation, InjectionToken, inject, ElementRef, SkipSelf, Optional, ContentChildren, NgModule } from '@angular/core';
+import * as i2 from '@daffodil/design';
+import { daffFocusableElementsSelector, DaffBackdropModule } from '@daffodil/design';
+import { fromEvent } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+/**
+ * Determine whether or animation states are going to an open state from a non-open state.
+ */
+const isOpening = (fromState, toState) => {
+    if (fromState === 'under-open' && toState === 'open' || fromState === 'open' && toState === 'under-open') {
+        return false;
+    }
+    if (toState === 'under-open' || toState === 'open') {
+        return true;
+    }
+    return false;
+};
+
+const duration = '200ms';
+const sidebarAnimateInTransition = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
+const sidebarAnimateOutTransition = 'cubic-bezier(0.4, 0.0, 1, 1)';
+const daffSidebarAnimations = {
+    transformSidebar: trigger('transformSidebar', [
+        // We remove the `transform` here completely, rather than setting it to zero, because
+        // 3d transforms causes text to appear blurry on IE and Edge.
+        state('open', style({
+            transform: 'none',
+        })),
+        state('closed', style({
+            transform: 'translateX({{width}})',
+        }), { params: { width: '-240px' } }),
+        transition('open => closed', animate(duration + ' ' + sidebarAnimateOutTransition)),
+        transition('closed => open', animate(duration + ' ' + sidebarAnimateInTransition)),
+    ]),
+    transformContent: trigger('transformContent', [
+        // We remove the `transform` here completely, rather than setting it to zero, because
+        // 3d transforms causes text to appear blurry on IE and Edge.
+        state('closed', style({
+            transform: 'none',
+        })),
+        state('open', style({
+            transform: 'translateX({{shift}})',
+        }), { params: { shift: '-240px' } }),
+        transition('open => closed', animate(duration + ' ' + sidebarAnimateInTransition)),
+        transition('closed => open', animate(duration + ' ' + sidebarAnimateOutTransition)),
+    ]),
+    backdropTrigger: trigger('backdropTrigger', [
+        state('open', style({
+            opacity: 1,
+        })),
+        state('closed', style({
+            opacity: 0,
+        })),
+        transition('open => closed', animate(duration + ' ' + sidebarAnimateOutTransition)),
+        transition('closed => open', animate(duration + ' ' + sidebarAnimateInTransition)),
+    ]),
+};
+var DaffSidebarAnimationStates;
+(function (DaffSidebarAnimationStates) {
+    DaffSidebarAnimationStates["OPEN"] = "open";
+    DaffSidebarAnimationStates["CLOSED"] = "closed";
+    DaffSidebarAnimationStates["UNDEROPEN"] = "under-open";
+    DaffSidebarAnimationStates["UNDERCLOSED"] = "under-closed";
+    DaffSidebarAnimationStates["SIDEFIXEDOPEN"] = "side-fixed-open";
+    DaffSidebarAnimationStates["SIDEFIXEDCLOSED"] = "side-fixed-closed";
+    DaffSidebarAnimationStates["NONE"] = "none";
+})(DaffSidebarAnimationStates || (DaffSidebarAnimationStates = {}));
+
+const getAnimationState = (open, mode) => {
+    if (mode === 'side') {
+        return 'none';
+    }
+    if (mode === 'side-fixed' && open) {
+        return 'side-fixed-open';
+    }
+    if (mode === 'side-fixed' && !open) {
+        return 'side-fixed-closed';
+    }
+    if (open && mode === 'under') {
+        return 'under-open';
+    }
+    if (!open && mode === 'under') {
+        return 'under-closed';
+    }
+    if (open) {
+        return 'open';
+    }
+    else {
+        return 'closed';
+    }
+};
+
+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`.
+ */
+class DaffSidebarComponent {
+    /**
+     * @docs-private
+     *
+     * The CSS classes set.
+     */
+    get classes() {
+        return {
+            'daff-sidebar': true,
+            [this.side]: true,
+            [this.mode]: true,
+        };
+    }
+    ;
+    /**
+     * The animation state of the sidebar.
+     */
+    get transformSidebar() {
+        return {
+            value: getAnimationState(this.open, this.mode),
+            params: { width: getSidebarAnimationWidth(this.side, this.width) },
+        };
+    }
+    /**
+     * The width of the sidebar.
+     */
+    get width() {
+        return this._elementRef.nativeElement.offsetWidth;
+    }
+    constructor(_elementRef, _ngZone, _focusTrapFactory, _focusStack, _doc) {
+        this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
+        this._focusTrapFactory = _focusTrapFactory;
+        this._focusStack = _focusStack;
+        this._doc = _doc;
+        /**
+         * Event fired when `ESC` key is pressed when the sidebar has focus
+         */
+        this.escapePressed = new EventEmitter();
+        /**
+         * What side of the viewport to show the sidebar on.
+         */
+        this.side = 'left';
+        /**
+         * The mode of the sidebar.
+         */
+        this.mode = 'side';
+        /**
+         * Whether or not the sidebar is open.
+         */
+        this.open = false;
+        /**
+         * Listen to `keydown` events outside the zone so that change detection is not run every
+         * time a key is pressed. Instead we re-enter the zone only if the `ESC` key is pressed.
+         *
+         */
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this._elementRef.nativeElement, 'keydown').pipe(filter(event => event.key === 'Escape')).subscribe(event => this._ngZone.run(() => {
+                this.escapePressed.emit();
+                event.stopPropagation();
+            }));
+        });
+    }
+    /**
+     * 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.
+     */
+    onAnimationStart(e) {
+        if (e.toState === 'open' || e.toState === 'under-open' || e.toState === 'side-fixed-open') {
+            this._elementRef.nativeElement.style.visibility = 'visible';
+        }
+    }
+    /**
+     * Animation event that can be used to hook into when the
+     * transformSidebar animation is complete.
+     */
+    onAnimationComplete(e) {
+        if (isOpening(e.fromState, e.toState)) {
+            this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+            const focusableChild = this._elementRef.nativeElement.querySelector(daffFocusableElementsSelector);
+            this._focusStack.push(this._doc.activeElement);
+            if (focusableChild) {
+                focusableChild.focus();
+            }
+            else {
+                this._elementRef.nativeElement.tabIndex = 0;
+                this._elementRef.nativeElement.focus();
+            }
+        }
+        else {
+            if (this._focusTrap) {
+                this._focusTrap.destroy();
+                this._focusTrap = undefined;
+                this._focusStack.pop();
+            }
+        }
+        /**
+         * 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.
+         */
+        if (e.toState === 'closed' || e.toState === 'under-closed' || e.toState === 'side-fixed-closed') {
+            this._elementRef.nativeElement.style.visibility = 'hidden';
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", 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: "17.1.1", 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: [
+            daffSidebarAnimations.transformSidebar,
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, 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: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], transformSidebar: [{
+                type: HostBinding,
+                args: ['@transformSidebar']
+            }], escapePressed: [{
+                type: Output
+            }], side: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], onAnimationStart: [{
+                type: HostListener,
+                args: ['@transformSidebar.start', ['$event']]
+            }], onAnimationComplete: [{
+                type: HostListener,
+                args: ['@transformSidebar.done', ['$event']]
+            }] } });
+
+class DaffSidebarFooterComponent {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", 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"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-sidebar-footer']
+            }] } });
+
+class DaffSidebarHeaderActionDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarHeaderActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffSidebarHeaderActionDirective, selector: "[daffSidebarHeaderAction]", host: { properties: { "class.daff-sidebar-header__action": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarHeaderActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffSidebarHeaderAction]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-sidebar-header__action']
+            }] } });
+
+class DaffSidebarHeaderTitleDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffSidebarHeaderTitleDirective, selector: "[daffSidebarHeaderTitle]", host: { properties: { "class.daff-sidebar-header__title": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarHeaderTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffSidebarHeaderTitle]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-sidebar-header__title']
+            }] } });
+
+class DaffSidebarHeaderComponent {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", 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"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-sidebar-header']
+            }] } });
+
+/**
+ * Fallback function for determining whether or not a viewport has a parent viewport.
+ * This is really only used in the Daffodil docs when the injector heirarchy
+ * doesn't act as anticipated as a result of custom elements.
+ */
+const hasParentViewport = (element) => {
+    let currentElement = element.parentElement;
+    while (currentElement !== null) {
+        if (currentElement.tagName === 'DAFF-SIDEBAR-VIEWPORT') {
+            return true;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return false;
+};
+
+/**
+ * The placement of the nav in relation to the sidebar.
+ * See {@link DaffNavPlacement }
+ */
+var DaffNavPlacementEnum;
+(function (DaffNavPlacementEnum) {
+    DaffNavPlacementEnum["ABOVE"] = "above";
+    DaffNavPlacementEnum["BESIDE"] = "beside";
+})(DaffNavPlacementEnum || (DaffNavPlacementEnum = {}));
+
+/**
+ * An injection token that can be used within a sidebar to determine
+ * what to do enabling and disabling scrolling. By default, the body
+ * is the element where scrolling is controlled.
+ */
+const DAFF_SIDEBAR_SCROLL_TOKEN = new InjectionToken('DAFF_SIDEBAR_SCROLL_TOKEN', {
+    providedIn: 'root',
+    factory: () => {
+        const document = inject(DOCUMENT);
+        return {
+            enable: () => {
+                document.body.style.overflow = null;
+            },
+            disable: () => {
+                document.body.style.overflow = 'hidden';
+            },
+        };
+    },
+});
+/**
+ * A factory function that return a DaffSidebarScroll
+ * for the current sidebar viewport.
+ *
+ * See the providers of {@link DaffSidebarViewportComponent}
+ */
+const daffSidebarViewportScrollFactory = () => {
+    const element = inject(ElementRef).nativeElement;
+    return {
+        enable: () => {
+            element.style.overflow = null;
+        },
+        disable: () => {
+            element.style.overflow = 'hidden';
+        },
+    };
+};
+
+/**
+ * Determines, given a list of sidebars, whether or not the backdrop is interactable (typically clickable).
+ */
+const sidebarViewportBackdropInteractable = (sidebars) => sidebars.reduce((acc, sidebar) => ((sidebar.mode === 'over' || sidebar.mode === 'under') && sidebar.open) || acc, false);
+
+/**
+ * Given a list of sidebars, compute the associated content shift.
+ */
+const sidebarViewportContentPadding = (sidebars, side) => sidebars.reduce((acc, sidebar) => {
+    if (!(sidebar.mode === "side-fixed" /* DaffSidebarModeEnum.SideFixed */ && sidebar.open)) {
+        return acc;
+    }
+    if (sidebar.side === side) {
+        return sidebar.width;
+    }
+    else {
+        // This component is "stateless", its possible to have two open "under" sidebars.
+        // As such, we defer to "left" being open by default.
+        return acc;
+    }
+}, 0);
+
+const isViewportContentShifted = (mode, open) => (mode === 'under' && open);
+/**
+ * Given a list of sidebars, compute the associated content shift.
+ */
+const sidebarViewportContentShift = (sidebars) => sidebars.reduce((acc, sidebar) => {
+    if (!isViewportContentShifted(sidebar.mode, sidebar.open)) {
+        return acc;
+    }
+    if (sidebar.side === 'left') {
+        return sidebar.width;
+    }
+    else if (sidebar.side === 'right' && acc === 0) {
+        return -1 * sidebar.width;
+    }
+    else {
+        // This component is "stateless", its possible to have two open "under" sidebars.
+        // As such, we defer to "left" being open by default.
+        return acc;
+    }
+}, 0);
+
+;
+const getSidebarViewportAnimationState = (open) => open ? DaffSidebarAnimationStates.OPEN : DaffSidebarAnimationStates.CLOSED;
+
+/**
+ * The DaffSidebarViewport is the "holder" of sidebars throughout an entire application.
+ * It's generally only used once, like
+ *
+ * ```html
+ * <daff-sidebar-viewport>
+ *    <daff-sidebar></daff-sidebar>
+ *    <p>Some Content</p>
+ * </daff-sidebar-viewport>
+ * ```
+ *
+ * Importantly, its possible for there to be multiple sidebars of many modes
+ * at the same time. @see {@link DaffSidebarMode }
+ *
+ * Since this is a functional component, it's possible to have multiple "open" sidebars
+ * 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 is violated, this component will throw an exception.
+ */
+class DaffSidebarViewportComponent {
+    get classes() {
+        return {
+            'daff-sidebar-viewport': true,
+            [this.navPlacement]: true,
+        };
+    }
+    ;
+    get isNavOnSide() {
+        return this.navPlacement === DaffNavPlacementEnum.BESIDE;
+    }
+    onContentAnimationStart(e) {
+        if (e.toState === 'open') {
+            this._elementRef.nativeElement.style.overflow = 'hidden';
+        }
+    }
+    onContentAnimationDone(e) {
+        if (e.toState === 'closed') {
+            this._elementRef.nativeElement.style.overflow = null;
+        }
+    }
+    constructor(cdRef, _elementRef, bodyScroll, parentViewport, scroll) {
+        this.cdRef = cdRef;
+        this._elementRef = _elementRef;
+        this.bodyScroll = bodyScroll;
+        this.parentViewport = parentViewport;
+        this.scroll = scroll;
+        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.
+         */
+        this.navPlacement = DaffNavPlacementEnum.ABOVE;
+        /**
+         * The number of pixels that the main content of the page should be shifted to
+         * 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;
+        /**
+         * Whether or not the backdrop is interactable
+         */
+        this._backdropInteractable = false;
+        /**
+         * The animation state
+         */
+        this._animationState = { value: DaffSidebarAnimationStates.CLOSED, params: { shift: '0px' } };
+        /**
+         * Event fired when the backdrop is clicked. This is often used to close the sidebar.
+         */
+        this.backdropClicked = new EventEmitter();
+    }
+    ngAfterContentChecked() {
+        const nextShift = sidebarViewportContentShift(this.sidebars) + 'px';
+        if (this._shift !== nextShift) {
+            this._shift = nextShift;
+            this.updateAnimationState();
+            this.cdRef.markForCheck();
+        }
+        const nextBackdropInteractable = sidebarViewportBackdropInteractable(this.sidebars);
+        if (this._backdropInteractable !== nextBackdropInteractable) {
+            this._backdropInteractable = nextBackdropInteractable;
+            this.updateAnimationState();
+            this.cdRef.markForCheck();
+            if (nextBackdropInteractable) {
+                if (!this.parentViewport && !hasParentViewport(this._elementRef.nativeElement)) {
+                    this.bodyScroll.disable();
+                }
+                else {
+                    this.scroll.disable();
+                }
+            }
+            else { //if we are hiding the sidebars
+                if (!this.parentViewport && !hasParentViewport(this._elementRef.nativeElement)) {
+                    this.bodyScroll.enable();
+                }
+                else {
+                    this.scroll.enable();
+                }
+            }
+        }
+        ;
+        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();
+        }
+    }
+    /**
+     * @docs-private
+     *
+     * Updates the animation state of the viewport depending upon the state
+     * of all sidebars within the viewport.
+     */
+    updateAnimationState() {
+        this._animationState = {
+            value: getSidebarViewportAnimationState(this.sidebars.reduce((acc, sidebar) => acc || isViewportContentShifted(sidebar.mode, sidebar.open), false)),
+            params: { shift: this._shift },
+        };
+    }
+    /**
+     * @docs-private
+     * The called when the backdrop of the viewport is clicked upon.
+     */
+    _backdropClicked() {
+        this.backdropClicked.emit();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", 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: "17.1.1", 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-backdrop\n  [@transformContent]=\"_animationState\"\n  class=\"daff-sidebar-viewport__backdrop\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\">\n</daff-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;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__backdrop{height:100%;position:absolute;width:100%;pointer-events:auto;z-index:6}: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: i2.DaffBackdropComponent, selector: "daff-backdrop", inputs: ["transparent", "interactable", "fullscreen"], outputs: ["backdropClicked"] }], animations: [
+            daffSidebarAnimations.transformContent,
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarViewportComponent, decorators: [{
+            type: Component,
+            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-backdrop\n  [@transformContent]=\"_animationState\"\n  class=\"daff-sidebar-viewport__backdrop\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\">\n</daff-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;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__backdrop{height:100%;position:absolute;width:100%;pointer-events:auto;z-index:6}: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]
+                }, {
+                    type: SkipSelf
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DaffSidebarViewportComponent]
+                }, {
+                    type: SkipSelf
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DAFF_SIDEBAR_SCROLL_TOKEN]
+                }] }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.daff-sidebar-viewport']
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], navPlacement: [{
+                type: Input
+            }], sidebars: [{
+                type: ContentChildren,
+                args: [DaffSidebarComponent, { descendants: false }]
+            }], backdropClicked: [{
+                type: Output
+            }] } });
+
+class DaffSidebarModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarModule, declarations: [DaffSidebarComponent,
+            DaffSidebarViewportComponent,
+            DaffSidebarHeaderComponent,
+            DaffSidebarFooterComponent,
+            DaffSidebarHeaderTitleDirective,
+            DaffSidebarHeaderActionDirective], imports: [CommonModule,
+            A11yModule,
+            DaffBackdropModule], exports: [DaffSidebarComponent,
+            DaffSidebarViewportComponent,
+            DaffSidebarHeaderComponent,
+            DaffSidebarFooterComponent,
+            DaffSidebarHeaderTitleDirective,
+            DaffSidebarHeaderActionDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarModule, imports: [CommonModule,
+            A11yModule,
+            DaffBackdropModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSidebarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        A11yModule,
+                        DaffBackdropModule,
+                    ],
+                    declarations: [
+                        DaffSidebarComponent,
+                        DaffSidebarViewportComponent,
+                        DaffSidebarHeaderComponent,
+                        DaffSidebarFooterComponent,
+                        DaffSidebarHeaderTitleDirective,
+                        DaffSidebarHeaderActionDirective,
+                    ],
+                    exports: [
+                        DaffSidebarComponent,
+                        DaffSidebarViewportComponent,
+                        DaffSidebarHeaderComponent,
+                        DaffSidebarFooterComponent,
+                        DaffSidebarHeaderTitleDirective,
+                        DaffSidebarHeaderActionDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DaffSidebarComponent, DaffSidebarFooterComponent, DaffSidebarHeaderActionDirective, DaffSidebarHeaderComponent, DaffSidebarHeaderTitleDirective, DaffSidebarModule, DaffSidebarViewportComponent };
+//# sourceMappingURL=daffodil-design-sidebar.mjs.map