import { MXBaseComponent, AXComponent, AXClosableComponent } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { signal, Injectable, inject, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, model, input, NgZone, DOCUMENT, PLATFORM_ID, effect, HostBinding, NgModule } from '@angular/core';
import { isBrowser } from '@acorex/core/platform';
import { isPlatformBrowser, CommonModule } from '@angular/common';

class AXDrawerLegacyService {
    constructor() {
        this.drawerElements = signal(null, ...(ngDevMode ? [{ debugName: "drawerElements" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDrawerLegacyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDrawerLegacyService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDrawerLegacyService, decorators: [{
            type: Injectable
        }] });

/**
 * A container component that organizes and positions drawer components.
 * @category component
 */
class AXDrawerLegacyContainerComponent extends MXBaseComponent {
    constructor() {
        super();
        this.service = inject(AXDrawerLegacyService);
        afterNextRender(() => {
            const host = this.getHostElement();
            const drawerClasses = Array.from(host.querySelectorAll(`ax-drawer`)).map((c) => c['__axContext__']);
            this.service.drawerElements.set(drawerClasses);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDrawerLegacyContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXDrawerLegacyContainerComponent, isStandalone: true, selector: "ax-drawer-legacy-container", providers: [AXDrawerLegacyService, { provide: AXComponent, useExisting: AXDrawerLegacyContainerComponent }], usesInheritance: true, ngImport: i0, template: `
    <ng-content select="ax-drawer"> </ng-content>
    <ng-content select="ax-content"></ng-content>
  `, isInline: true, styles: ["ax-drawer-legacy-container{position:relative;display:flex;height:100%;width:100%;overflow:hidden}ax-drawer-legacy-container.ax-fixed{bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;z-index:50;display:none}ax-drawer-legacy-container.ax-fixed.ax-visible{display:flex}ax-drawer-legacy-container .ax-backdrop{position:absolute;bottom:0;top:0;z-index:10;height:100%;width:100%;background-color:rgba(var(--ax-comp-drawer-container-bg-color, 0, 0, 0, .2));transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-drawer-legacy-container>ax-content{height:100%;flex:1 1 0%;overflow:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDrawerLegacyContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-drawer-legacy-container', template: `
    <ng-content select="ax-drawer"> </ng-content>
    <ng-content select="ax-content"></ng-content>
  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AXDrawerLegacyService, { provide: AXComponent, useExisting: AXDrawerLegacyContainerComponent }], styles: ["ax-drawer-legacy-container{position:relative;display:flex;height:100%;width:100%;overflow:hidden}ax-drawer-legacy-container.ax-fixed{bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;z-index:50;display:none}ax-drawer-legacy-container.ax-fixed.ax-visible{display:flex}ax-drawer-legacy-container .ax-backdrop{position:absolute;bottom:0;top:0;z-index:10;height:100%;width:100%;background-color:rgba(var(--ax-comp-drawer-container-bg-color, 0, 0, 0, .2));transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-drawer-legacy-container>ax-content{height:100%;flex:1 1 0%;overflow:auto}\n"] }]
        }], ctorParameters: () => [] });

/**
 * A component that represents a drawer with header and content sections.
 *
 * @category Components
 */
class AXDrawerLegacyComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        this.location = model('start', ...(ngDevMode ? [{ debugName: "location" }] : []));
        this.showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
        this.mode = model('overlay', ...(ngDevMode ? [{ debugName: "mode" }] : []));
        this.closeOthers = input(false, ...(ngDevMode ? [{ debugName: "closeOthers" }] : []));
        this.collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
        this.backdropElement = signal(null, ...(ngDevMode ? [{ debugName: "backdropElement" }] : []));
        this.loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : []));
        this.service = inject(AXDrawerLegacyService);
        this._zone = inject(NgZone);
        this.document = inject(DOCUMENT);
        this.platformID = inject(PLATFORM_ID);
        this.#eff = effect(() => {
            if (!this.collapsed()) {
                if (this.showBackdrop() && this.mode() === 'overlay') {
                    this._addBackdrop();
                }
            }
            else {
                this._removeBackdrop();
            }
        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
    }
    /**
     *
     *  @ignore
     */
    ngAfterContentInit() {
        this._detectBoundingSize();
        setTimeout(() => {
            this.loaded.set(true);
        }, 5000);
    }
    /**
     *  @ignore
     */
    ngDoCheck() {
        this._detectBoundingSize();
    }
    /**
     *  @ignore
     */
    _detectBoundingSize() {
        this._zone.runOutsideAngular(() => {
            const host = this.getHostElement();
            if (host.clientWidth) {
                host.style.setProperty('--ax-sys-el-width', `${host.clientWidth}px`);
            }
        });
    }
    /**
     * Toggles the collapsed state of the drawer.
     */
    toggle() {
        if (this.collapsed()) {
            this.open();
        }
        else {
            this.close();
        }
    }
    /**
     * Collapses the drawer.
     * @ignore
     */
    close() {
        this.collapsed.set(true);
    }
    /**
     * Expands the drawer.
     */
    open() {
        if (!this.collapsed())
            return;
        this.collapsed.set(false);
        if (!this.closeOthers()) {
            this.service.drawerElements()?.forEach((element) => {
                if (element.location() === this.location() && element.id !== this.id) {
                    element.close();
                }
            });
        }
    }
    #eff;
    /**
     *  @ignore
     */
    _addBackdrop() {
        if (isPlatformBrowser(this.platformID)) {
            this._zone.runOutsideAngular(() => {
                const backDropElem = this.document.createElement('div');
                backDropElem.classList.add('ax-backdrop');
                backDropElem.onclick = () => {
                    this._zone.run(() => {
                        this.close();
                    });
                };
                this.getHostElement()?.parentElement?.appendChild(backDropElem);
                this.backdropElement.set(backDropElem);
            });
        }
    }
    /**
     *  @ignore
     */
    _removeBackdrop() {
        if (isBrowser()) {
            this._zone.runOutsideAngular(() => {
                if (this.backdropElement()) {
                    this.getHostElement()?.parentElement?.removeChild(this.backdropElement());
                    this.backdropElement.set(null);
                }
            });
        }
    }
    /**
     *  @ignore
     */
    get __hostClass() {
        return `ax-drawer-${this.mode()} ax-drawer-${this.location()} ${this.collapsed() ? 'ax-collapsed' : 'ax-expanded'} ${this.loaded() && 'ax-state-loaded'}`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDrawerLegacyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: AXDrawerLegacyComponent, isStandalone: true, selector: "ax-drawer-legacy", 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 }, closeOthers: { classPropertyName: "closeOthers", publicName: "closeOthers", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { location: "locationChange", mode: "modeChange", collapsed: "collapsedChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
            { provide: AXComponent, useExisting: AXDrawerLegacyComponent },
            { provide: AXClosableComponent, useExisting: AXDrawerLegacyComponent },
        ], usesInheritance: true, ngImport: i0, template: `
    <ng-content select="ax-header"></ng-content>
    <ng-content select="ax-content"></ng-content>
  `, isInline: true, styles: ["ax-drawer-legacy{height:100%;display:flex;max-width:95%;flex-direction:column}ax-drawer-legacy>ax-content{flex:1 1 0%;overflow:auto}ax-drawer-legacy.ax-drawer-overlay{position:absolute;transition-property:background-color,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-drawer-legacy.ax-drawer-overlay.ax-expanded{z-index:20}ax-drawer-legacy.ax-drawer-overlay.ax-collapsed{z-index:0}ax-drawer-legacy.ax-drawer-overlay.ax-drawer-start.ax-expanded{inset-inline-start:0px}ax-drawer-legacy.ax-drawer-overlay.ax-drawer-start.ax-collapsed{inset-inline-start:calc(-1 * var(--ax-sys-el-width))}ax-drawer-legacy.ax-drawer-overlay.ax-drawer-end.ax-expanded{inset-inline-end:0px}ax-drawer-legacy.ax-drawer-overlay.ax-drawer-end.ax-collapsed{inset-inline-end:calc(-1 * var(--ax-sys-el-width))}ax-drawer-legacy.ax-drawer-push{flex:0 1 auto}ax-drawer-legacy.ax-drawer-push.ax-expanded{z-index:20}ax-drawer-legacy.ax-drawer-push.ax-collapsed{z-index:0}ax-drawer-legacy.ax-drawer-push.ax-drawer-start{order:-9999}ax-drawer-legacy.ax-drawer-push.ax-drawer-start.ax-expanded{margin-inline-start:0px}ax-drawer-legacy.ax-drawer-push.ax-drawer-start.ax-collapsed{margin-inline-start:calc(-1 * var(--ax-sys-el-width))}ax-drawer-legacy.ax-drawer-push.ax-drawer-end{order:9999}ax-drawer-legacy.ax-drawer-push.ax-drawer-end.ax-expanded{margin-inline-end:0px}ax-drawer-legacy.ax-drawer-push.ax-drawer-end.ax-collapsed{margin-inline-end:calc(-1 * var(--ax-sys-el-width))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDrawerLegacyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-drawer-legacy', 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: AXDrawerLegacyComponent },
                        { provide: AXClosableComponent, useExisting: AXDrawerLegacyComponent },
                    ], styles: ["ax-drawer-legacy{height:100%;display:flex;max-width:95%;flex-direction:column}ax-drawer-legacy>ax-content{flex:1 1 0%;overflow:auto}ax-drawer-legacy.ax-drawer-overlay{position:absolute;transition-property:background-color,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-drawer-legacy.ax-drawer-overlay.ax-expanded{z-index:20}ax-drawer-legacy.ax-drawer-overlay.ax-collapsed{z-index:0}ax-drawer-legacy.ax-drawer-overlay.ax-drawer-start.ax-expanded{inset-inline-start:0px}ax-drawer-legacy.ax-drawer-overlay.ax-drawer-start.ax-collapsed{inset-inline-start:calc(-1 * var(--ax-sys-el-width))}ax-drawer-legacy.ax-drawer-overlay.ax-drawer-end.ax-expanded{inset-inline-end:0px}ax-drawer-legacy.ax-drawer-overlay.ax-drawer-end.ax-collapsed{inset-inline-end:calc(-1 * var(--ax-sys-el-width))}ax-drawer-legacy.ax-drawer-push{flex:0 1 auto}ax-drawer-legacy.ax-drawer-push.ax-expanded{z-index:20}ax-drawer-legacy.ax-drawer-push.ax-collapsed{z-index:0}ax-drawer-legacy.ax-drawer-push.ax-drawer-start{order:-9999}ax-drawer-legacy.ax-drawer-push.ax-drawer-start.ax-expanded{margin-inline-start:0px}ax-drawer-legacy.ax-drawer-push.ax-drawer-start.ax-collapsed{margin-inline-start:calc(-1 * var(--ax-sys-el-width))}ax-drawer-legacy.ax-drawer-push.ax-drawer-end{order:9999}ax-drawer-legacy.ax-drawer-push.ax-drawer-end.ax-expanded{margin-inline-end:0px}ax-drawer-legacy.ax-drawer-push.ax-drawer-end.ax-collapsed{margin-inline-end:calc(-1 * var(--ax-sys-el-width))}\n"] }]
        }], propDecorators: { location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }, { type: i0.Output, args: ["locationChange"] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], closeOthers: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOthers", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

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

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

export { AXDrawerLegacyComponent, AXDrawerLegacyContainerComponent, AXDrawerLegacyModule };
//# sourceMappingURL=acorex-components-drawer-legacy.mjs.map
