import { NXComponent, AXComponent } from '@acorex/cdk/common';
import * as i1 from '@acorex/cdk/focus-trap';
import { AXFocusTrapDirective } from '@acorex/cdk/focus-trap';
import { AXButtonComponent } from '@acorex/components/button';
import * as i3 from '@acorex/components/decorators';
import { AXDecoratorModule } from '@acorex/components/decorators';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, model, inject, viewChild, computed, TemplateRef, signal, afterNextRender, effect, HostListener, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { A as AXModalStateService, a as AXModalFooterComponent } from './acorex-components-modal-acorex-components-modal-DwBY73dZ.mjs';

class AXModalContentComponent extends NXComponent {
    constructor() {
        super(...arguments);
        this.__content__ = input.required(...(ngDevMode ? [{ debugName: "__content__" }] : []));
        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
        this.inputs = model(...(ngDevMode ? [undefined, { debugName: "inputs" }] : []));
        this.serviceState = inject(AXModalStateService);
        this.sanitizer = inject(DomSanitizer);
        this.modalContainer = viewChild('c', ...(ngDevMode ? [{ debugName: "modalContainer" }] : []));
        this.footer = viewChild(AXModalFooterComponent, ...(ngDevMode ? [{ debugName: "footer" }] : []));
        this.isTemplate = computed(() => this.__content__() instanceof TemplateRef, ...(ngDevMode ? [{ debugName: "isTemplate" }] : []));
        this.isHtmlElement = computed(() => this.__content__() instanceof HTMLElement, ...(ngDevMode ? [{ debugName: "isHtmlElement" }] : []));
        this.component = computed(() => this.__content__(), ...(ngDevMode ? [{ debugName: "component" }] : []));
        this.template = computed(() => this.__content__(), ...(ngDevMode ? [{ debugName: "template" }] : []));
        this.element = computed(() => this.__content__(), ...(ngDevMode ? [{ debugName: "element" }] : []));
        this.modalSizeState = signal('normal', ...(ngDevMode ? [{ debugName: "modalSizeState" }] : []));
        this.fullScreenState = signal(false, ...(ngDevMode ? [{ debugName: "fullScreenState" }] : []));
        this.isMouseDown = signal(false, ...(ngDevMode ? [{ debugName: "isMouseDown" }] : []));
        this.offsetX = signal(0, ...(ngDevMode ? [{ debugName: "offsetX" }] : []));
        this.offsetY = signal(0, ...(ngDevMode ? [{ debugName: "offsetY" }] : []));
        this.prevLeft = signal('', ...(ngDevMode ? [{ debugName: "prevLeft" }] : []));
        this.prevTop = signal('', ...(ngDevMode ? [{ debugName: "prevTop" }] : []));
        this.backdropState = computed(() => this.serviceState.modalOption()?.backdrop?.enabled ?? true, ...(ngDevMode ? [{ debugName: "backdropState" }] : []));
        this.closeOnEscape = computed(() => this.serviceState.modalOption()?.closeOnEscape ?? true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
        this.panelClass = computed(() => this.serviceState.modalOption()?.panelClass ?? '', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
        this.headerState = computed(() => this.serviceState.modalOption()?.header ?? false, ...(ngDevMode ? [{ debugName: "headerState" }] : []));
        this.footerState = computed(() => this.serviceState.modalOption()?.footer ?? false, ...(ngDevMode ? [{ debugName: "footerState" }] : []));
        this.closeHeaderButton = computed(() => this.serviceState.modalOption()?.buttons?.close ?? true, ...(ngDevMode ? [{ debugName: "closeHeaderButton" }] : []));
        this.backdropBackground = computed(() => this.serviceState.modalOption()?.backdrop?.background ?? true, ...(ngDevMode ? [{ debugName: "backdropBackground" }] : []));
        this.backdropClass = computed(() => this.serviceState.modalOption()?.backdrop?.backdropClass ?? '', ...(ngDevMode ? [{ debugName: "backdropClass" }] : []));
        this.backdropCloseOnClick = computed(() => this.serviceState.modalOption()?.backdrop?.closeOnClick ?? true, ...(ngDevMode ? [{ debugName: "backdropCloseOnClick" }] : []));
        this.minimizePosition = computed(() => this.serviceState.modalOption()?.buttons?.minimize?.position ?? 'bottom-right', ...(ngDevMode ? [{ debugName: "minimizePosition" }] : []));
        this.minimizeState = computed(() => this.serviceState.modalOption()?.buttons?.minimize?.enable ?? false, ...(ngDevMode ? [{ debugName: "minimizeState" }] : []));
        this.maximizeState = computed(() => this.serviceState.modalOption()?.buttons?.maximize ?? false, ...(ngDevMode ? [{ debugName: "maximizeState" }] : []));
        this.modalSize = computed(() => this.serviceState.modalOption()?.size ?? 'lg', ...(ngDevMode ? [{ debugName: "modalSize" }] : []));
        this.headerTitle = computed(() => this.serviceState.modalOption()?.title ?? '', ...(ngDevMode ? [{ debugName: "headerTitle" }] : []));
        this.draggable = computed(() => this.serviceState.modalOption()?.draggable ?? true, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
        this.#init = afterNextRender(() => {
            this.nativeElement.focus();
            const popFooter = this.nativeElement.querySelector('.ax-modal-footer');
            const footer = this.nativeElement.querySelector('.ax-modal-content ax-modal-footer');
            if (footer) {
                popFooter?.append(footer);
            }
        });
        this.#eff = effect(() => {
            const host = this.nativeElement;
            if (this.draggable())
                host.classList.add('ax-draggable');
            if (!this.backdropState())
                return;
            this.addBackdrop();
            if (!this.backdropBackground())
                return;
        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
    }
    #init;
    close() {
        this.serviceState.close(this.id());
    }
    minimize() {
        if (this.fullScreenState())
            document.exitFullscreen();
        this.modalContainer().nativeElement.style.transition = 'all 200ms ease-out';
        this.modalContainer().nativeElement.style.top = `auto`;
        this.modalContainer().nativeElement.style.bottom = `0`;
        if (this.backdropState())
            this.removeBackdrop();
        this.modalContainer().nativeElement.classList.remove('ax-normal-modal');
        this.modalContainer().nativeElement.classList.add('ax-minimize-modal');
        requestAnimationFrame(() => {
            const width = this.modalContainer().nativeElement.offsetWidth;
            const index = this.serviceState.getMapIndexOf(this.id());
            if (this.minimizePosition() === 'bottom-right') {
                this.modalContainer().nativeElement.style.left = `auto`;
                this.modalContainer().nativeElement.style.right = `${index * (width + 10)}px`;
            }
            else {
                this.modalContainer().nativeElement.style.right = `auto`;
                this.modalContainer().nativeElement.style.left = `${index * (width + 10)}px`;
            }
        });
        this.modalSizeState.set('minimize');
    }
    maximize() {
        this.modalContainer().nativeElement.style.transition = 'none';
        if (this.modalSizeState() === 'minimize')
            this.restore();
        if (!document.fullscreenElement) {
            this.modalContainer().nativeElement.requestFullscreen();
            this.fullScreenState.set(true);
        }
        else {
            document.exitFullscreen();
        }
        document.addEventListener('fullscreenchange', () => {
            if (!document.fullscreenElement) {
                this.fullScreenState.set(false);
            }
        });
    }
    restore() {
        setTimeout(() => {
            this.modalContainer().nativeElement.style.transition = 'none';
        }, 200);
        if (this.fullScreenState()) {
            document.exitFullscreen();
            return;
        }
        this.modalContainer().nativeElement.style.bottom = `auto`;
        this.modalContainer().nativeElement.style.right = `auto`;
        this.modalContainer().nativeElement.style.left = this.prevLeft();
        this.modalContainer().nativeElement.style.top = this.prevTop();
        if (this.backdropState())
            this.addBackdrop();
        this.modalContainer().nativeElement.classList.remove(`ax-minimize-modal`);
        this.modalContainer().nativeElement.classList.add('ax-normal-modal');
        this.modalSizeState.set('normal');
    }
    pointerDownHandler(e) {
        if (!this.draggable() || this.modalSizeState() === 'minimize' || this.fullScreenState())
            return;
        this.isMouseDown.set(true);
        this.offsetX.set(e.clientX - this.modalContainer().nativeElement.offsetLeft);
        this.offsetY.set(e.clientY - this.modalContainer().nativeElement.offsetTop);
    }
    addBackdrop() {
        const backdropElem = document.createElement('div');
        backdropElem.classList.add('ax-modal-drawer-backdrop');
        if (this.backdropClass()) {
            backdropElem.classList.add(...this.backdropClass().split(' '));
        }
        else {
            backdropElem.classList.add('ax-default-backdrop');
        }
        backdropElem.addEventListener('pointerdown', (e) => {
            if (!this.backdropCloseOnClick())
                return;
            if (e.target === e.currentTarget) {
                this.close();
            }
        });
        this.nativeElement.appendChild(backdropElem);
    }
    removeBackdrop() {
        const backdropElem = this.nativeElement.querySelector('.ax-modal-drawer-backdrop');
        if (backdropElem) {
            backdropElem.remove();
        }
    }
    pointerMoveHandler(e) {
        if (!this.draggable() || this.modalSizeState() === 'minimize' || this.fullScreenState())
            return;
        if (!this.isMouseDown())
            return;
        this.modalContainer().nativeElement.style.left = `${e.clientX - this.offsetX()}px`;
        this.modalContainer().nativeElement.style.top = `${e.clientY - this.offsetY()}px`;
        this.prevLeft.set(`${e.clientX - this.offsetX()}px`);
        this.prevTop.set(`${e.clientY - this.offsetY()}px`);
    }
    pointerUpHandler() {
        if (!this.draggable() || this.modalSizeState() === 'minimize' || this.fullScreenState())
            return;
        this.isMouseDown.set(false);
    }
    get role() {
        return '0';
    }
    escapeHandler(e) {
        if (e.key === 'Escape' && this.closeOnEscape()) {
            this.close();
        }
    }
    #eff;
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXModalContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXModalContentComponent, isStandalone: true, selector: "ax-modal-content", inputs: { __content__: { classPropertyName: "__content__", publicName: "__content__", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputs: "inputsChange" }, host: { listeners: { "pointermove": "pointerMoveHandler($event)", "pointerup": "pointerUpHandler($event)", "pointerleave": "pointerUpHandler($event)", "keydown": "escapeHandler($event)" }, properties: { "attr.tabindex": "this.role" } }, providers: [{ provide: AXComponent, useExisting: AXModalContentComponent }], viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["c"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: AXModalFooterComponent, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.AXFocusTrapDirective }], ngImport: i0, template: "<div\n  #c\n  class=\"ax-modal-container ax-{{ modalSizeState() }}-modal  ax-modal-{{ modalSize() }} {{ panelClass() }}\"\n  animate.enter=\"ax-fade-slide-in\"\n  animate.leave=\"ax-fade-slide-out\"\n>\n  @if (headerState()) {\n    <div (pointerdown)=\"pointerDownHandler($event)\" class=\"ax-modal-header\">\n      <ax-text>{{ headerTitle() }}</ax-text>\n\n      <div>\n        @if (minimizeState()) {\n          <ax-button class=\"ax-sm\" (onClick)=\"minimize()\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"ax-icon ax-icon-minimize\"> </ax-icon>\n          </ax-button>\n        }\n\n        @if (modalSizeState() !== 'normal' || fullScreenState()) {\n          <ax-button class=\"ax-sm\" (onClick)=\"restore()\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"ax-icon ax-icon-maximize\"> </ax-icon>\n          </ax-button>\n        }\n\n        @if (maximizeState()) {\n          <ax-button class=\"ax-sm\" (onClick)=\"maximize()\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"ax-icon ax-icon-full-screen\"> </ax-icon>\n          </ax-button>\n        }\n\n        @if (closeHeaderButton()) {\n          <ax-button class=\"ax-sm\" look=\"blank\" (onClick)=\"close()\" color=\"default\">\n            <ax-icon class=\"ax-icon ax-icon-close\"> </ax-icon>\n          </ax-button>\n        }\n      </div>\n    </div>\n  }\n\n  <div class=\"ax-modal-content\">\n    @if (isTemplate()) {\n      <ng-container [ngTemplateOutlet]=\"this.template()\" [ngTemplateOutletContext]=\"inputs()\"></ng-container>\n    } @else if (isHtmlElement()) {\n      <div [innerHTML]=\"sanitizer.bypassSecurityTrustHtml(this.element().outerHTML)\"></div>\n    } @else {\n      <ng-container [ngComponentOutlet]=\"this.component()\" [ngComponentOutletInputs]=\"inputs()\"></ng-container>\n    }\n  </div>\n\n  @if (footerState()) {\n    <div class=\"ax-modal-footer\"></div>\n  }\n</div>\n", styles: ["ax-modal-content{touch-action:none;-webkit-user-select:none;user-select:none}ax-modal-content .ax-modal-drawer-backdrop{position:fixed;top:0;left:0;z-index:50;width:100vw;height:calc(100 * var(--ax-vh))}ax-modal-content .ax-modal-drawer-backdrop.ax-default-backdrop{background-color:#00000080}ax-modal-content.ax-draggable .ax-modal-header:hover{cursor:move}ax-modal-content .ax-modal-container{overflow:hidden;position:fixed;z-index:55;background-color:rgba(var(--ax-comp-modal-bg-color, var(--ax-sys-color-lightest-surface)));display:flex;flex-direction:column;justify-content:space-between;border-radius:var(--ax-comp-modal-border-radius, var(--ax-sys-border-radius));border:var(--ax-comp-modal-border-width, 1px) solid rgba(var(--ax-comp-modal-border-color, var(--ax-sys-color-border-lightest-surface)));max-height:90vh;max-width:100vw}ax-modal-content .ax-modal-container.ax-modal-full{max-height:100vh!important;width:100%;height:100%}ax-modal-content .ax-modal-container.ax-modal-fit{width:fit-content}@media (min-width: 320px) and (max-width: 640px){ax-modal-content .ax-modal-container.ax-modal-sm,ax-modal-content .ax-modal-container.ax-modal-md,ax-modal-content .ax-modal-container.ax-modal-lg,ax-modal-content .ax-modal-container.ax-modal-fit{width:93vw}}@media (min-width: 768px){ax-modal-content .ax-modal-container.ax-modal-sm{width:55vw}ax-modal-content .ax-modal-container.ax-modal-md{width:65vw}ax-modal-content .ax-modal-container.ax-modal-lg{width:75vw}}@media (min-width: 1280px){ax-modal-content .ax-modal-container.ax-modal-sm{width:30vw}ax-modal-content .ax-modal-container.ax-modal-md{width:50vw}ax-modal-content .ax-modal-container.ax-modal-lg{width:85vw}}@media (min-width: 1536px){ax-modal-content .ax-modal-container.ax-modal-sm{width:25vw}ax-modal-content .ax-modal-container.ax-modal-md{width:40vw}ax-modal-content .ax-modal-container.ax-modal-lg{width:65vw}}ax-modal-content .ax-modal-container.ax-normal-modal{top:50%;left:50%;transform:translate(-50%,-50%)}ax-modal-content .ax-modal-container.ax-normal-modal .ax-modal-content{display:block}ax-modal-content .ax-modal-container.ax-normal-modal .ax-modal-footer{display:block}ax-modal-content .ax-modal-container.ax-minimize-modal{width:fit-content}ax-modal-content .ax-modal-container.ax-minimize-modal .ax-modal-content{display:none}ax-modal-content .ax-modal-container.ax-minimize-modal .ax-modal-footer{display:none}ax-modal-content .ax-modal-container .ax-modal-header,ax-modal-content .ax-modal-container .ax-modal-footer{padding:.5rem}ax-modal-content .ax-modal-container .ax-modal-header,ax-modal-content .ax-modal-container .ax-modal-footer{height:fit-content}ax-modal-content .ax-modal-container .ax-modal-content{flex-grow:1}ax-modal-content .ax-modal-container .ax-modal-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-modal-content .ax-modal-container .ax-modal-footer{border-top:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}@keyframes fadeSlideIn{0%{opacity:0;scale:.8}}ax-modal-content .ax-fade-slide-in{transform-origin:top left;animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-modal-content .ax-fade-slide-out{transform-origin:top left;animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXModalContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-modal-content', imports: [CommonModule, AXButtonComponent, AXDecoratorModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [AXFocusTrapDirective], providers: [{ provide: AXComponent, useExisting: AXModalContentComponent }], template: "<div\n  #c\n  class=\"ax-modal-container ax-{{ modalSizeState() }}-modal  ax-modal-{{ modalSize() }} {{ panelClass() }}\"\n  animate.enter=\"ax-fade-slide-in\"\n  animate.leave=\"ax-fade-slide-out\"\n>\n  @if (headerState()) {\n    <div (pointerdown)=\"pointerDownHandler($event)\" class=\"ax-modal-header\">\n      <ax-text>{{ headerTitle() }}</ax-text>\n\n      <div>\n        @if (minimizeState()) {\n          <ax-button class=\"ax-sm\" (onClick)=\"minimize()\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"ax-icon ax-icon-minimize\"> </ax-icon>\n          </ax-button>\n        }\n\n        @if (modalSizeState() !== 'normal' || fullScreenState()) {\n          <ax-button class=\"ax-sm\" (onClick)=\"restore()\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"ax-icon ax-icon-maximize\"> </ax-icon>\n          </ax-button>\n        }\n\n        @if (maximizeState()) {\n          <ax-button class=\"ax-sm\" (onClick)=\"maximize()\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"ax-icon ax-icon-full-screen\"> </ax-icon>\n          </ax-button>\n        }\n\n        @if (closeHeaderButton()) {\n          <ax-button class=\"ax-sm\" look=\"blank\" (onClick)=\"close()\" color=\"default\">\n            <ax-icon class=\"ax-icon ax-icon-close\"> </ax-icon>\n          </ax-button>\n        }\n      </div>\n    </div>\n  }\n\n  <div class=\"ax-modal-content\">\n    @if (isTemplate()) {\n      <ng-container [ngTemplateOutlet]=\"this.template()\" [ngTemplateOutletContext]=\"inputs()\"></ng-container>\n    } @else if (isHtmlElement()) {\n      <div [innerHTML]=\"sanitizer.bypassSecurityTrustHtml(this.element().outerHTML)\"></div>\n    } @else {\n      <ng-container [ngComponentOutlet]=\"this.component()\" [ngComponentOutletInputs]=\"inputs()\"></ng-container>\n    }\n  </div>\n\n  @if (footerState()) {\n    <div class=\"ax-modal-footer\"></div>\n  }\n</div>\n", styles: ["ax-modal-content{touch-action:none;-webkit-user-select:none;user-select:none}ax-modal-content .ax-modal-drawer-backdrop{position:fixed;top:0;left:0;z-index:50;width:100vw;height:calc(100 * var(--ax-vh))}ax-modal-content .ax-modal-drawer-backdrop.ax-default-backdrop{background-color:#00000080}ax-modal-content.ax-draggable .ax-modal-header:hover{cursor:move}ax-modal-content .ax-modal-container{overflow:hidden;position:fixed;z-index:55;background-color:rgba(var(--ax-comp-modal-bg-color, var(--ax-sys-color-lightest-surface)));display:flex;flex-direction:column;justify-content:space-between;border-radius:var(--ax-comp-modal-border-radius, var(--ax-sys-border-radius));border:var(--ax-comp-modal-border-width, 1px) solid rgba(var(--ax-comp-modal-border-color, var(--ax-sys-color-border-lightest-surface)));max-height:90vh;max-width:100vw}ax-modal-content .ax-modal-container.ax-modal-full{max-height:100vh!important;width:100%;height:100%}ax-modal-content .ax-modal-container.ax-modal-fit{width:fit-content}@media (min-width: 320px) and (max-width: 640px){ax-modal-content .ax-modal-container.ax-modal-sm,ax-modal-content .ax-modal-container.ax-modal-md,ax-modal-content .ax-modal-container.ax-modal-lg,ax-modal-content .ax-modal-container.ax-modal-fit{width:93vw}}@media (min-width: 768px){ax-modal-content .ax-modal-container.ax-modal-sm{width:55vw}ax-modal-content .ax-modal-container.ax-modal-md{width:65vw}ax-modal-content .ax-modal-container.ax-modal-lg{width:75vw}}@media (min-width: 1280px){ax-modal-content .ax-modal-container.ax-modal-sm{width:30vw}ax-modal-content .ax-modal-container.ax-modal-md{width:50vw}ax-modal-content .ax-modal-container.ax-modal-lg{width:85vw}}@media (min-width: 1536px){ax-modal-content .ax-modal-container.ax-modal-sm{width:25vw}ax-modal-content .ax-modal-container.ax-modal-md{width:40vw}ax-modal-content .ax-modal-container.ax-modal-lg{width:65vw}}ax-modal-content .ax-modal-container.ax-normal-modal{top:50%;left:50%;transform:translate(-50%,-50%)}ax-modal-content .ax-modal-container.ax-normal-modal .ax-modal-content{display:block}ax-modal-content .ax-modal-container.ax-normal-modal .ax-modal-footer{display:block}ax-modal-content .ax-modal-container.ax-minimize-modal{width:fit-content}ax-modal-content .ax-modal-container.ax-minimize-modal .ax-modal-content{display:none}ax-modal-content .ax-modal-container.ax-minimize-modal .ax-modal-footer{display:none}ax-modal-content .ax-modal-container .ax-modal-header,ax-modal-content .ax-modal-container .ax-modal-footer{padding:.5rem}ax-modal-content .ax-modal-container .ax-modal-header,ax-modal-content .ax-modal-container .ax-modal-footer{height:fit-content}ax-modal-content .ax-modal-container .ax-modal-content{flex-grow:1}ax-modal-content .ax-modal-container .ax-modal-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-modal-content .ax-modal-container .ax-modal-footer{border-top:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}@keyframes fadeSlideIn{0%{opacity:0;scale:.8}}ax-modal-content .ax-fade-slide-in{transform-origin:top left;animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-modal-content .ax-fade-slide-out{transform-origin:top left;animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"] }]
        }], propDecorators: { pointerMoveHandler: [{
                type: HostListener,
                args: ['pointermove', ['$event']]
            }], pointerUpHandler: [{
                type: HostListener,
                args: ['pointerup', ['$event']]
            }, {
                type: HostListener,
                args: ['pointerleave', ['$event']]
            }], role: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], escapeHandler: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

export { AXModalContentComponent };
//# sourceMappingURL=acorex-components-modal-modal-content.component-DPMt_zaI.mjs.map
