@koobiq/components 17.0.0-rc.9 → 17.0.0

package/fesm2022/koobiq-components-sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-sidebar.mjs","sources":["../../../packages/components/sidebar/sidebar-animations.ts","../../../packages/components/sidebar/sidebar.component.ts","../../../packages/components/sidebar/sidebar.component.html","../../../packages/components/sidebar/sidebar.module.ts","../../../packages/components/sidebar/koobiq-components-sidebar.ts"],"sourcesContent":["import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';\n\n\nexport enum KbqSidebarAnimationState {\n    Opened = 'opened',\n    Closed = 'closed'\n}\n\nexport const kbqSidebarAnimations: { readonly sidebarState: AnimationTriggerMetadata } = {\n    sidebarState: trigger('state', [\n        state(\n            'opened',\n            style({\n                minWidth: '{{ openedStateMinWidth }}',\n                width: '{{ openedStateWidth }}',\n                maxWidth: '{{ openedStateMaxWidth }}'\n            }),\n            { params: { openedStateMinWidth: '', openedStateWidth: '', openedStateMaxWidth: '' }}\n        ),\n        state(\n            'closed',\n            style({\n                minWidth: '{{ closedStateWidth }}',\n                width: '{{ closedStateWidth }}',\n                maxWidth: '{{ closedStateWidth }}'\n            }),\n            { params: { closedStateWidth: '' }}\n        ),\n        transition('opened => closed', [animate('0.1s')]),\n        transition('closed => opened', [animate('0.2s')])\n    ])\n};\n","import {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    Directive, ElementRef,\n    EventEmitter,\n    Input,\n    NgZone,\n    OnDestroy, OnInit,\n    Output,\n    ViewEncapsulation\n} from '@angular/core';\nimport { isControl, isInput, isLeftBracket, isRightBracket } from '@koobiq/cdk/keycodes';\n\nimport { kbqSidebarAnimations, KbqSidebarAnimationState } from './sidebar-animations';\n\n\nexport enum SidebarPositions {\n    Left = 'left',\n    Right = 'right'\n}\n\n// tslint:disable-next-line:naming-convention\ninterface KbqSidebarParams {\n    openedStateMinWidth: string;\n    openedStateWidth: string;\n    openedStateMaxWidth: string;\n\n    closedStateWidth: string;\n}\n\n\n@Directive({\n    selector: '[kbq-sidebar-opened]',\n    exportAs: 'kbqSidebarOpened'\n})\nexport class KbqSidebarOpened {\n    @Input() minWidth: string;\n    @Input() width: string;\n    @Input() maxWidth: string;\n}\n\n@Directive({\n    selector: '[kbq-sidebar-closed]',\n    exportAs: 'kbqSidebarClosed'\n})\nexport class KbqSidebarClosed {\n    @Input() width: string;\n}\n\n\n@Component({\n    selector: 'kbq-sidebar',\n    exportAs: 'kbqSidebar',\n    templateUrl: 'sidebar.component.html',\n    styleUrls: ['./sidebar.scss'],\n    host: {\n        class: 'kbq-sidebar',\n        '[@state]': `{\n            value: animationState,\n            params: params\n        }`,\n        '(@state.start)': 'onAnimationStart()',\n        '(@state.done)': 'onAnimationDone()'\n    },\n    animations: [kbqSidebarAnimations.sidebarState],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class KbqSidebar implements OnDestroy, OnInit, AfterContentInit {\n    @Input()\n    get opened(): boolean {\n        return this._opened;\n    }\n\n    set opened(value: boolean) {\n        if (this._opened) {\n            this.saveWidth();\n        }\n\n        this._opened = value;\n    }\n    private _opened: boolean = true;\n\n    @Input() position: SidebarPositions;\n\n    params: KbqSidebarParams = {\n        openedStateWidth: 'inherit',\n        openedStateMinWidth: 'inherit',\n        openedStateMaxWidth: 'inherit',\n\n        closedStateWidth: '32px'\n    };\n\n    @Output() readonly stateChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    @ContentChild(KbqSidebarOpened, { static: false }) openedContent: KbqSidebarOpened;\n\n    @ContentChild(KbqSidebarClosed, { static: false }) closedContent: KbqSidebarClosed;\n\n    get animationState(): KbqSidebarAnimationState {\n        return this._opened ? KbqSidebarAnimationState.Opened : KbqSidebarAnimationState.Closed;\n    }\n\n    internalState: boolean = true;\n\n    private documentKeydownListener: (event: KeyboardEvent) => void;\n\n    constructor(private ngZone: NgZone, private elementRef: ElementRef) {}\n\n    ngOnInit(): void {\n        if (this.position === SidebarPositions.Left || this.position === SidebarPositions.Right) {\n            this.registerKeydownListener();\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (this.position === SidebarPositions.Left || this.position === SidebarPositions.Right) {\n            this.unRegisterKeydownListener();\n        }\n    }\n\n    toggle(): void {\n        this.opened = !this.opened;\n    }\n\n    onAnimationStart() {\n        if (this._opened) {\n            this.internalState = this._opened;\n        }\n    }\n\n    onAnimationDone() {\n        this.internalState = this._opened;\n\n        this.stateChanged.emit(this._opened);\n    }\n\n    ngAfterContentInit(): void {\n        this.params = {\n            openedStateWidth: this.openedContent.width || 'inherit',\n            openedStateMinWidth: this.openedContent.minWidth || 'inherit',\n            openedStateMaxWidth: this.openedContent.maxWidth || 'inherit',\n\n            closedStateWidth: this.closedContent.width || '32px'\n        };\n    }\n\n    private registerKeydownListener(): void {\n        this.documentKeydownListener = (event) => {\n            if (isControl(event) || isInput(event)) { return; }\n\n            if (\n                (this.position === SidebarPositions.Left && isLeftBracket(event)) ||\n                (this.position === SidebarPositions.Right && isRightBracket(event))\n            ) {\n                this.ngZone.run(() => this._opened = !this._opened);\n            }\n        };\n\n        this.ngZone.runOutsideAngular(() => {\n            // tslint:disable-next-line: no-unbound-method\n            document.addEventListener('keypress', this.documentKeydownListener, true);\n        });\n    }\n\n    private unRegisterKeydownListener(): void {\n        // tslint:disable-next-line: no-unbound-method\n        document.removeEventListener('keypress', this.documentKeydownListener, true);\n    }\n\n    private saveWidth() {\n        this.params.openedStateWidth = `${this.elementRef.nativeElement.offsetWidth}px`;\n    }\n}\n","<ng-container [ngSwitch]=\"internalState\">\n    <ng-container *ngSwitchCase=\"true\">\n        <ng-content select=\"[kbq-sidebar-opened]\"></ng-content>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"false\">\n        <ng-content select=\"[kbq-sidebar-closed]\"></ng-content>\n    </ng-container>\n</ng-container>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { KbqSidebar, KbqSidebarClosed, KbqSidebarOpened } from './sidebar.component';\n\n\n@NgModule({\n    imports: [CommonModule],\n    declarations: [\n        KbqSidebarClosed,\n        KbqSidebarOpened,\n        KbqSidebar\n    ],\n    exports: [\n        KbqSidebarClosed,\n        KbqSidebarOpened,\n        KbqSidebar\n    ]\n})\nexport class KbqSidebarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAGA,IAAY,wBAGX,CAAA;AAHD,CAAA,UAAY,wBAAwB,EAAA;AAChC,IAAA,wBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,wBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACrB,CAAC,EAHW,wBAAwB,KAAxB,wBAAwB,GAGnC,EAAA,CAAA,CAAA,CAAA;AAEM,MAAM,oBAAoB,GAAwD;AACrF,IAAA,YAAY,EAAE,OAAO,CAAC,OAAO,EAAE;AAC3B,QAAA,KAAK,CACD,QAAQ,EACR,KAAK,CAAC;AACF,YAAA,QAAQ,EAAE,2BAA2B;AACrC,YAAA,KAAK,EAAE,wBAAwB;AAC/B,YAAA,QAAQ,EAAE,2BAA2B;AACxC,SAAA,CAAC,EACF,EAAE,MAAM,EAAE,EAAE,mBAAmB,EAAE,EAAE,EAAE,gBAAgB,EAAE,EAAE,EAAE,mBAAmB,EAAE,EAAE,EAAE,EAAC,CACxF;AACD,QAAA,KAAK,CACD,QAAQ,EACR,KAAK,CAAC;AACF,YAAA,QAAQ,EAAE,wBAAwB;AAClC,YAAA,KAAK,EAAE,wBAAwB;AAC/B,YAAA,QAAQ,EAAE,wBAAwB;SACrC,CAAC,EACF,EAAE,MAAM,EAAE,EAAE,gBAAgB,EAAE,EAAE,EAAE,EAAC,CACtC;QACD,UAAU,CAAC,kBAAkB,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;QACjD,UAAU,CAAC,kBAAkB,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;KACpD,CAAC;CACL;;ICbW,iBAGX;AAHD,CAAA,UAAY,gBAAgB,EAAA;AACxB,IAAA,gBAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACnB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,GAG3B,EAAA,CAAA,CAAA,CAAA;MAgBY,gBAAgB,CAAA;iIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAAhB,gBAAgB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,QAAQ,EAAE,kBAAkB;AAC/B,iBAAA,CAAA;8BAEY,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;;MAOG,gBAAgB,CAAA;iIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAAhB,gBAAgB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,QAAQ,EAAE,kBAAkB;AAC/B,iBAAA,CAAA;8BAEY,KAAK,EAAA,CAAA;sBAAb,KAAK;;MAsBG,UAAU,CAAA;AACnB,IAAA,IACI,MAAM,GAAA;QACN,OAAO,IAAI,CAAC,OAAO,CAAC;KACvB;IAED,IAAI,MAAM,CAAC,KAAc,EAAA;AACrB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,SAAS,EAAE,CAAC;SACpB;AAED,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACxB;AAmBD,IAAA,IAAI,cAAc,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,OAAO,GAAG,wBAAwB,CAAC,MAAM,GAAG,wBAAwB,CAAC,MAAM,CAAC;KAC3F;IAMD,WAAoB,CAAA,MAAc,EAAU,UAAsB,EAAA;QAA9C,IAAM,CAAA,MAAA,GAAN,MAAM,CAAQ;QAAU,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;QA1B1D,IAAO,CAAA,OAAA,GAAY,IAAI,CAAC;AAIhC,QAAA,IAAA,CAAA,MAAM,GAAqB;AACvB,YAAA,gBAAgB,EAAE,SAAS;AAC3B,YAAA,mBAAmB,EAAE,SAAS;AAC9B,YAAA,mBAAmB,EAAE,SAAS;AAE9B,YAAA,gBAAgB,EAAE,MAAM;SAC3B,CAAC;AAEiB,QAAA,IAAA,CAAA,YAAY,GAA0B,IAAI,YAAY,EAAW,CAAC;QAUrF,IAAa,CAAA,aAAA,GAAY,IAAI,CAAC;KAIwC;IAEtE,QAAQ,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,gBAAgB,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,gBAAgB,CAAC,KAAK,EAAE;YACrF,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAClC;KACJ;IAED,WAAW,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,gBAAgB,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,gBAAgB,CAAC,KAAK,EAAE;YACrF,IAAI,CAAC,yBAAyB,EAAE,CAAC;SACpC;KACJ;IAED,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC9B;IAED,gBAAgB,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC;SACrC;KACJ;IAED,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC;QAElC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACxC;IAED,kBAAkB,GAAA;QACd,IAAI,CAAC,MAAM,GAAG;AACV,YAAA,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,IAAI,SAAS;AACvD,YAAA,mBAAmB,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,SAAS;AAC7D,YAAA,mBAAmB,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,SAAS;AAE7D,YAAA,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,IAAI,MAAM;SACvD,CAAC;KACL;IAEO,uBAAuB,GAAA;AAC3B,QAAA,IAAI,CAAC,uBAAuB,GAAG,CAAC,KAAK,KAAI;YACrC,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE;gBAAE,OAAO;aAAE;AAEnD,YAAA,IACI,CAAC,IAAI,CAAC,QAAQ,KAAK,gBAAgB,CAAC,IAAI,IAAI,aAAa,CAAC,KAAK,CAAC;AAChE,iBAAC,IAAI,CAAC,QAAQ,KAAK,gBAAgB,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,EACrE;AACE,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aACvD;AACL,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,MAAK;;YAE/B,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;AAC9E,SAAC,CAAC,CAAC;KACN;IAEO,yBAAyB,GAAA;;QAE7B,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;KAChF;IAEO,SAAS,GAAA;AACb,QAAA,IAAI,CAAC,MAAM,CAAC,gBAAgB,GAAG,CAAG,EAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,IAAI,CAAC;KACnF;iIAxGQ,UAAU,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAAV,UAAU,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,8EAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EA2BL,gBAAgB,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAEhB,gBAAgB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnGlC,yUASA,EAAA,MAAA,EAAA,CAAA,sHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EDyDgB,CAAC,oBAAoB,CAAC,YAAY,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAItC,UAAU,EAAA,UAAA,EAAA,CAAA;kBAlBtB,SAAS;+BACI,aAAa,EAAA,QAAA,EACb,YAAY,EAGhB,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,UAAU,EAAE,CAAA;;;AAGV,SAAA,CAAA;AACF,wBAAA,gBAAgB,EAAE,oBAAoB;AACtC,wBAAA,eAAe,EAAE,mBAAmB;AACvC,qBAAA,EAAA,UAAA,EACW,CAAC,oBAAoB,CAAC,YAAY,CAAC,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,yUAAA,EAAA,MAAA,EAAA,CAAA,sHAAA,CAAA,EAAA,CAAA;oGAI3C,MAAM,EAAA,CAAA;sBADT,KAAK;gBAcG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAUa,YAAY,EAAA,CAAA;sBAA9B,MAAM;gBAE4C,aAAa,EAAA,CAAA;sBAA/D,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,gBAAgB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAA;gBAEE,aAAa,EAAA,CAAA;sBAA/D,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,gBAAgB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAA;;;MEhFxC,gBAAgB,CAAA;iIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,iBAVrB,gBAAgB;YAChB,gBAAgB;YAChB,UAAU,CAAA,EAAA,OAAA,EAAA,CAJJ,YAAY,CAAA,EAAA,OAAA,EAAA,CAOlB,gBAAgB;YAChB,gBAAgB;YAChB,UAAU,CAAA,EAAA,CAAA,CAAA,EAAA;AAGL,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAZf,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAYb,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAb5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,YAAY,EAAE;wBACV,gBAAgB;wBAChB,gBAAgB;wBAChB,UAAU;AACb,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,gBAAgB;wBAChB,gBAAgB;wBAChB,UAAU;AACb,qBAAA;AACJ,iBAAA,CAAA;;;AClBD;;AAEG;;;;"}
+{"version":3,"file":"koobiq-components-sidebar.mjs","sources":["../../../packages/components/sidebar/sidebar-animations.ts","../../../packages/components/sidebar/sidebar.component.ts","../../../packages/components/sidebar/sidebar.component.html","../../../packages/components/sidebar/sidebar.module.ts","../../../packages/components/sidebar/koobiq-components-sidebar.ts"],"sourcesContent":["import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';\n\nexport enum KbqSidebarAnimationState {\n    Opened = 'opened',\n    Closed = 'closed'\n}\n\nexport const kbqSidebarAnimations: { readonly sidebarState: AnimationTriggerMetadata } = {\n    sidebarState: trigger('state', [\n        state(\n            'opened',\n            style({\n                minWidth: '{{ openedStateMinWidth }}',\n                width: '{{ openedStateWidth }}',\n                maxWidth: '{{ openedStateMaxWidth }}'\n            }),\n            { params: { openedStateMinWidth: '', openedStateWidth: '', openedStateMaxWidth: '' } }\n        ),\n        state(\n            'closed',\n            style({\n                minWidth: '{{ closedStateWidth }}',\n                width: '{{ closedStateWidth }}',\n                maxWidth: '{{ closedStateWidth }}'\n            }),\n            { params: { closedStateWidth: '' } }\n        ),\n        transition('opened => closed', [animate('0.1s')]),\n        transition('closed => opened', [animate('0.2s')])\n\n    ])\n};\n","import {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    Input,\n    NgZone,\n    OnDestroy,\n    OnInit,\n    Output,\n    ViewEncapsulation\n} from '@angular/core';\nimport { isControl, isInput, isLeftBracket, isRightBracket } from '@koobiq/cdk/keycodes';\nimport { KbqSidebarAnimationState, kbqSidebarAnimations } from './sidebar-animations';\n\nexport enum SidebarPositions {\n    Left = 'left',\n    Right = 'right'\n}\n\ninterface KbqSidebarParams {\n    openedStateMinWidth: string;\n    openedStateWidth: string;\n    openedStateMaxWidth: string;\n\n    closedStateWidth: string;\n}\n\n@Directive({\n    selector: '[kbq-sidebar-opened]',\n    exportAs: 'kbqSidebarOpened'\n})\nexport class KbqSidebarOpened {\n    @Input() minWidth: string;\n    @Input() width: string;\n    @Input() maxWidth: string;\n}\n\n@Directive({\n    selector: '[kbq-sidebar-closed]',\n    exportAs: 'kbqSidebarClosed'\n})\nexport class KbqSidebarClosed {\n    @Input() width: string;\n}\n\n@Component({\n    selector: 'kbq-sidebar',\n    exportAs: 'kbqSidebar',\n    templateUrl: 'sidebar.component.html',\n    styleUrls: ['./sidebar.scss'],\n    host: {\n        class: 'kbq-sidebar',\n        '[@state]': `{\n            value: animationState,\n            params: params\n        }`,\n        '(@state.start)': 'onAnimationStart()',\n        '(@state.done)': 'onAnimationDone()'\n    },\n    animations: [kbqSidebarAnimations.sidebarState],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class KbqSidebar implements OnDestroy, OnInit, AfterContentInit {\n    @Input()\n    get opened(): boolean {\n        return this._opened;\n    }\n\n    set opened(value: boolean) {\n        if (this._opened) {\n            this.saveWidth();\n        }\n\n        this._opened = value;\n    }\n    private _opened: boolean = true;\n\n    @Input() position: SidebarPositions;\n\n    params: KbqSidebarParams = {\n        openedStateWidth: 'inherit',\n        openedStateMinWidth: 'inherit',\n        openedStateMaxWidth: 'inherit',\n\n        closedStateWidth: '32px'\n    };\n\n    @Output() readonly stateChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    @ContentChild(KbqSidebarOpened, { static: false }) openedContent: KbqSidebarOpened;\n\n    @ContentChild(KbqSidebarClosed, { static: false }) closedContent: KbqSidebarClosed;\n\n    get animationState(): KbqSidebarAnimationState {\n        return this._opened ? KbqSidebarAnimationState.Opened : KbqSidebarAnimationState.Closed;\n    }\n\n    internalState: boolean = true;\n\n    private documentKeydownListener: (event: KeyboardEvent) => void;\n\n    constructor(\n        private ngZone: NgZone,\n        private elementRef: ElementRef\n    ) {}\n\n    ngOnInit(): void {\n        if (this.position === SidebarPositions.Left || this.position === SidebarPositions.Right) {\n            this.registerKeydownListener();\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (this.position === SidebarPositions.Left || this.position === SidebarPositions.Right) {\n            this.unRegisterKeydownListener();\n        }\n    }\n\n    toggle(): void {\n        this.opened = !this.opened;\n    }\n\n    onAnimationStart() {\n        if (this._opened) {\n            this.internalState = this._opened;\n        }\n    }\n\n    onAnimationDone() {\n        this.internalState = this._opened;\n\n        this.stateChanged.emit(this._opened);\n    }\n\n    ngAfterContentInit(): void {\n        this.params = {\n            openedStateWidth: this.openedContent.width || 'inherit',\n            openedStateMinWidth: this.openedContent.minWidth || 'inherit',\n            openedStateMaxWidth: this.openedContent.maxWidth || 'inherit',\n\n            closedStateWidth: this.closedContent.width || '32px'\n        };\n    }\n\n    private registerKeydownListener(): void {\n        this.documentKeydownListener = (event) => {\n            if (isControl(event) || isInput(event)) {\n                return;\n            }\n\n            if (\n                (this.position === SidebarPositions.Left && isLeftBracket(event)) ||\n                (this.position === SidebarPositions.Right && isRightBracket(event))\n            ) {\n                this.ngZone.run(() => (this._opened = !this._opened));\n            }\n        };\n\n        this.ngZone.runOutsideAngular(() => {\n            document.addEventListener('keypress', this.documentKeydownListener, true);\n        });\n    }\n\n    private unRegisterKeydownListener(): void {\n        document.removeEventListener('keypress', this.documentKeydownListener, true);\n    }\n\n    private saveWidth() {\n        this.params.openedStateWidth = `${this.elementRef.nativeElement.offsetWidth}px`;\n    }\n}\n","<ng-container [ngSwitch]=\"internalState\">\n    <ng-container *ngSwitchCase=\"true\">\n        <ng-content select=\"[kbq-sidebar-opened]\" />\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"false\">\n        <ng-content select=\"[kbq-sidebar-closed]\" />\n    </ng-container>\n</ng-container>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { KbqSidebar, KbqSidebarClosed, KbqSidebarOpened } from './sidebar.component';\n\n@NgModule({\n    imports: [CommonModule],\n    declarations: [\n        KbqSidebarClosed,\n        KbqSidebarOpened,\n        KbqSidebar\n    ],\n    exports: [\n        KbqSidebarClosed,\n        KbqSidebarOpened,\n        KbqSidebar\n    ]\n})\nexport class KbqSidebarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-sidepanel.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, ViewChild, TemplateRef, Injector, Injectable, Optional, SkipSelf, Directive, Input, NgModule } from '@angular/core';
-import { ESCAPE } from '@koobiq/cdk/keycodes';
-import { Subject, merge } from 'rxjs';
-import { filter, take } from 'rxjs/operators';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { AnimationCurves, KbqCommonModule } from '@koobiq/components/core';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
 import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { AnimationCurves, KbqCommonModule } from '@koobiq/components/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@angular/cdk/a11y';
 import { A11yModule, FocusTrapFactory, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { ESCAPE } from '@koobiq/cdk/keycodes';
+import { Subject, merge } from 'rxjs';
+import { filter, take } from 'rxjs/operators';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import * as i4$1 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
 import * as i5 from '@koobiq/components/icon';
@@ -59,7 +59,6 @@ var KbqSidepanelAnimationState;
     KbqSidepanelAnimationState["Hidden"] = "hidden";
 })(KbqSidepanelAnimationState || (KbqSidepanelAnimationState = {}));
 // TODO Find a way to use dynamic keys and avoid error "Expression form not supported."
-// tslint:disable-next-line
 const kbqSidepanelTransformAnimation = {
     right: { in: 'translateX(100%)', out: 'translateX(0%)' },
     left: { in: 'translateX(-100%)', out: 'translateX(0%)' },
@@ -68,62 +67,17 @@ const kbqSidepanelTransformAnimation = {
 };
 const kbqSidepanelAnimations = {
     sidepanelState: trigger('state', [
-        state('hidden', style({ transform: '{{transformIn}}' }), { params: { transformIn: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].in } }),
-        state('visible', style({ transform: '{{transformOut}}' }), { params: { transformOut: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].out } }),
+        state('hidden', style({ transform: '{{transformIn}}' }), {
+            params: { transformIn: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].in }
+        }),
+        state('visible', style({ transform: '{{transformOut}}' }), {
+            params: { transformOut: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].out }
+        }),
         transition('visible => void, visible => hidden', animate(`200ms ${AnimationCurves.AccelerationCurve}`)),
         transition('void => visible', animate(`200ms ${AnimationCurves.DecelerationCurve}`))
     ])
 };
 
-// Counter for unique sidepanel ids.
-let uniqueId = 0;
-class KbqSidepanelRef {
-    constructor(containerInstance, overlayRef, config) {
-        this.containerInstance = containerInstance;
-        this.overlayRef = overlayRef;
-        this.config = config;
-        /** Subject for notifying the user that the sidepanel has been closed and dismissed. */
-        this.afterClosed$ = new Subject();
-        /** Subject for notifying the user that the sidepanel has opened and appeared. */
-        this.afterOpened$ = new Subject();
-        this.id = this.config.id || `kbq-sidepanel-${uniqueId++}`;
-        this.containerInstance.id = this.id;
-        // Emit when opening animation completes
-        containerInstance.animationStateChanged.pipe(filter((event) => event.phaseName === 'done' && event.toState === KbqSidepanelAnimationState.Visible), take(1)).subscribe(() => {
-            this.afterOpened$.next();
-            this.afterOpened$.complete();
-        });
-        // Dispose overlay when closing animation is complete
-        containerInstance.animationStateChanged.pipe(filter((event) => event.phaseName === 'done' && event.toState === KbqSidepanelAnimationState.Hidden), take(1)).subscribe(() => {
-            overlayRef.dispose();
-            this.afterClosed$.next(this.result);
-            this.afterClosed$.complete();
-        });
-        if (!containerInstance.sidepanelConfig.disableClose) {
-            merge(overlayRef.backdropClick(), overlayRef.keydownEvents().pipe(
-            // tslint:disable:deprecation
-            // keyCode is deprecated, but IE11 and Edge don't support code property, which we need use instead
-            filter((event) => event.keyCode === ESCAPE))).subscribe(() => this.close());
-        }
-    }
-    close(result) {
-        if (!this.afterClosed$.closed) {
-            // Transition the backdrop in parallel to the sidepanel.
-            this.containerInstance.animationStateChanged.pipe(filter((event) => event.phaseName === 'done'), take(1)).subscribe(() => this.overlayRef.detachBackdrop());
-            this.result = result;
-            this.containerInstance.exit();
-        }
-    }
-    /** Gets an observable that is notified when the sidepanel is finished closing. */
-    afterClosed() {
-        return this.afterClosed$.asObservable();
-    }
-    /** Gets an observable that is notified when the sidepanel has opened and appeared. */
-    afterOpened() {
-        return this.afterOpened$.asObservable();
-    }
-}
-
 const KBQ_SIDEPANEL_WITH_INDENT = new InjectionToken('kbq-sidepanel-with-indent');
 const KBQ_SIDEPANEL_WITH_SHADOW = new InjectionToken('kbq-sidepanel-with-shadow');
 class KbqSidepanelContainerComponent extends BasePortalOutlet {
@@ -196,7 +150,7 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSidepanelContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KbqSidepanelConfig }, { token: KBQ_SIDEPANEL_WITH_INDENT }, { token: KBQ_SIDEPANEL_WITH_SHADOW }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqSidepanelContainerComponent, selector: "kbq-sidepanel-container", host: { listeners: { "@state.start": "onAnimation($event)", "@state.done": "onAnimation($event)" }, properties: { "class": "size", "class.kbq-sidepanel_nested": "withIndent", "class.kbq-sidepanel-container_shadowed": "withShadow", "attr.id": "id", "attr.tabindex": "-1", "@state": "{\n            value: animationState,\n            params: animationTransform\n        }" }, classAttribute: "kbq-sidepanel-container" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-sidepanel-wrapper\">\n\n    <div *ngIf=\"withIndent\" class=\"kbq-sidepanel-indent\" (click)=\"exit()\"></div>\n\n    <div class=\"kbq-sidepanel-content\" cdkTrapFocus cdkTrapFocusAutoCapture>\n        <ng-template cdkPortalOutlet></ng-template>\n    </div>\n</div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-sidepanel-container_top,.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:100%;left:0}.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:16px;width:100%}.kbq-sidepanel-container{outline:none;display:flex;flex:1;position:fixed;min-height:0}.kbq-sidepanel-container .flex{min-height:0}.kbq-sidepanel-container.kbq-sidepanel-container_left,.kbq-sidepanel-container.kbq-sidepanel-container_right{height:100%;top:0}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_small,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_small{width:var(--kbq-sidepanel-size-small-width, 400px);max-width:var(--kbq-sidepanel-size-small-width, 400px)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_medium,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_medium{width:var(--kbq-sidepanel-size-medium-width, 640px);max-width:var(--kbq-sidepanel-size-medium-width, 640px)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_large,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_large{width:var(--kbq-sidepanel-size-large-width, 960px);max-width:var(--kbq-sidepanel-size-large-width, 960px)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:16px;height:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%}.kbq-sidepanel-indent{display:flex;flex:0 0 auto}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%}.kbq-sidepanel-header{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;padding:var(--kbq-sidepanel-size-header-padding-vertical, 16px) var(--kbq-sidepanel-size-header-padding-right, 12px) var(--kbq-sidepanel-size-header-padding-vertical, 16px) var(--kbq-sidepanel-size-header-padding-left, 32px)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left, 8px)}.kbq-sidepanel-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding-right:var(--kbq-sidepanel-size-content-padding-horizontal, 32px);padding-left:var(--kbq-sidepanel-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-sidepanel-size-content-padding-bottom, 24px)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;padding:var(--kbq-sidepanel-size-footer-padding-top, 8px) var(--kbq-sidepanel-size-footer-padding-horizontal, 32px) var(--kbq-sidepanel-size-footer-padding-bottom, 32px)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1;gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal, 16px)}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [kbqSidepanelAnimations.sidepanelState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqSidepanelContainerComponent, selector: "kbq-sidepanel-container", host: { listeners: { "@state.start": "onAnimation($event)", "@state.done": "onAnimation($event)" }, properties: { "class": "size", "class.kbq-sidepanel_nested": "withIndent", "class.kbq-sidepanel-container_shadowed": "withShadow", "attr.id": "id", "attr.tabindex": "-1", "@state": "{\n            value: animationState,\n            params: animationTransform\n        }" }, classAttribute: "kbq-sidepanel-container" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-sidepanel-wrapper\">\n    <div\n        *ngIf=\"withIndent\"\n        class=\"kbq-sidepanel-indent\"\n        (click)=\"exit()\"\n    ></div>\n\n    <div\n        cdkTrapFocus\n        cdkTrapFocusAutoCapture\n        class=\"kbq-sidepanel-content\"\n    >\n        <ng-template cdkPortalOutlet />\n    </div>\n</div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-sidepanel-container_top,.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:100%;left:0}.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:16px;width:100%}.kbq-sidepanel-container{outline:none;display:flex;flex:1;position:fixed;min-height:0}.kbq-sidepanel-container .flex{min-height:0}.kbq-sidepanel-container.kbq-sidepanel-container_left,.kbq-sidepanel-container.kbq-sidepanel-container_right{height:100%;top:0;max-width:100%}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_small,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_small{width:var(--kbq-sidepanel-size-small-width, 400px);max-width:var(--kbq-sidepanel-size-small-width, 400px)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_medium,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_medium{width:var(--kbq-sidepanel-size-medium-width, 640px);max-width:var(--kbq-sidepanel-size-medium-width, 640px)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_large,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_large{width:var(--kbq-sidepanel-size-large-width, 960px)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:16px;height:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%}.kbq-sidepanel-indent{display:flex;flex:0 0 auto}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%}.kbq-sidepanel-header{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;padding:var(--kbq-sidepanel-size-header-padding-vertical, 16px) var(--kbq-sidepanel-size-header-padding-right, 12px) var(--kbq-sidepanel-size-header-padding-vertical, 16px) var(--kbq-sidepanel-size-header-padding-left, 32px)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left, 8px)}.kbq-sidepanel-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding-right:var(--kbq-sidepanel-size-content-padding-horizontal, 32px);padding-left:var(--kbq-sidepanel-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-sidepanel-size-content-padding-bottom, 24px)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;padding:var(--kbq-sidepanel-size-footer-padding-top, 8px) var(--kbq-sidepanel-size-footer-padding-horizontal, 32px) var(--kbq-sidepanel-size-footer-padding-bottom, 32px)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1;gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal, 16px)}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [kbqSidepanelAnimations.sidepanelState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSidepanelContainerComponent, decorators: [{
             type: Component,
@@ -213,7 +167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
         }`,
                         '(@state.start)': 'onAnimation($event)',
                         '(@state.done)': 'onAnimation($event)'
-                    }, template: "<div class=\"kbq-sidepanel-wrapper\">\n\n    <div *ngIf=\"withIndent\" class=\"kbq-sidepanel-indent\" (click)=\"exit()\"></div>\n\n    <div class=\"kbq-sidepanel-content\" cdkTrapFocus cdkTrapFocusAutoCapture>\n        <ng-template cdkPortalOutlet></ng-template>\n    </div>\n</div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-sidepanel-container_top,.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:100%;left:0}.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:16px;width:100%}.kbq-sidepanel-container{outline:none;display:flex;flex:1;position:fixed;min-height:0}.kbq-sidepanel-container .flex{min-height:0}.kbq-sidepanel-container.kbq-sidepanel-container_left,.kbq-sidepanel-container.kbq-sidepanel-container_right{height:100%;top:0}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_small,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_small{width:var(--kbq-sidepanel-size-small-width, 400px);max-width:var(--kbq-sidepanel-size-small-width, 400px)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_medium,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_medium{width:var(--kbq-sidepanel-size-medium-width, 640px);max-width:var(--kbq-sidepanel-size-medium-width, 640px)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_large,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_large{width:var(--kbq-sidepanel-size-large-width, 960px);max-width:var(--kbq-sidepanel-size-large-width, 960px)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:16px;height:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%}.kbq-sidepanel-indent{display:flex;flex:0 0 auto}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%}.kbq-sidepanel-header{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;padding:var(--kbq-sidepanel-size-header-padding-vertical, 16px) var(--kbq-sidepanel-size-header-padding-right, 12px) var(--kbq-sidepanel-size-header-padding-vertical, 16px) var(--kbq-sidepanel-size-header-padding-left, 32px)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left, 8px)}.kbq-sidepanel-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding-right:var(--kbq-sidepanel-size-content-padding-horizontal, 32px);padding-left:var(--kbq-sidepanel-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-sidepanel-size-content-padding-bottom, 24px)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;padding:var(--kbq-sidepanel-size-footer-padding-top, 8px) var(--kbq-sidepanel-size-footer-padding-horizontal, 32px) var(--kbq-sidepanel-size-footer-padding-bottom, 32px)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1;gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal, 16px)}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}\n"] }]
+                    }, template: "<div class=\"kbq-sidepanel-wrapper\">\n    <div\n        *ngIf=\"withIndent\"\n        class=\"kbq-sidepanel-indent\"\n        (click)=\"exit()\"\n    ></div>\n\n    <div\n        cdkTrapFocus\n        cdkTrapFocusAutoCapture\n        class=\"kbq-sidepanel-content\"\n    >\n        <ng-template cdkPortalOutlet />\n    </div>\n</div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-sidepanel-container_top,.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:100%;left:0}.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:16px;width:100%}.kbq-sidepanel-container{outline:none;display:flex;flex:1;position:fixed;min-height:0}.kbq-sidepanel-container .flex{min-height:0}.kbq-sidepanel-container.kbq-sidepanel-container_left,.kbq-sidepanel-container.kbq-sidepanel-container_right{height:100%;top:0;max-width:100%}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_small,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_small{width:var(--kbq-sidepanel-size-small-width, 400px);max-width:var(--kbq-sidepanel-size-small-width, 400px)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_medium,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_medium{width:var(--kbq-sidepanel-size-medium-width, 640px);max-width:var(--kbq-sidepanel-size-medium-width, 640px)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_large,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_large{width:var(--kbq-sidepanel-size-large-width, 960px)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:16px;height:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%}.kbq-sidepanel-indent{display:flex;flex:0 0 auto}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%}.kbq-sidepanel-header{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;padding:var(--kbq-sidepanel-size-header-padding-vertical, 16px) var(--kbq-sidepanel-size-header-padding-right, 12px) var(--kbq-sidepanel-size-header-padding-vertical, 16px) var(--kbq-sidepanel-size-header-padding-left, 32px)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left, 8px)}.kbq-sidepanel-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding-right:var(--kbq-sidepanel-size-content-padding-horizontal, 32px);padding-left:var(--kbq-sidepanel-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-sidepanel-size-content-padding-bottom, 24px)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;padding:var(--kbq-sidepanel-size-footer-padding-top, 8px) var(--kbq-sidepanel-size-footer-padding-horizontal, 32px) var(--kbq-sidepanel-size-footer-padding-bottom, 32px)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1;gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal, 16px)}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KbqSidepanelConfig }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_SIDEPANEL_WITH_INDENT]
@@ -225,14 +179,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 args: [CdkPortalOutlet, { static: true }]
             }] } });
 
+// Counter for unique sidepanel ids.
+let uniqueId = 0;
+class KbqSidepanelRef {
+    constructor(containerInstance, overlayRef, config) {
+        this.containerInstance = containerInstance;
+        this.overlayRef = overlayRef;
+        this.config = config;
+        /** Subject for notifying the user that the sidepanel has been closed and dismissed. */
+        this.afterClosed$ = new Subject();
+        /** Subject for notifying the user that the sidepanel has opened and appeared. */
+        this.afterOpened$ = new Subject();
+        this.id = this.config.id || `kbq-sidepanel-${uniqueId++}`;
+        this.containerInstance.id = this.id;
+        // Emit when opening animation completes
+        containerInstance.animationStateChanged
+            .pipe(filter((event) => event.phaseName === 'done' && event.toState === KbqSidepanelAnimationState.Visible), take(1))
+            .subscribe(() => {
+            this.afterOpened$.next();
+            this.afterOpened$.complete();
+        });
+        // Dispose overlay when closing animation is complete
+        containerInstance.animationStateChanged
+            .pipe(filter((event) => event.phaseName === 'done' && event.toState === KbqSidepanelAnimationState.Hidden), take(1))
+            .subscribe(() => {
+            overlayRef.dispose();
+            this.afterClosed$.next(this.result);
+            this.afterClosed$.complete();
+        });
+        if (!containerInstance.sidepanelConfig.disableClose) {
+            merge(overlayRef.backdropClick(), overlayRef.keydownEvents().pipe(
+            // keyCode is deprecated, but IE11 and Edge don't support code property, which we need use instead
+            filter((event) => event.keyCode === ESCAPE))).subscribe(() => this.close());
+        }
+    }
+    close(result) {
+        if (!this.afterClosed$.closed) {
+            // Transition the backdrop in parallel to the sidepanel.
+            this.containerInstance.animationStateChanged
+                .pipe(filter((event) => event.phaseName === 'done'), take(1))
+                .subscribe(() => this.overlayRef.detachBackdrop());
+            this.result = result;
+            this.containerInstance.exit();
+        }
+    }
+    /** Gets an observable that is notified when the sidepanel is finished closing. */
+    afterClosed() {
+        return this.afterClosed$.asObservable();
+    }
+    /** Gets an observable that is notified when the sidepanel has opened and appeared. */
+    afterOpened() {
+        return this.afterOpened$.asObservable();
+    }
+}
+
 /** Injection token that can be used to specify default sidepanel options. */
 const KBQ_SIDEPANEL_DEFAULT_OPTIONS = new InjectionToken('kbq-sidepanel-default-options');
 class KbqSidepanelService {
     /** Keeps track of the currently-open sidepanels. */
     get openedSidepanels() {
-        return this.parentSidepanelService ?
-            this.parentSidepanelService.openedSidepanels :
-            this.openedSidepanelsAtThisLevel;
+        return this.parentSidepanelService
+            ? this.parentSidepanelService.openedSidepanels
+            : this.openedSidepanelsAtThisLevel;
     }
     constructor(overlay, injector, defaultOptions, parentSidepanelService) {
         this.overlay = overlay;
@@ -270,8 +278,7 @@ class KbqSidepanelService {
             ref.instance = contentRef.instance;
         }
         this.openedSidepanels.push(ref);
-        ref.afterClosed()
-            .subscribe(() => this.removeOpenSidepanel(ref));
+        ref.afterClosed().subscribe(() => this.removeOpenSidepanel(ref));
         container.enter();
         return ref;
     }
@@ -298,7 +305,6 @@ class KbqSidepanelService {
             providers: [
                 { provide: KbqSidepanelConfig, useValue: config },
                 { provide: KBQ_SIDEPANEL_WITH_INDENT, useValue: openedSidepanelsWithSamePosition.length >= 1 },
-                // tslint:disable-next-line:no-magic-numbers
                 { provide: KBQ_SIDEPANEL_WITH_SHADOW, useValue: openedSidepanelsWithSamePosition.length < 2 }
             ]
         });
@@ -345,18 +351,16 @@ class KbqSidepanelService {
     }
     closeSidepanels(sidepanels) {
         const reversedOpenedSidepanels = [...sidepanels.reverse()];
-        reversedOpenedSidepanels
-            .forEach((sidepanelRef) => sidepanelRef.close());
+        reversedOpenedSidepanels.forEach((sidepanelRef) => sidepanelRef.close());
     }
     getBackdropClass(config) {
         if (config.hasBackdrop && config.backdropClass) {
             return config.backdropClass;
         }
-        const hasOpenedSidepanelWithBackdrop = this.openedSidepanels
-            .some((sidepanelRef) => sidepanelRef.config.hasBackdrop);
-        return config.requiredBackdrop || !hasOpenedSidepanelWithBackdrop ?
-            'cdk-overlay-dark-backdrop' :
-            'cdk-overlay-transparent-backdrop';
+        const hasOpenedSidepanelWithBackdrop = this.openedSidepanels.some((sidepanelRef) => sidepanelRef.config.hasBackdrop);
+        return config.requiredBackdrop || !hasOpenedSidepanelWithBackdrop
+            ? 'cdk-overlay-dark-backdrop'
+            : 'cdk-overlay-transparent-backdrop';
     }
     getOpenedSidepanelsWithSamePosition(config) {
         return this.openedSidepanels.filter((sidepanelRef) => sidepanelRef.config.position === config.position);
@@ -433,8 +437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 type: Input,
                 args: ['kbq-sidepanel-close']
             }], kbqSidepanelClose: [{
-                type: Input,
-                args: ['kbqSidepanelClose']
+                type: Input
             }] } });
 /**
  * Header of a sidepanel.
@@ -442,16 +445,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
 class KbqSidepanelHeader {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSidepanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqSidepanelHeader, selector: "kbq-sidepanel-header", inputs: { closeable: "closeable" }, host: { classAttribute: "kbq-sidepanel-header" }, ngImport: i0, template: `
-        <div class="kbq-sidepanel-title" kbq-title>
-            <ng-content></ng-content>
+        <div
+            class="kbq-sidepanel-title"
+            kbq-title
+        >
+            <ng-content />
         </div>
 
-        <button *ngIf="closeable"
-                kbq-button
-                kbq-sidepanel-close
+        <button
+            *ngIf="closeable"
+            [color]="'contrast'"
+            [kbqStyle]="'transparent'"
+            kbq-button
+            kbq-sidepanel-close
+        >
+            <i
                 [color]="'contrast'"
-                [kbqStyle]="'transparent'">
-            <i kbq-icon="mc-close-L_16" [color]="'contrast'"></i>
+                kbq-icon="mc-close-L_16"
+            ></i>
         </button>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i4$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i5.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "directive", type: i6.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqSidepanelClose, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: ["kbq-sidepanel-close", "kbqSidepanelClose"] }] }); }
 }
@@ -460,16 +471,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
             args: [{
                     selector: 'kbq-sidepanel-header',
                     template: `
-        <div class="kbq-sidepanel-title" kbq-title>
-            <ng-content></ng-content>
+        <div
+            class="kbq-sidepanel-title"
+            kbq-title
+        >
+            <ng-content />
         </div>
 
-        <button *ngIf="closeable"
-                kbq-button
-                kbq-sidepanel-close
+        <button
+            *ngIf="closeable"
+            [color]="'contrast'"
+            [kbqStyle]="'transparent'"
+            kbq-button
+            kbq-sidepanel-close
+        >
+            <i
                 [color]="'contrast'"
-                [kbqStyle]="'transparent'">
-            <i kbq-icon="mc-close-L_16" [color]="'contrast'"></i>
+                kbq-icon="mc-close-L_16"
+            ></i>
         </button>
     `,
                     host: {
@@ -537,9 +556,7 @@ function getClosestSidepanel(element, openSidepanels) {
     while (parent && !parent.classList.contains('kbq-sidepanel-container')) {
         parent = parent.parentElement;
     }
-    return parent ?
-        openSidepanels.find((sidepanel) => sidepanel.id === parent.id) :
-        null;
+    return parent ? openSidepanels.find((sidepanel) => sidepanel.id === parent.id) : null;
 }
 
 class KbqSidepanelModule {