@koobiq/components 19.3.0 → 19.4.0

package/fesm2022/koobiq-components-sidepanel.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, ViewChild, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef, Injector, Optional, SkipSelf, Injectable, Input, Directive, booleanAttribute, NgModule } 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 { 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 { AnimationCurves } from '@koobiq/components/core';
+import { KbqAnimationDurations, KbqAnimationCurves, isHtmlElement } from '@koobiq/components/core';
 import * as i3 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
 import * as i4 from '@koobiq/components/icon';
@@ -52,46 +52,85 @@ var KbqSidepanelAnimationState;
     KbqSidepanelAnimationState["Void"] = "void";
     KbqSidepanelAnimationState["Visible"] = "visible";
     KbqSidepanelAnimationState["Hidden"] = "hidden";
+    KbqSidepanelAnimationState["Lower"] = "lower";
+    KbqSidepanelAnimationState["BottomPanel"] = "bottom-panel";
+    KbqSidepanelAnimationState["BecomingNormal"] = "becoming-normal";
 })(KbqSidepanelAnimationState || (KbqSidepanelAnimationState = {}));
 // TODO Find a way to use dynamic keys and avoid error "Expression form not supported."
 const kbqSidepanelTransformAnimation = {
-    right: { in: 'translateX(100%)', out: 'translateX(0%)' },
-    left: { in: 'translateX(-100%)', out: 'translateX(0%)' },
-    top: { in: 'translateY(-100%)', out: 'translateY(0%)' },
-    bottom: { in: 'translateY(100%)', out: 'translateY(0%)' }
+    right: {
+        in: 'translateX(100%)',
+        out: 'translateX(0)',
+        lower: 'scale(0.95) translateX(calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset)))',
+        bottomPanel: 'scale(0.9) translateX(calc(-2 * var(--kbq-sidepanel-size-panel-lower-offset)))',
+        becomingNormal: 'translateX(0) scale(1)'
+    },
+    left: {
+        in: 'translateX(-100%) scale(1)',
+        out: 'translateX(0%) scale(1)',
+        lower: 'scale(0.95) translateX(var(--kbq-sidepanel-size-panel-lower-offset))',
+        bottomPanel: 'scale(0.9) translateX(calc(2 * var(--kbq-sidepanel-size-panel-lower-offset)))',
+        becomingNormal: 'translateX(0%) scale(1)'
+    },
+    top: {
+        in: 'translateY(-100%)',
+        out: 'translateY(0%)',
+        lower: 'scale(0.95) translateY(var(--kbq-sidepanel-size-panel-lower-offset))',
+        bottomPanel: 'scale(0.9) translateY(calc(2 * var(--kbq-sidepanel-size-panel-lower-offset)))',
+        becomingNormal: 'translateY(0%) scale(1)'
+    },
+    bottom: {
+        in: 'translateY(100%)',
+        out: 'translateY(0%)',
+        lower: 'scale(0.95) translateY(calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset)))',
+        bottomPanel: 'scale(0.9) translateY(calc(-2 * var(--kbq-sidepanel-size-panel-lower-offset)))',
+        becomingNormal: 'translateY(0%) scale(1)'
+    }
 };
 const kbqSidepanelAnimations = {
     sidepanelState: trigger('state', [
-        state('hidden', style({ transform: '{{transformIn}}' }), {
+        state(KbqSidepanelAnimationState.Void, style({ opacity: 0 })),
+        state(KbqSidepanelAnimationState.Hidden, style({ transform: '{{transformIn}}' }), {
             params: { transformIn: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].in }
         }),
-        state('visible', style({ transform: '{{transformOut}}' }), {
+        state(KbqSidepanelAnimationState.Visible, style({ transform: '{{transformOut}}', opacity: 1 }), {
             params: { transformOut: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].out }
         }),
-        transition('visible => void, visible => hidden', animate(`200ms ${AnimationCurves.AccelerationCurve}`)),
-        transition('void => visible', animate(`200ms ${AnimationCurves.DecelerationCurve}`))
+        state(KbqSidepanelAnimationState.Lower, style({ transform: '{{lower}}', opacity: 1 }), {
+            params: { lower: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].lower }
+        }),
+        state(KbqSidepanelAnimationState.BottomPanel, style({ transform: '{{bottomPanel}}', opacity: 0 }), {
+            params: { bottomPanel: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].bottomPanel }
+        }),
+        state(KbqSidepanelAnimationState.BecomingNormal, style({ transform: '{{becomingNormal}}', opacity: 1 }), {
+            params: { becomingNormal: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].becomingNormal }
+        }),
+        transition('* <=> *', animate(`${KbqAnimationDurations.Long} ${KbqAnimationCurves.EaseInOutQuad}`))
     ])
 };
 
 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 {
+    /** @docs-private */
     get size() {
         return `kbq-sidepanel_${this.sidepanelConfig.size}`;
     }
+    /** @docs-private */
     get trapFocusAutoCapture() {
         return this.sidepanelConfig.trapFocusAutoCapture ?? !!this.sidepanelConfig.hasBackdrop;
     }
+    /** @docs-private */
     get trapFocus() {
         return this.sidepanelConfig.trapFocus ?? !!this.sidepanelConfig.hasBackdrop;
     }
-    constructor(elementRef, changeDetectorRef, sidepanelConfig, withIndent, withShadow) {
+    constructor(elementRef, changeDetectorRef, sidepanelConfig, withIndent) {
         super();
         this.elementRef = elementRef;
         this.changeDetectorRef = changeDetectorRef;
         this.sidepanelConfig = sidepanelConfig;
         this.withIndent = withIndent;
-        this.withShadow = withShadow;
         /** The state of the sidepanel animations. */
         this.animationState = KbqSidepanelAnimationState.Void;
         /** Emits whenever the state of the animation changes. */
@@ -126,28 +165,34 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
     }
     /** Begin animation of the sidepanel entrance into view. */
     enter() {
-        if (this.destroyed) {
+        if (this.destroyed)
             return;
-        }
         this.animationState = KbqSidepanelAnimationState.Visible;
         this.changeDetectorRef.detectChanges();
     }
     /** Begin animation of the sidepanel exiting from view. */
     exit() {
-        if (this.destroyed) {
+        if (this.destroyed)
             return;
-        }
-        this.animationState = KbqSidepanelAnimationState.Hidden;
-        this.changeDetectorRef.markForCheck();
+        this.setAnimationState(KbqSidepanelAnimationState.Hidden);
     }
+    /** @docs-private */
     onAnimation(event) {
         this.animationStateChanged.emit(event);
     }
+    /** @docs-private */
+    setAnimationState(state) {
+        this.animationState = state;
+        this.changeDetectorRef.markForCheck();
+    }
     setAnimation() {
         const position = this.sidepanelConfig.position;
         this.animationTransform = {
             transformIn: kbqSidepanelTransformAnimation[position].in,
-            transformOut: kbqSidepanelTransformAnimation[position].out
+            transformOut: kbqSidepanelTransformAnimation[position].out,
+            lower: kbqSidepanelTransformAnimation[position].lower,
+            bottomPanel: kbqSidepanelTransformAnimation[position].bottomPanel,
+            becomingNormal: kbqSidepanelTransformAnimation[position].becomingNormal
         };
     }
     setPanelClass() {
@@ -160,8 +205,8 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
             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.18", 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: "17.0.0", version: "19.2.18", 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", "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    @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.kbq-button,.kbq-progress.kbq-button-icon{position:relative}.kbq-progress.kbq-button:after,.kbq-progress.kbq-button-icon: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-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: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-size-border-radius)}.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-size-border-radius)}.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-size-border-width))}.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_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);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: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:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;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-top:var(--kbq-sidepanel-size-content-padding-top);padding-right:var(--kbq-sidepanel-size-content-padding-horizontal);padding-left:var(--kbq-sidepanel-size-content-padding-horizontal);padding-bottom: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;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-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-content-padding-top: 1px;--kbq-sidepanel-size-footer-padding-top: var(--kbq-size-s);--kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-3xl);--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-overlay);--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: "19.2.18", 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.18", 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.kbq-button,.kbq-progress.kbq-button-icon{position:relative}.kbq-progress.kbq-button:after,.kbq-progress.kbq-button-icon: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-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: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-size-border-radius)}.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-size-border-radius)}.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-size-border-width))}.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:transparent}.kbq-overlay-dark-backdrop:not(:has(~.kbq-overlay-dark-backdrop)){transition:unset;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.18", ngImport: i0, type: KbqSidepanelContainerComponent, decorators: [{
             type: Component,
@@ -169,10 +214,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         CdkPortalOutlet,
                         CdkTrapFocus
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [kbqSidepanelAnimations.sidepanelState], host: {
-                        class: 'kbq-sidepanel-container',
+                        class: 'kbq-sidepanel-container kbq-sidepanel-container_shadowed',
                         '[class]': 'size',
                         '[class.kbq-sidepanel_nested]': 'withIndent',
-                        '[class.kbq-sidepanel-container_shadowed]': 'withShadow',
                         '[attr.id]': 'id',
                         '[attr.tabindex]': '-1',
                         '[@state]': `{
@@ -181,13 +225,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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.kbq-button,.kbq-progress.kbq-button-icon{position:relative}.kbq-progress.kbq-button:after,.kbq-progress.kbq-button-icon: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-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: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-size-border-radius)}.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-size-border-radius)}.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-size-border-width))}.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_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);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: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:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;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-top:var(--kbq-sidepanel-size-content-padding-top);padding-right:var(--kbq-sidepanel-size-content-padding-horizontal);padding-left:var(--kbq-sidepanel-size-content-padding-horizontal);padding-bottom: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;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-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-content-padding-top: 1px;--kbq-sidepanel-size-footer-padding-top: var(--kbq-size-s);--kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-3xl);--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-overlay);--kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);--kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast)}\n"] }]
+                    }, 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.kbq-button,.kbq-progress.kbq-button-icon{position:relative}.kbq-progress.kbq-button:after,.kbq-progress.kbq-button-icon: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-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: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-size-border-radius)}.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-size-border-radius)}.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-size-border-width))}.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:transparent}.kbq-overlay-dark-backdrop:not(:has(~.kbq-overlay-dark-backdrop)){transition:unset;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]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_SIDEPANEL_WITH_SHADOW]
                 }] }], propDecorators: { portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
@@ -200,8 +241,15 @@ class KbqSidepanelRef {
         this.containerInstance = containerInstance;
         this.overlayRef = overlayRef;
         this.config = config;
+        /**
+         * Vertical scroll overflow state of the sidepanel body.
+         * Updated on scroll and used for visual adjustments.
+         */
+        this.bodyOverflow = signal({ top: false, bottom: false });
         /** 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. */
+        this.beforeClosed$ = 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++}`;
@@ -213,6 +261,13 @@ class KbqSidepanelRef {
             this.afterOpened$.next();
             this.afterOpened$.complete();
         });
+        // Act on close
+        containerInstance.animationStateChanged
+            .pipe(filter(({ phaseName, toState }) => phaseName === 'start' && toState === KbqSidepanelAnimationState.Hidden), take(1))
+            .subscribe(() => {
+            this.beforeClosed$.next();
+            this.beforeClosed$.complete();
+        });
         // Dispose overlay when closing animation is complete
         containerInstance.animationStateChanged
             .pipe(filter((event) => event.phaseName === 'done' && event.toState === KbqSidepanelAnimationState.Hidden), take(1))
@@ -223,7 +278,9 @@ class KbqSidepanelRef {
         });
         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)), this.containerInstance.indentClick()).subscribe(() => {
+        filter((event) => event.keyCode === ESCAPE)), this.containerInstance.indentClick(), overlayRef
+            .outsidePointerEvents()
+            .pipe(filter((event) => isHtmlElement(event.target) && !!event.target.closest('.kbq-sidepanel-container')))).subscribe(() => {
             if (this.config.disableClose)
                 return;
             this.close();
@@ -239,6 +296,10 @@ class KbqSidepanelRef {
             this.containerInstance.exit();
         }
     }
+    /** Gets an observable that is notified when the sidepanel is started closing. */
+    beforeClosed() {
+        return this.beforeClosed$.asObservable();
+    }
     /** Gets an observable that is notified when the sidepanel is finished closing. */
     afterClosed() {
         return this.afterClosed$.asObservable();
@@ -286,7 +347,7 @@ class KbqSidepanelService {
             container.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, {
                 $implicit: fullConfig.data,
                 sidepanelRef: ref
-            }));
+            }, this.createInjector(fullConfig, ref, container)));
         }
         else {
             const portal = new ComponentPortal(componentOrTemplateRef, undefined, this.createInjector(fullConfig, ref, container));
@@ -294,6 +355,7 @@ class KbqSidepanelService {
             ref.instance = contentRef.instance;
         }
         this.openedSidepanels.push(ref);
+        ref.beforeClosed().subscribe(() => this.updateAnimationState(ref));
         ref.afterClosed().subscribe(() => this.removeOpenSidepanel(ref));
         container.enter();
         return ref;
@@ -316,12 +378,15 @@ class KbqSidepanelService {
      */
     attachContainer(overlayRef, config) {
         const openedSidepanelsWithSamePosition = this.getOpenedSidepanelsWithSamePosition(config);
+        const lower = openedSidepanelsWithSamePosition[openedSidepanelsWithSamePosition.length - 1];
+        const bottom = openedSidepanelsWithSamePosition[openedSidepanelsWithSamePosition.length - 2];
+        lower?.containerInstance.setAnimationState(KbqSidepanelAnimationState.Lower);
+        bottom?.containerInstance.setAnimationState(KbqSidepanelAnimationState.BottomPanel);
         const injector = Injector.create({
             parent: this.injector,
             providers: [
                 { provide: KbqSidepanelConfig, useValue: config },
-                { provide: KBQ_SIDEPANEL_WITH_INDENT, useValue: openedSidepanelsWithSamePosition.length >= 1 },
-                { provide: KBQ_SIDEPANEL_WITH_SHADOW, useValue: openedSidepanelsWithSamePosition.length < 2 }
+                { provide: KBQ_SIDEPANEL_WITH_INDENT, useValue: openedSidepanelsWithSamePosition.length >= 1 }
             ]
         });
         const containerPortal = new ComponentPortal(KbqSidepanelContainerComponent, undefined, injector);
@@ -373,14 +438,21 @@ class KbqSidepanelService {
         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';
+        return config.requiredBackdrop ? 'cdk-overlay-dark-backdrop' : 'kbq-overlay-dark-backdrop';
     }
     getOpenedSidepanelsWithSamePosition(config) {
         return this.openedSidepanels.filter((sidepanelRef) => sidepanelRef.config.position === config.position);
     }
+    updateAnimationState(sidepanelRef) {
+        const index = this.openedSidepanels.indexOf(sidepanelRef);
+        // only allow animations if ref is last element in sidepanels list
+        if (index === -1 || index !== this.openedSidepanels.length - 1)
+            return;
+        this.openedSidepanels[index].overlayRef.backdropElement?.classList?.remove('kbq-overlay-dark-backdrop');
+        const [lower, bottom] = this.getLowerSidepanelsWithSamePosition(index);
+        lower?.containerInstance.setAnimationState(KbqSidepanelAnimationState.BecomingNormal);
+        bottom?.containerInstance.setAnimationState(KbqSidepanelAnimationState.Lower);
+    }
     /**
      * Removes a sidepanel from the array of open sidepanels.
      * @param sidepanelRef Sidepanel to be removed.
@@ -388,9 +460,18 @@ class KbqSidepanelService {
     removeOpenSidepanel(sidepanelRef) {
         const index = this.openedSidepanels.indexOf(sidepanelRef);
         if (index > -1) {
+            const [lower] = this.getLowerSidepanelsWithSamePosition(index);
+            lower?.containerInstance.setAnimationState(KbqSidepanelAnimationState.Visible);
             this.openedSidepanels.splice(index, 1);
         }
     }
+    getLowerSidepanelsWithSamePosition(index) {
+        const openedSidepanelsWithSamePosition = this.getOpenedSidepanelsWithSamePosition(this.openedSidepanels[index].config);
+        return [
+            openedSidepanelsWithSamePosition[openedSidepanelsWithSamePosition.length - 2],
+            openedSidepanelsWithSamePosition[openedSidepanelsWithSamePosition.length - 3]
+        ];
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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.18", ngImport: i0, type: KbqSidepanelService }); }
 }
@@ -464,9 +545,11 @@ class KbqSidepanelHeader {
         this.closeable = false;
         /** Enables text truncation. Default true */
         this.truncateText = true;
+        /** @docs-private */
+        this.sidepanelRef = inject(KbqSidepanelRef);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqSidepanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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" }, classAttribute: "kbq-sidepanel-header" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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: `
         <div class="kbq-sidepanel-title" kbq-title>
             <ng-content />
         </div>
@@ -501,7 +584,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
     `,
                     host: {
                         class: 'kbq-sidepanel-header',
-                        '[class.kbq-sidepanel-header_truncate-text]': 'truncateText'
+                        '[class.kbq-sidepanel-header_truncate-text]': 'truncateText',
+                        '[class.kbq-sidepanel-header_bottom-overflown]': 'sidepanelRef.bodyOverflow().top'
                     }
                 }]
         }], propDecorators: { closeable: [{
@@ -515,15 +599,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * 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
+        });
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqSidepanelBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqSidepanelBody, isStandalone: true, selector: "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", host: { classAttribute: "kbq-sidepanel-body kbq-scrollbar" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqSidepanelBody, isStandalone: true, selector: "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", host: { listeners: { "scroll": "checkOverflow()" }, classAttribute: "kbq-sidepanel-body kbq-scrollbar" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqSidepanelBody, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody',
                     host: {
-                        class: 'kbq-sidepanel-body kbq-scrollbar'
+                        class: 'kbq-sidepanel-body kbq-scrollbar',
+                        '(scroll)': 'checkOverflow()'
                     }
                 }]
         }] });
@@ -531,15 +631,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Footer of a sidepanel.
  */
 class KbqSidepanelFooter {
+    constructor() {
+        /** @docs-private */
+        this.sidepanelRef = inject(KbqSidepanelRef);
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqSidepanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqSidepanelFooter, isStandalone: true, selector: "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", host: { classAttribute: "kbq-sidepanel-footer" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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',
+                        '[class.kbq-sidepanel-footer_top-overflown]': 'sidepanelRef.bodyOverflow().bottom'
                     }
                 }]
         }] });