@koobiq/components 21.0.1 → 21.1.0

package/fesm2022/koobiq-components-sidepanel.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, ChangeDetectorRef, Injector, signal, viewChild, computed, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, untracked, Renderer2, input, Directive, booleanAttribute, effect, isDevMode, TemplateRef, Injectable, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, ChangeDetectorRef, Injector, signal, viewChild, computed, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, untracked, isDevMode, TemplateRef, Injectable, Renderer2, input, Directive, booleanAttribute, effect, NgModule } from '@angular/core';
 import { CdkTrapFocus, ConfigurableFocusTrapFactory, FocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
 import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@koobiq/components/core';
-import { kbqAnimationsDisabled, kbqAfterAnimations, ESCAPE, isHtmlElement, KbqLocaleOverridesDirective, KBQ_A11Y_LOCALE_CONFIGURATION, KbqOverflowShadowContainer, KBQ_STATE_STORE, KbqStateSavingService } from '@koobiq/components/core';
+import { kbqAnimationsDisabled, kbqAfterAnimations, ESCAPE, isHtmlElement, KBQ_STATE_STORE, KbqStateSavingService, KbqLocaleOverridesDirective, KBQ_A11Y_LOCALE_CONFIGURATION, KbqOverflowShadowContainer } from '@koobiq/components/core';
 import { Subject, merge } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@koobiq/components/button';
@@ -46,7 +46,7 @@ class KbqSidepanelConfig {
     }
 }
 
-/** @internal */
+/** @docs-private */
 var KbqSidepanelAnimationState;
 (function (KbqSidepanelAnimationState) {
     KbqSidepanelAnimationState["Void"] = "void";
@@ -106,13 +106,13 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
         /**
          * The state of the sidepanel: on screen, closing, or stacked under another one.
          *
-         * @internal
+         * @docs-private
          */
         this.animationState = signal(KbqSidepanelAnimationState.Void, ...(ngDevMode ? [{ debugName: "animationState" }] : /* istanbul ignore next */ []));
         /**
          * Reports each state transition starting and ending.
          *
-         * @internal
+         * @docs-private
          */
         this.animationStateChanged = new Subject();
         /** Transition events held until the render that applies the state, in the order they happened. */
@@ -122,7 +122,7 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
         /**
          * Transform of the panel in its current state.
          *
-         * @internal
+         * @docs-private
          */
         this.stateTransform = computed(() => {
             const transforms = kbqSidepanelTransformAnimation[this.position];
@@ -144,7 +144,7 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
         /**
          * Opacity of the panel in its current state.
          *
-         * @internal
+         * @docs-private
          */
         this.stateOpacity = computed(() => {
             switch (this.animationState()) {
@@ -236,7 +236,7 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
             return;
         this.setAnimationState(KbqSidepanelAnimationState.Hidden);
     }
-    /** @internal */
+    /** @docs-private */
     setAnimationState(state) {
         if (this.destroyed)
             return;
@@ -447,184 +447,6 @@ class KbqSidepanelRef {
     }
 }
 
-/**
- * Button that will close the current sidepanel.
- */
-class KbqSidepanelClose {
-    constructor() {
-        // `CdkPortalOutlet.attachTemplatePortal()` forwards the portal injector to the embedded view, so the
-        // ref is reachable from a `<ng-template>` sidepanel as well as from a component one.
-        this.sidepanelRef = inject(KbqSidepanelRef);
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        /** Value handed to `KbqSidepanelRef.close()`, under the hyphenated spelling of the selector. */
-        this.sidepanelResult = input(undefined, { ...(ngDevMode ? { debugName: "sidepanelResult" } : /* istanbul ignore next */ {}), alias: 'kbq-sidepanel-close' });
-        /** The same value, under the camel-case spelling. */
-        this.kbqSidepanelClose = input(...(ngDevMode ? [undefined, { debugName: "kbqSidepanelClose" }] : /* istanbul ignore next */ []));
-        afterNextRender(() => {
-            // A button with no type submits the form it sits in, so closing a sidepanel from inside a form would
-            // submit it too. A type the author set is left alone. The element carries its static attributes by
-            // the time a directive is constructed, so this needs no lifecycle hook.
-            if (!this.elementRef.nativeElement.hasAttribute('type')) {
-                this.renderer.setAttribute(this.elementRef.nativeElement, 'type', 'button');
-            }
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqSidepanelClose, isStandalone: true, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: { sidepanelResult: { classPropertyName: "sidepanelResult", publicName: "kbq-sidepanel-close", isSignal: true, isRequired: false, transformFunction: null }, kbqSidepanelClose: { classPropertyName: "kbqSidepanelClose", publicName: "kbqSidepanelClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "sidepanelRef.close(kbqSidepanelClose() ?? sidepanelResult())" }, classAttribute: "kbq-sidepanel-close" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelClose, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[kbq-sidepanel-close], button[kbqSidepanelClose]',
-                    host: {
-                        class: 'kbq-sidepanel-close',
-                        // The camel-case spelling wins when a template binds both, as it did before.
-                        '(click)': 'sidepanelRef.close(kbqSidepanelClose() ?? sidepanelResult())'
-                    }
-                }]
-        }], ctorParameters: () => [], propDecorators: { sidepanelResult: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbq-sidepanel-close", required: false }] }], kbqSidepanelClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqSidepanelClose", required: false }] }] } });
-/**
- * Header of a sidepanel.
- */
-class KbqSidepanelHeader {
-    constructor() {
-        /** Accessible name for the icon-only close button. */
-        this.a11yLocaleConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
-        /** Add button for close sidepanel. Default false */
-        this.closeable = input(false, { ...(ngDevMode ? { debugName: "closeable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Enables text truncation. Default true */
-        this.truncateText = input(true, { ...(ngDevMode ? { debugName: "truncateText" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** @docs-private */
-        this.sidepanelRef = inject(KbqSidepanelRef);
-        /** Id of the title element, which is what names the sidepanel to assistive technology. */
-        this.titleId = `${this.sidepanelRef.id}-title`;
-        this.sidepanelRef.containerInstance.setAriaLabelledBy(this.titleId);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSidepanelHeader, isStandalone: true, selector: "kbq-sidepanel-header", inputs: { closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-sidepanel-header_truncate-text": "truncateText()", "style.box-shadow": "sidepanelRef.bodyOverflow().top ? \"var(--kbq-shadow-overflow-normal-bottom)\" : null" }, classAttribute: "kbq-sidepanel-header" }, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: `
-        <div class="kbq-sidepanel-title" kbq-title [attr.id]="titleId">
-            <ng-content />
-        </div>
-
-        @if (closeable()) {
-            <button
-                kbq-button
-                kbq-sidepanel-close
-                type="button"
-                [attr.aria-label]="a11yLocaleConfiguration().close"
-                [color]="'contrast'"
-                [kbqStyle]="'transparent'"
-            >
-                <i kbq-icon="kbq-xmark_16" [color]="'contrast'"></i>
-            </button>
-        }
-    `, isInline: true, 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: "directive", type: KbqSidepanelClose, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: ["kbq-sidepanel-close", "kbqSidepanelClose"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelHeader, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kbq-sidepanel-header',
-                    imports: [
-                        KbqButtonModule,
-                        KbqSidepanelClose,
-                        KbqIconModule,
-                        KbqTitleDirective
-                    ],
-                    template: `
-        <div class="kbq-sidepanel-title" kbq-title [attr.id]="titleId">
-            <ng-content />
-        </div>
-
-        @if (closeable()) {
-            <button
-                kbq-button
-                kbq-sidepanel-close
-                type="button"
-                [attr.aria-label]="a11yLocaleConfiguration().close"
-                [color]="'contrast'"
-                [kbqStyle]="'transparent'"
-            >
-                <i kbq-icon="kbq-xmark_16" [color]="'contrast'"></i>
-            </button>
-        }
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'kbq-sidepanel-header',
-                        '[class.kbq-sidepanel-header_truncate-text]': 'truncateText()',
-                        '[style.box-shadow]': 'sidepanelRef.bodyOverflow().top ? "var(--kbq-shadow-overflow-normal-bottom)" : null'
-                    },
-                    hostDirectives: [
-                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
-                    ]
-                }]
-        }], ctorParameters: () => [], propDecorators: { closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], truncateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateText", required: false }] }] } });
-/**
- * Scrollable content container of a sidepanel.
- */
-class KbqSidepanelBody {
-    constructor() {
-        this.sidepanelRef = inject(KbqSidepanelRef);
-        this.overflowContainer = inject(KbqOverflowShadowContainer);
-        this.scrollbarViewport = inject(KbqScrollbarViewport);
-        effect(() => this.sidepanelRef.bodyOverflow.set(this.overflowContainer.overflow()));
-        this.sidepanelRef
-            .afterOpened()
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => this.scrollbarViewport.flashScrollIndicators());
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSidepanelBody, isStandalone: true, selector: "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", host: { classAttribute: "kbq-sidepanel-body" }, hostDirectives: [{ directive: i1.KbqOverflowShadowContainer }, { directive: i4.KbqScrollbarViewport }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelBody, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody',
-                    host: {
-                        class: 'kbq-sidepanel-body'
-                    },
-                    hostDirectives: [KbqOverflowShadowContainer, KbqScrollbarViewport]
-                }]
-        }], ctorParameters: () => [] });
-/**
- * Footer of a sidepanel.
- */
-class KbqSidepanelFooter {
-    constructor() {
-        /** @docs-private */
-        this.sidepanelRef = inject(KbqSidepanelRef);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSidepanelFooter, isStandalone: true, selector: "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", host: { properties: { "style.box-shadow": "sidepanelRef.bodyOverflow().bottom ? \"var(--kbq-shadow-overflow-normal-top)\" : null" }, classAttribute: "kbq-sidepanel-footer" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelFooter, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter',
-                    host: {
-                        class: 'kbq-sidepanel-footer',
-                        '[style.box-shadow]': 'sidepanelRef.bodyOverflow().bottom ? "var(--kbq-shadow-overflow-normal-top)" : null'
-                    }
-                }]
-        }] });
-/**
- * Actions block of a sidepanel footer.
- */
-class KbqSidepanelActions {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSidepanelActions, isStandalone: true, selector: "kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions", host: { classAttribute: "kbq-sidepanel-actions" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelActions, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions',
-                    host: {
-                        class: 'kbq-sidepanel-actions'
-                    }
-                }]
-        }] });
-
 /** Injection token that can be used to specify default sidepanel options. */
 const KBQ_SIDEPANEL_DEFAULT_OPTIONS = new InjectionToken('kbq-sidepanel-default-options');
 /**
@@ -1064,6 +886,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Button that will close the current sidepanel.
+ */
+class KbqSidepanelClose {
+    /**
+     * Sidepanel the button closes: the one it is rendered in. A button rendered outside any sidepanel, such as
+     * an item of a dropdown opened from one, closes the sidepanel its template is declared in.
+     */
+    get sidepanelRef() {
+        const container = this.elementRef.nativeElement.closest('.kbq-sidepanel-container');
+        const renderedIn = container && this.sidepanelService.openedSidepanels.find(({ id }) => id === container.id);
+        const sidepanelRef = renderedIn ?? this.declaredSidepanelRef;
+        if (!sidepanelRef) {
+            throw Error('kbqSidepanelClose: the button is neither rendered nor declared inside a sidepanel.');
+        }
+        return sidepanelRef;
+    }
+    constructor() {
+        this.declaredSidepanelRef = inject(KbqSidepanelRef, { optional: true });
+        this.sidepanelService = inject(KbqSidepanelService);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        /** Value handed to `KbqSidepanelRef.close()`, under the hyphenated spelling of the selector. */
+        this.sidepanelResult = input(undefined, { ...(ngDevMode ? { debugName: "sidepanelResult" } : /* istanbul ignore next */ {}), alias: 'kbq-sidepanel-close' });
+        /** The same value, under the camel-case spelling. */
+        this.kbqSidepanelClose = input(...(ngDevMode ? [undefined, { debugName: "kbqSidepanelClose" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            // A button with no type submits the form it sits in, so closing a sidepanel from inside a form would
+            // submit it too. A type the author set is left alone. The element carries its static attributes by
+            // the time a directive is constructed, so this needs no lifecycle hook.
+            if (!this.elementRef.nativeElement.hasAttribute('type')) {
+                this.renderer.setAttribute(this.elementRef.nativeElement, 'type', 'button');
+            }
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqSidepanelClose, isStandalone: true, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: { sidepanelResult: { classPropertyName: "sidepanelResult", publicName: "kbq-sidepanel-close", isSignal: true, isRequired: false, transformFunction: null }, kbqSidepanelClose: { classPropertyName: "kbqSidepanelClose", publicName: "kbqSidepanelClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "sidepanelRef.close(kbqSidepanelClose() ?? sidepanelResult())" }, classAttribute: "kbq-sidepanel-close" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[kbq-sidepanel-close], button[kbqSidepanelClose]',
+                    host: {
+                        class: 'kbq-sidepanel-close',
+                        // The camel-case spelling wins when a template binds both, as it did before.
+                        '(click)': 'sidepanelRef.close(kbqSidepanelClose() ?? sidepanelResult())'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { sidepanelResult: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbq-sidepanel-close", required: false }] }], kbqSidepanelClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqSidepanelClose", required: false }] }] } });
+/**
+ * Header of a sidepanel.
+ */
+class KbqSidepanelHeader {
+    constructor() {
+        /** Accessible name for the icon-only close button. */
+        this.a11yLocaleConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
+        /** Add button for close sidepanel. Default false */
+        this.closeable = input(false, { ...(ngDevMode ? { debugName: "closeable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Enables text truncation. Default true */
+        this.truncateText = input(true, { ...(ngDevMode ? { debugName: "truncateText" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.sidepanelRef = inject(KbqSidepanelRef);
+        /** Id of the title element, which is what names the sidepanel to assistive technology. */
+        this.titleId = `${this.sidepanelRef.id}-title`;
+        this.sidepanelRef.containerInstance.setAriaLabelledBy(this.titleId);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSidepanelHeader, isStandalone: true, selector: "kbq-sidepanel-header", inputs: { closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-sidepanel-header_truncate-text": "truncateText()", "style.box-shadow": "sidepanelRef.bodyOverflow().top ? \"var(--kbq-shadow-overflow-normal-bottom)\" : null" }, classAttribute: "kbq-sidepanel-header" }, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: `
+        <div class="kbq-sidepanel-title" kbq-title [attr.id]="titleId">
+            <ng-content />
+        </div>
+
+        @if (closeable()) {
+            <button
+                kbq-button
+                kbq-sidepanel-close
+                type="button"
+                [attr.aria-label]="a11yLocaleConfiguration().close"
+                [color]="'contrast'"
+                [kbqStyle]="'transparent'"
+            >
+                <i kbq-icon="kbq-xmark_16" [color]="'contrast'"></i>
+            </button>
+        }
+    `, isInline: true, 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: "directive", type: KbqSidepanelClose, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: ["kbq-sidepanel-close", "kbqSidepanelClose"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-sidepanel-header',
+                    imports: [
+                        KbqButtonModule,
+                        KbqSidepanelClose,
+                        KbqIconModule,
+                        KbqTitleDirective
+                    ],
+                    template: `
+        <div class="kbq-sidepanel-title" kbq-title [attr.id]="titleId">
+            <ng-content />
+        </div>
+
+        @if (closeable()) {
+            <button
+                kbq-button
+                kbq-sidepanel-close
+                type="button"
+                [attr.aria-label]="a11yLocaleConfiguration().close"
+                [color]="'contrast'"
+                [kbqStyle]="'transparent'"
+            >
+                <i kbq-icon="kbq-xmark_16" [color]="'contrast'"></i>
+            </button>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'kbq-sidepanel-header',
+                        '[class.kbq-sidepanel-header_truncate-text]': 'truncateText()',
+                        '[style.box-shadow]': 'sidepanelRef.bodyOverflow().top ? "var(--kbq-shadow-overflow-normal-bottom)" : null'
+                    },
+                    hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ]
+                }]
+        }], ctorParameters: () => [], propDecorators: { closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], truncateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateText", required: false }] }] } });
+/**
+ * Scrollable content container of a sidepanel.
+ */
+class KbqSidepanelBody {
+    constructor() {
+        this.sidepanelRef = inject(KbqSidepanelRef);
+        this.overflowContainer = inject(KbqOverflowShadowContainer);
+        this.scrollbarViewport = inject(KbqScrollbarViewport);
+        effect(() => this.sidepanelRef.bodyOverflow.set(this.overflowContainer.overflow()));
+        this.sidepanelRef
+            .afterOpened()
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.scrollbarViewport.flashScrollIndicators());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSidepanelBody, isStandalone: true, selector: "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", host: { classAttribute: "kbq-sidepanel-body" }, hostDirectives: [{ directive: i1.KbqOverflowShadowContainer }, { directive: i4.KbqScrollbarViewport }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody',
+                    host: {
+                        class: 'kbq-sidepanel-body'
+                    },
+                    hostDirectives: [KbqOverflowShadowContainer, KbqScrollbarViewport]
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Footer of a sidepanel.
+ */
+class KbqSidepanelFooter {
+    constructor() {
+        /** @docs-private */
+        this.sidepanelRef = inject(KbqSidepanelRef);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSidepanelFooter, isStandalone: true, selector: "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", host: { properties: { "style.box-shadow": "sidepanelRef.bodyOverflow().bottom ? \"var(--kbq-shadow-overflow-normal-top)\" : null" }, classAttribute: "kbq-sidepanel-footer" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter',
+                    host: {
+                        class: 'kbq-sidepanel-footer',
+                        '[style.box-shadow]': 'sidepanelRef.bodyOverflow().bottom ? "var(--kbq-shadow-overflow-normal-top)" : null'
+                    }
+                }]
+        }] });
+/**
+ * Actions block of a sidepanel footer.
+ */
+class KbqSidepanelActions {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSidepanelActions, isStandalone: true, selector: "kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions", host: { classAttribute: "kbq-sidepanel-actions" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions',
+                    host: {
+                        class: 'kbq-sidepanel-actions'
+                    }
+                }]
+        }] });
+
 class KbqSidepanelModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelModule, imports: [OverlayModule,