import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Directive, Input, inject, Renderer2, ChangeDetectorRef, EventEmitter, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, ContentChild, NgModule } from '@angular/core';
import { isControl, isInput, isLeftBracket, isRightBracket } from '@koobiq/cdk/keycodes';
import { trigger, state, style, transition, animate } from '@angular/animations';

var KbqSidebarAnimationState;
(function (KbqSidebarAnimationState) {
    KbqSidebarAnimationState["Opened"] = "opened";
    KbqSidebarAnimationState["Closed"] = "closed";
})(KbqSidebarAnimationState || (KbqSidebarAnimationState = {}));
const kbqSidebarAnimations = {
    sidebarState: trigger('state', [
        state('opened', style({
            minWidth: '{{ openedStateMinWidth }}',
            width: '{{ openedStateWidth }}',
            maxWidth: '{{ openedStateMaxWidth }}'
        }), { params: { openedStateMinWidth: '', openedStateWidth: '', openedStateMaxWidth: '' } }),
        state('closed', style({
            minWidth: '{{ closedStateWidth }}',
            width: '{{ closedStateWidth }}',
            maxWidth: '{{ closedStateWidth }}'
        }), { params: { closedStateWidth: '' } }),
        transition('opened => closed', [animate('0.1s')]),
        transition('closed => opened', [animate('0.2s')])
    ])
};

var SidebarPositions;
(function (SidebarPositions) {
    SidebarPositions["Left"] = "left";
    SidebarPositions["Right"] = "right";
})(SidebarPositions || (SidebarPositions = {}));
class KbqSidebarOpened {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSidebarOpened, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqSidebarOpened, selector: "[kbq-sidebar-opened]", inputs: { minWidth: "minWidth", width: "width", maxWidth: "maxWidth" }, host: { classAttribute: "kbq-sidebar-opened" }, exportAs: ["kbqSidebarOpened"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSidebarOpened, decorators: [{
            type: Directive,
            args: [{
                    selector: '[kbq-sidebar-opened]',
                    exportAs: 'kbqSidebarOpened',
                    host: {
                        class: 'kbq-sidebar-opened'
                    }
                }]
        }], propDecorators: { minWidth: [{
                type: Input
            }], width: [{
                type: Input
            }], maxWidth: [{
                type: Input
            }] } });
class KbqSidebarClosed {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSidebarClosed, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqSidebarClosed, selector: "[kbq-sidebar-closed]", inputs: { width: "width" }, host: { classAttribute: "kbq-sidebar-closed" }, exportAs: ["kbqSidebarClosed"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSidebarClosed, decorators: [{
            type: Directive,
            args: [{
                    selector: '[kbq-sidebar-closed]',
                    exportAs: 'kbqSidebarClosed',
                    host: {
                        class: 'kbq-sidebar-closed'
                    }
                }]
        }], propDecorators: { width: [{
                type: Input
            }] } });
class KbqSidebar {
    get opened() {
        return this._opened;
    }
    set opened(value) {
        if (this._opened) {
            this.saveWidth();
        }
        this._opened = value;
    }
    /**
     * @docs-private
     */
    get animationState() {
        return this._opened ? KbqSidebarAnimationState.Opened : KbqSidebarAnimationState.Closed;
    }
    constructor(ngZone, elementRef) {
        this.ngZone = ngZone;
        this.elementRef = elementRef;
        /**
         * @docs-private
         */
        this.document = inject(DOCUMENT);
        this.renderer = inject(Renderer2);
        this.changeDetectorRef = inject(ChangeDetectorRef);
        this._opened = true;
        /**
         * @docs-private
         */
        this.params = {
            openedStateWidth: 'inherit',
            openedStateMinWidth: 'inherit',
            openedStateMaxWidth: 'inherit',
            closedStateWidth: '32px'
        };
        this.stateChanged = new EventEmitter();
        /**
         * @docs-private
         */
        this.internalState = true;
        this.unbindKeydownListener = null;
        afterNextRender(() => this.registerKeydownListener());
    }
    ngAfterContentInit() {
        this.params = {
            openedStateWidth: this.openedContent.width || 'inherit',
            openedStateMinWidth: this.openedContent.minWidth || 'inherit',
            openedStateMaxWidth: this.openedContent.maxWidth || 'inherit',
            closedStateWidth: this.closedContent.width || '32px'
        };
    }
    ngOnDestroy() {
        this.unRegisterKeydownListener();
    }
    toggle() {
        this.opened = !this.opened;
        this.changeDetectorRef.markForCheck();
    }
    /**
     * @docs-private
     */
    onAnimationStart() {
        if (this._opened) {
            this.internalState = this._opened;
        }
    }
    /**
     * @docs-private
     */
    onAnimationDone() {
        this.internalState = this._opened;
        this.stateChanged.emit(this._opened);
    }
    registerKeydownListener() {
        this.ngZone.runOutsideAngular(() => {
            this.unbindKeydownListener ||= this.renderer.listen(this.document, 'keypress', (event) => this.handleKeydown(event));
        });
    }
    unRegisterKeydownListener() {
        if (this.unbindKeydownListener) {
            this.unbindKeydownListener();
            this.unbindKeydownListener = null;
        }
    }
    handleKeydown(event) {
        if (isControl(event) || isInput(event))
            return;
        if ((this.position === SidebarPositions.Left && isLeftBracket(event)) ||
            (this.position === SidebarPositions.Right && isRightBracket(event))) {
            this.toggle();
        }
    }
    saveWidth() {
        this.params.openedStateWidth = `${this.elementRef.nativeElement.offsetWidth}px`;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSidebar, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqSidebar, selector: "kbq-sidebar", inputs: { opened: "opened", position: "position" }, outputs: { stateChanged: "stateChanged" }, host: { listeners: { "@state.start": "onAnimationStart()", "@state.done": "onAnimationDone()" }, properties: { "@state": "{\n            value: animationState,\n            params: params\n        }" }, classAttribute: "kbq-sidebar" }, queries: [{ propertyName: "openedContent", first: true, predicate: KbqSidebarOpened, descendants: true }, { propertyName: "closedContent", first: true, predicate: KbqSidebarClosed, descendants: true }], exportAs: ["kbqSidebar"], ngImport: i0, template: "@if (internalState) {\n    <ng-content select=\"[kbq-sidebar-opened]\" />\n} @else {\n    <ng-content select=\"[kbq-sidebar-closed]\" />\n}\n", styles: [".kbq-sidebar{display:inline-block;height:100%;overflow:hidden}.kbq-sidebar-opened,.kbq-sidebar-closed{height:100%}\n"], animations: [kbqSidebarAnimations.sidebarState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSidebar, decorators: [{
            type: Component,
            args: [{ selector: 'kbq-sidebar', exportAs: 'kbqSidebar', host: {
                        class: 'kbq-sidebar',
                        '[@state]': `{
            value: animationState,
            params: params
        }`,
                        '(@state.start)': 'onAnimationStart()',
                        '(@state.done)': 'onAnimationDone()'
                    }, animations: [kbqSidebarAnimations.sidebarState], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (internalState) {\n    <ng-content select=\"[kbq-sidebar-opened]\" />\n} @else {\n    <ng-content select=\"[kbq-sidebar-closed]\" />\n}\n", styles: [".kbq-sidebar{display:inline-block;height:100%;overflow:hidden}.kbq-sidebar-opened,.kbq-sidebar-closed{height:100%}\n"] }]
        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { opened: [{
                type: Input
            }], position: [{
                type: Input
            }], stateChanged: [{
                type: Output
            }], openedContent: [{
                type: ContentChild,
                args: [KbqSidebarOpened, { static: false }]
            }], closedContent: [{
                type: ContentChild,
                args: [KbqSidebarClosed, { static: false }]
            }] } });

class KbqSidebarModule {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqSidebarModule, declarations: [KbqSidebarClosed,
            KbqSidebarOpened,
            KbqSidebar], imports: [CommonModule], exports: [KbqSidebarClosed,
            KbqSidebarOpened,
            KbqSidebar] }); }
    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSidebarModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSidebarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule],
                    declarations: [
                        KbqSidebarClosed,
                        KbqSidebarOpened,
                        KbqSidebar
                    ],
                    exports: [
                        KbqSidebarClosed,
                        KbqSidebarOpened,
                        KbqSidebar
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { KbqSidebar, KbqSidebarClosed, KbqSidebarModule, KbqSidebarOpened, SidebarPositions };
//# sourceMappingURL=koobiq-components-sidebar.mjs.map
