import * as i0 from '@angular/core';
import { InjectionToken, inject, ViewContainerRef, DestroyRef, input, output, signal, viewChild, computed, effect, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Overlay } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { timer } from 'rxjs';

const DRAWER = new InjectionToken('DRAWER');

class Drawer {
    overlay = inject(Overlay);
    viewContainerRef = inject(ViewContainerRef);
    destroyRef = inject(DestroyRef);
    initialIsOpen = input(undefined, { ...(ngDevMode ? { debugName: "initialIsOpen" } : /* istanbul ignore next */ {}), alias: 'isOpen' });
    showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : /* istanbul ignore next */ []));
    closed = output();
    opened = output();
    internalIsOpen = signal(false, ...(ngDevMode ? [{ debugName: "internalIsOpen" }] : /* istanbul ignore next */ []));
    overlayRef = null;
    portal = viewChild.required('portal');
    _isOpen = computed(() => this.internalIsOpen(), ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
    constructor() {
        effect(() => {
            const externalIsOpen = this.initialIsOpen();
            if (externalIsOpen !== undefined) {
                if (externalIsOpen) {
                    this.open();
                }
                else {
                    this.close();
                }
            }
        });
    }
    ngOnDestroy() {
        this.close();
    }
    open() {
        if (this.internalIsOpen()) {
            return;
        }
        if (!this.overlayRef) {
            this.overlayRef = this.overlay.create({
                hasBackdrop: this.showBackdrop(),
                backdropClass: 'drawer-backdrop',
                positionStrategy: this.overlay.position().global().right('0').top('0').bottom('0'),
                scrollStrategy: this.overlay.scrollStrategies.block()
            });
            this.overlayRef.backdropClick().subscribe(() => {
                this.close();
            });
            this.overlayRef.outsidePointerEvents().subscribe((event) => {
                const target = event.target;
                if (target.closest('.ngs-drawer-ignore-outside-click')) {
                    return;
                }
                this.close();
            });
            this.overlayRef.keydownEvents().subscribe(event => {
                if (event.key === 'Escape') {
                    this.close();
                }
            });
        }
        const portal = new TemplatePortal(this.portal(), this.viewContainerRef);
        this.overlayRef.attach(portal);
        if (!this.showBackdrop()) {
            this.overlayRef.hostElement.classList.add('pointer-events-none');
        }
        // Delay setting internalIsOpen to true to ensure the entry animation triggers
        setTimeout(() => {
            this.internalIsOpen.set(true);
        });
        this.opened.emit();
    }
    close() {
        if (!this.internalIsOpen()) {
            return;
        }
        this.internalIsOpen.set(false);
        timer(150)
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(() => {
            if (this.overlayRef) {
                this.overlayRef.detach();
                this.overlayRef.dispose();
                this.overlayRef = null;
            }
            this.closed.emit();
        });
    }
    get isOpened() {
        return this._isOpen();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Drawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Drawer, isStandalone: true, selector: "ngs-drawer", inputs: { initialIsOpen: { classPropertyName: "initialIsOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, providers: [
            {
                provide: DRAWER,
                useExisting: forwardRef(() => Drawer),
            }
        ], viewQueries: [{ propertyName: "portal", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDrawer"], ngImport: i0, template: "<ng-template #portal>\n  <div\n    class=\"ngs-drawer-container\"\n    [class.open]=\"_isOpen()\">\n    <div class=\"ngs-drawer-content\">\n      <ng-content/>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ngs-drawer-container{--ngs-drawer-transition-duration: .15s;--ngs-drawer-transition: cubic-bezier(.4,0,.2,1);position:fixed;z-index:1040;top:0;right:0;max-width:90vw;bottom:0;transform:translate(100%);visibility:hidden;display:flex;flex-direction:column;pointer-events:auto}.ngs-drawer-container.open{transform:translate(0);visibility:visible;transition:transform .3s var(--ngs-drawer-transition),visibility 0s linear 0s}.ngs-drawer-container:not(.open){transition:transform .2s var(--ngs-drawer-transition),visibility 0s linear .2s}.ngs-drawer-content{background:var(--ngs-color-surface-container-lowest);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:var(--ngs-dropdown-border);margin:1.75rem;flex-grow:1;overflow:hidden;border-radius:1rem;border:1px solid transparent}.drawer-backdrop{background:var(--ngs-overlay-backdrop-bg);opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.drawer-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-overlay-pane.pointer-events-none{pointer-events:none!important}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Drawer, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-drawer', exportAs: 'ngsDrawer', standalone: true, providers: [
                        {
                            provide: DRAWER,
                            useExisting: forwardRef(() => Drawer),
                        }
                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #portal>\n  <div\n    class=\"ngs-drawer-container\"\n    [class.open]=\"_isOpen()\">\n    <div class=\"ngs-drawer-content\">\n      <ng-content/>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ngs-drawer-container{--ngs-drawer-transition-duration: .15s;--ngs-drawer-transition: cubic-bezier(.4,0,.2,1);position:fixed;z-index:1040;top:0;right:0;max-width:90vw;bottom:0;transform:translate(100%);visibility:hidden;display:flex;flex-direction:column;pointer-events:auto}.ngs-drawer-container.open{transform:translate(0);visibility:visible;transition:transform .3s var(--ngs-drawer-transition),visibility 0s linear 0s}.ngs-drawer-container:not(.open){transition:transform .2s var(--ngs-drawer-transition),visibility 0s linear .2s}.ngs-drawer-content{background:var(--ngs-color-surface-container-lowest);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:var(--ngs-dropdown-border);margin:1.75rem;flex-grow:1;overflow:hidden;border-radius:1rem;border:1px solid transparent}.drawer-backdrop{background:var(--ngs-overlay-backdrop-bg);opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.drawer-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-overlay-pane.pointer-events-none{pointer-events:none!important}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { initialIsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], portal: [{ type: i0.ViewChild, args: ['portal', { isSignal: true }] }] } });

class DrawerIgnoreOutsideClickDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DrawerIgnoreOutsideClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DrawerIgnoreOutsideClickDirective, isStandalone: true, selector: "[ngsDrawerIgnoreOutsideClick]", host: { classAttribute: "ngs-drawer-ignore-outside-click" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DrawerIgnoreOutsideClickDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsDrawerIgnoreOutsideClick]',
                    host: {
                        'class': 'ngs-drawer-ignore-outside-click'
                    }
                }]
        }] });

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

export { DRAWER, Drawer, DrawerIgnoreOutsideClickDirective };
//# sourceMappingURL=ngstarter-ui-components-drawer.mjs.map
