import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import * as i1 from '@angular/cdk/portal';
import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, PortalModule, ComponentPortal } from '@angular/cdk/portal';
import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, TemplateRef, Directive, InjectionToken, output, input, model, contentChild, viewChild, PLATFORM_ID, ElementRef, ViewContainerRef, ChangeDetectorRef, DestroyRef, signal, computed, effect, ChangeDetectionStrategy, Component, EventEmitter, Inject, Injector, Injectable } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';
import { ZTranslateService, ZOverlayContainerService, ZOverlayZIndexService } from '@shival99/z-ui/services';
import { zDetectBrowser, zMergeClasses } from '@shival99/z-ui/utils';
import { cva } from 'class-variance-authority';
import { __decorate, __param, __metadata } from 'tslib';
import { Subject, takeUntil, fromEvent, filter } from 'rxjs';

class ZDrawerContentDirective {
    templateRef = inject((TemplateRef));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZDrawerContentDirective, isStandalone: true, selector: "[z-drawer-content], [zDrawerContent]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[z-drawer-content], [zDrawerContent]',
                    standalone: true,
                }]
        }] });

class ZDrawerFooterDirective {
    templateRef = inject((TemplateRef));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZDrawerFooterDirective, isStandalone: true, selector: "[z-drawer-footer], [zDrawerFooter]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerFooterDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[z-drawer-footer], [zDrawerFooter]',
                    standalone: true,
                }]
        }] });

class ZDrawerHeaderDirective {
    templateRef = inject((TemplateRef));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZDrawerHeaderDirective, isStandalone: true, selector: "[z-drawer-header], [zDrawerHeader]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerHeaderDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[z-drawer-header], [zDrawerHeader]',
                    standalone: true,
                }]
        }] });

const Z_DRAWER_DATA = new InjectionToken('Z_DRAWER_DATA');
const Z_DRAWER_ANIMATION_DURATION = 250;
var ZDrawerTriggerAction;
(function (ZDrawerTriggerAction) {
    ZDrawerTriggerAction["CANCEL"] = "cancel";
    ZDrawerTriggerAction["OK"] = "ok";
})(ZDrawerTriggerAction || (ZDrawerTriggerAction = {}));
const noopFun = () => { };
/**
 * Configuration options for z-drawer component.
 *
 * @template T - The type of the content component
 * @template U - The type of the data passed to the drawer
 */
class ZDrawerOptions {
    /** Icon for the cancel button */
    zCancelIcon;
    /** Text for the cancel button. Set to null to hide the button */
    zCancelText;
    /** Whether the drawer is closable (shows close button) */
    zClosable;
    /** Drawer content - can be a component, template, or string */
    zContent;
    /** Custom CSS classes for the drawer */
    class;
    /** Custom CSS classes for the drawer body */
    zBodyClass;
    /** Data to be passed to the content component via Z_DRAWER_DATA token */
    zData;
    /**
     * Observable for deferred data loading before showing drawer content.
     * Drawer will show a loading spinner until the Observable completes.
     * The resolved data will be available via Z_DRAWER_DATA.
     */
    zDefer;
    /** Description text shown below the title */
    zDescription;
    /** Whether to hide the default footer */
    zHideFooter;
    /** Whether to hide the default header */
    zHideHeader;
    /**
     * WritableSignal to control loading state of the OK button.
     * Use this when submitting forms or calling APIs.
     */
    zLoading;
    /** Whether clicking mask closes the drawer */
    zMaskClosable;
    /** Whether OK button has destructive (red) style */
    zOkDestructive;
    /** Whether OK button is disabled */
    zOkDisabled;
    /** Overlay style: 'dark' (black overlay) or 'blur' (backdrop blur) */
    zOverlay;
    /** Icon for the OK button */
    zOkIcon;
    /** Text for the OK button. Set to null to hide the button */
    zOkText;
    /** Callback or EventEmitter when cancel is clicked */
    zOnCancel = noopFun;
    /** Callback or EventEmitter when OK is clicked */
    zOnOk = noopFun;
    /** Drawer title - supports string, HTML string, or TemplateRef */
    zTitle;
    /** ViewContainerRef for the drawer portal */
    zViewContainerRef;
    /** Drawer width for left/right placement (e.g., '400px', '80%') */
    zWidth;
    /** Drawer height for top/bottom placement (e.g., '400px', '50%') */
    zHeight;
    /** Placement of the drawer: 'left', 'right', 'top', 'bottom' */
    zPlacement;
    /** Force shadow on header/footer regardless of scroll state */
    zShadow;
    /** Shape of the drawer: 'rounded' (with border-radius) or 'square' (no border-radius) */
    zShape;
    /** WritableSignal to control content loading state (shows skeleton when true) */
    zContentLoading;
    /** Number of skeleton rows to show when content is loading (default: 5 for left/right, 3 for top/bottom) */
    zSkeletonRows;
}

const getOverlayType = () => {
    const browser = zDetectBrowser();
    return browser.name === 'Chrome' ? 'dark' : 'blur';
};

const zDrawerVariants = cva(['fixed z-50 flex flex-col bg-background overflow-hidden'].join(' '), {
    variants: {
        placement: {
            left: 'left-0 top-0 h-full max-w-[90vw] dark:border-r shadow-[3px_0_10px_rgba(0,0,0,0.08)]',
            right: 'right-0 top-0 h-full max-w-[90vw] dark:border-l shadow-[-3px_0_10px_rgba(0,0,0,0.08)]',
            top: 'top-0 left-0 w-full max-h-[90vh] dark:border-b shadow-[0_3px_10px_rgba(0,0,0,0.08)]',
            bottom: 'bottom-0 left-0 w-full max-h-[90vh] dark:border-t shadow-[0_-3px_10px_rgba(0,0,0,0.08)]',
        },
        shape: {
            rounded: '',
            square: '',
        },
    },
    compoundVariants: [
        { placement: 'left', shape: 'rounded', class: 'rounded-r-lg' },
        { placement: 'right', shape: 'rounded', class: 'rounded-l-lg' },
        { placement: 'top', shape: 'rounded', class: 'rounded-b-lg' },
        { placement: 'bottom', shape: 'rounded', class: 'rounded-t-lg' },
    ],
    defaultVariants: {
        placement: 'right',
        shape: 'rounded',
    },
});

class ZDrawerComponent extends BasePortalOutlet {
    zOnOk = output();
    zOnCancel = output();
    zAfterClose = output();
    zScrollbar = output();
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zBodyClass = input('', ...(ngDevMode ? [{ debugName: "zBodyClass" }] : []));
    zVisible = model(false, ...(ngDevMode ? [{ debugName: "zVisible" }] : []));
    zTitle = input(...(ngDevMode ? [undefined, { debugName: "zTitle" }] : []));
    zDescription = input(...(ngDevMode ? [undefined, { debugName: "zDescription" }] : []));
    zWidth = input('400px', ...(ngDevMode ? [{ debugName: "zWidth" }] : []));
    zHeight = input('400px', ...(ngDevMode ? [{ debugName: "zHeight" }] : []));
    zPlacement = input('right', ...(ngDevMode ? [{ debugName: "zPlacement" }] : []));
    zClosable = input(true, ...(ngDevMode ? [{ debugName: "zClosable" }] : []));
    zMaskClosable = input(true, ...(ngDevMode ? [{ debugName: "zMaskClosable" }] : []));
    zHideFooter = input(false, ...(ngDevMode ? [{ debugName: "zHideFooter" }] : []));
    zHideHeader = input(false, ...(ngDevMode ? [{ debugName: "zHideHeader" }] : []));
    zOkText = input(null, ...(ngDevMode ? [{ debugName: "zOkText" }] : []));
    zCancelText = input(null, ...(ngDevMode ? [{ debugName: "zCancelText" }] : []));
    zOkDestructive = input(false, ...(ngDevMode ? [{ debugName: "zOkDestructive" }] : []));
    zOkDisabled = input(false, ...(ngDevMode ? [{ debugName: "zOkDisabled" }] : []));
    zLoading = input(false, ...(ngDevMode ? [{ debugName: "zLoading" }] : []));
    zOverlay = input(getOverlayType(), ...(ngDevMode ? [{ debugName: "zOverlay" }] : []));
    zShadow = input(false, ...(ngDevMode ? [{ debugName: "zShadow" }] : []));
    zShape = input('rounded', ...(ngDevMode ? [{ debugName: "zShape" }] : []));
    zContentLoading = input(false, ...(ngDevMode ? [{ debugName: "zContentLoading" }] : []));
    zSkeletonRows = input(null, ...(ngDevMode ? [{ debugName: "zSkeletonRows" }] : []));
    customHeader = contentChild(ZDrawerHeaderDirective, ...(ngDevMode ? [{ debugName: "customHeader" }] : []));
    customContent = contentChild(ZDrawerContentDirective, ...(ngDevMode ? [{ debugName: "customContent" }] : []));
    customFooter = contentChild(ZDrawerFooterDirective, ...(ngDevMode ? [{ debugName: "customFooter" }] : []));
    drawerRef;
    portalOutlet = viewChild(CdkPortalOutlet, ...(ngDevMode ? [{ debugName: "portalOutlet" }] : []));
    dummyTemplateRef = viewChild('dummyTemplate', ...(ngDevMode ? [{ debugName: "dummyTemplateRef" }] : []));
    mainContentRef = viewChild('mainContent', ...(ngDevMode ? [{ debugName: "mainContentRef" }] : []));
    config = inject((ZDrawerOptions), { optional: true }) || new ZDrawerOptions();
    _platformId = inject(PLATFORM_ID);
    _host = inject((ElementRef));
    _overlay = inject(Overlay);
    _viewContainerRef = inject(ViewContainerRef);
    _cdr = inject(ChangeDetectorRef);
    _destroyRef = inject(DestroyRef);
    _zTranslate = inject(ZTranslateService);
    _overlayContainerService = inject(ZOverlayContainerService);
    _zIndexService = inject(ZOverlayZIndexService);
    _templateOverlayRef = null;
    _originalParent = null;
    _originalNextSibling = null;
    _backdropSubscription = null;
    _closeTimeout = null;
    isLeaving = signal(false, ...(ngDevMode ? [{ debugName: "isLeaving" }] : []));
    hasScrollableContent = signal(false, ...(ngDevMode ? [{ debugName: "hasScrollableContent" }] : []));
    isScrolledFromTop = signal(false, ...(ngDevMode ? [{ debugName: "isScrolledFromTop" }] : []));
    isScrolledToBottom = signal(false, ...(ngDevMode ? [{ debugName: "isScrolledToBottom" }] : []));
    isServiceMode = computed(() => !!this.drawerRef, ...(ngDevMode ? [{ debugName: "isServiceMode" }] : []));
    isTemplateMode = computed(() => !this.isServiceMode(), ...(ngDevMode ? [{ debugName: "isTemplateMode" }] : []));
    shouldRenderContent = computed(() => this.zVisible() || this.isLeaving(), ...(ngDevMode ? [{ debugName: "shouldRenderContent" }] : []));
    isStringContent = computed(() => typeof this.config.zContent === 'string', ...(ngDevMode ? [{ debugName: "isStringContent" }] : []));
    shouldShowShadow = computed(() => true, ...(ngDevMode ? [{ debugName: "shouldShowShadow" }] : []));
    _lastScrollHeight = 0;
    ngAfterViewChecked() {
        this._checkScrollState();
    }
    _checkScrollState() {
        const scrollbar = this.mainContentRef();
        if (!scrollbar) {
            return;
        }
        const viewport = scrollbar.nativeElement.querySelector('.ng-scroll-viewport');
        if (!viewport) {
            return;
        }
        if (viewport.scrollHeight === this._lastScrollHeight) {
            return;
        }
        this._lastScrollHeight = viewport.scrollHeight;
        const hasVerticalScroll = viewport.scrollHeight > viewport.clientHeight;
        this.hasScrollableContent.set(hasVerticalScroll);
    }
    onContentScroll(event) {
        const target = event.target;
        if (!target) {
            return;
        }
        const { scrollTop } = target;
        const { scrollHeight } = target;
        const { clientHeight } = target;
        this.isScrolledFromTop.set(scrollTop > 0);
        this.isScrolledToBottom.set(scrollTop + clientHeight >= scrollHeight - 1);
    }
    effectiveTitle = computed(() => {
        this._zTranslate.currentLang();
        return this.isServiceMode() ? this.config.zTitle : this.zTitle();
    }, ...(ngDevMode ? [{ debugName: "effectiveTitle" }] : []));
    effectiveDescription = computed(() => this.isServiceMode() ? this.config.zDescription : this.zDescription(), ...(ngDevMode ? [{ debugName: "effectiveDescription" }] : []));
    hasEffectiveDescription = computed(() => !!this.effectiveDescription(), ...(ngDevMode ? [{ debugName: "hasEffectiveDescription" }] : []));
    headerContentClasses = computed(() => zMergeClasses('flex w-full justify-between overflow-hidden px-4', this.hasEffectiveDescription() ? 'items-start' : 'items-center'), ...(ngDevMode ? [{ debugName: "headerContentClasses" }] : []));
    effectiveBodyClass = computed(() => this.isServiceMode() ? this.config.zBodyClass : this.zBodyClass(), ...(ngDevMode ? [{ debugName: "effectiveBodyClass" }] : []));
    bodyClasses = computed(() => zMergeClasses('flex min-h-0 flex-col gap-4 px-4 py-4', this.effectiveBodyClass()), ...(ngDevMode ? [{ debugName: "bodyClasses" }] : []));
    effectiveClosable = computed(() => this.isServiceMode() ? (this.config.zClosable ?? true) : this.zClosable(), ...(ngDevMode ? [{ debugName: "effectiveClosable" }] : []));
    effectiveHideFooter = computed(() => this.isServiceMode() ? this.config.zHideFooter : this.zHideFooter(), ...(ngDevMode ? [{ debugName: "effectiveHideFooter" }] : []));
    effectiveHideHeader = computed(() => this.isServiceMode() ? (this.config.zHideHeader ?? false) : this.zHideHeader(), ...(ngDevMode ? [{ debugName: "effectiveHideHeader" }] : []));
    effectiveOkText = computed(() => (this.isServiceMode() ? this.config.zOkText : this.zOkText()), ...(ngDevMode ? [{ debugName: "effectiveOkText" }] : []));
    effectiveCancelText = computed(() => this.isServiceMode() ? this.config.zCancelText : this.zCancelText(), ...(ngDevMode ? [{ debugName: "effectiveCancelText" }] : []));
    effectiveOkDestructive = computed(() => this.isServiceMode() ? this.config.zOkDestructive : this.zOkDestructive(), ...(ngDevMode ? [{ debugName: "effectiveOkDestructive" }] : []));
    effectiveOkDisabled = computed(() => this.isServiceMode() ? this.config.zOkDisabled : this.zOkDisabled(), ...(ngDevMode ? [{ debugName: "effectiveOkDisabled" }] : []));
    effectiveLoading = computed(() => {
        if (this.isServiceMode()) {
            return this.drawerRef?.loading() || (this.config.zLoading?.() ?? false);
        }
        return this.zLoading();
    }, ...(ngDevMode ? [{ debugName: "effectiveLoading" }] : []));
    effectiveContentLoading = computed(() => {
        if (this.isServiceMode()) {
            return this.config.zContentLoading?.() ?? false;
        }
        return this.zContentLoading();
    }, ...(ngDevMode ? [{ debugName: "effectiveContentLoading" }] : []));
    effectiveSkeletonRows = computed(() => {
        if (this.isServiceMode() && this.config.zSkeletonRows != null) {
            return this.config.zSkeletonRows;
        }
        if (this.zSkeletonRows() != null) {
            return this.zSkeletonRows();
        }
        const placement = this.effectivePlacement();
        return placement === 'left' || placement === 'right' ? 6 : 3;
    }, ...(ngDevMode ? [{ debugName: "effectiveSkeletonRows" }] : []));
    effectivePlacement = computed(() => {
        if (this.isServiceMode()) {
            return this.config.zPlacement ?? 'right';
        }
        return this.zPlacement();
    }, ...(ngDevMode ? [{ debugName: "effectivePlacement" }] : []));
    effectiveShadow = computed(() => {
        if (this.isServiceMode()) {
            return this.config.zShadow ?? false;
        }
        return this.zShadow();
    }, ...(ngDevMode ? [{ debugName: "effectiveShadow" }] : []));
    effectiveShape = computed(() => {
        if (this.isServiceMode()) {
            return this.config.zShape ?? 'rounded';
        }
        return this.zShape();
    }, ...(ngDevMode ? [{ debugName: "effectiveShape" }] : []));
    effectiveWidth = computed(() => {
        const placement = this.effectivePlacement();
        if (placement === 'top' || placement === 'bottom') {
            return null;
        }
        if (this.isServiceMode()) {
            return this.zWidth() || this.config.zWidth || null;
        }
        return this.shouldRenderContent() ? this.zWidth() : null;
    }, ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : []));
    effectiveHeight = computed(() => {
        const placement = this.effectivePlacement();
        if (placement === 'left' || placement === 'right') {
            return null;
        }
        if (this.isServiceMode()) {
            return this.zHeight() || this.config.zHeight || null;
        }
        return this.shouldRenderContent() ? this.zHeight() : null;
    }, ...(ngDevMode ? [{ debugName: "effectiveHeight" }] : []));
    isDeferLoading = computed(() => {
        if (!this.isServiceMode()) {
            return false;
        }
        return !!this.config.zDefer && !this.portalOutlet()?.hasAttached();
    }, ...(ngDevMode ? [{ debugName: "isDeferLoading" }] : []));
    classes = computed(() => zMergeClasses(zDrawerVariants({ placement: this.effectivePlacement(), shape: this.effectiveShape() }), this.isServiceMode() ? this.config.class : this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
    hostClasses = computed(() => {
        const baseClasses = this.classes();
        if (this.isServiceMode()) {
            return `${baseClasses} z-drawer-service-mode`.trim();
        }
        if (this.shouldRenderContent()) {
            return `${baseClasses} z-drawer-template-mode`.trim();
        }
        return 'z-drawer-template-host';
    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
    constructor() {
        super();
        effect(() => {
            this._zTranslate.currentLang();
            this._cdr.markForCheck();
        });
        effect(() => {
            const scrollbar = this.mainContentRef();
            if (scrollbar) {
                this.zScrollbar.emit(scrollbar);
            }
        });
        effect(() => {
            const visible = this.zVisible();
            if (visible && this.isTemplateMode() && !this._templateOverlayRef) {
                this._openTemplateOverlay();
                return;
            }
            if (!visible && this.isTemplateMode() && this._templateOverlayRef && !this.isLeaving()) {
                this._closeWithAnimation();
            }
        });
    }
    ngOnDestroy() {
        this._clearCloseTimeout();
        this._disposeTemplateOverlay();
    }
    isDestroyed() {
        return this._destroyRef.destroyed;
    }
    getNativeElement() {
        return this._host.nativeElement;
    }
    attachComponentPortal(portal) {
        this._cdr.detectChanges();
        const outlet = this.portalOutlet();
        if (outlet?.hasAttached()) {
            throw new Error('Attempting to attach drawer content after content is already attached');
        }
        return outlet?.attachComponentPortal(portal);
    }
    attachTemplatePortal(portal) {
        const outlet = this.portalOutlet();
        if (outlet?.hasAttached()) {
            throw new Error('Attempting to attach drawer content after content is already attached');
        }
        return outlet?.attachTemplatePortal(portal);
    }
    onOkClick() {
        if (this.effectiveLoading()) {
            return;
        }
        this.zOnOk.emit();
    }
    onCloseClick() {
        if (this.effectiveLoading()) {
            return;
        }
        this.zOnCancel.emit();
        if (this.isTemplateMode()) {
            this._closeWithAnimation();
        }
    }
    onBackdropClick() {
        if (this.zMaskClosable() && !this.effectiveLoading()) {
            this.zOnCancel.emit();
            this._closeWithAnimation();
        }
    }
    open() {
        this.isLeaving.set(false);
        this.zVisible.set(true);
    }
    close() {
        this._closeWithAnimation();
    }
    _createOverlay() {
        if (!isPlatformBrowser(this._platformId)) {
            return null;
        }
        const overlayType = this.zOverlay();
        const backdropClass = overlayType === 'blur' ? 'z-drawer-backdrop-blur' : 'z-drawer-backdrop-dark';
        const overlayConfig = new OverlayConfig({
            hasBackdrop: true,
            backdropClass,
            panelClass: 'z-drawer-overlay-pane',
            positionStrategy: this._overlay.position().global(),
            scrollStrategy: this._overlay.scrollStrategies.block(),
        });
        return this._overlay.create(overlayConfig);
    }
    _openTemplateOverlay() {
        if (this._templateOverlayRef) {
            return;
        }
        const dummyRef = this.dummyTemplateRef();
        if (!dummyRef) {
            return;
        }
        this._templateOverlayRef = this._createOverlay();
        if (!this._templateOverlayRef) {
            return;
        }
        this._zIndexService.applyToOverlay(this._templateOverlayRef);
        const hostElement = this._host.nativeElement;
        this._originalParent = hostElement.parentElement;
        this._originalNextSibling = hostElement.nextSibling;
        const portal = new TemplatePortal(dummyRef, this._viewContainerRef);
        this._templateOverlayRef.attach(portal);
        const overlayPane = this._templateOverlayRef.overlayElement;
        overlayPane.style.position = 'static';
        overlayPane.appendChild(hostElement);
        this._backdropSubscription = this._templateOverlayRef.backdropClick().subscribe(() => {
            this.onBackdropClick();
        });
    }
    _closeWithAnimation() {
        if (this.isLeaving()) {
            return;
        }
        this._overlayContainerService.notifyClosing();
        this.isLeaving.set(true);
        this.zVisible.set(false);
        const hostElement = this._host.nativeElement;
        const { backdropElement } = this._templateOverlayRef ?? {};
        if (backdropElement) {
            backdropElement.classList.add('z-backdrop-leaving');
        }
        hostElement.classList.add('drawer-leave');
        this._clearCloseTimeout();
        this._closeTimeout = setTimeout(() => {
            if (this._destroyRef.destroyed) {
                return;
            }
            this.isLeaving.set(false);
            this._disposeTemplateOverlay();
            this.zAfterClose.emit();
        }, Z_DRAWER_ANIMATION_DURATION);
    }
    _clearCloseTimeout() {
        if (!this._closeTimeout) {
            return;
        }
        clearTimeout(this._closeTimeout);
        this._closeTimeout = null;
    }
    _disposeTemplateOverlay() {
        const hostElement = this._host.nativeElement;
        if (this._originalParent && this._originalNextSibling) {
            this._originalParent.insertBefore(hostElement, this._originalNextSibling);
        }
        if (this._originalParent && !this._originalNextSibling) {
            this._originalParent.appendChild(hostElement);
        }
        hostElement.classList.remove('drawer-leave');
        if (this._templateOverlayRef) {
            this._templateOverlayRef.dispose();
            this._templateOverlayRef = null;
        }
        this._originalParent = null;
        this._originalNextSibling = null;
        if (this._backdropSubscription) {
            this._backdropSubscription.unsubscribe();
            this._backdropSubscription = null;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZDrawerComponent, isStandalone: true, selector: "z-drawer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zBodyClass: { classPropertyName: "zBodyClass", publicName: "zBodyClass", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zHeight: { classPropertyName: "zHeight", publicName: "zHeight", isSignal: true, isRequired: false, transformFunction: null }, zPlacement: { classPropertyName: "zPlacement", publicName: "zPlacement", isSignal: true, isRequired: false, transformFunction: null }, zClosable: { classPropertyName: "zClosable", publicName: "zClosable", isSignal: true, isRequired: false, transformFunction: null }, zMaskClosable: { classPropertyName: "zMaskClosable", publicName: "zMaskClosable", isSignal: true, isRequired: false, transformFunction: null }, zHideFooter: { classPropertyName: "zHideFooter", publicName: "zHideFooter", isSignal: true, isRequired: false, transformFunction: null }, zHideHeader: { classPropertyName: "zHideHeader", publicName: "zHideHeader", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zOkDestructive: { classPropertyName: "zOkDestructive", publicName: "zOkDestructive", isSignal: true, isRequired: false, transformFunction: null }, zOkDisabled: { classPropertyName: "zOkDisabled", publicName: "zOkDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null }, zShadow: { classPropertyName: "zShadow", publicName: "zShadow", isSignal: true, isRequired: false, transformFunction: null }, zShape: { classPropertyName: "zShape", publicName: "zShape", isSignal: true, isRequired: false, transformFunction: null }, zContentLoading: { classPropertyName: "zContentLoading", publicName: "zContentLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnOk: "zOnOk", zOnCancel: "zOnCancel", zAfterClose: "zAfterClose", zScrollbar: "zScrollbar", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()", "style.width": "effectiveWidth()", "style.height": "effectiveHeight()", "attr.data-placement": "effectivePlacement()" } }, providers: [TranslatePipe], queries: [{ propertyName: "customHeader", first: true, predicate: ZDrawerHeaderDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ZDrawerContentDirective, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: ZDrawerFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }, { propertyName: "dummyTemplateRef", first: true, predicate: ["dummyTemplate"], descendants: true, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zDrawer"], usesInheritance: true, ngImport: i0, template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (customHeader(); as headerDir) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex items-start justify-between px-4\">\n          <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n        </div>\n      </header>\n    } @else if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n          <div [class]=\"headerContentClasses()\">\n            <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-drawer-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4\n                      data-testid=\"z-drawer-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"$any(title) | translate\">\n                      {{ $any(title) | translate }}\n                    </h4>\n                  }\n                }\n              }\n              @if (effectiveDescription(); as description) {\n                @switch (description | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                  }\n                  @case ('html') {\n                    <p\n                      data-testid=\"z-drawer-description\"\n                      class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                      [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                  }\n                  @default {\n                    <p data-testid=\"z-drawer-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                      {{ $any(description) | translate }}\n                    </p>\n                  }\n                }\n              }\n            </div>\n            @if (effectiveClosable()) {\n              <button\n                type=\"button\"\n                data-testid=\"z-drawer-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            }\n          </div>\n        </header>\n      } @else if (effectiveClosable()) {\n        <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n          <div class=\"flex justify-end px-4\">\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              class=\"-mt-1 -mr-2 shrink-0\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          </div>\n        </header>\n      }\n    }\n\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (customFooter(); as footerDir) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n        </div>\n      </footer>\n    } @else if (!effectiveHideFooter()) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          @if (effectiveCancelText() !== null) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-cancel-button\"\n              z-button\n              zType=\"outline\"\n              (click)=\"onCloseClick()\">\n              {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n            </button>\n          }\n        </div>\n      </footer>\n    }\n  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n          <div [class]=\"headerContentClasses()\">\n            <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-drawer-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4\n                      data-testid=\"z-drawer-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"$any(title) | translate\">\n                      {{ $any(title) | translate }}\n                    </h4>\n                  }\n                }\n              }\n            </div>\n            @if (effectiveClosable()) {\n              <button\n                type=\"button\"\n                data-testid=\"z-drawer-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            }\n          </div>\n        </header>\n      } @else if (effectiveClosable()) {\n        <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n          <div class=\"flex justify-end px-4\">\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          </div>\n        </header>\n      }\n    }\n\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\n        <ng-template cdkPortalOutlet />\n\n        @if (isStringContent()) {\n          <div data-testid=\"z-drawer-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (!effectiveHideFooter()) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          @if (effectiveCancelText() !== null) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-cancel-button\"\n              z-button\n              zType=\"outline\"\n              (click)=\"onCloseClick()\">\n              @if (config.zCancelIcon) {\n                <z-icon [zType]=\"config.zCancelIcon\" />\n              }\n              {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              @if (config.zOkIcon && !effectiveLoading()) {\n                <z-icon [zType]=\"config.zOkIcon\" />\n              }\n              {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n            </button>\n          }\n        </div>\n      </footer>\n    }\n  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n", styles: [":host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=left].drawer-leave,:host.z-drawer-template-mode[data-placement=left].drawer-leave{--z-exit-translate-x: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right],:host.z-drawer-template-mode[data-placement=right]{--z-enter-translate-x: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right].drawer-leave,:host.z-drawer-template-mode[data-placement=right].drawer-leave{--z-exit-translate-x: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top],:host.z-drawer-template-mode[data-placement=top]{--z-enter-translate-y: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top].drawer-leave,:host.z-drawer-template-mode[data-placement=top].drawer-leave{--z-exit-translate-y: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom],:host.z-drawer-template-mode[data-placement=bottom]{--z-enter-translate-y: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom].drawer-leave,:host.z-drawer-template-mode[data-placement=bottom].drawer-leave{--z-exit-translate-y: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-drawer-header-shadow{box-shadow:0 2px 8px -2px #0000001a;z-index:50}.z-drawer-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a;z-index:50}:host header{padding-top:1rem;padding-bottom:1rem}:host footer{padding-top:1rem;padding-bottom:1rem}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: .125rem}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@angular/cdk/scrolling').then(m => m.CdkScrollable), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe], () => [i1.CdkPortalOutlet, NgTemplateOutlet, import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@angular/cdk/scrolling').then(m => m.CdkScrollable), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe]] });
}
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerComponent, resolveDeferredDeps: () => [import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@angular/cdk/scrolling').then(m => m.CdkScrollable), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe)], resolveMetadata: (ZButtonComponent, ZIconComponent, ZTooltipDirective, NgScrollbar, CdkScrollable, ZContentTypePipe, ZSafeHtmlPipe) => ({ decorators: [{
                type: Component,
                args: [{ selector: 'z-drawer', imports: [
                            PortalModule,
                            NgTemplateOutlet,
                            ZButtonComponent,
                            ZIconComponent,
                            ZContentTypePipe,
                            ZTooltipDirective,
                            ZSkeletonComponent,
                            NgScrollbar,
                            ZSafeHtmlPipe,
                            TranslatePipe,
                            CdkScrollable,
                        ], standalone: true, providers: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                            '[class]': 'hostClasses()',
                            '[style.width]': 'effectiveWidth()',
                            '[style.height]': 'effectiveHeight()',
                            '[attr.data-placement]': 'effectivePlacement()',
                        }, exportAs: 'zDrawer', template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (customHeader(); as headerDir) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex items-start justify-between px-4\">\n          <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n        </div>\n      </header>\n    } @else if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n          <div [class]=\"headerContentClasses()\">\n            <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-drawer-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4\n                      data-testid=\"z-drawer-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"$any(title) | translate\">\n                      {{ $any(title) | translate }}\n                    </h4>\n                  }\n                }\n              }\n              @if (effectiveDescription(); as description) {\n                @switch (description | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                  }\n                  @case ('html') {\n                    <p\n                      data-testid=\"z-drawer-description\"\n                      class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                      [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                  }\n                  @default {\n                    <p data-testid=\"z-drawer-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                      {{ $any(description) | translate }}\n                    </p>\n                  }\n                }\n              }\n            </div>\n            @if (effectiveClosable()) {\n              <button\n                type=\"button\"\n                data-testid=\"z-drawer-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            }\n          </div>\n        </header>\n      } @else if (effectiveClosable()) {\n        <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n          <div class=\"flex justify-end px-4\">\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              class=\"-mt-1 -mr-2 shrink-0\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          </div>\n        </header>\n      }\n    }\n\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (customFooter(); as footerDir) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n        </div>\n      </footer>\n    } @else if (!effectiveHideFooter()) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          @if (effectiveCancelText() !== null) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-cancel-button\"\n              z-button\n              zType=\"outline\"\n              (click)=\"onCloseClick()\">\n              {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n            </button>\n          }\n        </div>\n      </footer>\n    }\n  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n          <div [class]=\"headerContentClasses()\">\n            <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-drawer-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4\n                      data-testid=\"z-drawer-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"$any(title) | translate\">\n                      {{ $any(title) | translate }}\n                    </h4>\n                  }\n                }\n              }\n            </div>\n            @if (effectiveClosable()) {\n              <button\n                type=\"button\"\n                data-testid=\"z-drawer-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            }\n          </div>\n        </header>\n      } @else if (effectiveClosable()) {\n        <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n          <div class=\"flex justify-end px-4\">\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          </div>\n        </header>\n      }\n    }\n\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\n        <ng-template cdkPortalOutlet />\n\n        @if (isStringContent()) {\n          <div data-testid=\"z-drawer-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (!effectiveHideFooter()) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          @if (effectiveCancelText() !== null) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-cancel-button\"\n              z-button\n              zType=\"outline\"\n              (click)=\"onCloseClick()\">\n              @if (config.zCancelIcon) {\n                <z-icon [zType]=\"config.zCancelIcon\" />\n              }\n              {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              @if (config.zOkIcon && !effectiveLoading()) {\n                <z-icon [zType]=\"config.zOkIcon\" />\n              }\n              {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n            </button>\n          }\n        </div>\n      </footer>\n    }\n  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n", styles: [":host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=left].drawer-leave,:host.z-drawer-template-mode[data-placement=left].drawer-leave{--z-exit-translate-x: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right],:host.z-drawer-template-mode[data-placement=right]{--z-enter-translate-x: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right].drawer-leave,:host.z-drawer-template-mode[data-placement=right].drawer-leave{--z-exit-translate-x: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top],:host.z-drawer-template-mode[data-placement=top]{--z-enter-translate-y: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top].drawer-leave,:host.z-drawer-template-mode[data-placement=top].drawer-leave{--z-exit-translate-y: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom],:host.z-drawer-template-mode[data-placement=bottom]{--z-enter-translate-y: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom].drawer-leave,:host.z-drawer-template-mode[data-placement=bottom].drawer-leave{--z-exit-translate-y: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-drawer-header-shadow{box-shadow:0 2px 8px -2px #0000001a;z-index:50}.z-drawer-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a;z-index:50}:host header{padding-top:1rem;padding-bottom:1rem}:host footer{padding-top:1rem;padding-bottom:1rem}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: .125rem}\n"] }]
            }], ctorParameters: () => [], propDecorators: { zOnOk: [{ type: i0.Output, args: ["zOnOk"] }], zOnCancel: [{ type: i0.Output, args: ["zOnCancel"] }], zAfterClose: [{ type: i0.Output, args: ["zAfterClose"] }], zScrollbar: [{ type: i0.Output, args: ["zScrollbar"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zBodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBodyClass", required: false }] }], zVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVisible", required: false }] }, { type: i0.Output, args: ["zVisibleChange"] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDescription", required: false }] }], zWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWidth", required: false }] }], zHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeight", required: false }] }], zPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlacement", required: false }] }], zClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClosable", required: false }] }], zMaskClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaskClosable", required: false }] }], zHideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideFooter", required: false }] }], zHideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideHeader", required: false }] }], zOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkText", required: false }] }], zCancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCancelText", required: false }] }], zOkDestructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkDestructive", required: false }] }], zOkDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkDisabled", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], zShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShadow", required: false }] }], zShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShape", required: false }] }], zContentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], customHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerHeaderDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerContentDirective), { isSignal: true }] }], customFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerFooterDirective), { isSignal: true }] }], portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], dummyTemplateRef: [{ type: i0.ViewChild, args: ['dummyTemplate', { isSignal: true }] }], mainContentRef: [{ type: i0.ViewChild, args: ['mainContent', { isSignal: true }] }] } }) });

let ZDrawerRef = class ZDrawerRef {
    _overlayRef;
    _config;
    _containerInstance;
    _platformId;
    _destroy$ = new Subject();
    _isClosing = false;
    _result;
    componentInstance = null;
    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
    zAfterClose = new EventEmitter();
    constructor(_overlayRef, _config, _containerInstance, _platformId) {
        this._overlayRef = _overlayRef;
        this._config = _config;
        this._containerInstance = _containerInstance;
        this._platformId = _platformId;
        this._containerInstance.zOnCancel.subscribe(() => this._trigger(ZDrawerTriggerAction.CANCEL));
        this._containerInstance.zOnOk.subscribe(() => this._trigger(ZDrawerTriggerAction.OK));
        if ((this._config.zMaskClosable ?? true) && isPlatformBrowser(this._platformId)) {
            this._overlayRef
                .outsidePointerEvents()
                .pipe(takeUntil(this._destroy$))
                .subscribe(() => {
                if (!this.loading()) {
                    this._trigger(ZDrawerTriggerAction.CANCEL);
                }
            });
        }
        if (isPlatformBrowser(this._platformId)) {
            fromEvent(document, 'keydown')
                .pipe(filter(event => event.key === 'Escape'), takeUntil(this._destroy$))
                .subscribe(() => {
                if (!this.loading()) {
                    this._trigger(ZDrawerTriggerAction.CANCEL);
                }
            });
        }
    }
    setLoading(value) {
        this.loading.set(value);
    }
    close(result) {
        if (this._isClosing) {
            return;
        }
        this._isClosing = true;
        this._result = result;
        if (isPlatformBrowser(this._platformId)) {
            const hostElement = this._containerInstance.getNativeElement();
            hostElement.classList.add('drawer-leave');
            const { backdropElement } = this._overlayRef;
            if (backdropElement) {
                backdropElement.classList.add('z-backdrop-leaving');
            }
        }
        setTimeout(() => {
            if (!this._containerInstance.isDestroyed()) {
                this._containerInstance.zAfterClose.emit();
            }
            this.zAfterClose.emit(this._result);
            if (this._overlayRef) {
                if (this._overlayRef.hasAttached()) {
                    this._overlayRef.detachBackdrop();
                }
                this._overlayRef.dispose();
            }
            if (!this._destroy$.closed) {
                this._destroy$.next();
                this._destroy$.complete();
            }
        }, Z_DRAWER_ANIMATION_DURATION);
    }
    _trigger(action) {
        if (this.loading()) {
            return;
        }
        const trigger = {
            ok: this._config.zOnOk,
            cancel: this._config.zOnCancel,
        }[action];
        if (trigger instanceof EventEmitter) {
            trigger.emit(this._getContentComponent());
            return;
        }
        if (typeof trigger === 'function') {
            const result = trigger(this._getContentComponent(), this);
            this._closeWithResult(result);
            return;
        }
        this.close();
    }
    _getContentComponent() {
        return this.componentInstance;
    }
    _closeWithResult(result) {
        if (result !== false) {
            this.close(result);
        }
    }
};
ZDrawerRef = __decorate([
    __param(3, Inject(PLATFORM_ID)),
    __metadata("design:paramtypes", [OverlayRef,
        ZDrawerOptions,
        ZDrawerComponent, Object])
], ZDrawerRef);

class ZDrawerService {
    _overlay = inject(Overlay);
    _injector = inject(Injector);
    _platformId = inject(PLATFORM_ID);
    _zIndexService = inject(ZOverlayZIndexService);
    create(config) {
        return this._open(config.zContent, config);
    }
    _open(componentOrTemplateRef, config) {
        const overlayRef = this._createOverlay(config);
        if (!overlayRef) {
            return new ZDrawerRef(undefined, config, undefined, this._platformId);
        }
        const drawerContainer = this._attachDrawerContainer(overlayRef, config);
        const drawerRef = this._attachDrawerContent(componentOrTemplateRef, drawerContainer, overlayRef, config);
        return drawerRef;
    }
    _createOverlay(config) {
        if (!isPlatformBrowser(this._platformId)) {
            return undefined;
        }
        const overlayType = config.zOverlay ?? getOverlayType();
        const backdropClass = overlayType === 'blur' ? 'z-drawer-backdrop-blur' : 'z-drawer-backdrop-dark';
        const overlayConfig = new OverlayConfig({
            hasBackdrop: true,
            backdropClass,
            positionStrategy: this._overlay.position().global(),
        });
        const overlayRef = this._overlay.create(overlayConfig);
        this._zIndexService.applyToOverlay(overlayRef);
        return overlayRef;
    }
    _attachDrawerContainer(overlayRef, config) {
        const injector = Injector.create({
            parent: this._injector,
            providers: [
                { provide: OverlayRef, useValue: overlayRef },
                { provide: ZDrawerOptions, useValue: config },
            ],
        });
        const containerPortal = new ComponentPortal(ZDrawerComponent, config.zViewContainerRef, injector);
        const containerRef = overlayRef.attach(containerPortal);
        return containerRef.instance;
    }
    _attachDrawerContent(componentOrTemplateRef, drawerContainer, overlayRef, config) {
        const drawerRef = new ZDrawerRef(overlayRef, config, drawerContainer, this._platformId);
        drawerContainer.drawerRef = drawerRef;
        if (componentOrTemplateRef instanceof TemplateRef) {
            drawerContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, { drawerRef }));
            return drawerRef;
        }
        if (typeof componentOrTemplateRef !== 'string') {
            const injector = this._createInjector(drawerRef, config);
            const contentRef = drawerContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, config.zViewContainerRef, injector));
            if (contentRef) {
                drawerRef.componentInstance = contentRef.instance;
            }
        }
        return drawerRef;
    }
    _createInjector(drawerRef, config) {
        return Injector.create({
            parent: this._injector,
            providers: [
                { provide: ZDrawerRef, useValue: drawerRef },
                { provide: Z_DRAWER_DATA, useValue: config.zData },
            ],
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

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

export { ZDrawerComponent, ZDrawerContentDirective, ZDrawerFooterDirective, ZDrawerHeaderDirective, ZDrawerRef, ZDrawerService, Z_DRAWER_DATA, zDrawerVariants };
//# sourceMappingURL=shival99-z-ui-components-z-drawer.mjs.map
