import { MXBaseComponent, AXComponent, AXClosableComponent, AXFocusableComponent } from '@acorex/cdk/common';
import { AXDecoratorGenericComponent, AXDecoratorCloseButtonComponent } from '@acorex/components/decorators';
import { AXTranslatorPipe } from '@acorex/core/translation';
import { isPlatformBrowser, NgTemplateOutlet, NgComponentOutlet, AsyncPipe } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, Injectable, input, DOCUMENT, PLATFORM_ID, Renderer2, signal, computed, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { AXOverlayService } from '@acorex/cdk/overlay';
import { Subject, BehaviorSubject } from 'rxjs';

class AXActionSheetService {
    constructor() {
        this.overlayService = inject(AXOverlayService);
        this.actionSheetEvent = new Subject();
        this.actionSheetEvent$ = this.actionSheetEvent.asObservable();
    }
    /**
     * Opens an action sheet with the specified configuration.
     * This method creates and displays an action sheet component with the provided options.
     * The action sheet will slide up from the bottom of the screen and can be dismissed
     * by tapping outside, pressing escape, or calling the close method.
     *
     * @param config - The configuration object that defines the action sheet's appearance and behavior.
     *                 Must include at least a title or content property. Will be merged with default config.
     * @param isUserInteraction - Whether the action sheet is opened by user interaction (default: true).
     *                           This affects how the action sheet handles accessibility and focus management.
     * @returns A promise that resolves to a dialog reference containing methods to control the action sheet.
     *          The reference includes methods like close() and a closed observable for tracking dialog state.
     * @example
     * ```typescript
     * const dialogRef = await actionSheetService.open({
     *   title: 'Choose an option',
     *   items: [
     *     { text: 'Option 1', value: 'opt1' },
     *     { text: 'Option 2', value: 'opt2' }
     *   ]
     * });
     *
     * dialogRef.closed.subscribe(result => {
     *   console.log('Action sheet closed with:', result.data);
     * });
     * ```
     */
    async open(config, isUserInteraction = true) {
        const defaultConfig = {
            title: 'action-sheet.title',
            closeButton: true,
            closeOnBackdropClick: true,
            header: true,
        };
        config = Object.assign(defaultConfig, config);
        const closed = new BehaviorSubject(null);
        let internalRef;
        const closeActionSheet = (result) => {
            if (internalRef) {
                internalRef.overlayRef.dispose();
                if (result?.data) {
                    closed.next({ data: result.data });
                }
                else {
                    closed.next({});
                }
            }
        };
        const overlayRef = await this.overlayService.create(AXActionSheetComponent, {
            inputs: {
                data: config,
                onClose: closeActionSheet,
            },
            centered: false,
            panelClass: ['ax-action-sheet-panel'],
            backdrop: {
                enabled: true,
                background: true,
                closeOnClick: config.closeOnBackdropClick,
            },
            onDispose: () => {
                // Clean up when disposed externally (e.g., backdrop click)
                closed.next({});
            },
        });
        internalRef = {
            overlayRef,
            close: closeActionSheet,
        };
        // Set the overlayRef input after creation
        if (overlayRef.instance && 'setInput' in overlayRef.instance) {
            overlayRef.instance.setInput('overlayRef', overlayRef);
        }
        // Positioning is handled by CSS via .ax-action-sheet-panel class
        this.actionSheetEvent.next({
            overlayRef,
            data: { state: 'open' },
            isUserInteraction,
        });
        const axDialogRef = {
            close: (e) => {
                const component = overlayRef.instance;
                if (component?.close) {
                    component.close(e);
                }
                else {
                    closeActionSheet({ data: e });
                }
            },
            closed,
        };
        return axDialogRef;
    }
    /**
     * Sets the current state of action sheet events.
     * This method is used internally to track action sheet lifecycle events such as open, close,
     * drag start, drag end, and full screen transitions. It emits events through the actionSheetEvent$
     * observable for external subscribers to monitor action sheet state changes.
     *
     * @param event - The action sheet event to emit. Contains information about the event type,
     *               associated data, user interaction status, and overlay reference.
     * @returns void
     */
    setActionSheetEventState(event) {
        this.actionSheetEvent.next(event);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

/**
 * A component for displaying an action sheet, which is a menu that slides up from the bottom of the screen.
 *
 * @category Components
 */
class AXActionSheetComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        /** Action sheet configuration data */
        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
        /** @internal Callback function to close the action sheet */
        this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : []));
        /** @internal Overlay reference for event tracking */
        this.overlayRef = input(...(ngDevMode ? [undefined, { debugName: "overlayRef" }] : []));
        this.document = inject(DOCUMENT);
        this.platformID = inject(PLATFORM_ID);
        this.renderer = inject(Renderer2);
        this.actionSheetService = inject(AXActionSheetService);
        this.onMouseMoveListenerFn = () => undefined;
        this.onMouseUpListenerFn = () => undefined;
        this.onTouchMoveListenerFn = () => undefined;
        this.onTouchUpListenerFn = () => undefined;
        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
        this.isFullScreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullScreen" }] : []));
        this.curserOffset = signal(0, ...(ngDevMode ? [{ debugName: "curserOffset" }] : []));
        this.actionSheetHeight = signal(0, ...(ngDevMode ? [{ debugName: "actionSheetHeight" }] : []));
        this.isActionSheetHeightSet = signal(false, ...(ngDevMode ? [{ debugName: "isActionSheetHeightSet" }] : []));
        this.transitionDuration = signal(300, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
        /** Template content if data.content is a TemplateRef */
        this.templateContent = computed(() => {
            const content = this.data().content;
            return content instanceof TemplateRef ? content : null;
        }, ...(ngDevMode ? [{ debugName: "templateContent" }] : []));
        /** Component content if data.content is a component Type */
        this.componentContent = computed(() => {
            const content = this.data().content;
            return typeof content === 'function' ? content : null;
        }, ...(ngDevMode ? [{ debugName: "componentContent" }] : []));
        /** Template context for ngTemplateOutlet */
        this.templateContext = computed(() => ({
            $implicit: this.data(),
            ref: this,
        }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
    }
    /**
     *  @ignore
     */
    ngOnInit() {
        super.ngOnInit();
        // Enter animation: start with height 0 and animate to natural height
        if (isPlatformBrowser(this.platformID)) {
            const hostElement = this.getHostElement();
            hostElement.style.height = '0';
            hostElement.style.overflow = 'hidden';
            // Use requestAnimationFrame to ensure the initial height is applied before animating
            requestAnimationFrame(() => {
                hostElement.style.transitionDuration = `${this.transitionDuration()}ms`;
                hostElement.style.height = 'auto';
                // Get the natural height
                const naturalHeight = hostElement.scrollHeight;
                hostElement.style.height = '0';
                requestAnimationFrame(() => {
                    hostElement.style.height = `${naturalHeight}px`;
                    // After animation completes, set height to auto for flexibility
                    setTimeout(() => {
                        hostElement.style.height = 'auto';
                        hostElement.style.overflow = '';
                    }, this.transitionDuration());
                });
            });
        }
        if (isPlatformBrowser(this.platformID) && this.data().draggable) {
            this.onMouseMoveListenerFn = this.renderer.listen(this.document, 'mousemove', (e) => {
                if (this.isDragging()) {
                    e.preventDefault();
                    this.getHostElement().style.height = `${this.heightCalculator(e.clientY) + this.curserOffset()}px`;
                }
            });
            this.onTouchMoveListenerFn = this.renderer.listen(this.document, 'touchmove', (e) => {
                if (this.isDragging()) {
                    e.preventDefault();
                    this.getHostElement().style.height = `${this.heightCalculator(e.touches[0].clientY) + this.curserOffset()}px`;
                }
            });
            this.onMouseUpListenerFn = this.renderer.listen(this.document, 'mouseup', (e) => {
                if (this.isDragging()) {
                    this.isDragging.set(false);
                    this.actionSheetService.setActionSheetEventState({
                        nativeEvent: e,
                        data: { state: 'dragEnd' },
                        isUserInteraction: true,
                        overlayRef: this.overlayRef(),
                    });
                    this.snapToFinalPosition();
                }
            });
            this.onTouchUpListenerFn = this.renderer.listen(this.document, 'touchend', (e) => {
                if (this.isDragging()) {
                    this.isDragging.set(false);
                    this.actionSheetService.setActionSheetEventState({
                        nativeEvent: e,
                        data: { state: 'dragEnd' },
                        isUserInteraction: true,
                        overlayRef: this.overlayRef(),
                    });
                    this.snapToFinalPosition();
                }
            });
        }
    }
    ngOnDestroy() {
        this.onMouseMoveListenerFn();
        this.onMouseUpListenerFn();
        this.onTouchMoveListenerFn();
        this.onTouchUpListenerFn();
    }
    handleMouseDown(e) {
        if (!this.data().draggable || e.button !== 0)
            return;
        e.preventDefault();
        this.actionSheetService.setActionSheetEventState({
            nativeEvent: e,
            data: { state: 'dragStart' },
            isUserInteraction: true,
            overlayRef: this.overlayRef(),
        });
        this.handleDown(e.clientY);
    }
    handleTouchDown(e) {
        if (!this.data().draggable || e.target.className.includes('close'))
            return;
        e.preventDefault();
        this.actionSheetService.setActionSheetEventState({
            nativeEvent: e,
            data: { state: 'dragStart' },
            isUserInteraction: true,
            overlayRef: this.overlayRef(),
        });
        this.handleDown(e.touches[0].clientY);
    }
    handleDown(clientY) {
        this.isDragging.set(true);
        this.getHostElement().style.transitionDuration = '0ms';
        if (isPlatformBrowser(this.platformID)) {
            this.curserOffset.set(clientY - (this.document.documentElement.clientHeight - this.getHostElement().clientHeight));
        }
        if (!this.isActionSheetHeightSet()) {
            this.actionSheetHeight.set(this.getHostElement().clientHeight);
            this.isActionSheetHeightSet.set(true);
        }
    }
    snapToFinalPosition() {
        this.getHostElement().style.transitionDuration = `${this.transitionDuration()}ms`;
        const currentHeight = this.getHostElement().clientHeight;
        const initialHeight = this.actionSheetHeight();
        const windowHeight = this.document.documentElement.clientHeight;
        if (currentHeight < initialHeight * 0.75) {
            this.close(null);
            return;
        }
        if (this.isFullScreen() && currentHeight < windowHeight * 0.9) {
            this.getHostElement().style.height = `${initialHeight}px`;
            this.isFullScreen.set(false);
            this.actionSheetService.setActionSheetEventState({
                data: { state: 'normalSize' },
                isUserInteraction: true,
                overlayRef: this.overlayRef(),
            });
            return;
        }
        if (this.data().dragUp && currentHeight > (windowHeight + initialHeight) / 3) {
            this.getHostElement().style.height = '100vh';
            this.isFullScreen.set(true);
            this.document.body.parentElement.style.overscrollBehaviorY = 'contain';
            this.actionSheetService.setActionSheetEventState({
                data: { state: 'fullScreen' },
                isUserInteraction: true,
                overlayRef: this.overlayRef(),
            });
            return;
        }
        this.getHostElement().style.height = `${initialHeight}px`;
        this.actionSheetService.setActionSheetEventState({
            data: { state: 'normalSize' },
            isUserInteraction: true,
            overlayRef: this.overlayRef(),
        });
    }
    heightCalculator(clientY) {
        if (this.data().dragUp) {
            return this.document.documentElement.clientHeight - clientY;
        }
        if (clientY >= this.document.documentElement.clientHeight - this.actionSheetHeight()) {
            return this.document.documentElement.clientHeight - clientY;
        }
        return (this.actionSheetHeight() + (this.document.documentElement.clientHeight - clientY - this.actionSheetHeight()) / 10);
    }
    /**
     * Handles component attachment from ngComponentOutlet
     */
    handleComponentCreated(componentRef) {
        if (componentRef?.instance) {
            this._componentRef = componentRef.instance;
            Object.assign(this._componentRef, this.data());
            Object.assign(this._componentRef, { _isPopup: true });
            if (componentRef.instance
                .onClosed) {
                componentRef.instance.onClosed.subscribe((e) => {
                    this.close(e);
                });
            }
        }
    }
    /**
     * Handles click events on action sheet items.
     * This method is called when a user clicks on an action sheet item. It closes the action sheet
     * with the clicked item as the result data and executes the item's onClick callback if provided.
     *
     * @param item - The action sheet item that was clicked. Contains the item's data and optional onClick callback.
     * @returns void
     */
    onItemClick(item) {
        this.close(item);
        if (item?.onClick)
            item.onClick();
    }
    /**
     * Closes the action sheet with optional result data.
     * This method initiates the closing animation of the action sheet and eventually closes the dialog.
     * The closing process includes a height animation and cleanup of event listeners.
     *
     * @param e - The result data to pass when closing the action sheet. Can be any value including null.
     *            If an AXActionSheetItem is passed, it represents the selected item.
     * @param isUserInteraction - Whether the close action was triggered by user interaction (default: true).
     *                           This affects how the action sheet handles accessibility and event tracking.
     * @returns void
     */
    close(e = null, isUserInteraction = true) {
        this.getHostElement().style.height = `${this.getHostElement().clientHeight}px`;
        setTimeout(() => {
            this.getHostElement().style.height = '0vh';
        });
        setTimeout(() => {
            this.actionSheetService.setActionSheetEventState({
                data: { state: 'close' },
                isUserInteraction,
                overlayRef: this.overlayRef(),
            });
            const closeCallback = this.onClose();
            if (closeCallback) {
                closeCallback({
                    component: this._componentRef,
                    htmlElement: this.getHostElement(),
                    data: e,
                });
            }
        }, this.transitionDuration());
    }
    /**
     *  @ignore
     */
    onKeydownHandler() {
        const focusedOrHasFocused = this.getHostElement().matches(':focus-within');
        if (this.data().closeButton && focusedOrHasFocused) {
            this.close(null);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXActionSheetComponent, isStandalone: true, selector: "ax-action-sheet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null }, overlayRef: { classPropertyName: "overlayRef", publicName: "overlayRef", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onKeydownHandler()" } }, providers: [
            { provide: AXComponent, useExisting: AXActionSheetComponent },
            {
                provide: AXClosableComponent,
                useExisting: AXActionSheetComponent,
            },
            {
                provide: AXFocusableComponent,
                useExisting: AXActionSheetComponent,
            },
        ], usesInheritance: true, ngImport: i0, template: "@if (data().draggable) {\n  <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data().header) {\n  <ax-header\n    [class.draggable-header]=\"data().draggable\"\n    (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title>{{ data().title | translate | async }}</ax-title>\n\n      @if (data().subTitle) {\n        <ax-subtitle>\n          {{ data().subTitle }}\n        </ax-subtitle>\n      }\n    </ax-prefix>\n    @if (data().closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (data().content) {\n  <div class=\"ax-custom-template-container\">\n    @if (templateContent()) {\n      <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n    } @else if (componentContent()) {\n      <ng-container *ngComponentOutlet=\"componentContent()\"></ng-container>\n    }\n  </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data().items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div\n      class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [tabindex]=\"i\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-primary-surface), .1}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-secondary-surface), .1}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-success-surface), .1}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-warning-surface), .1}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-danger-surface), .1}ax-action-sheet .ax-action-item.ax-accent1{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent1-surface), .1}ax-action-sheet .ax-action-item.ax-accent2{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent2-surface), .1}ax-action-sheet .ax-action-item.ax-accent3{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent3-surface), .1}ax-action-sheet .ax-action-item.ax-accent4{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent4-surface), .1}ax-action-sheet .ax-action-item.ax-accent5{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent5-surface), .1}ax-action-sheet .ax-action-item.ax-accent6{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent6-surface), .1}ax-action-sheet .ax-action-item.ax-accent7{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent7-surface), .1}.ax-action-sheet-panel{position:fixed!important;bottom:0!important;left:50%!important;transform:translate(-50%)!important;top:auto!important;right:auto!important;width:auto!important;height:auto!important;display:block!important;align-items:unset!important;justify-content:unset!important;max-width:none!important}ax-action-sheet{display:block;width:var(--ax-comp-action-sheet-width-sm, 100vw);position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-md, 70vw)}}@media (min-width: 1024px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-lg, 50vw)}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:rgba(var(--ax-comp-action-sheet-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-action-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        '(keydown.escape)': 'onKeydownHandler()',
                    }, providers: [
                        { provide: AXComponent, useExisting: AXActionSheetComponent },
                        {
                            provide: AXClosableComponent,
                            useExisting: AXActionSheetComponent,
                        },
                        {
                            provide: AXFocusableComponent,
                            useExisting: AXActionSheetComponent,
                        },
                    ], imports: [
                        AXDecoratorGenericComponent,
                        AXDecoratorCloseButtonComponent,
                        NgTemplateOutlet,
                        NgComponentOutlet,
                        AXTranslatorPipe,
                        AsyncPipe,
                    ], template: "@if (data().draggable) {\n  <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data().header) {\n  <ax-header\n    [class.draggable-header]=\"data().draggable\"\n    (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title>{{ data().title | translate | async }}</ax-title>\n\n      @if (data().subTitle) {\n        <ax-subtitle>\n          {{ data().subTitle }}\n        </ax-subtitle>\n      }\n    </ax-prefix>\n    @if (data().closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (data().content) {\n  <div class=\"ax-custom-template-container\">\n    @if (templateContent()) {\n      <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n    } @else if (componentContent()) {\n      <ng-container *ngComponentOutlet=\"componentContent()\"></ng-container>\n    }\n  </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data().items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div\n      class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [tabindex]=\"i\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-primary-surface), .1}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-secondary-surface), .1}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-success-surface), .1}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-warning-surface), .1}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-danger-surface), .1}ax-action-sheet .ax-action-item.ax-accent1{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent1-surface), .1}ax-action-sheet .ax-action-item.ax-accent2{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent2-surface), .1}ax-action-sheet .ax-action-item.ax-accent3{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent3-surface), .1}ax-action-sheet .ax-action-item.ax-accent4{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent4-surface), .1}ax-action-sheet .ax-action-item.ax-accent5{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent5-surface), .1}ax-action-sheet .ax-action-item.ax-accent6{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent6-surface), .1}ax-action-sheet .ax-action-item.ax-accent7{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent7-surface), .1}.ax-action-sheet-panel{position:fixed!important;bottom:0!important;left:50%!important;transform:translate(-50%)!important;top:auto!important;right:auto!important;width:auto!important;height:auto!important;display:block!important;align-items:unset!important;justify-content:unset!important;max-width:none!important}ax-action-sheet{display:block;width:var(--ax-comp-action-sheet-width-sm, 100vw);position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-md, 70vw)}}@media (min-width: 1024px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-lg, 50vw)}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:rgba(var(--ax-comp-action-sheet-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"] }]
        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }], overlayRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayRef", required: false }] }] } });

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

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

export { AXActionSheetComponent, AXActionSheetModule, AXActionSheetService };
//# sourceMappingURL=acorex-components-action-sheet.mjs.map
