@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-content-panel.mjs

@@ -1,51 +1,37 @@
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, inject, viewChild, contentChild, computed, input, booleanAttribute, output, numberAttribute, signal, NgModule } from '@angular/core';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from '@koobiq/components/button';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, inject, viewChild, contentChild, computed, input, booleanAttribute, output, numberAttribute, linkedSignal, signal, ElementRef, Injector, effect, untracked, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@koobiq/components/button';
 import { KbqButtonStyles, KbqButtonModule } from '@koobiq/components/button';
-import { KbqAnimationDurations, KbqAnimationCurves, KbqComponentColors, KbqOverflowShadowContainer } from '@koobiq/components/core';
-import * as i2 from '@koobiq/components/icon';
+import * as i1 from '@koobiq/components/core';
+import { KbqComponentColors, KbqLocaleOverridesDirective, KBQ_A11Y_LOCALE_CONFIGURATION, KbqOverflowShadowContainer, KbqStateSaving, kbqAnimationsDisabled, kbqAfterAnimations } from '@koobiq/components/core';
+import * as i3 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqResizable, KbqResizer } from '@koobiq/components/resizer';
-import * as i3 from '@koobiq/components/scrollbar';
-import { KbqScrollbar, KbqScrollbarModule } from '@koobiq/components/scrollbar';
+import { KbqScrollbar } from '@koobiq/components/scrollbar';
 import { SizeL } from '@koobiq/design-tokens';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 
-const KBQ_CONTENT_PANEL_CONTAINER_CONTENT_ANIMATION = trigger('contentAnimation', [
-    state('false', style({ 'margin-right': 0 })),
-    state('true', style({ 'margin-right': '{{ marginRight }}px' }), { params: { marginRight: 0 } }),
-    transition('true => false', [animate(`${KbqAnimationDurations.Entering} ${KbqAnimationCurves.AccelerationCurve}`)]),
-    transition('false => true', [animate(`${KbqAnimationDurations.Exiting} ${KbqAnimationCurves.DecelerationCurve}`)])
-]);
-const KBQ_CONTENT_PANEL_CONTAINER_PANEL_ANIMATION = trigger('panelAnimation', [
-    transition(':enter', [
-        style({ transform: 'translateX(100%)' }),
-        animate(`${KbqAnimationDurations.Entering} ${KbqAnimationCurves.DecelerationCurve}`, style({ transform: 'translateX(0%)' }))
-    ]),
-    transition(':leave', [
-        animate(`${KbqAnimationDurations.Exiting} ${KbqAnimationCurves.AccelerationCurve}`, style({ transform: 'translateX(100%)' }))
-    ])
-]);
 class KbqContentPanelAside {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelAside, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqContentPanelAside, isStandalone: true, selector: "kbq-content-panel-aside", host: { classAttribute: "kbq-content-panel-aside" }, exportAs: ["kbqContentPanelAside"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelAside, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqContentPanelAside, isStandalone: true, selector: "kbq-content-panel-aside", host: { classAttribute: "kbq-content-panel-aside" }, exportAs: ["kbqContentPanelAside"], ngImport: i0, template: `
         <ng-content />
-    `, isInline: true, styles: [".kbq-content-panel-aside{display:flex;flex-direction:column;gap:var(--kbq-size-s);padding:var(--kbq-size-l) var(--kbq-size-m);border-top-left-radius:inherit;border-bottom-left-radius:inherit;border-right:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-content-panel-aside{display:flex;flex-direction:column;gap:var(--kbq-size-s);padding:var(--kbq-size-l) var(--kbq-size-m);border-top-left-radius:inherit;border-bottom-left-radius:inherit;corner-shape:inherit;border-right:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelAside, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelAside, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-content-panel-aside', template: `
         <ng-content />
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-content-panel-aside'
-                    }, exportAs: 'kbqContentPanelAside', styles: [".kbq-content-panel-aside{display:flex;flex-direction:column;gap:var(--kbq-size-s);padding:var(--kbq-size-l) var(--kbq-size-m);border-top-left-radius:inherit;border-bottom-left-radius:inherit;border-right:inherit}\n"] }]
+                    }, exportAs: 'kbqContentPanelAside', styles: [".kbq-content-panel-aside{display:flex;flex-direction:column;gap:var(--kbq-size-s);padding:var(--kbq-size-l) var(--kbq-size-m);border-top-left-radius:inherit;border-bottom-left-radius:inherit;corner-shape:inherit;border-right:inherit}\n"] }]
         }] });
 class KbqContentPanelHeaderTitle {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelHeaderTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqContentPanelHeaderTitle, isStandalone: true, selector: "[kbqContentPanelHeaderTitle]", host: { classAttribute: "kbq-content-panel-header-title" }, exportAs: ["kbqContentPanelHeaderTitle"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelHeaderTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqContentPanelHeaderTitle, isStandalone: true, selector: "[kbqContentPanelHeaderTitle]", host: { classAttribute: "kbq-content-panel-header-title" }, exportAs: ["kbqContentPanelHeaderTitle"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelHeaderTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelHeaderTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqContentPanelHeaderTitle]',
@@ -56,10 +42,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 }]
         }] });
 class KbqContentPanelHeaderActions {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelHeaderActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqContentPanelHeaderActions, isStandalone: true, selector: "[kbqContentPanelHeaderActions]", host: { classAttribute: "kbq-content-panel-header-actions" }, exportAs: ["kbqContentPanelHeaderActions"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelHeaderActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqContentPanelHeaderActions, isStandalone: true, selector: "[kbqContentPanelHeaderActions]", host: { classAttribute: "kbq-content-panel-header-actions" }, exportAs: ["kbqContentPanelHeaderActions"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelHeaderActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelHeaderActions, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqContentPanelHeaderActions]',
@@ -85,9 +71,11 @@ class KbqContentPanelHeader {
          * @docs-private
          */
         this.componentColors = KbqComponentColors;
+        /** Accessible name for the icon-only close button. */
+        this.a11yLocaleConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqContentPanelHeader, isStandalone: true, selector: "kbq-content-panel-header", host: { properties: { "style.box-shadow": "contentPanel.bodyOverflow().top ? \"var(--kbq-content-panel-header-overflow-box-shadow)\" : null" }, classAttribute: "kbq-content-panel-header" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqContentPanelHeader, isStandalone: true, selector: "kbq-content-panel-header", host: { properties: { "style.box-shadow": "contentPanel.bodyOverflow().top ? \"var(--kbq-content-panel-header-overflow-box-shadow)\" : null" }, classAttribute: "kbq-content-panel-header" }, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: `
         <div class="kbq-content-panel-header__wrapper">
             <ng-content select="[kbqContentPanelHeaderTitle]" />
             <div class="kbq-content-panel-header__actions">
@@ -97,6 +85,7 @@ class KbqContentPanelHeader {
                         class="kbq-content-panel-header__close-button"
                         kbq-button
                         type="button"
+                        [attr.aria-label]="a11yLocaleConfiguration().close"
                         [color]="componentColors.Contrast"
                         [kbqStyle]="buttonStyles.Transparent"
                         (click)="contentPanelContainer.close()"
@@ -107,9 +96,9 @@ class KbqContentPanelHeader {
             </div>
         </div>
         <ng-content />
-    `, isInline: true, styles: [".kbq-content-panel-header{display:flex;flex-direction:column;padding:var(--kbq-size-l) var(--kbq-content-panel-vertical-padding)}.kbq-content-panel-header .kbq-content-panel-header__wrapper{display:flex;justify-content:space-between}.kbq-content-panel-header .kbq-content-panel-header__actions{display:flex;justify-content:flex-end}.kbq-content-panel-header .kbq-content-panel-header__close-button{margin-left:var(--kbq-size-m)}.kbq-content-panel-header .kbq-content-panel-header-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-content-panel-header .kbq-content-panel-header-actions{display:flex;gap:var(--kbq-size-s)}\n"], 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: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-content-panel-header{display:flex;flex-direction:column;padding:var(--kbq-size-l) var(--kbq-content-panel-vertical-padding)}.kbq-content-panel-header .kbq-content-panel-header__wrapper{display:flex;justify-content:space-between}.kbq-content-panel-header .kbq-content-panel-header__actions{display:flex;justify-content:flex-end}.kbq-content-panel-header .kbq-content-panel-header__close-button{margin-left:var(--kbq-size-m)}.kbq-content-panel-header .kbq-content-panel-header-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-content-panel-header .kbq-content-panel-header-actions{display:flex;gap:var(--kbq-size-s)}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelHeader, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-content-panel-header', imports: [KbqButtonModule, KbqIconModule], template: `
         <div class="kbq-content-panel-header__wrapper">
@@ -121,6 +110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         class="kbq-content-panel-header__close-button"
                         kbq-button
                         type="button"
+                        [attr.aria-label]="a11yLocaleConfiguration().close"
                         [color]="componentColors.Contrast"
                         [kbqStyle]="buttonStyles.Transparent"
                         (click)="contentPanelContainer.close()"
@@ -134,7 +124,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-content-panel-header',
                         '[style.box-shadow]': 'contentPanel.bodyOverflow().top ? "var(--kbq-content-panel-header-overflow-box-shadow)" : null'
-                    }, styles: [".kbq-content-panel-header{display:flex;flex-direction:column;padding:var(--kbq-size-l) var(--kbq-content-panel-vertical-padding)}.kbq-content-panel-header .kbq-content-panel-header__wrapper{display:flex;justify-content:space-between}.kbq-content-panel-header .kbq-content-panel-header__actions{display:flex;justify-content:flex-end}.kbq-content-panel-header .kbq-content-panel-header__close-button{margin-left:var(--kbq-size-m)}.kbq-content-panel-header .kbq-content-panel-header-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-content-panel-header .kbq-content-panel-header-actions{display:flex;gap:var(--kbq-size-s)}\n"] }]
+                    }, hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], styles: [".kbq-content-panel-header{display:flex;flex-direction:column;padding:var(--kbq-size-l) var(--kbq-content-panel-vertical-padding)}.kbq-content-panel-header .kbq-content-panel-header__wrapper{display:flex;justify-content:space-between}.kbq-content-panel-header .kbq-content-panel-header__actions{display:flex;justify-content:flex-end}.kbq-content-panel-header .kbq-content-panel-header__close-button{margin-left:var(--kbq-size-m)}.kbq-content-panel-header .kbq-content-panel-header-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-content-panel-header .kbq-content-panel-header-actions{display:flex;gap:var(--kbq-size-s)}\n"] }]
         }] });
 class KbqContentPanelBody {
     constructor() {
@@ -143,26 +135,22 @@ class KbqContentPanelBody {
         /** @docs-private */
         this.overflowContainer = viewChild.required(KbqOverflowShadowContainer);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqContentPanelBody, isStandalone: true, selector: "kbq-content-panel-body", host: { classAttribute: "kbq-content-panel-body" }, viewQueries: [{ propertyName: "scrollbar", first: true, predicate: KbqScrollbar, descendants: true, isSignal: true }, { propertyName: "overflowContainer", first: true, predicate: KbqOverflowShadowContainer, descendants: true, isSignal: true }], exportAs: ["kbqContentPanelBody"], ngImport: i0, template: `
-        <kbq-scrollbar
-            #overflowContainer="kbqOverflowShadowContainer"
-            kbqOverflowShadowContainer
-            class="kbq-content-panel-body__content"
-        >
-            <ng-content />
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqContentPanelBody, isStandalone: true, selector: "kbq-content-panel-body", host: { classAttribute: "kbq-content-panel-body" }, viewQueries: [{ propertyName: "scrollbar", first: true, predicate: KbqScrollbar, descendants: true, isSignal: true }, { propertyName: "overflowContainer", first: true, predicate: KbqOverflowShadowContainer, descendants: true, isSignal: true }], exportAs: ["kbqContentPanelBody"], ngImport: i0, template: `
+        <kbq-scrollbar #overflowContainer="kbqOverflowShadowContainer" kbqOverflowShadowContainer>
+            <div class="kbq-content-panel-body__content">
+                <ng-content />
+            </div>
         </kbq-scrollbar>
-    `, isInline: true, styles: [".kbq-content-panel-body{overflow:hidden;flex-grow:1}.kbq-content-panel-body .kbq-content-panel-body__content{padding:0 var(--kbq-content-panel-vertical-padding);height:100%}\n"], dependencies: [{ kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i3.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-content-panel-body{overflow:hidden;flex-grow:1}.kbq-content-panel-body .kbq-content-panel-body__content{padding:0 var(--kbq-content-panel-vertical-padding);height:100%}\n"], dependencies: [{ kind: "component", type: KbqScrollbar, selector: "kbq-scrollbar", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"], exportAs: ["kbqScrollbar"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelBody, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-content-panel-body', imports: [KbqScrollbarModule, KbqOverflowShadowContainer], template: `
-        <kbq-scrollbar
-            #overflowContainer="kbqOverflowShadowContainer"
-            kbqOverflowShadowContainer
-            class="kbq-content-panel-body__content"
-        >
-            <ng-content />
+            args: [{ selector: 'kbq-content-panel-body', imports: [KbqScrollbar, KbqOverflowShadowContainer], template: `
+        <kbq-scrollbar #overflowContainer="kbqOverflowShadowContainer" kbqOverflowShadowContainer>
+            <div class="kbq-content-panel-body__content">
+                <ng-content />
+            </div>
         </kbq-scrollbar>
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-content-panel-body'
@@ -173,12 +161,12 @@ class KbqContentPanelFooter {
         /** @docs-private */
         this.contentPanel = inject(KbqContentPanel);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqContentPanelFooter, isStandalone: true, selector: "kbq-content-panel-footer", host: { properties: { "style.box-shadow": "contentPanel.bodyOverflow().bottom ? \"var(--kbq-content-panel-footer-overflow-box-shadow)\" : null" }, classAttribute: "kbq-content-panel-footer" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqContentPanelFooter, isStandalone: true, selector: "kbq-content-panel-footer", host: { properties: { "style.box-shadow": "contentPanel.bodyOverflow().bottom ? \"var(--kbq-content-panel-footer-overflow-box-shadow)\" : null" }, classAttribute: "kbq-content-panel-footer" }, ngImport: i0, template: `
         <ng-content />
     `, isInline: true, styles: [".kbq-content-panel-footer{display:flex;gap:var(--kbq-size-l);padding:var(--kbq-size-l) var(--kbq-content-panel-vertical-padding)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelFooter, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-content-panel-footer', template: `
         <ng-content />
@@ -189,21 +177,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }] });
 class KbqContentPanel {
     constructor() {
-        this.contentPanelBody = contentChild(KbqContentPanelBody, ...(ngDevMode ? [{ debugName: "contentPanelBody" }] : []));
-        /** Current body overflow state. Read by the header and footer to render their `box-shadow`. */
-        this.bodyOverflow = computed(() => this.contentPanelBody()?.overflowContainer().overflow() ?? { top: false, bottom: false }, ...(ngDevMode ? [{ debugName: "bodyOverflow" }] : []));
+        this.contentPanelBody = contentChild(KbqContentPanelBody, ...(ngDevMode ? [{ debugName: "contentPanelBody" }] : /* istanbul ignore next */ []));
+        /**
+         * Current body overflow state. Read by the header and footer to render their `box-shadow`.
+         *
+         * @docs-private
+         */
+        this.bodyOverflow = computed(() => this.contentPanelBody()?.overflowContainer().overflow() ?? { top: false, bottom: false }, ...(ngDevMode ? [{ debugName: "bodyOverflow" }] : /* istanbul ignore next */ []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqContentPanel, isStandalone: true, selector: "kbq-content-panel", host: { classAttribute: "kbq-content-panel" }, queries: [{ propertyName: "contentPanelBody", first: true, predicate: KbqContentPanelBody, descendants: true, isSignal: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqContentPanel, isStandalone: true, selector: "kbq-content-panel", host: { classAttribute: "kbq-content-panel" }, queries: [{ propertyName: "contentPanelBody", first: true, predicate: KbqContentPanelBody, descendants: true, isSignal: true }], ngImport: i0, template: `
         <ng-content select="kbq-content-panel-aside" />
         <div class="kbq-content-panel__content">
             <ng-content select="kbq-content-panel-header" />
             <ng-content select="kbq-content-panel-body" />
             <ng-content select="kbq-content-panel-footer" />
         </div>
-    `, isInline: true, styles: [".kbq-content-panel-container{--kbq-content-panel-resizer-width: var(--kbq-size-l);--kbq-content-panel-border-radius: var(--kbq-size-l);--kbq-content-panel-background-color: var(--kbq-background-card);--kbq-content-panel-border: var(--kbq-size-border-width) solid var(--kbq-line-contrast-less);--kbq-content-panel-header-overflow-box-shadow: var(--kbq-shadow-overflow-normal-bottom);--kbq-content-panel-footer-overflow-box-shadow: var(--kbq-shadow-overflow-normal-top);--kbq-content-panel-vertical-padding: var(--kbq-size-xxl)}\n", ".kbq-content-panel{display:flex;border-radius:var(--kbq-content-panel-border-radius);background-color:var(--kbq-content-panel-background-color);border:var(--kbq-content-panel-border);height:100%;box-sizing:border-box;position:relative}.kbq-content-panel .kbq-content-panel__content{display:flex;flex:1;flex-direction:column;border-top-right-radius:inherit;border-bottom-right-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-content-panel-container{--kbq-content-panel-resizer-width: var(--kbq-size-l);--kbq-content-panel-border-radius: var(--kbq-size-l);--kbq-content-panel-background-color: var(--kbq-background-card);--kbq-content-panel-border: var(--kbq-size-border-width) solid var(--kbq-line-contrast-less);--kbq-content-panel-header-overflow-box-shadow: var(--kbq-shadow-overflow-normal-bottom);--kbq-content-panel-footer-overflow-box-shadow: var(--kbq-shadow-overflow-normal-top);--kbq-content-panel-vertical-padding: var(--kbq-size-xxl)}\n", ".kbq-content-panel{display:flex;border-radius:var(--kbq-content-panel-border-radius)}@supports (corner-shape: squircle){.kbq-content-panel{corner-shape:squircle;border-radius:clamp(var(--kbq-content-panel-border-radius) * 1.85,var(--kbq-content-panel-border-radius) * 2.3 - 3.6px,var(--kbq-content-panel-border-radius) * 2)}}.kbq-content-panel{background-color:var(--kbq-content-panel-background-color);border:var(--kbq-content-panel-border);height:100%;box-sizing:border-box;position:relative}.kbq-content-panel .kbq-content-panel__content{display:flex;flex:1;flex-direction:column;border-top-right-radius:inherit;border-bottom-right-radius:inherit;corner-shape:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanel, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-content-panel', template: `
         <ng-content select="kbq-content-panel-aside" />
@@ -214,110 +206,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </div>
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-content-panel'
-                    }, styles: [".kbq-content-panel-container{--kbq-content-panel-resizer-width: var(--kbq-size-l);--kbq-content-panel-border-radius: var(--kbq-size-l);--kbq-content-panel-background-color: var(--kbq-background-card);--kbq-content-panel-border: var(--kbq-size-border-width) solid var(--kbq-line-contrast-less);--kbq-content-panel-header-overflow-box-shadow: var(--kbq-shadow-overflow-normal-bottom);--kbq-content-panel-footer-overflow-box-shadow: var(--kbq-shadow-overflow-normal-top);--kbq-content-panel-vertical-padding: var(--kbq-size-xxl)}\n", ".kbq-content-panel{display:flex;border-radius:var(--kbq-content-panel-border-radius);background-color:var(--kbq-content-panel-background-color);border:var(--kbq-content-panel-border);height:100%;box-sizing:border-box;position:relative}.kbq-content-panel .kbq-content-panel__content{display:flex;flex:1;flex-direction:column;border-top-right-radius:inherit;border-bottom-right-radius:inherit}\n"] }]
+                    }, styles: [".kbq-content-panel-container{--kbq-content-panel-resizer-width: var(--kbq-size-l);--kbq-content-panel-border-radius: var(--kbq-size-l);--kbq-content-panel-background-color: var(--kbq-background-card);--kbq-content-panel-border: var(--kbq-size-border-width) solid var(--kbq-line-contrast-less);--kbq-content-panel-header-overflow-box-shadow: var(--kbq-shadow-overflow-normal-bottom);--kbq-content-panel-footer-overflow-box-shadow: var(--kbq-shadow-overflow-normal-top);--kbq-content-panel-vertical-padding: var(--kbq-size-xxl)}\n", ".kbq-content-panel{display:flex;border-radius:var(--kbq-content-panel-border-radius)}@supports (corner-shape: squircle){.kbq-content-panel{corner-shape:squircle;border-radius:clamp(var(--kbq-content-panel-border-radius) * 1.85,var(--kbq-content-panel-border-radius) * 2.3 - 3.6px,var(--kbq-content-panel-border-radius) * 2)}}.kbq-content-panel{background-color:var(--kbq-content-panel-background-color);border:var(--kbq-content-panel-border);height:100%;box-sizing:border-box;position:relative}.kbq-content-panel .kbq-content-panel__content{display:flex;flex:1;flex-direction:column;border-top-right-radius:inherit;border-bottom-right-radius:inherit;corner-shape:inherit}\n"] }]
         }], propDecorators: { contentPanelBody: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqContentPanelBody), { isSignal: true }] }] } });
+/** How long a resize has to settle before the width is written. */
+const resizeWriteDebounce = 300;
+/**
+ * Coerces a raw persisted payload into a `KbqContentPanelState`, returning `null` for anything
+ * unrecognizable.
+ *
+ * Web storage is origin-wide and user-writable, so a payload is never trusted — without this, an entry
+ * such as `{"width": "wide"}` would reach the inline `width` style and collapse the panel.
+ */
+const normalizeContentPanelState = (parsed) => {
+    if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed))
+        return null;
+    const { opened, width } = parsed;
+    if (typeof opened !== 'boolean' || typeof width !== 'number' || !Number.isFinite(width))
+        return null;
+    return { opened, width };
+};
 class KbqContentPanelContainer {
     constructor() {
         /**
-         * Whether the content panel is opened.
+         * Persistence of the opened state and width, applied as a host directive. `useStateSaving` and
+         * `stateSavingKey` are its inputs, surfaced on the container.
+         */
+        this.stateSaving = inject(KbqStateSaving);
+        /**
+         * Whether the content panel is opened. Defaults to `undefined`.
          *
-         * @default false
+         * Bound through the `opened` attribute. Unset it is `undefined` rather than `false`, which is how the
+         * container tells an application that drives the panel from one that leaves it to remember its own
+         * state. Read {@link isOpened} for the state itself.
          */
-        this.opened = input(false, ...(ngDevMode ? [{ debugName: "opened", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.openedInput = input(undefined, { ...(ngDevMode ? { debugName: "openedInput" } : /* istanbul ignore next */ {}), alias: 'opened',
+            transform: (value) => (value == null ? undefined : booleanAttribute(value)) });
         /**
          * Emits event when the content panel opened state is changed.
          */
         this.openedChange = output();
         /**
          * Whether the content panel can not be closed by clicking on the close button or pressing the ESCAPE key.
-         *
-         * @default false
+         * Defaults to `false`.
          */
-        this.disableClose = input(false, ...(ngDevMode ? [{ debugName: "disableClose", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disableClose = input(false, { ...(ngDevMode ? { debugName: "disableClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether the content panel can not be closed by pressing the ESCAPE key.
          */
-        this.disableCloseByEscape = input(this.disableClose(), ...(ngDevMode ? [{ debugName: "disableCloseByEscape", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disableCloseByEscape = input(this.disableClose(), { ...(ngDevMode ? { debugName: "disableCloseByEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether the content panel resizer is disabled.
          */
-        this.disableResizer = input(false, ...(ngDevMode ? [{ debugName: "disableResizer", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disableResizer = input(false, { ...(ngDevMode ? { debugName: "disableResizer" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Minimum width of the `KbqContentPanel`.
-         *
-         * @default 480
+         * Minimum width of the `KbqContentPanel`. Defaults to `480`.
          */
-        this.minWidth = input(480, ...(ngDevMode ? [{ debugName: "minWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.minWidth = input(480, { ...(ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * Width of the `KbqContentPanel`.
-         *
-         * @default 640
+         * Width of the `KbqContentPanel`. Defaults to `640`.
          */
-        this.width = input(640, ...(ngDevMode ? [{ debugName: "width", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.width = input(640, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * Max width of the `KbqContentPanel`.
-         *
-         * @default 800
+         * Max width of the `KbqContentPanel`. Defaults to `800`.
          */
-        this.maxWidth = input(800, ...(ngDevMode ? [{ debugName: "maxWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.maxWidth = input(800, { ...(ngDevMode ? { debugName: "maxWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
+         * A linked signal rather than a plain one: it follows the input whenever the input changes, and keeps
+         * a local write until then — which is what lets a restored state survive the input's initial value.
+         *
          * @docs-private
          */
-        this.openedState = signal(this.opened(), ...(ngDevMode ? [{ debugName: "openedState" }] : []));
+        this.openedState = linkedSignal(() => this.openedInput() ?? false, ...(ngDevMode ? [{ debugName: "openedState" }] : /* istanbul ignore next */ []));
         /**
          * @docs-private
          */
-        this.widthState = signal(this.width(), ...(ngDevMode ? [{ debugName: "widthState" }] : []));
+        this.widthState = linkedSignal(() => this.width(), ...(ngDevMode ? [{ debugName: "widthState" }] : /* istanbul ignore next */ []));
         /**
          * Whether the content panel is opened.
          */
-        this.isOpened = computed(() => this.openedState(), ...(ngDevMode ? [{ debugName: "isOpened" }] : []));
+        this.isOpened = computed(() => this.openedState(), ...(ngDevMode ? [{ debugName: "isOpened" }] : /* istanbul ignore next */ []));
+        /**
+         * The room the content leaves for the opened panel.
+         *
+         * @docs-private
+         */
+        this.contentMargin = computed(() => this.openedState() ? this.widthState() + (parseInt(SizeL) || 16) : 0, ...(ngDevMode ? [{ debugName: "contentMargin" }] : /* istanbul ignore next */ []));
         /**
+         * Whether the margin of the content transitions: only while it makes room for the panel opening or
+         * closing, so that a resize of the panel moves the content at once.
+         *
          * @docs-private
          */
-        this.contentAnimationState = computed(() => {
-            return {
-                value: this.openedState(),
-                params: { marginRight: this.widthState() + (parseInt(SizeL) || 16) }
-            };
-        }, ...(ngDevMode ? [{ debugName: "contentAnimationState" }] : []));
-        // TODO: Should use linked signal
-        toObservable(this.opened)
-            .pipe(takeUntilDestroyed())
-            .subscribe((opened) => {
-            this.openedState.set(opened);
+        this.contentAnimating = signal(false, ...(ngDevMode ? [{ debugName: "contentAnimating" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        this.content = viewChild.required(KbqScrollbar, { read: ElementRef });
+        this.injector = inject(Injector);
+        /**
+         * Resizing reports on every pointer move, so the width is written once the drag settles rather than
+         * on each frame. The store's unchanged-payload skip does not help here — every frame is a new number.
+         */
+        this.resized = new Subject();
+        this.resized.pipe(debounceTime(resizeWriteDebounce), takeUntilDestroyed()).subscribe(() => {
+            this.saveState();
+        });
+        // The state lives under the new key now, so restore from it.
+        this.stateSaving.keyChanges.subscribe(() => this.restoreState());
+        let opened;
+        effect(() => {
+            const previous = opened;
+            opened = this.openedState();
+            if (previous !== undefined && previous !== opened) {
+                this.animateContent();
+            }
         });
-        // TODO: Should use linked signal
-        toObservable(this.width)
-            .pipe(takeUntilDestroyed())
-            .subscribe((width) => {
-            this.widthState.set(width);
+    }
+    ngOnInit() {
+        this.restoreState();
+    }
+    animateContent() {
+        this.contentAnimating.set(true);
+        this.contentAnimation?.destroy();
+        this.contentAnimation = kbqAfterAnimations(() => this.content().nativeElement, () => this.contentAnimating.set(false), this.injector);
+    }
+    /** Reads the persisted state and applies it. Runs while initializing, and again on a key change. */
+    restoreState() {
+        if (!this.persists)
+            return;
+        const savedState = this.stateSaving.read(normalizeContentPanelState);
+        if (!savedState)
+            return;
+        this.stateSaving.applying(() => {
+            // A bound `[opened]` owns the opened state, so only the width is restored there. `[width]` is
+            // not ownership in the same way: there is no `widthChange`, so a drag never reaches the
+            // application and the input is the starting width rather than the current one.
+            if (this.openedInput() === undefined) {
+                this.openedState.set(savedState.opened);
+            }
+            this.widthState.set(this.clampWidth(savedState.width));
         });
     }
+    /**
+     * Persists whether the panel is open and how wide it is.
+     *
+     * Called whenever the panel is opened, closed or resized.
+     */
+    saveState() {
+        untracked(() => {
+            if (!this.persists)
+                return;
+            this.stateSaving.write({ opened: this.openedState(), width: this.widthState() });
+        });
+    }
+    /**
+     * Removes the state persisted for this panel.
+     *
+     * Persistence itself stays on — the next change is written again. Unset `useStateSaving` to stop it.
+     */
+    clearSavedState() {
+        untracked(() => this.stateSaving.clear());
+    }
+    /**
+     * Whether state is currently persisted for this panel — restored on init, or written since.
+     * Always `false` while `useStateSaving` is unset, and `false` again after `clearSavedState()`.
+     */
+    get hasSavedState() {
+        return this.stateSaving.state != null;
+    }
     /**
      * Toggles the content panel opened state.
      */
     toggle() {
-        this.openedState.update((state) => !state);
-        this.openedChange.emit(this.openedState());
+        // Untracked, as `open()`, `close()`, `saveState()` and `clearSavedState()`: called from a consumer's
+        // `effect()`, the state read on the way — `opened`, the width, the state saving inputs — would make the
+        // effect run again on every open and close.
+        untracked(() => this.setOpened(!this.openedState()));
     }
     /**
      * Opens the content panel.
      */
     open() {
-        if (this.openedState())
-            return;
-        this.openedState.set(true);
-        this.openedChange.emit(this.openedState());
+        untracked(() => {
+            if (!this.openedState())
+                this.setOpened(true);
+        });
     }
     /**
      * Closes the content panel.
      */
     close() {
-        if (!this.openedState())
-            return;
-        this.openedState.set(false);
-        this.openedChange.emit(this.openedState());
+        untracked(() => {
+            if (this.openedState())
+                this.setOpened(false);
+        });
+    }
+    setOpened(opened) {
+        this.openedState.set(opened);
+        this.openedChange.emit(opened);
+        this.saveState();
     }
     /**
      * @docs-private
@@ -325,37 +411,63 @@ class KbqContentPanelContainer {
     handleResizerDBLClick(event) {
         event.preventDefault();
         this.widthState.set(this.width());
+        // Persisted straight away rather than through the debounce: a reset is a single deliberate act,
+        // and leaving the dragged width stored would bring it back on the next visit.
+        this.saveState();
     }
     /**
      * @docs-private
      */
     handleResizerSizeChange({ width }) {
+        this.widthState.set(this.clampWidth(width));
+        this.resized.next();
+    }
+    /** Whether this panel reads and writes its state at all. */
+    get persists() {
+        // A panel that is not in the document has no stable key — the default resolver derives one from
+        // the path to `<body>` — which is the ordinary state of one projected into an overlay.
+        return this.stateSaving.useStateSaving() && !!this.stateSaving.host?.isConnected;
+    }
+    /** Holds a width inside the configured bounds, which can differ from the ones a state was saved under. */
+    clampWidth(width) {
         if (width > this.maxWidth())
-            return this.widthState.set(this.maxWidth());
+            return this.maxWidth();
         if (width < this.minWidth())
-            return this.widthState.set(this.minWidth());
-        this.widthState.set(width);
+            return this.minWidth();
+        return width;
     }
     /**
      * @docs-private
      */
     handleEscapeKeydown(event) {
+        // A control inside the container consumed the key to close a popup of its own, such as an autocomplete panel.
+        if (event.defaultPrevented)
+            return;
         if (!this.openedState() || this.disableClose() || this.disableCloseByEscape())
             return;
         event.preventDefault();
         event.stopPropagation();
         this.close();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqContentPanelContainer, isStandalone: true, selector: "kbq-content-panel-container", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: true, isRequired: false, transformFunction: null }, disableCloseByEscape: { classPropertyName: "disableCloseByEscape", publicName: "disableCloseByEscape", isSignal: true, isRequired: false, transformFunction: null }, disableResizer: { classPropertyName: "disableResizer", publicName: "disableResizer", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "keydown.escape": "handleEscapeKeydown($event)" }, properties: { "class.kbq-content-panel-container__opened": "openedState()" }, classAttribute: "kbq-content-panel-container" }, exportAs: ["kbqContentPanelContainer"], ngImport: i0, template: `
-        <kbq-scrollbar class="kbq-content-panel-container__content" [@contentAnimation]="contentAnimationState()">
-            <ng-content />
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqContentPanelContainer, isStandalone: true, selector: "kbq-content-panel-container", inputs: { openedInput: { classPropertyName: "openedInput", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: true, isRequired: false, transformFunction: null }, disableCloseByEscape: { classPropertyName: "disableCloseByEscape", publicName: "disableCloseByEscape", isSignal: true, isRequired: false, transformFunction: null }, disableResizer: { classPropertyName: "disableResizer", publicName: "disableResizer", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "keydown.escape": "handleEscapeKeydown($any($event))" }, properties: { "class.kbq-content-panel-container__opened": "openedState()" }, classAttribute: "kbq-content-panel-container" }, viewQueries: [{ propertyName: "content", first: true, predicate: KbqScrollbar, descendants: true, read: ElementRef, isSignal: true }], exportAs: ["kbqContentPanelContainer"], hostDirectives: [{ directive: i1.KbqStateSaving, inputs: ["useStateSaving", "useStateSaving", "stateSavingKey", "stateSavingKey"] }], ngImport: i0, template: `
+        <kbq-scrollbar
+            class="kbq-content-panel-container__scrollbar"
+            [class.kbq-content-panel-container__scrollbar_animating]="contentAnimating()"
+            [class.kbq-animations-disabled]="animationsDisabled"
+            [style.margin-right.px]="contentMargin()"
+        >
+            <div class="kbq-content-panel-container__content">
+                <ng-content />
+            </div>
         </kbq-scrollbar>
         @if (openedState()) {
             <div
-                @panelAnimation
+                animate.enter="kbq-content-panel-container__panel_enter"
+                animate.leave="kbq-content-panel-container__panel_leave"
                 class="kbq-content-panel-container__panel"
                 kbqResizable
+                [class.kbq-animations-disabled]="animationsDisabled"
                 [style.min-width.px]="minWidth()"
                 [style.width.px]="widthState()"
                 [style.max-width.px]="maxWidth()"
@@ -371,22 +483,28 @@ class KbqContentPanelContainer {
                 <ng-content select="kbq-content-panel" />
             </div>
         }
-    `, isInline: true, styles: [".kbq-content-panel-container{display:flex;gap:var(--kbq-size-l);overflow:hidden;position:relative;box-sizing:border-box;height:100%}.kbq-content-panel-container .kbq-content-panel-container__content{flex-grow:1;height:100%}.kbq-content-panel-container .kbq-content-panel-container__panel{position:absolute;right:0;top:0;padding:0 var(--kbq-size-s) var(--kbq-size-s) 0;display:flex;height:100%;box-sizing:border-box}.kbq-content-panel-container .kbq-content-panel-container__panel-resizer{position:absolute;top:0;left:calc(var(--kbq-content-panel-resizer-width) / -2);width:var(--kbq-content-panel-resizer-width);height:100%;z-index:2}\n"], dependencies: [{ kind: "directive", type: KbqResizable, selector: "[kbqResizable]", exportAs: ["kbqResizable"] }, { kind: "directive", type: KbqResizer, selector: "[kbqResizer]", inputs: ["kbqResizer"], outputs: ["sizeChange"], exportAs: ["kbqResizer"] }, { kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i3.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }], animations: [
-            KBQ_CONTENT_PANEL_CONTAINER_CONTENT_ANIMATION,
-            KBQ_CONTENT_PANEL_CONTAINER_PANEL_ANIMATION
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-content-panel-container{display:flex;gap:var(--kbq-size-l);overflow:hidden;position:relative;box-sizing:border-box;height:100%}.kbq-content-panel-container .kbq-content-panel-container__content{flex-grow:1;height:100%}.kbq-content-panel-container .kbq-content-panel-container__scrollbar_animating{transition:margin-right .15s cubic-bezier(.4,0,1,1)}.kbq-content-panel-container .kbq-content-panel-container__scrollbar_animating.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-content-panel-container .kbq-content-panel-container__scrollbar_animating{animation:none;transition:none}}.kbq-content-panel-container.kbq-content-panel-container__opened .kbq-content-panel-container__scrollbar_animating{transition-duration:125ms;transition-timing-function:cubic-bezier(0,0,.2,1)}.kbq-content-panel-container .kbq-content-panel-container__panel{position:absolute;right:0;top:0;padding:0 var(--kbq-size-s) var(--kbq-size-s) 0;display:flex;height:100%;box-sizing:border-box}.kbq-content-panel-container .kbq-content-panel-container__panel_enter{animation:kbq-content-panel-slide-in .15s cubic-bezier(0,0,.2,1)}.kbq-content-panel-container .kbq-content-panel-container__panel_enter.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-content-panel-container .kbq-content-panel-container__panel_enter{animation:none;transition:none}}.kbq-content-panel-container .kbq-content-panel-container__panel_leave{animation:kbq-content-panel-slide-out 125ms cubic-bezier(.4,0,1,1) forwards}.kbq-content-panel-container .kbq-content-panel-container__panel_leave.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-content-panel-container .kbq-content-panel-container__panel_leave{animation:none;transition:none}}.kbq-content-panel-container .kbq-content-panel-container__panel-resizer{position:absolute;top:0;left:calc(var(--kbq-content-panel-resizer-width) / -2);width:var(--kbq-content-panel-resizer-width);height:100%;z-index:2}@keyframes kbq-content-panel-slide-in{0%{transform:translate(100%)}}@keyframes kbq-content-panel-slide-out{to{transform:translate(100%)}}\n"], dependencies: [{ kind: "directive", type: KbqResizable, selector: "[kbqResizable]", exportAs: ["kbqResizable"] }, { kind: "directive", type: KbqResizer, selector: "[kbqResizer]", inputs: ["kbqResizer", "cursor", "disableSizeUpdate"], outputs: ["resizeStart", "sizeChange"], exportAs: ["kbqResizer"] }, { kind: "component", type: KbqScrollbar, selector: "kbq-scrollbar", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"], exportAs: ["kbqScrollbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-content-panel-container', imports: [KbqResizable, KbqResizer, KbqScrollbarModule], template: `
-        <kbq-scrollbar class="kbq-content-panel-container__content" [@contentAnimation]="contentAnimationState()">
-            <ng-content />
+            args: [{ selector: 'kbq-content-panel-container', imports: [KbqResizable, KbqResizer, KbqScrollbar], template: `
+        <kbq-scrollbar
+            class="kbq-content-panel-container__scrollbar"
+            [class.kbq-content-panel-container__scrollbar_animating]="contentAnimating()"
+            [class.kbq-animations-disabled]="animationsDisabled"
+            [style.margin-right.px]="contentMargin()"
+        >
+            <div class="kbq-content-panel-container__content">
+                <ng-content />
+            </div>
         </kbq-scrollbar>
         @if (openedState()) {
             <div
-                @panelAnimation
+                animate.enter="kbq-content-panel-container__panel_enter"
+                animate.leave="kbq-content-panel-container__panel_leave"
                 class="kbq-content-panel-container__panel"
                 kbqResizable
+                [class.kbq-animations-disabled]="animationsDisabled"
                 [style.min-width.px]="minWidth()"
                 [style.width.px]="widthState()"
                 [style.max-width.px]="maxWidth()"
@@ -405,12 +523,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-content-panel-container',
                         '[class.kbq-content-panel-container__opened]': 'openedState()',
-                        '(keydown.escape)': 'handleEscapeKeydown($event)'
-                    }, animations: [
-                        KBQ_CONTENT_PANEL_CONTAINER_CONTENT_ANIMATION,
-                        KBQ_CONTENT_PANEL_CONTAINER_PANEL_ANIMATION
-                    ], exportAs: 'kbqContentPanelContainer', styles: [".kbq-content-panel-container{display:flex;gap:var(--kbq-size-l);overflow:hidden;position:relative;box-sizing:border-box;height:100%}.kbq-content-panel-container .kbq-content-panel-container__content{flex-grow:1;height:100%}.kbq-content-panel-container .kbq-content-panel-container__panel{position:absolute;right:0;top:0;padding:0 var(--kbq-size-s) var(--kbq-size-s) 0;display:flex;height:100%;box-sizing:border-box}.kbq-content-panel-container .kbq-content-panel-container__panel-resizer{position:absolute;top:0;left:calc(var(--kbq-content-panel-resizer-width) / -2);width:var(--kbq-content-panel-resizer-width);height:100%;z-index:2}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], disableClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClose", required: false }] }], disableCloseByEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableCloseByEscape", required: false }] }], disableResizer: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableResizer", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }] } });
+                        '(keydown.escape)': 'handleEscapeKeydown($any($event))'
+                    }, hostDirectives: [
+                        { directive: KbqStateSaving, inputs: ['useStateSaving', 'stateSavingKey'] }
+                    ], exportAs: 'kbqContentPanelContainer', styles: ["@charset \"UTF-8\";.kbq-content-panel-container{display:flex;gap:var(--kbq-size-l);overflow:hidden;position:relative;box-sizing:border-box;height:100%}.kbq-content-panel-container .kbq-content-panel-container__content{flex-grow:1;height:100%}.kbq-content-panel-container .kbq-content-panel-container__scrollbar_animating{transition:margin-right .15s cubic-bezier(.4,0,1,1)}.kbq-content-panel-container .kbq-content-panel-container__scrollbar_animating.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-content-panel-container .kbq-content-panel-container__scrollbar_animating{animation:none;transition:none}}.kbq-content-panel-container.kbq-content-panel-container__opened .kbq-content-panel-container__scrollbar_animating{transition-duration:125ms;transition-timing-function:cubic-bezier(0,0,.2,1)}.kbq-content-panel-container .kbq-content-panel-container__panel{position:absolute;right:0;top:0;padding:0 var(--kbq-size-s) var(--kbq-size-s) 0;display:flex;height:100%;box-sizing:border-box}.kbq-content-panel-container .kbq-content-panel-container__panel_enter{animation:kbq-content-panel-slide-in .15s cubic-bezier(0,0,.2,1)}.kbq-content-panel-container .kbq-content-panel-container__panel_enter.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-content-panel-container .kbq-content-panel-container__panel_enter{animation:none;transition:none}}.kbq-content-panel-container .kbq-content-panel-container__panel_leave{animation:kbq-content-panel-slide-out 125ms cubic-bezier(.4,0,1,1) forwards}.kbq-content-panel-container .kbq-content-panel-container__panel_leave.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-content-panel-container .kbq-content-panel-container__panel_leave{animation:none;transition:none}}.kbq-content-panel-container .kbq-content-panel-container__panel-resizer{position:absolute;top:0;left:calc(var(--kbq-content-panel-resizer-width) / -2);width:var(--kbq-content-panel-resizer-width);height:100%;z-index:2}@keyframes kbq-content-panel-slide-in{0%{transform:translate(100%)}}@keyframes kbq-content-panel-slide-out{to{transform:translate(100%)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { openedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], disableClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClose", required: false }] }], disableCloseByEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableCloseByEscape", required: false }] }], disableResizer: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableResizer", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], content: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbar), { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 const COMPONENTS = [
     KbqContentPanelContainer,
@@ -423,8 +540,8 @@ const COMPONENTS = [
     KbqContentPanelFooter
 ];
 class KbqContentPanelModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelModule, imports: [KbqContentPanelContainer,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelModule, imports: [KbqContentPanelContainer,
             KbqContentPanel,
             KbqContentPanelAside,
             KbqContentPanelHeader,
@@ -439,11 +556,11 @@ class KbqContentPanelModule {
             KbqContentPanelHeaderActions,
             KbqContentPanelBody,
             KbqContentPanelFooter] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelModule, imports: [KbqContentPanelContainer,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelModule, imports: [KbqContentPanelContainer,
             KbqContentPanelHeader,
             KbqContentPanelBody] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqContentPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqContentPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,