import { animate, state, style, transition, trigger } from '@angular/animations';
import { afterNextRender, booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, DestroyRef, Directive, ElementRef, inject, input, numberAttribute, output, Renderer2, signal, viewChild, ViewEncapsulation } from '@angular/core';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import { KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
import { KbqAnimationCurves, KbqAnimationDurations, KbqComponentColors } from '@koobiq/components/core';
import { KbqIconModule } from '@koobiq/components/icon';
import { KbqResizable, KbqResizer } from '@koobiq/components/resizer';
import { KbqScrollbar, KbqScrollbarModule } from '@koobiq/components/scrollbar';
import { SizeL } from '@koobiq/design-tokens';
import * as i0 from "@angular/core";
import * as i1 from "@koobiq/components/button";
import * as i2 from "@koobiq/components/icon";
import * as i3 from "@koobiq/components/scrollbar";
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%)' }))
    ])
]);
export class KbqContentPanelAside {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqContentPanelAside, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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.14", 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"] }]
        }] });
export class KbqContentPanelHeaderTitle {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqContentPanelHeaderTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", 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.14", ngImport: i0, type: KbqContentPanelHeaderTitle, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[kbqContentPanelHeaderTitle]',
                    exportAs: 'kbqContentPanelHeaderTitle',
                    host: {
                        class: 'kbq-content-panel-header-title'
                    }
                }]
        }] });
export class KbqContentPanelHeaderActions {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqContentPanelHeaderActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", 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.14", ngImport: i0, type: KbqContentPanelHeaderActions, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[kbqContentPanelHeaderActions]',
                    exportAs: 'kbqContentPanelHeaderActions',
                    host: {
                        class: 'kbq-content-panel-header-actions'
                    }
                }]
        }] });
export 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.14", ngImport: i0, type: KbqContentPanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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.14", 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"] }]
        }] });
export class KbqContentPanelBody {
    constructor() {
        /**
         * @docs-private
         */
        this.scrollbar = viewChild.required(KbqScrollbar);
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqContentPanelBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", 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.14", 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"] }]
        }] });
export class KbqContentPanelFooter {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqContentPanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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.14", 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"] }]
        }] });
export 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.14", ngImport: i0, type: KbqContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", 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.14", 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: () => [] });
export 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.14", ngImport: i0, type: KbqContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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.14", 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: () => [] });
//# sourceMappingURL=data:application/json;base64, 