@koobiq/components 19.8.0 → 20.0.0

package/fesm2022/koobiq-components-sidepanel.mjs

@@ -1,19 +1,18 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, ViewChild, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, TemplateRef, Injector, Optional, SkipSelf, Injectable, Input, Directive, inject, booleanAttribute, ElementRef, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, ChangeDetectorRef, viewChild, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, Injector, TemplateRef, Injectable, input, Input, Directive, booleanAttribute, effect, NgModule } from '@angular/core';
 import { CdkTrapFocus, A11yModule, ConfigurableFocusTrapFactory, FocusTrapFactory } from '@angular/cdk/a11y';
 import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { Subject, merge } from 'rxjs';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import { KbqAnimationDurations, KbqAnimationCurves, isHtmlElement } from '@koobiq/components/core';
-import * as i3 from '@koobiq/components/button';
+import * as i3 from '@koobiq/components/core';
+import { KbqAnimationDurations, KbqAnimationCurves, ESCAPE, isHtmlElement, KbqOverflowShadowContainer } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
-import * as i4 from '@koobiq/components/icon';
+import * as i2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqTitleDirective, KbqTitleModule } from '@koobiq/components/title';
-import { ESCAPE } from '@koobiq/cdk/keycodes';
 import { filter, take, tap } from 'rxjs/operators';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 
 /** Injection token that can be used to access the data that was passed in to a sidepanel. */
 const KBQ_SIDEPANEL_DATA = new InjectionToken('KbqSidepanelData');
@@ -38,11 +37,6 @@ class KbqSidepanelConfig {
         this.size = KbqSidepanelSize.Medium;
         /** Whether the sidepanel has a backdrop. */
         this.hasBackdrop = true;
-        /**
-         * When we open multiple sidepanels, backdrop appears only once, except cases then this flag is true.
-         * @deprecated used single shared backdrop instead.
-         */
-        this.requiredBackdrop = false;
         /** Whether the user can use escape or clicking outside to close the sidepanel. */
         this.disableClose = false;
         /** Custom class for the overlay pane. */
@@ -113,9 +107,22 @@ const kbqSidepanelAnimations = {
 };
 
 const KBQ_SIDEPANEL_WITH_INDENT = new InjectionToken('kbq-sidepanel-with-indent');
-/** @deprecated */
-const KBQ_SIDEPANEL_WITH_SHADOW = new InjectionToken('kbq-sidepanel-with-shadow');
 class KbqSidepanelContainerComponent extends BasePortalOutlet {
+    constructor() {
+        super(...arguments);
+        this.elementRef = inject(ElementRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.sidepanelConfig = inject(KbqSidepanelConfig);
+        this.withIndent = inject(KBQ_SIDEPANEL_WITH_INDENT);
+        /** The portal outlet inside of this container into which the content will be loaded. */
+        this.portalOutlet = viewChild.required(CdkPortalOutlet);
+        /** The state of the sidepanel animations. */
+        this.animationState = KbqSidepanelAnimationState.Void;
+        /** Emits whenever the state of the animation changes. */
+        this.animationStateChanged = new EventEmitter();
+        /** @docs-private */
+        this.indentClickEmitter = new Subject();
+    }
     /** @docs-private */
     get size() {
         return `kbq-sidepanel_${this.sidepanelConfig.size}`;
@@ -128,19 +135,6 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
     get trapFocus() {
         return this.sidepanelConfig.trapFocus ?? !!this.sidepanelConfig.hasBackdrop;
     }
-    constructor(elementRef, changeDetectorRef, sidepanelConfig, withIndent) {
-        super();
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.sidepanelConfig = sidepanelConfig;
-        this.withIndent = withIndent;
-        /** The state of the sidepanel animations. */
-        this.animationState = KbqSidepanelAnimationState.Void;
-        /** Emits whenever the state of the animation changes. */
-        this.animationStateChanged = new EventEmitter();
-        /** @docs-private */
-        this.indentClickEmitter = new Subject();
-    }
     ngOnDestroy() {
         this.destroyed = true;
     }
@@ -157,14 +151,14 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
         this.validatePortalAttached();
         this.setAnimation();
         this.setPanelClass();
-        return this.portalOutlet.attachComponentPortal(portal);
+        return this.portalOutlet().attachComponentPortal(portal);
     }
     /** Attach a template portal as content to this sidepanel container. */
     attachTemplatePortal(portal) {
         this.validatePortalAttached();
         this.setAnimation();
         this.setPanelClass();
-        return this.portalOutlet.attachTemplatePortal(portal);
+        return this.portalOutlet().attachTemplatePortal(portal);
     }
     /** Begin animation of the sidepanel entrance into view. */
     enter() {
@@ -204,19 +198,19 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
         element.classList.add(`kbq-sidepanel-container_${position}`);
     }
     validatePortalAttached() {
-        if (this.portalOutlet.hasAttached()) {
+        if (this.portalOutlet().hasAttached()) {
             throw Error('Attempting to attach sidepanel content after content is already attached');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KbqSidepanelConfig }, { token: KBQ_SIDEPANEL_WITH_INDENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqSidepanelContainerComponent, isStandalone: true, selector: "kbq-sidepanel-container", host: { listeners: { "@state.start": "onAnimation($event)", "@state.done": "onAnimation($event)" }, properties: { "class": "size", "class.kbq-sidepanel_nested": "withIndent", "attr.id": "id", "attr.tabindex": "-1", "@state": "{\n            value: animationState,\n            params: animationTransform\n        }" }, classAttribute: "kbq-sidepanel-container kbq-sidepanel-container_shadowed" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-sidepanel-wrapper\">\n    @if (withIndent) {\n        <div class=\"kbq-sidepanel-indent\" (click)=\"indentClickEmitter.next($event)\"></div>\n    }\n\n    <div class=\"kbq-sidepanel-content\" [cdkTrapFocus]=\"trapFocus\" [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture\">\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_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.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:last-child:not(:first-child){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: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) .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) .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-size-border-radius)}.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-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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) .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) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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);max-width:var(--kbq-sidepanel-size-small-width)}.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);max-width:var(--kbq-sidepanel-size-medium-width)}.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)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:var(--kbq-sidepanel-size-panel-lower-offset);height:100%}.kbq-sidepanel-container.kbq-sidepanel-container_top,.kbq-sidepanel-container.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));left:0}.kbq-sidepanel-container.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:var(--kbq-sidepanel-size-panel-lower-offset);width:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_right .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_right{transform-origin:center left}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_left .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_left{transform-origin:center right}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_top .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_top{transform-origin:center bottom}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-container_bottom .kbq-sidepanel-content{margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_bottom{transform-origin:center top}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%;position:relative}.kbq-sidepanel-indent{display:flex;flex:0 0 auto;cursor:pointer;position:absolute}.kbq-sidepanel-container_top .kbq-sidepanel-indent{bottom:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_right .kbq-sidepanel-indent{left:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{top:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_left .kbq-sidepanel-indent{right:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;border-radius:var(--kbq-size-border-radius)}.kbq-sidepanel-header{display:flex;align-items:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right) var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left)}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text{align-items:center}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text .kbq-sidepanel-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-header.kbq-sidepanel-header_bottom-overflown{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-sidepanel-title{flex:1}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding:var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal) var(--kbq-sidepanel-size-content-padding-bottom)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal) var(--kbq-sidepanel-size-footer-padding-bottom)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}.kbq-sidepanel-footer .kbq-sidepanel-actions{gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal)}.kbq-sidepanel-footer.kbq-sidepanel-footer_top-overflown{box-shadow:var(--kbq-shadow-overflow-normal-top)}.kbq-sidepanel-title{color:var(--kbq-sidepanel-header-text-color)}.kbq-sidepanel-content{background-color:var(--kbq-sidepanel-container-background);color:var(--kbq-sidepanel-content-text-color)}.kbq-sidepanel-container_shadowed .kbq-sidepanel-content{box-shadow:var(--kbq-sidepanel-container-shadow)}.kbq-overlay-dark-backdrop{background:var(--kbq-background-overlay)!important}.kbq-sidepanel-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-sidepanel-container,.kbq-sidepanel-footer{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-sidepanel-container{--kbq-sidepanel-size-small-width: 400px;--kbq-sidepanel-size-medium-width: 640px;--kbq-sidepanel-size-large-width: 960px;--kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);--kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);--kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);--kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);--kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);--kbq-sidepanel-size-panel-viewport-margin: var(--kbq-size-s);--kbq-sidepanel-size-panel-lower-offset: var(--kbq-size-l);--kbq-sidepanel-size-content-padding-top: 1px;--kbq-sidepanel-size-footer-padding-top: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);--kbq-sidepanel-overlay-background: var(--kbq-background-overlay);--kbq-sidepanel-container-background: var(--kbq-background-card);--kbq-sidepanel-container-shadow: var(--kbq-shadow-popup);--kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);--kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [kbqSidepanelAnimations.sidepanelState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqSidepanelContainerComponent, isStandalone: true, selector: "kbq-sidepanel-container", host: { listeners: { "@state.start": "onAnimation($event)", "@state.done": "onAnimation($event)" }, properties: { "class": "size", "class.kbq-sidepanel_nested": "withIndent", "attr.id": "id", "attr.tabindex": "-1", "@state": "{\n            value: animationState,\n            params: animationTransform\n        }" }, classAttribute: "kbq-sidepanel-container kbq-sidepanel-container_shadowed" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-sidepanel-wrapper\">\n    @if (withIndent) {\n        <div class=\"kbq-sidepanel-indent\" (click)=\"indentClickEmitter.next($event)\"></div>\n    }\n\n    <div class=\"kbq-sidepanel-content\" [cdkTrapFocus]=\"trapFocus\" [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture\">\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_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.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:last-child:not(:first-child){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: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) .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) .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-size-border-radius)}.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-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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) .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) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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);max-width:var(--kbq-sidepanel-size-small-width)}.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);max-width:var(--kbq-sidepanel-size-medium-width)}.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)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:var(--kbq-sidepanel-size-panel-lower-offset);height:100%}.kbq-sidepanel-container.kbq-sidepanel-container_top,.kbq-sidepanel-container.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));left:0}.kbq-sidepanel-container.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:var(--kbq-sidepanel-size-panel-lower-offset);width:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_right .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_right{transform-origin:center left}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_left .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_left{transform-origin:center right}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_top .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_top{transform-origin:center bottom}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-container_bottom .kbq-sidepanel-content{margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_bottom{transform-origin:center top}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%;position:relative}.kbq-sidepanel-indent{display:flex;flex:0 0 auto;cursor:pointer;position:absolute}.kbq-sidepanel-container_top .kbq-sidepanel-indent{bottom:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_right .kbq-sidepanel-indent{left:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{top:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_left .kbq-sidepanel-indent{right:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;border-radius:var(--kbq-size-border-radius)}.kbq-sidepanel-header{display:flex;align-items:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right) var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left)}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text{align-items:center}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text .kbq-sidepanel-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-title{flex:1}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding:var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal) var(--kbq-sidepanel-size-content-padding-bottom)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal) var(--kbq-sidepanel-size-footer-padding-bottom)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}.kbq-sidepanel-footer .kbq-sidepanel-actions{gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal)}.kbq-sidepanel-title{color:var(--kbq-sidepanel-header-text-color)}.kbq-sidepanel-content{background-color:var(--kbq-sidepanel-container-background);color:var(--kbq-sidepanel-content-text-color)}.kbq-sidepanel-container_shadowed .kbq-sidepanel-content{box-shadow:var(--kbq-sidepanel-container-shadow)}.kbq-overlay-dark-backdrop{background:var(--kbq-background-overlay)!important}.kbq-sidepanel-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-sidepanel-container,.kbq-sidepanel-footer{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-sidepanel-container{--kbq-sidepanel-size-small-width: 400px;--kbq-sidepanel-size-medium-width: 640px;--kbq-sidepanel-size-large-width: 960px;--kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);--kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);--kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);--kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);--kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);--kbq-sidepanel-size-panel-viewport-margin: var(--kbq-size-s);--kbq-sidepanel-size-panel-lower-offset: var(--kbq-size-l);--kbq-sidepanel-size-content-padding-top: 1px;--kbq-sidepanel-size-footer-padding-top: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);--kbq-sidepanel-overlay-background: var(--kbq-background-overlay);--kbq-sidepanel-container-background: var(--kbq-background-card);--kbq-sidepanel-container-shadow: var(--kbq-shadow-popup);--kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);--kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: 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: "19.2.21", ngImport: i0, type: KbqSidepanelContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-sidepanel-container', imports: [
                         CdkPortalOutlet,
                         CdkTrapFocus
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [kbqSidepanelAnimations.sidepanelState], host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-sidepanel-container kbq-sidepanel-container_shadowed',
                         '[class]': 'size',
                         '[class.kbq-sidepanel_nested]': 'withIndent',
@@ -228,14 +222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }`,
                         '(@state.start)': 'onAnimation($event)',
                         '(@state.done)': 'onAnimation($event)'
-                    }, template: "<div class=\"kbq-sidepanel-wrapper\">\n    @if (withIndent) {\n        <div class=\"kbq-sidepanel-indent\" (click)=\"indentClickEmitter.next($event)\"></div>\n    }\n\n    <div class=\"kbq-sidepanel-content\" [cdkTrapFocus]=\"trapFocus\" [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture\">\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_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.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:last-child:not(:first-child){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: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) .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) .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-size-border-radius)}.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-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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) .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) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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);max-width:var(--kbq-sidepanel-size-small-width)}.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);max-width:var(--kbq-sidepanel-size-medium-width)}.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)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:var(--kbq-sidepanel-size-panel-lower-offset);height:100%}.kbq-sidepanel-container.kbq-sidepanel-container_top,.kbq-sidepanel-container.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));left:0}.kbq-sidepanel-container.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:var(--kbq-sidepanel-size-panel-lower-offset);width:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_right .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_right{transform-origin:center left}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_left .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_left{transform-origin:center right}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_top .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_top{transform-origin:center bottom}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-container_bottom .kbq-sidepanel-content{margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_bottom{transform-origin:center top}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%;position:relative}.kbq-sidepanel-indent{display:flex;flex:0 0 auto;cursor:pointer;position:absolute}.kbq-sidepanel-container_top .kbq-sidepanel-indent{bottom:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_right .kbq-sidepanel-indent{left:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{top:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_left .kbq-sidepanel-indent{right:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;border-radius:var(--kbq-size-border-radius)}.kbq-sidepanel-header{display:flex;align-items:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right) var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left)}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text{align-items:center}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text .kbq-sidepanel-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-header.kbq-sidepanel-header_bottom-overflown{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-sidepanel-title{flex:1}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding:var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal) var(--kbq-sidepanel-size-content-padding-bottom)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal) var(--kbq-sidepanel-size-footer-padding-bottom)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}.kbq-sidepanel-footer .kbq-sidepanel-actions{gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal)}.kbq-sidepanel-footer.kbq-sidepanel-footer_top-overflown{box-shadow:var(--kbq-shadow-overflow-normal-top)}.kbq-sidepanel-title{color:var(--kbq-sidepanel-header-text-color)}.kbq-sidepanel-content{background-color:var(--kbq-sidepanel-container-background);color:var(--kbq-sidepanel-content-text-color)}.kbq-sidepanel-container_shadowed .kbq-sidepanel-content{box-shadow:var(--kbq-sidepanel-container-shadow)}.kbq-overlay-dark-backdrop{background:var(--kbq-background-overlay)!important}.kbq-sidepanel-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-sidepanel-container,.kbq-sidepanel-footer{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-sidepanel-container{--kbq-sidepanel-size-small-width: 400px;--kbq-sidepanel-size-medium-width: 640px;--kbq-sidepanel-size-large-width: 960px;--kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);--kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);--kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);--kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);--kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);--kbq-sidepanel-size-panel-viewport-margin: var(--kbq-size-s);--kbq-sidepanel-size-panel-lower-offset: var(--kbq-size-l);--kbq-sidepanel-size-content-padding-top: 1px;--kbq-sidepanel-size-footer-padding-top: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);--kbq-sidepanel-overlay-background: var(--kbq-background-overlay);--kbq-sidepanel-container-background: var(--kbq-background-card);--kbq-sidepanel-container-shadow: var(--kbq-shadow-popup);--kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);--kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KbqSidepanelConfig }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_SIDEPANEL_WITH_INDENT]
-                }] }], propDecorators: { portalOutlet: [{
-                type: ViewChild,
-                args: [CdkPortalOutlet, { static: true }]
-            }] } });
+                    }, animations: [kbqSidepanelAnimations.sidepanelState], template: "<div class=\"kbq-sidepanel-wrapper\">\n    @if (withIndent) {\n        <div class=\"kbq-sidepanel-indent\" (click)=\"indentClickEmitter.next($event)\"></div>\n    }\n\n    <div class=\"kbq-sidepanel-content\" [cdkTrapFocus]=\"trapFocus\" [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture\">\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_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.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:last-child:not(:first-child){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: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) .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) .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-size-border-radius)}.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-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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) .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) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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);max-width:var(--kbq-sidepanel-size-small-width)}.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);max-width:var(--kbq-sidepanel-size-medium-width)}.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)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:var(--kbq-sidepanel-size-panel-lower-offset);height:100%}.kbq-sidepanel-container.kbq-sidepanel-container_top,.kbq-sidepanel-container.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));left:0}.kbq-sidepanel-container.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:var(--kbq-sidepanel-size-panel-lower-offset);width:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_right .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_right{transform-origin:center left}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_left .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_left{transform-origin:center right}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_top .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_top{transform-origin:center bottom}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-container_bottom .kbq-sidepanel-content{margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_bottom{transform-origin:center top}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%;position:relative}.kbq-sidepanel-indent{display:flex;flex:0 0 auto;cursor:pointer;position:absolute}.kbq-sidepanel-container_top .kbq-sidepanel-indent{bottom:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_right .kbq-sidepanel-indent{left:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{top:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_left .kbq-sidepanel-indent{right:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;border-radius:var(--kbq-size-border-radius)}.kbq-sidepanel-header{display:flex;align-items:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right) var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left)}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text{align-items:center}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text .kbq-sidepanel-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-title{flex:1}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding:var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal) var(--kbq-sidepanel-size-content-padding-bottom)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal) var(--kbq-sidepanel-size-footer-padding-bottom)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}.kbq-sidepanel-footer .kbq-sidepanel-actions{gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal)}.kbq-sidepanel-title{color:var(--kbq-sidepanel-header-text-color)}.kbq-sidepanel-content{background-color:var(--kbq-sidepanel-container-background);color:var(--kbq-sidepanel-content-text-color)}.kbq-sidepanel-container_shadowed .kbq-sidepanel-content{box-shadow:var(--kbq-sidepanel-container-shadow)}.kbq-overlay-dark-backdrop{background:var(--kbq-background-overlay)!important}.kbq-sidepanel-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-sidepanel-container,.kbq-sidepanel-footer{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-sidepanel-container{--kbq-sidepanel-size-small-width: 400px;--kbq-sidepanel-size-medium-width: 640px;--kbq-sidepanel-size-large-width: 960px;--kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);--kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);--kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);--kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);--kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);--kbq-sidepanel-size-panel-viewport-margin: var(--kbq-size-s);--kbq-sidepanel-size-panel-lower-offset: var(--kbq-size-l);--kbq-sidepanel-size-content-padding-top: 1px;--kbq-sidepanel-size-footer-padding-top: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);--kbq-sidepanel-overlay-background: var(--kbq-background-overlay);--kbq-sidepanel-container-background: var(--kbq-background-card);--kbq-sidepanel-container-shadow: var(--kbq-shadow-popup);--kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);--kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast)}\n"] }]
+        }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }] } });
 
 // Counter for unique sidepanel ids.
 let uniqueId = 0;
@@ -248,7 +236,7 @@ class KbqSidepanelRef {
          * Vertical scroll overflow state of the sidepanel body.
          * Updated on scroll and used for visual adjustments.
          */
-        this.bodyOverflow = signal({ top: false, bottom: false });
+        this.bodyOverflow = signal({ top: false, bottom: false }, ...(ngDevMode ? [{ debugName: "bodyOverflow" }] : []));
         /** 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 starting closing. */
@@ -329,19 +317,19 @@ class KbqSidepanelRef {
 /** Injection token that can be used to specify default sidepanel options. */
 const KBQ_SIDEPANEL_DEFAULT_OPTIONS = new InjectionToken('kbq-sidepanel-default-options');
 class KbqSidepanelService {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.injector = inject(Injector);
+        this.defaultOptions = inject(KBQ_SIDEPANEL_DEFAULT_OPTIONS, { optional: true });
+        this.parentSidepanelService = inject(KbqSidepanelService, { optional: true, skipSelf: true });
+        this.openedSidepanelsAtThisLevel = [];
+    }
     /** Keeps track of the currently-open sidepanels. */
     get openedSidepanels() {
         return this.parentSidepanelService
             ? this.parentSidepanelService.openedSidepanels
             : this.openedSidepanelsAtThisLevel;
     }
-    constructor(overlay, injector, defaultOptions, parentSidepanelService) {
-        this.overlay = overlay;
-        this.injector = injector;
-        this.defaultOptions = defaultOptions;
-        this.parentSidepanelService = parentSidepanelService;
-        this.openedSidepanelsAtThisLevel = [];
-    }
     ngOnDestroy() {
         // Only close the sidepanels at this level on destroy
         // since the parent service may still be active.
@@ -481,30 +469,22 @@ class KbqSidepanelService {
             openedSidepanelsWithSamePosition[openedSidepanelsWithSamePosition.length - 3]
         ];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelService, deps: [{ token: i1.Overlay }, { token: i0.Injector }, { token: KBQ_SIDEPANEL_DEFAULT_OPTIONS, optional: true }, { token: KbqSidepanelService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Injector }, { type: KbqSidepanelConfig, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_SIDEPANEL_DEFAULT_OPTIONS]
-                }] }, { type: KbqSidepanelService, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }] });
+        }] });
 
 /**
  * Button that will close the current sidepanel.
  */
 class KbqSidepanelClose {
-    constructor(sidepanelRef, elementRef, sidepanelService) {
-        this.sidepanelRef = sidepanelRef;
-        this.elementRef = elementRef;
-        this.sidepanelService = sidepanelService;
+    constructor() {
+        this.sidepanelRef = inject(KbqSidepanelRef, { optional: true });
+        this.elementRef = inject(ElementRef);
+        this.sidepanelService = inject(KbqSidepanelService);
+        this.kbqSidepanelClose = input(...(ngDevMode ? [undefined, { debugName: "kbqSidepanelClose" }] : []));
     }
     ngOnInit() {
         if (!this.sidepanelRef) {
@@ -525,10 +505,10 @@ class KbqSidepanelClose {
             this.sidepanelResult = proxiedChange.currentValue;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelClose, deps: [{ token: KbqSidepanelRef, optional: true }, { token: i0.ElementRef }, { token: KbqSidepanelService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSidepanelClose, isStandalone: true, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: { sidepanelResult: ["kbq-sidepanel-close", "sidepanelResult"], kbqSidepanelClose: "kbqSidepanelClose" }, host: { listeners: { "click": "sidepanelRef.close(sidepanelResult)" }, classAttribute: "kbq-sidepanel-close" }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqSidepanelClose, isStandalone: true, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: { sidepanelResult: { classPropertyName: "sidepanelResult", publicName: "kbq-sidepanel-close", isSignal: false, isRequired: false, transformFunction: null }, kbqSidepanelClose: { classPropertyName: "kbqSidepanelClose", publicName: "kbqSidepanelClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "sidepanelRef.close(sidepanelResult)" }, classAttribute: "kbq-sidepanel-close" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelClose, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelClose, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[kbq-sidepanel-close], button[kbqSidepanelClose]',
@@ -537,40 +517,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(click)': 'sidepanelRef.close(sidepanelResult)'
                     }
                 }]
-        }], ctorParameters: () => [{ type: KbqSidepanelRef, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ElementRef }, { type: KbqSidepanelService }], propDecorators: { sidepanelResult: [{
+        }], propDecorators: { sidepanelResult: [{
                 type: Input,
                 args: ['kbq-sidepanel-close']
-            }], kbqSidepanelClose: [{
-                type: Input
-            }] } });
+            }], kbqSidepanelClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqSidepanelClose", required: false }] }] } });
 /**
  * Header of a sidepanel.
  */
 class KbqSidepanelHeader {
     constructor() {
         /** Add button for close sidepanel. Default false */
-        this.closeable = false;
+        this.closeable = input(false, ...(ngDevMode ? [{ debugName: "closeable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** Enables text truncation. Default true */
-        this.truncateText = true;
+        this.truncateText = input(true, ...(ngDevMode ? [{ debugName: "truncateText", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** @docs-private */
         this.sidepanelRef = inject(KbqSidepanelRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqSidepanelHeader, isStandalone: true, selector: "kbq-sidepanel-header", inputs: { closeable: ["closeable", "closeable", booleanAttribute], truncateText: ["truncateText", "truncateText", booleanAttribute] }, host: { properties: { "class.kbq-sidepanel-header_truncate-text": "truncateText", "class.kbq-sidepanel-header_bottom-overflown": "sidepanelRef.bodyOverflow().top" }, classAttribute: "kbq-sidepanel-header" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqSidepanelHeader, isStandalone: true, selector: "kbq-sidepanel-header", inputs: { closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-sidepanel-header_truncate-text": "truncateText()", "style.box-shadow": "sidepanelRef.bodyOverflow().top ? \"var(--kbq-shadow-overflow-normal-bottom)\" : null" }, classAttribute: "kbq-sidepanel-header" }, ngImport: i0, template: `
         <div class="kbq-sidepanel-title" kbq-title>
             <ng-content />
         </div>
 
-        @if (closeable) {
+        @if (closeable()) {
             <button kbq-button kbq-sidepanel-close type="button" [color]="'contrast'" [kbqStyle]="'transparent'">
                 <i kbq-icon="kbq-xmark_16" [color]="'contrast'"></i>
             </button>
         }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqSidepanelClose, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: ["kbq-sidepanel-close", "kbqSidepanelClose"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqSidepanelClose, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: ["kbq-sidepanel-close", "kbqSidepanelClose"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-sidepanel-header',
@@ -585,7 +561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             <ng-content />
         </div>
 
-        @if (closeable) {
+        @if (closeable()) {
             <button kbq-button kbq-sidepanel-close type="button" [color]="'contrast'" [kbqStyle]="'transparent'">
                 <i kbq-icon="kbq-xmark_16" [color]="'contrast'"></i>
             </button>
@@ -593,49 +569,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
     `,
                     host: {
                         class: 'kbq-sidepanel-header',
-                        '[class.kbq-sidepanel-header_truncate-text]': 'truncateText',
-                        '[class.kbq-sidepanel-header_bottom-overflown]': 'sidepanelRef.bodyOverflow().top'
+                        '[class.kbq-sidepanel-header_truncate-text]': 'truncateText()',
+                        '[style.box-shadow]': 'sidepanelRef.bodyOverflow().top ? "var(--kbq-shadow-overflow-normal-bottom)" : null'
                     }
                 }]
-        }], propDecorators: { closeable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], truncateText: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], propDecorators: { closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], truncateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateText", required: false }] }] } });
 /**
  * Scrollable content container of a sidepanel.
  */
 class KbqSidepanelBody {
     constructor() {
         this.sidepanelRef = inject(KbqSidepanelRef);
-        this.elementRef = inject(ElementRef);
-    }
-    /** @docs-private */
-    checkOverflow() {
-        const nativeElement = this.elementRef.nativeElement;
-        if (!isHtmlElement(nativeElement))
-            return;
-        const { scrollTop, offsetHeight, scrollHeight } = nativeElement;
-        this.sidepanelRef.bodyOverflow.set({
-            top: scrollTop > 0,
-            bottom: scrollTop + offsetHeight < scrollHeight
-        });
+        this.overflowContainer = inject(KbqOverflowShadowContainer);
+        effect(() => this.sidepanelRef.bodyOverflow.set(this.overflowContainer.overflow()));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSidepanelBody, isStandalone: true, selector: "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", host: { listeners: { "scroll": "checkOverflow()" }, classAttribute: "kbq-sidepanel-body kbq-scrollbar" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSidepanelBody, isStandalone: true, selector: "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", host: { classAttribute: "kbq-sidepanel-body kbq-scrollbar" }, hostDirectives: [{ directive: i3.KbqOverflowShadowContainer }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelBody, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody',
                     host: {
-                        class: 'kbq-sidepanel-body kbq-scrollbar',
-                        '(scroll)': 'checkOverflow()'
-                    }
+                        class: 'kbq-sidepanel-body kbq-scrollbar'
+                    },
+                    hostDirectives: [KbqOverflowShadowContainer]
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * Footer of a sidepanel.
  */
@@ -644,16 +604,16 @@ class KbqSidepanelFooter {
         /** @docs-private */
         this.sidepanelRef = inject(KbqSidepanelRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSidepanelFooter, isStandalone: true, selector: "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", host: { properties: { "class.kbq-sidepanel-footer_top-overflown": "sidepanelRef.bodyOverflow().bottom" }, classAttribute: "kbq-sidepanel-footer" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSidepanelFooter, isStandalone: true, selector: "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", host: { properties: { "style.box-shadow": "sidepanelRef.bodyOverflow().bottom ? \"var(--kbq-shadow-overflow-normal-top)\" : null" }, classAttribute: "kbq-sidepanel-footer" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter',
                     host: {
                         class: 'kbq-sidepanel-footer',
-                        '[class.kbq-sidepanel-footer_top-overflown]': 'sidepanelRef.bodyOverflow().bottom'
+                        '[style.box-shadow]': 'sidepanelRef.bodyOverflow().bottom ? "var(--kbq-shadow-overflow-normal-top)" : null'
                     }
                 }]
         }] });
@@ -661,10 +621,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Actions block of a sidepanel footer.
  */
 class KbqSidepanelActions {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSidepanelActions, isStandalone: true, selector: "kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions", host: { classAttribute: "kbq-sidepanel-actions" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSidepanelActions, isStandalone: true, selector: "kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions", host: { classAttribute: "kbq-sidepanel-actions" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelActions, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions',
@@ -687,8 +647,8 @@ function getClosestSidepanel(element, openSidepanels) {
 }
 
 class KbqSidepanelModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelModule, imports: [OverlayModule,
             PortalModule,
             KbqButtonModule,
             KbqIconModule,
@@ -705,7 +665,7 @@ class KbqSidepanelModule {
             KbqSidepanelBody,
             KbqSidepanelFooter,
             KbqSidepanelActions] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelModule, providers: [
             KbqSidepanelService,
             { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
         ], imports: [OverlayModule,
@@ -716,7 +676,7 @@ class KbqSidepanelModule {
             A11yModule,
             KbqSidepanelHeader] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSidepanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -733,6 +693,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqSidepanelFooter,
                         KbqSidepanelActions
                     ],
+                    providers: [
+                        KbqSidepanelService,
+                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
+                    ],
                     exports: [
                         KbqSidepanelContainerComponent,
                         KbqSidepanelClose,
@@ -740,10 +704,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqSidepanelBody,
                         KbqSidepanelFooter,
                         KbqSidepanelActions
-                    ],
-                    providers: [
-                        KbqSidepanelService,
-                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
                     ]
                 }]
         }] });
@@ -752,5 +712,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_SIDEPANEL_DATA, KBQ_SIDEPANEL_DEFAULT_OPTIONS, KBQ_SIDEPANEL_WITH_INDENT, KBQ_SIDEPANEL_WITH_SHADOW, KbqSidepanelActions, KbqSidepanelBody, KbqSidepanelClose, KbqSidepanelConfig, KbqSidepanelContainerComponent, KbqSidepanelFooter, KbqSidepanelHeader, KbqSidepanelModule, KbqSidepanelPosition, KbqSidepanelRef, KbqSidepanelService, KbqSidepanelSize };
+export { KBQ_SIDEPANEL_DATA, KBQ_SIDEPANEL_DEFAULT_OPTIONS, KBQ_SIDEPANEL_WITH_INDENT, KbqSidepanelActions, KbqSidepanelBody, KbqSidepanelClose, KbqSidepanelConfig, KbqSidepanelContainerComponent, KbqSidepanelFooter, KbqSidepanelHeader, KbqSidepanelModule, KbqSidepanelPosition, KbqSidepanelRef, KbqSidepanelService, KbqSidepanelSize };
 //# sourceMappingURL=koobiq-components-sidepanel.mjs.map