import { MXBaseComponent, AXComponent, AXClosableComponent } from '@acorex/cdk/common';
import * as i1 from '@acorex/cdk/drawer';
import { AXDrawerContainerDirective, AXDrawerItemDirective } from '@acorex/cdk/drawer';
import * as i0 from '@angular/core';
import { afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, inject, effect, NgModule } from '@angular/core';

/**
 * A container component that organizes and positions drawer components.
 * @category component
 */
class AXDrawerContainerComponent extends MXBaseComponent {
    #init = afterNextRender(() => {
        const host = this.getHostElement();
        Array.from(host.querySelectorAll(`ax-drawer`)).map((c) => c['__axContext__']);
    });
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDrawerContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXDrawerContainerComponent, isStandalone: true, selector: "ax-drawer-container", providers: [{ provide: AXComponent, useExisting: AXDrawerContainerComponent }], usesInheritance: true, hostDirectives: [{ directive: i1.AXDrawerContainerDirective }], ngImport: i0, template: `
    <ng-content select="ax-drawer"> </ng-content>
    <ng-content select="ax-content"> </ng-content>
  `, isInline: true, styles: ["ax-drawer-container{width:100%;height:100%}ax-drawer-container>ax-content{height:100%;flex:1 1 0%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDrawerContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-drawer-container', template: `
    <ng-content select="ax-drawer"> </ng-content>
    <ng-content select="ax-content"> </ng-content>
  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXDrawerContainerComponent }], hostDirectives: [AXDrawerContainerDirective], styles: ["ax-drawer-container{width:100%;height:100%}ax-drawer-container>ax-content{height:100%;flex:1 1 0%}\n"] }]
        }] });

/**
 * A component that represents a drawer with header and content sections.
 *
 * @category Components
 */
class AXDrawerComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        this.location = input('start', ...(ngDevMode ? [{ debugName: "location" }] : []));
        this.showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
        this.mode = input('overlay', ...(ngDevMode ? [{ debugName: "mode" }] : []));
        this.transition = input(100, ...(ngDevMode ? [{ debugName: "transition" }] : []));
        this.closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
        this.backdropClass = input('ax-bg-black/45', ...(ngDevMode ? [{ debugName: "backdropClass" }] : []));
        this.collapsed = input(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
        this.singleOpenMode = input(true, ...(ngDevMode ? [{ debugName: "singleOpenMode" }] : []));
        this.onBackdropClick = output();
        this.collapsedStateChanged = output();
        this.drawerItem = inject(AXDrawerItemDirective);
        this.#eff = effect(() => {
            this.drawerItem.mode.set(this.mode());
            this.drawerItem.transition.set(this.transition());
            this.drawerItem.backdropClass.set(this.backdropClass());
            this.drawerItem.closeOnBackdropClick.set(this.closeOnBackdropClick());
            this.drawerItem.location.set(this.location());
            this.drawerItem.backDrop.set(this.showBackdrop());
            this.drawerItem.collapsed.set(this.collapsed());
            this.drawerItem.singleOpenMode.set(this.singleOpenMode());
        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
        this.#init = afterNextRender(() => {
            this.drawerItem.onBackdropClick.subscribe((event) => {
                this.onBackdropClick.emit({ nativeEvent: event, component: this });
            });
            this.drawerItem.collapseStateChanged.subscribe((event) => {
                this.collapsedStateChanged.emit(event);
            });
        });
    }
    #eff;
    #init;
    /**
     * Toggles the drawer state between open and closed.
     *
     * @returns void - No return value. The drawer state is toggled.
     */
    toggle() {
        this.drawerItem.toggle();
    }
    /**
     * Closes the drawer.
     *
     * @returns void - No return value. The drawer is collapsed.
     */
    close() {
        this.drawerItem.hide();
    }
    /**
     * Opens the drawer.
     *
     * @returns void - No return value. The drawer is expanded.
     */
    open() {
        this.drawerItem.show();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDrawerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXDrawerComponent, isStandalone: true, selector: "ax-drawer", inputs: { location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, singleOpenMode: { classPropertyName: "singleOpenMode", publicName: "singleOpenMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBackdropClick: "onBackdropClick", collapsedStateChanged: "collapsedStateChanged" }, providers: [
            { provide: AXComponent, useExisting: AXDrawerComponent },
            { provide: AXClosableComponent, useExisting: AXDrawerComponent },
        ], usesInheritance: true, hostDirectives: [{ directive: i1.AXDrawerItemDirective }], ngImport: i0, template: `
    <ng-content select="ax-header"></ng-content>
    <ng-content select="ax-content"></ng-content>
  `, isInline: true, styles: ["ax-drawer>ax-content{flex:1 1 0%;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDrawerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-drawer', template: `
    <ng-content select="ax-header"></ng-content>
    <ng-content select="ax-content"></ng-content>
  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                        { provide: AXComponent, useExisting: AXDrawerComponent },
                        { provide: AXClosableComponent, useExisting: AXDrawerComponent },
                    ], hostDirectives: [AXDrawerItemDirective], styles: ["ax-drawer>ax-content{flex:1 1 0%;width:100%;height:100%}\n"] }]
        }] });

const COMPONENT = [AXDrawerComponent, AXDrawerContainerComponent];
const MODULES = [];
class AXDrawerModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXDrawerModule, imports: [AXDrawerComponent, AXDrawerContainerComponent], exports: [AXDrawerComponent, AXDrawerContainerComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDrawerModule, imports: [MODULES] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDrawerModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

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

export { AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule };
//# sourceMappingURL=acorex-components-drawer.mjs.map
