import { Button } from '@masterteam/components/button';
import * as i0 from '@angular/core';
import { inject, ElementRef, Renderer2, model, output, input, computed, effect, RendererStyleFlags2, Component } from '@angular/core';
import { DOCUMENT, CommonModule } from '@angular/common';
import { TranslocoService } from '@jsverse/transloco';
import * as i1 from 'primeng/drawer';
import { DrawerModule } from 'primeng/drawer';
import { blockBodyScroll, unblockBodyScroll } from 'primeng/dom';
import * as i2 from 'primeng/skeleton';
import { SkeletonModule } from 'primeng/skeleton';

class Drawer {
    static nextInstanceId = 0;
    doc = inject(DOCUMENT);
    host = inject((ElementRef));
    renderer = inject(Renderer2);
    transloco = inject(TranslocoService);
    drawerInstanceClass = `mt-custom-drawer-instance-${Drawer.nextInstanceId++}`;
    customMask = null;
    removeMaskClickListener = null;
    resizeAnimTimer = null;
    RESIZE_ANIM_CLASS = 'mt-drawer--anim-resize';
    RESIZE_ANIM_DURATION_MS = 700;
    visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
    visibleChange = output();
    onShow = output();
    onHide = output();
    position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
    fullScreen = input(false, ...(ngDevMode ? [{ debugName: "fullScreen" }] : /* istanbul ignore next */ []));
    closeOnEscape = input(false, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
    blockScroll = input(true, ...(ngDevMode ? [{ debugName: "blockScroll" }] : /* istanbul ignore next */ []));
    dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
    loadingHeader = input(false, ...(ngDevMode ? [{ debugName: "loadingHeader" }] : /* istanbul ignore next */ []));
    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
    transitionOptions = input('200ms cubic-bezier(0, 0, 1, 1)', ...(ngDevMode ? [{ debugName: "transitionOptions" }] : /* istanbul ignore next */ []));
    appendTo = input('self', ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
    modal = input(true, ...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
    showMaximizeToggle = input(true, ...(ngDevMode ? [{ debugName: "showMaximizeToggle" }] : /* istanbul ignore next */ []));
    maximizeTooltip = input('', ...(ngDevMode ? [{ debugName: "maximizeTooltip" }] : /* istanbul ignore next */ []));
    restoreTooltip = input('', ...(ngDevMode ? [{ debugName: "restoreTooltip" }] : /* istanbul ignore next */ []));
    maximized = model(false, ...(ngDevMode ? [{ debugName: "maximized" }] : /* istanbul ignore next */ []));
    canShowMaximizeToggle = computed(() => this.showMaximizeToggle() &&
        !this.fullScreen() &&
        (this.position() === 'left' || this.position() === 'right'), ...(ngDevMode ? [{ debugName: "canShowMaximizeToggle" }] : /* istanbul ignore next */ []));
    resolvedMaximizeTooltip = computed(() => this.maximizeTooltip() ||
        this.transloco.translate('components.drawer.expandFullWidth'), ...(ngDevMode ? [{ debugName: "resolvedMaximizeTooltip" }] : /* istanbul ignore next */ []));
    resolvedRestoreTooltip = computed(() => this.restoreTooltip() ||
        this.transloco.translate('components.drawer.restoreSize'), ...(ngDevMode ? [{ debugName: "resolvedRestoreTooltip" }] : /* istanbul ignore next */ []));
    resolvedAppendTo = computed(() => {
        this.visible();
        const appendTo = this.appendTo();
        if (!appendTo || appendTo === 'self' || appendTo === 'body') {
            return appendTo || 'self';
        }
        if (typeof appendTo !== 'string') {
            return appendTo;
        }
        const selector = appendTo.startsWith('#') || appendTo.startsWith('.')
            ? appendTo
            : `#${appendTo}`;
        return this.doc.querySelector(selector) ?? 'self';
    }, ...(ngDevMode ? [{ debugName: "resolvedAppendTo" }] : /* istanbul ignore next */ []));
    resolvedStyleClass = computed(() => [
        this.styleClass(),
        'mt-custom-drawer',
        this.drawerInstanceClass,
        this.maximized() ? 'mt-drawer--maximized' : '',
    ]
        .filter(Boolean)
        .join(' '), ...(ngDevMode ? [{ debugName: "resolvedStyleClass" }] : /* istanbul ignore next */ []));
    constructor() {
        effect(() => {
            if (!this.visible() || !this.modal()) {
                this.destroyCustomMask();
            }
        });
        effect(() => {
            // React only when the user toggles maximize while the drawer is open.
            // Closing/opening is handled by onShowEvent / onHideEvent so we never
            // race with PrimeNG's slide animation.
            const isMaximized = this.maximized();
            if (!this.visible()) {
                return;
            }
            this.applyMaximizedInlineStyles(isMaximized, true);
        });
    }
    visibleChangeEvent(event) {
        this.visibleChange.emit(event);
    }
    onClose() {
        this.visible.set(false);
        this.visibleChange.emit(false);
        this.onHide.emit(true);
    }
    toggleMaximized() {
        this.maximized.set(!this.maximized());
    }
    onShowEvent() {
        this.syncCustomMask();
        // Drawer DOM only exists after PrimeNG renders it — apply current state
        // instantly so the open animation isn't fighting our resize transition.
        this.applyMaximizedInlineStyles(this.maximized(), false);
        this.onShow.emit(true);
    }
    onHideEvent() {
        this.destroyCustomMask();
        // Instant cleanup — the close animation is already done; we don't want
        // to start a 650ms width transition mid-hide.
        this.applyMaximizedInlineStyles(false, false);
        this.onHide.emit(true);
    }
    applyMaximizedInlineStyles(isMaximized, animate) {
        const drawerEl = this.getDrawerElement();
        if (!drawerEl) {
            return;
        }
        if (this.resizeAnimTimer) {
            clearTimeout(this.resizeAnimTimer);
            this.resizeAnimTimer = null;
        }
        if (animate) {
            this.renderer.addClass(drawerEl, this.RESIZE_ANIM_CLASS);
            this.resizeAnimTimer = setTimeout(() => {
                this.renderer.removeClass(drawerEl, this.RESIZE_ANIM_CLASS);
                this.resizeAnimTimer = null;
            }, this.RESIZE_ANIM_DURATION_MS);
        }
        else {
            this.renderer.removeClass(drawerEl, this.RESIZE_ANIM_CLASS);
        }
        if (isMaximized) {
            this.renderer.setStyle(drawerEl, 'width', '100%', RendererStyleFlags2.Important);
            this.renderer.setStyle(drawerEl, 'max-width', '100%', RendererStyleFlags2.Important);
            this.renderer.setStyle(drawerEl, 'height', '100%', RendererStyleFlags2.Important);
            this.renderer.setStyle(drawerEl, 'max-height', '100%', RendererStyleFlags2.Important);
        }
        else {
            this.renderer.removeStyle(drawerEl, 'width');
            this.renderer.removeStyle(drawerEl, 'max-width');
            this.renderer.removeStyle(drawerEl, 'height');
            this.renderer.removeStyle(drawerEl, 'max-height');
        }
    }
    ngOnDestroy() {
        if (this.resizeAnimTimer) {
            clearTimeout(this.resizeAnimTimer);
            this.resizeAnimTimer = null;
        }
        this.destroyCustomMask();
    }
    syncCustomMask() {
        if (!this.modal()) {
            this.destroyCustomMask();
            return;
        }
        const parent = this.resolveMaskParent();
        if (!parent) {
            return;
        }
        if (!this.customMask) {
            const mask = this.renderer.createElement('div');
            this.renderer.addClass(mask, 'p-drawer-mask');
            this.renderer.addClass(mask, 'p-overlay-mask');
            this.renderer.addClass(mask, 'p-overlay-mask-enter-active');
            this.customMask = mask;
            this.renderer.appendChild(parent, mask);
        }
        this.updateCustomMaskAttributes();
        this.bindMaskClickListener();
        if (this.blockScroll()) {
            blockBodyScroll();
        }
    }
    updateCustomMaskAttributes() {
        if (!this.customMask) {
            return;
        }
        this.renderer.setAttribute(this.customMask, 'style', this.getMaskStyle());
        this.renderer.setAttribute(this.customMask, 'data-p', this.getMaskDataP());
    }
    resolveMaskParent() {
        const appendTo = this.resolvedAppendTo();
        if (!appendTo || appendTo === 'self') {
            return this.host.nativeElement;
        }
        if (appendTo === 'body') {
            return this.doc.body;
        }
        return appendTo instanceof HTMLElement ? appendTo : this.host.nativeElement;
    }
    getDrawerElement() {
        return this.doc.querySelector(`.${this.drawerInstanceClass}.p-drawer`);
    }
    getMaskStyle() {
        const drawerElement = this.getDrawerElement();
        const drawerZIndex = Number.parseInt(drawerElement?.style.zIndex ?? '', 10);
        const maskZIndex = Number.isFinite(drawerZIndex)
            ? Math.max(drawerZIndex - 1, 0)
            : 1901;
        return `z-index: ${maskZIndex};`;
    }
    getMaskDataP() {
        const parts = [
            this.fullScreen() ? 'full-screen' : null,
            this.position(),
            'open',
            'modal',
        ].filter((part) => !!part);
        return parts.join(' ');
    }
    bindMaskClickListener() {
        if (!this.customMask) {
            return;
        }
        if (this.removeMaskClickListener) {
            this.removeMaskClickListener();
            this.removeMaskClickListener = null;
        }
        if (!this.dismissible()) {
            return;
        }
        this.removeMaskClickListener = this.renderer.listen(this.customMask, 'click', (event) => {
            if (this.dismissible()) {
                event.preventDefault();
                this.onClose();
            }
        });
    }
    destroyCustomMask() {
        if (this.removeMaskClickListener) {
            this.removeMaskClickListener();
            this.removeMaskClickListener = null;
        }
        if (this.customMask) {
            const parent = this.customMask.parentNode;
            if (parent) {
                this.renderer.removeChild(parent, this.customMask);
            }
            this.customMask = null;
        }
        if (this.blockScroll()) {
            unblockBodyScroll();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Drawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Drawer, isStandalone: true, selector: "mt-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, loadingHeader: { classPropertyName: "loadingHeader", publicName: "loadingHeader", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, showMaximizeToggle: { classPropertyName: "showMaximizeToggle", publicName: "showMaximizeToggle", isSignal: true, isRequired: false, transformFunction: null }, maximizeTooltip: { classPropertyName: "maximizeTooltip", publicName: "maximizeTooltip", isSignal: true, isRequired: false, transformFunction: null }, restoreTooltip: { classPropertyName: "restoreTooltip", publicName: "restoreTooltip", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", visibleChange: "visibleChange", onShow: "onShow", onHide: "onHide", maximized: "maximizedChange" }, ngImport: i0, template: "<p-drawer\n  [(visible)]=\"visible\"\n  [position]=\"position()\"\n  [fullScreen]=\"fullScreen()\"\n  [modal]=\"false\"\n  [closable]=\"false\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [blockScroll]=\"blockScroll()\"\n  [dismissible]=\"dismissible()\"\n  [appendTo]=\"resolvedAppendTo()\"\n  [transitionOptions]=\"transitionOptions()\"\n  [styleClass]=\"resolvedStyleClass()\"\n  (visibleChange)=\"visibleChangeEvent($event)\"\n  (onShow)=\"onShowEvent()\"\n  (onHide)=\"onHideEvent()\"\n>\n  <ng-template #header>\n    <div\n      class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\n    >\n      @if (loadingHeader()) {\n        <div class=\"flex flex-1 flex-col gap-2\">\n          <p-skeleton width=\"12rem\" height=\"1.75rem\" borderRadius=\"0.5rem\" />\n          <p-skeleton width=\"8rem\" height=\"0.875rem\" borderRadius=\"0.5rem\" />\n        </div>\n      } @else {\n        <div class=\"flex flex-1 flex-col\">\n          <h3 class=\"text-xl font-semibold\" [innerHTML]=\"title()\"></h3>\n          @if (subtitle()) {\n            <p class=\"text-sm text-surface-500\" [innerHTML]=\"subtitle()\"></p>\n          }\n        </div>\n      }\n      <div class=\"flex items-center gap-2\">\n        @if (canShowMaximizeToggle()) {\n          <mt-button\n            (onClick)=\"toggleMaximized()\"\n            variant=\"outlined\"\n            styleClass=\"!bg-white\"\n            severity=\"secondary\"\n            [icon]=\"maximized() ? 'layout.minimize-01' : 'layout.maximize-01'\"\n            [tooltip]=\"\n              maximized() ? resolvedRestoreTooltip() : resolvedMaximizeTooltip()\n            \"\n          >\n          </mt-button>\n        }\n        <mt-button\n          (onClick)=\"onClose()\"\n          variant=\"outlined\"\n          styleClass=\"!bg-white\"\n          icon=\"general.x-close\"\n          severity=\"secondary\"\n        >\n        </mt-button>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-content select=\"[content]\"></ng-content>\n\n  <ng-template #footer>\n    <div class=\"flex justify-end p-3 gap-2 border-t border-surface-200\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </ng-template>\n</p-drawer>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Drawer, decorators: [{
            type: Component,
            args: [{ selector: 'mt-drawer', standalone: true, imports: [CommonModule, DrawerModule, SkeletonModule, Button], template: "<p-drawer\n  [(visible)]=\"visible\"\n  [position]=\"position()\"\n  [fullScreen]=\"fullScreen()\"\n  [modal]=\"false\"\n  [closable]=\"false\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [blockScroll]=\"blockScroll()\"\n  [dismissible]=\"dismissible()\"\n  [appendTo]=\"resolvedAppendTo()\"\n  [transitionOptions]=\"transitionOptions()\"\n  [styleClass]=\"resolvedStyleClass()\"\n  (visibleChange)=\"visibleChangeEvent($event)\"\n  (onShow)=\"onShowEvent()\"\n  (onHide)=\"onHideEvent()\"\n>\n  <ng-template #header>\n    <div\n      class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\n    >\n      @if (loadingHeader()) {\n        <div class=\"flex flex-1 flex-col gap-2\">\n          <p-skeleton width=\"12rem\" height=\"1.75rem\" borderRadius=\"0.5rem\" />\n          <p-skeleton width=\"8rem\" height=\"0.875rem\" borderRadius=\"0.5rem\" />\n        </div>\n      } @else {\n        <div class=\"flex flex-1 flex-col\">\n          <h3 class=\"text-xl font-semibold\" [innerHTML]=\"title()\"></h3>\n          @if (subtitle()) {\n            <p class=\"text-sm text-surface-500\" [innerHTML]=\"subtitle()\"></p>\n          }\n        </div>\n      }\n      <div class=\"flex items-center gap-2\">\n        @if (canShowMaximizeToggle()) {\n          <mt-button\n            (onClick)=\"toggleMaximized()\"\n            variant=\"outlined\"\n            styleClass=\"!bg-white\"\n            severity=\"secondary\"\n            [icon]=\"maximized() ? 'layout.minimize-01' : 'layout.maximize-01'\"\n            [tooltip]=\"\n              maximized() ? resolvedRestoreTooltip() : resolvedMaximizeTooltip()\n            \"\n          >\n          </mt-button>\n        }\n        <mt-button\n          (onClick)=\"onClose()\"\n          variant=\"outlined\"\n          styleClass=\"!bg-white\"\n          icon=\"general.x-close\"\n          severity=\"secondary\"\n        >\n        </mt-button>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-content select=\"[content]\"></ng-content>\n\n  <ng-template #footer>\n    <div class=\"flex justify-end p-3 gap-2 border-t border-surface-200\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </ng-template>\n</p-drawer>\n" }]
        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], blockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockScroll", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], loadingHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingHeader", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], transitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionOptions", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], showMaximizeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMaximizeToggle", required: false }] }], maximizeTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizeTooltip", required: false }] }], restoreTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreTooltip", required: false }] }], maximized: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximized", required: false }] }, { type: i0.Output, args: ["maximizedChange"] }] } });

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

export { Drawer };
//# sourceMappingURL=masterteam-components-drawer.mjs.map
