@koobiq/components 18.33.0 → 18.35.0

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

@@ -0,0 +1,612 @@
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, NgZone, DestroyRef, input, output, computed, afterNextRender, Component, ChangeDetectionStrategy, ViewEncapsulation, viewChild, Renderer2, contentChild, booleanAttribute, numberAttribute, signal, NgModule } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import * as i1 from '@koobiq/components/button';
+import { KbqButtonStyles, KbqButtonModule } from '@koobiq/components/button';
+import { KbqAnimationDurations, KbqAnimationCurves, KbqComponentColors } from '@koobiq/components/core';
+import * as i2 from '@koobiq/components/icon';
+import { KbqIconModule } from '@koobiq/components/icon';
+import * as i3 from '@koobiq/components/scrollbar';
+import { KbqScrollbar, KbqScrollbarModule } from '@koobiq/components/scrollbar';
+import { SizeL } from '@koobiq/design-tokens';
+import { DOCUMENT } from '@angular/common';
+import { fromEvent } from 'rxjs';
+
+/**
+ * @docs-private
+ *
+ * Directive (container) sets whether the element is resizable.
+ *
+ * @example
+ *
+ * ```html
+ * <div kbqResizable>
+ *     <div [kbqResizer]="[1, 0]"></div>
+ * </div>
+ * ```
+ */
+class KbqResizable {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.elementRef = inject(ElementRef);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqResizable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqResizable, isStandalone: true, selector: "[kbqResizable]", host: { classAttribute: "kbq-resizable" }, exportAs: ["kbqResizable"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqResizable, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbqResizable]',
+                    exportAs: 'kbqResizable',
+                    host: {
+                        class: 'kbq-resizable'
+                    }
+                }]
+        }] });
+/**
+ * @docs-private
+ *
+ * Directive which defines element resizing direction.
+ */
+class KbqResizer {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.resizable = inject(KbqResizable);
+        this.zone = inject(NgZone);
+        this.document = inject(DOCUMENT);
+        this.destroyRef = inject(DestroyRef);
+        this.x = NaN;
+        this.y = NaN;
+        this.width = 0;
+        this.height = 0;
+        /**
+         * Direction of element resizing.
+         */
+        this.direction = input.required({ alias: 'kbqResizer' });
+        /**
+         * Emits the new size of the element after resizing.
+         */
+        this.sizeChange = output();
+        /**
+         * @docs-private
+         */
+        this.cursor = computed(() => {
+            const [x, y] = this.direction();
+            if (!x) {
+                return 'ns-resize';
+            }
+            if (!y) {
+                return 'ew-resize';
+            }
+            if (x * y > 0) {
+                return 'nwse-resize';
+            }
+            return 'nesw-resize';
+        });
+        afterNextRender(() => {
+            this.zone.runOutsideAngular(() => {
+                fromEvent(this.elementRef.nativeElement, 'pointerdown')
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe((event) => this.handleElementPointerDown(event));
+                fromEvent(this.document, 'pointermove')
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe((event) => this.handleDocumentPointerMove(event));
+                fromEvent(this.document, 'pointerup')
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe((event) => this.handleDocumentPointerUp(event));
+            });
+        });
+    }
+    handleElementPointerDown(event) {
+        event.preventDefault();
+        this.x = event.x;
+        this.y = event.y;
+        const element = this.resizable.elementRef.nativeElement;
+        this.width = element.clientWidth;
+        this.height = element.clientHeight;
+    }
+    handleDocumentPointerMove(event) {
+        if (!event.buttons)
+            return this.handleDocumentPointerUp(event);
+        this.updateSize(event);
+    }
+    handleDocumentPointerUp(_event) {
+        this.x = NaN;
+    }
+    updateSize({ x, y }) {
+        if (Number.isNaN(this.x))
+            return;
+        const { style } = this.resizable.elementRef.nativeElement;
+        const [directionX, directionY] = this.direction();
+        const width = this.width + directionX * (x - this.x);
+        const height = this.height + directionY * (y - this.y);
+        if (directionX)
+            style.width = `${width}px`;
+        if (directionY)
+            style.height = `${height}px`;
+        this.sizeChange.emit({ width, height });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqResizer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: KbqResizer, isStandalone: true, selector: "[kbqResizer]", inputs: { direction: { classPropertyName: "direction", publicName: "kbqResizer", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sizeChange: "sizeChange" }, host: { properties: { "style.cursor": "cursor()" }, classAttribute: "kbq-resizer" }, exportAs: ["kbqResizer"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqResizer, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbqResizer]',
+                    exportAs: 'kbqResizer',
+                    host: {
+                        class: 'kbq-resizer',
+                        '[style.cursor]': 'cursor()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+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: "18.2.13", ngImport: i0, type: KbqContentPanelAside, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelAside, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'kbq-content-panel-aside', exportAs: 'kbqContentPanelAside', template: `
+        <ng-content />
+    `, host: {
+                        class: 'kbq-content-panel-aside'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
+        }] });
+class KbqContentPanelHeaderTitle {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelHeaderTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqContentPanelHeaderTitle, isStandalone: true, selector: "[kbqContentPanelHeaderTitle]", host: { classAttribute: "kbq-content-panel-header-title" }, exportAs: ["kbqContentPanelHeaderTitle"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelHeaderTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbqContentPanelHeaderTitle]',
+                    exportAs: 'kbqContentPanelHeaderTitle',
+                    host: {
+                        class: 'kbq-content-panel-header-title'
+                    }
+                }]
+        }] });
+class KbqContentPanelHeaderActions {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelHeaderActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqContentPanelHeaderActions, isStandalone: true, selector: "[kbqContentPanelHeaderActions]", host: { classAttribute: "kbq-content-panel-header-actions" }, exportAs: ["kbqContentPanelHeaderActions"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelHeaderActions, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbqContentPanelHeaderActions]',
+                    exportAs: 'kbqContentPanelHeaderActions',
+                    host: {
+                        class: 'kbq-content-panel-header-actions'
+                    }
+                }]
+        }] });
+class KbqContentPanelHeader {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.contentPanelContainer = inject(KbqContentPanelContainer);
+        /**
+         * @docs-private
+         */
+        this.buttonStyles = KbqButtonStyles;
+        /**
+         * @docs-private
+         */
+        this.componentColors = KbqComponentColors;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqContentPanelHeader, isStandalone: true, selector: "kbq-content-panel-header", host: { classAttribute: "kbq-content-panel-header" }, ngImport: i0, template: `
+        <div class="kbq-content-panel-header__wrapper">
+            <ng-content select="[kbqContentPanelHeaderTitle]" />
+            <div class="kbq-content-panel-header__actions">
+                <ng-content select="[kbqContentPanelHeaderActions]" />
+                @if (!contentPanelContainer.disableClose()) {
+                    <button
+                        class="kbq-content-panel-header__close-button"
+                        kbq-button
+                        type="button"
+                        [color]="componentColors.Contrast"
+                        [kbqStyle]="buttonStyles.Transparent"
+                        (click)="contentPanelContainer.close()"
+                    >
+                        <i kbq-icon="kbq-xmark_16"></i>
+                    </button>
+                }
+            </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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelHeader, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [KbqButtonModule, KbqIconModule], selector: 'kbq-content-panel-header', host: {
+                        class: 'kbq-content-panel-header'
+                    }, template: `
+        <div class="kbq-content-panel-header__wrapper">
+            <ng-content select="[kbqContentPanelHeaderTitle]" />
+            <div class="kbq-content-panel-header__actions">
+                <ng-content select="[kbqContentPanelHeaderActions]" />
+                @if (!contentPanelContainer.disableClose()) {
+                    <button
+                        class="kbq-content-panel-header__close-button"
+                        kbq-button
+                        type="button"
+                        [color]="componentColors.Contrast"
+                        [kbqStyle]="buttonStyles.Transparent"
+                        (click)="contentPanelContainer.close()"
+                    >
+                        <i kbq-icon="kbq-xmark_16"></i>
+                    </button>
+                }
+            </div>
+        </div>
+        <ng-content />
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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() {
+        /**
+         * @docs-private
+         */
+        this.scrollbar = viewChild.required(KbqScrollbar);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", 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 }], exportAs: ["kbqContentPanelBody"], ngImport: i0, template: `
+        <kbq-scrollbar class="kbq-content-panel-body__content">
+            <ng-content />
+        </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelBody, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [KbqScrollbarModule], selector: 'kbq-content-panel-body', exportAs: 'kbqContentPanelBody', host: {
+                        class: 'kbq-content-panel-body'
+                    }, template: `
+        <kbq-scrollbar class="kbq-content-panel-body__content">
+            <ng-content />
+        </kbq-scrollbar>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
+        }] });
+class KbqContentPanelFooter {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqContentPanelFooter, isStandalone: true, selector: "kbq-content-panel-footer", host: { 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: "18.2.13", ngImport: i0, type: KbqContentPanelFooter, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'kbq-content-panel-footer', host: {
+                        class: 'kbq-content-panel-footer'
+                    }, template: `
+        <ng-content />
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-content-panel-footer{display:flex;gap:var(--kbq-size-l);padding:var(--kbq-size-l) var(--kbq-content-panel-vertical-padding)}\n"] }]
+        }] });
+class KbqContentPanel {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.renderer = inject(Renderer2);
+        this.elementRef = inject(ElementRef);
+        this.contentPanelBody = contentChild(KbqContentPanelBody);
+        afterNextRender(() => this.handleContentBodyScroll());
+    }
+    handleContentBodyScroll() {
+        const contentPanelBody = this.contentPanelBody();
+        if (!contentPanelBody)
+            return;
+        contentPanelBody
+            .scrollbar()
+            .onScroll.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(([instance]) => {
+            const { scrollTop, scrollHeight, clientHeight } = instance.elements().scrollOffsetElement;
+            this.setupContentHeaderShadow(scrollTop >= 1);
+            this.setupContentFooterShadow(scrollHeight - (scrollTop + clientHeight) >= 1);
+        });
+    }
+    setupContentHeaderShadow(shouldShowShadow) {
+        const className = 'kbq-content-panel_header-with-shadow';
+        if (shouldShowShadow) {
+            this.renderer.addClass(this.elementRef.nativeElement, className);
+        }
+        else {
+            this.renderer.removeClass(this.elementRef.nativeElement, className);
+        }
+    }
+    setupContentFooterShadow(shouldShowShadow) {
+        const className = 'kbq-content-panel_footer-with-shadow';
+        if (shouldShowShadow) {
+            this.renderer.addClass(this.elementRef.nativeElement, className);
+        }
+        else {
+            this.renderer.removeClass(this.elementRef.nativeElement, className);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", 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_header-with-shadow .kbq-content-panel-header{box-shadow:var(--kbq-content-panel-header-overflow-box-shadow)}.kbq-content-panel.kbq-content-panel_footer-with-shadow .kbq-content-panel-footer{box-shadow:var(--kbq-content-panel-footer-overflow-box-shadow)}.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanel, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'kbq-content-panel', host: {
+                        class: 'kbq-content-panel'
+                    }, 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>
+    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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_header-with-shadow .kbq-content-panel-header{box-shadow:var(--kbq-content-panel-header-overflow-box-shadow)}.kbq-content-panel.kbq-content-panel_footer-with-shadow .kbq-content-panel-footer{box-shadow:var(--kbq-content-panel-footer-overflow-box-shadow)}.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"] }]
+        }], ctorParameters: () => [] });
+class KbqContentPanelContainer {
+    constructor() {
+        /**
+         * Whether the content panel is opened.
+         *
+         * @default false
+         */
+        this.opened = input(false, { transform: booleanAttribute });
+        /**
+         * 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
+         */
+        this.disableClose = input(false, { transform: booleanAttribute });
+        /**
+         * Whether the content panel can not be closed by pressing the ESCAPE key.
+         */
+        this.disableCloseByEscape = input(this.disableClose(), { transform: booleanAttribute });
+        /**
+         * Whether the content panel resizer is disabled.
+         */
+        this.disableResizer = input(false, { transform: booleanAttribute });
+        /**
+         * Minimum width of the `KbqContentPanel`.
+         *
+         * @default 480
+         */
+        this.minWidth = input(480, { transform: numberAttribute });
+        /**
+         * Width of the `KbqContentPanel`.
+         *
+         * @default 640
+         */
+        this.width = input(640, { transform: numberAttribute });
+        /**
+         * Max width of the `KbqContentPanel`.
+         *
+         * @default 800
+         */
+        this.maxWidth = input(800, { transform: numberAttribute });
+        /**
+         * @docs-private
+         */
+        this.openedState = signal(this.opened());
+        /**
+         * @docs-private
+         */
+        this.widthState = signal(this.width());
+        /**
+         * Whether the content panel is opened.
+         */
+        this.isOpened = computed(() => this.openedState());
+        /**
+         * @docs-private
+         */
+        this.contentAnimationState = computed(() => {
+            return {
+                value: this.openedState(),
+                params: { marginRight: this.widthState() + (parseInt(SizeL) || 16) }
+            };
+        });
+        // TODO: Should use linked signal
+        toObservable(this.opened)
+            .pipe(takeUntilDestroyed())
+            .subscribe((opened) => {
+            this.openedState.set(opened);
+        });
+        // TODO: Should use linked signal
+        toObservable(this.width)
+            .pipe(takeUntilDestroyed())
+            .subscribe((width) => {
+            this.widthState.set(width);
+        });
+    }
+    /**
+     * Toggles the content panel opened state.
+     */
+    toggle() {
+        this.openedState.update((state) => !state);
+        this.openedChange.emit(this.openedState());
+    }
+    /**
+     * Opens the content panel.
+     */
+    open() {
+        if (this.openedState())
+            return;
+        this.openedState.set(true);
+        this.openedChange.emit(this.openedState());
+    }
+    /**
+     * Closes the content panel.
+     */
+    close() {
+        if (!this.openedState())
+            return;
+        this.openedState.set(false);
+        this.openedChange.emit(this.openedState());
+    }
+    /**
+     * @docs-private
+     */
+    handleResizerDBLClick(event) {
+        event.preventDefault();
+        this.widthState.set(this.width());
+    }
+    /**
+     * @docs-private
+     */
+    handleResizerSizeChange({ width }) {
+        if (width > this.maxWidth())
+            return this.widthState.set(this.maxWidth());
+        if (width < this.minWidth())
+            return this.widthState.set(this.minWidth());
+        this.widthState.set(width);
+    }
+    /**
+     * @docs-private
+     */
+    handleEscapeKeydown(event) {
+        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: "18.2.13", ngImport: i0, type: KbqContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 />
+        </kbq-scrollbar>
+        @if (openedState()) {
+            <div
+                class="kbq-content-panel-container__panel"
+                kbqResizable
+                @panelAnimation
+                [style.min-width.px]="minWidth()"
+                [style.width.px]="widthState()"
+                [style.max-width.px]="maxWidth()"
+            >
+                @if (!disableResizer()) {
+                    <div
+                        class="kbq-content-panel-container__panel-resizer"
+                        [kbqResizer]="[-1, 0]"
+                        (sizeChange)="handleResizerSizeChange($event)"
+                        (dblclick)="handleResizerDBLClick($event)"
+                    ></div>
+                }
+                <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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelContainer, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [KbqResizable, KbqResizer, KbqScrollbarModule], selector: 'kbq-content-panel-container', exportAs: 'kbqContentPanelContainer', host: {
+                        class: 'kbq-content-panel-container',
+                        '[class.kbq-content-panel-container__opened]': 'openedState()',
+                        '(keydown.escape)': 'handleEscapeKeydown($event)'
+                    }, template: `
+        <kbq-scrollbar class="kbq-content-panel-container__content" [@contentAnimation]="contentAnimationState()">
+            <ng-content />
+        </kbq-scrollbar>
+        @if (openedState()) {
+            <div
+                class="kbq-content-panel-container__panel"
+                kbqResizable
+                @panelAnimation
+                [style.min-width.px]="minWidth()"
+                [style.width.px]="widthState()"
+                [style.max-width.px]="maxWidth()"
+            >
+                @if (!disableResizer()) {
+                    <div
+                        class="kbq-content-panel-container__panel-resizer"
+                        [kbqResizer]="[-1, 0]"
+                        (sizeChange)="handleResizerSizeChange($event)"
+                        (dblclick)="handleResizerDBLClick($event)"
+                    ></div>
+                }
+                <ng-content select="kbq-content-panel" />
+            </div>
+        }
+    `, animations: [
+                        KBQ_CONTENT_PANEL_CONTAINER_CONTENT_ANIMATION,
+                        KBQ_CONTENT_PANEL_CONTAINER_PANEL_ANIMATION
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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: () => [] });
+
+const COMPONENTS = [
+    KbqContentPanelContainer,
+    KbqContentPanel,
+    KbqContentPanelAside,
+    KbqContentPanelHeader,
+    KbqContentPanelHeaderTitle,
+    KbqContentPanelHeaderActions,
+    KbqContentPanelBody,
+    KbqContentPanelFooter
+];
+class KbqContentPanelModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelModule, imports: [KbqContentPanelContainer,
+            KbqContentPanel,
+            KbqContentPanelAside,
+            KbqContentPanelHeader,
+            KbqContentPanelHeaderTitle,
+            KbqContentPanelHeaderActions,
+            KbqContentPanelBody,
+            KbqContentPanelFooter], exports: [KbqContentPanelContainer,
+            KbqContentPanel,
+            KbqContentPanelAside,
+            KbqContentPanelHeader,
+            KbqContentPanelHeaderTitle,
+            KbqContentPanelHeaderActions,
+            KbqContentPanelBody,
+            KbqContentPanelFooter] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelModule, imports: [KbqContentPanelContainer,
+            KbqContentPanelHeader,
+            KbqContentPanelBody] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqContentPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KbqContentPanel, KbqContentPanelAside, KbqContentPanelBody, KbqContentPanelContainer, KbqContentPanelFooter, KbqContentPanelHeader, KbqContentPanelHeaderActions, KbqContentPanelHeaderTitle, KbqContentPanelModule, KbqResizable, KbqResizer };
+//# sourceMappingURL=koobiq-components-content-panel.mjs.map