import * as i2 from '@angular/cdk/layout';
import * as i1 from '@angular/common';
import { CommonModule, DOCUMENT } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, HostBinding, Input, InjectionToken, SimpleChange, Injectable, Inject, Optional, Directive, EventEmitter, ChangeDetectionStrategy, ViewChild, HostListener, NgModule } from '@angular/core';
import * as i4$1 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i5 from '@aztrix/helpers';
import { HelperPipesModule } from '@aztrix/helpers';
import * as i3$1 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i1$1 from '@angular/cdk/overlay';
import { OverlayContainer } from '@angular/cdk/overlay';
import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
import * as i3 from '@angular/router';
import { NavigationStart } from '@angular/router';
import * as i4 from 'rxjs';
import { ReplaySubject, Subscription, filter, startWith, BehaviorSubject } from 'rxjs';
import { ThemeComponent } from '@aztrix/theme';
import * as i1$2 from '@angular/cdk/platform';

class OverlayOutletShadowDomComponent {
    constructor() {
        this.empty = true;
        this.preview = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayOutletShadowDomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverlayOutletShadowDomComponent, isStandalone: true, selector: "ax-overlay-outlet-shadow-dom", inputs: { preview: "preview" }, host: { properties: { "class.empty": "this.empty" } }, ngImport: i0, template: `<div
    class="cdk-overlay-container"
    [ngClass]="{'preview-overlay-container': preview, empty: true}"
  ></div>`, isInline: true, styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%}::ng-deep .cdk-global-overlay-wrapper{padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--overlay-inset-bottom, 0px))}.preview-overlay-container{position:inherit}.preview-overlay-container.empty{position:fixed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayOutletShadowDomComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-overlay-outlet-shadow-dom', template: `<div
    class="cdk-overlay-container"
    [ngClass]="{'preview-overlay-container': preview, empty: true}"
  ></div>`, encapsulation: ViewEncapsulation.ShadowDom, standalone: true, imports: [CommonModule], styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%}::ng-deep .cdk-global-overlay-wrapper{padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--overlay-inset-bottom, 0px))}.preview-overlay-container{position:inherit}.preview-overlay-container.empty{position:fixed}\n"] }]
        }], propDecorators: { empty: [{
                type: HostBinding,
                args: ['class.empty']
            }], preview: [{
                type: Input
            }] } });
class OverlayOutletComponent {
    constructor() {
        this.empty = true;
        this.preview = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverlayOutletComponent, isStandalone: true, selector: "ax-overlay-outlet", inputs: { preview: "preview" }, host: { properties: { "class.empty": "this.empty" } }, ngImport: i0, template: `<div
    class="cdk-overlay-container"
    [ngClass]="{'preview-overlay-container': preview, empty: true}"
  ></div>`, isInline: true, styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%}::ng-deep .cdk-global-overlay-wrapper{padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--overlay-inset-bottom, 0px))}.preview-overlay-container{position:inherit}.preview-overlay-container.empty{position:fixed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayOutletComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-overlay-outlet', template: `<div
    class="cdk-overlay-container"
    [ngClass]="{'preview-overlay-container': preview, empty: true}"
  ></div>`, standalone: true, imports: [CommonModule], styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%}::ng-deep .cdk-global-overlay-wrapper{padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--overlay-inset-bottom, 0px))}.preview-overlay-container{position:inherit}.preview-overlay-container.empty{position:fixed}\n"] }]
        }], propDecorators: { empty: [{
                type: HostBinding,
                args: ['class.empty']
            }], preview: [{
                type: Input
            }] } });
class OverlayOutletShadowDomRootComponent {
    constructor() {
        this.empty = true;
        this.preview = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayOutletShadowDomRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverlayOutletShadowDomRootComponent, isStandalone: true, selector: "ax-overlay-outlet-shadow-dom-root", inputs: { preview: "preview", primaryColor: "primaryColor", accentColor: "accentColor", warnColor: "warnColor", fontColor: "fontColor", fontFamily: "fontFamily", backgroundColor: "backgroundColor" }, host: { properties: { "class.empty": "this.empty" } }, ngImport: i0, template: `<ax-theme
    [primaryColor]="primaryColor"
    [accentColor]="accentColor"
    [warnColor]="warnColor"
    [fontColor]="fontColor"
    [fontFamily]="fontFamily"
    [backgroundColor]="backgroundColor"
  >
    <div
      class="cdk-overlay-container"
      [ngClass]="{'preview-overlay-container': preview, empty: true}"
    ></div>
  </ax-theme>`, isInline: true, styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%}::ng-deep .cdk-global-overlay-wrapper{padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--overlay-inset-bottom, 0px))}.preview-overlay-container{position:inherit}.preview-overlay-container.empty{position:fixed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThemeComponent, selector: "ax-theme", inputs: ["primaryColor", "accentColor", "warnColor", "fontColor", "fontFamily", "backgroundColor"] }], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayOutletShadowDomRootComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-overlay-outlet-shadow-dom-root', template: `<ax-theme
    [primaryColor]="primaryColor"
    [accentColor]="accentColor"
    [warnColor]="warnColor"
    [fontColor]="fontColor"
    [fontFamily]="fontFamily"
    [backgroundColor]="backgroundColor"
  >
    <div
      class="cdk-overlay-container"
      [ngClass]="{'preview-overlay-container': preview, empty: true}"
    ></div>
  </ax-theme>`, encapsulation: ViewEncapsulation.ShadowDom, standalone: true, imports: [CommonModule, ThemeComponent], styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%}::ng-deep .cdk-global-overlay-wrapper{padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--overlay-inset-bottom, 0px))}.preview-overlay-container{position:inherit}.preview-overlay-container.empty{position:fixed}\n"] }]
        }], propDecorators: { empty: [{
                type: HostBinding,
                args: ['class.empty']
            }], preview: [{
                type: Input
            }], primaryColor: [{
                type: Input
            }], accentColor: [{
                type: Input
            }], warnColor: [{
                type: Input
            }], fontColor: [{
                type: Input
            }], fontFamily: [{
                type: Input
            }], backgroundColor: [{
                type: Input
            }] } });
class OverlayOutletRootComponent {
    constructor() {
        this.empty = true;
        this.preview = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayOutletRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverlayOutletRootComponent, isStandalone: true, selector: "ax-overlay-outlet-root", inputs: { preview: "preview", primaryColor: "primaryColor", accentColor: "accentColor", warnColor: "warnColor", fontColor: "fontColor", fontFamily: "fontFamily", backgroundColor: "backgroundColor" }, host: { properties: { "class.empty": "this.empty" } }, ngImport: i0, template: `<ax-theme
    [primaryColor]="primaryColor"
    [accentColor]="accentColor"
    [warnColor]="warnColor"
    [fontColor]="fontColor"
    [fontFamily]="fontFamily"
    [backgroundColor]="backgroundColor"
  >
    <div
      class="cdk-overlay-container"
      [ngClass]="{'preview-overlay-container': preview, empty: true}"
    ></div>
  </ax-theme>`, isInline: true, styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%}::ng-deep .cdk-global-overlay-wrapper{padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--overlay-inset-bottom, 0px))}.preview-overlay-container{position:inherit}.preview-overlay-container.empty{position:fixed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThemeComponent, selector: "ax-theme", inputs: ["primaryColor", "accentColor", "warnColor", "fontColor", "fontFamily", "backgroundColor"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayOutletRootComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-overlay-outlet-root', template: `<ax-theme
    [primaryColor]="primaryColor"
    [accentColor]="accentColor"
    [warnColor]="warnColor"
    [fontColor]="fontColor"
    [fontFamily]="fontFamily"
    [backgroundColor]="backgroundColor"
  >
    <div
      class="cdk-overlay-container"
      [ngClass]="{'preview-overlay-container': preview, empty: true}"
    ></div>
  </ax-theme>`, standalone: true, imports: [CommonModule, ThemeComponent], styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%}::ng-deep .cdk-global-overlay-wrapper{padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--overlay-inset-bottom, 0px))}.preview-overlay-container{position:inherit}.preview-overlay-container.empty{position:fixed}\n"] }]
        }], propDecorators: { empty: [{
                type: HostBinding,
                args: ['class.empty']
            }], preview: [{
                type: Input
            }], primaryColor: [{
                type: Input
            }], accentColor: [{
                type: Input
            }], warnColor: [{
                type: Input
            }], fontColor: [{
                type: Input
            }], fontFamily: [{
                type: Input
            }], backgroundColor: [{
                type: Input
            }] } });

class OverlayRootContainerComponent {
    constructor(elementRef) {
        this.elementRef = elementRef;
        this.afterViewInit$ = new ReplaySubject(1);
    }
    ngAfterViewInit() {
        this.afterViewInit$.next(true);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayRootContainerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverlayRootContainerComponent, isStandalone: true, selector: "ax-overlay-root-container", inputs: { primaryColor: "primaryColor", accentColor: "accentColor", warnColor: "warnColor", fontColor: "fontColor", fontFamily: "fontFamily", backgroundColor: "backgroundColor" }, ngImport: i0, template: `<ax-overlay-outlet-root
      [primaryColor]="primaryColor"
      [accentColor]="accentColor"
      [warnColor]="warnColor"
      [fontColor]="fontColor"
      [fontFamily]="fontFamily"
      [backgroundColor]="backgroundColor"
    ></ax-overlay-outlet-root>
    <ax-overlay-outlet-shadow-dom-root
      [primaryColor]="primaryColor"
      [accentColor]="accentColor"
      [warnColor]="warnColor"
      [fontColor]="fontColor"
      [fontFamily]="fontFamily"
      [backgroundColor]="backgroundColor"
    ></ax-overlay-outlet-shadow-dom-root>`, isInline: true, styles: [".empty{position:inherit}:host{display:block;overflow:auto;height:100%;scrollbar-width:none}:host ::-webkit-scrollbar{width:0px}:host.scrollblock{overflow:hidden;display:block}::-webkit-scrollbar{width:0px}\n", ":host{position:absolute}\n"], dependencies: [{ kind: "component", type: OverlayOutletRootComponent, selector: "ax-overlay-outlet-root", inputs: ["preview", "primaryColor", "accentColor", "warnColor", "fontColor", "fontFamily", "backgroundColor"] }, { kind: "component", type: OverlayOutletShadowDomRootComponent, selector: "ax-overlay-outlet-shadow-dom-root", inputs: ["preview", "primaryColor", "accentColor", "warnColor", "fontColor", "fontFamily", "backgroundColor"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayRootContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-overlay-root-container', template: `<ax-overlay-outlet-root
      [primaryColor]="primaryColor"
      [accentColor]="accentColor"
      [warnColor]="warnColor"
      [fontColor]="fontColor"
      [fontFamily]="fontFamily"
      [backgroundColor]="backgroundColor"
    ></ax-overlay-outlet-root>
    <ax-overlay-outlet-shadow-dom-root
      [primaryColor]="primaryColor"
      [accentColor]="accentColor"
      [warnColor]="warnColor"
      [fontColor]="fontColor"
      [fontFamily]="fontFamily"
      [backgroundColor]="backgroundColor"
    ></ax-overlay-outlet-shadow-dom-root>`, standalone: true, imports: [OverlayOutletRootComponent, OverlayOutletShadowDomRootComponent], styles: [".empty{position:inherit}:host{display:block;overflow:auto;height:100%;scrollbar-width:none}:host ::-webkit-scrollbar{width:0px}:host.scrollblock{overflow:hidden;display:block}::-webkit-scrollbar{width:0px}\n", ":host{position:absolute}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { primaryColor: [{
                type: Input
            }], accentColor: [{
                type: Input
            }], warnColor: [{
                type: Input
            }], fontColor: [{
                type: Input
            }], fontFamily: [{
                type: Input
            }], backgroundColor: [{
                type: Input
            }] } });

function modalSizeToPixels(size) {
    switch (size) {
        case ModalSize.EXTRA_SMALL:
        case ModalSize.COMPACT_EXTRA_SMALL:
            return 300;
        case ModalSize.SMALL:
            return 490;
        case ModalSize.MEDIUM:
            return 780;
        case ModalSize.LARGE:
            return 900;
        default:
            return Infinity;
    }
}

const OVERLAY_CDK_CONTAINER = new InjectionToken('OVERLAY_CDK_CONTAINER');

var ModalSize;
(function (ModalSize) {
    ModalSize["DYNAMIC"] = "DYNAMIC";
    ModalSize["EXTRA_SMALL"] = "EXTRA_SMALL";
    ModalSize["SMALL"] = "SMALL";
    ModalSize["MEDIUM"] = "MEDIUM";
    ModalSize["LARGE"] = "LARGE";
    ModalSize["COMPACT_EXTRA_SMALL"] = "COMPACT_EXTRA_SMALL";
})(ModalSize || (ModalSize = {}));
class OverlayService {
    constructor(_overlay, _resolver, _injector, _appRef, _breakpointObserver, _cdkContainer$, _router) {
        this._overlay = _overlay;
        this._resolver = _resolver;
        this._injector = _injector;
        this._appRef = _appRef;
        this._breakpointObserver = _breakpointObserver;
        this._cdkContainer$ = _cdkContainer$;
        this._router = _router;
        this.overlays = [];
        this._portalHost = new DomPortalOutlet(document.body, this._resolver, this._appRef, this._injector, document);
        setTimeout(() => {
            this.createRootOverlayContainer();
        }, 0);
    }
    createModal(hostElement, component, config) {
        const shadowDom = config?.shadowDOM ?? true;
        const hasParentContainer = !!hostElement.nativeElement.closest('ax-overlay-container');
        const container = this._getContainer(hostElement.nativeElement);
        container?.classList.add('scrollblock');
        const outlet = this._getOutlet(container, shadowDom);
        outlet?.classList.remove('empty');
        if (!container) {
            console.error('no container found for overlay, add ax-overlay-container as a parent');
            return undefined;
        }
        const cdkOverlayContainer = this._getCdkContainer(outlet, shadowDom);
        cdkOverlayContainer?.classList.remove('empty');
        this._cdkContainer$.next(cdkOverlayContainer);
        const componentFactory = this._resolver.resolveComponentFactory(component);
        const componentRef = componentFactory.create(this._injector);
        const previousInstance = { ...componentRef.instance };
        if (config?.init) {
            config?.init(componentRef.instance);
        }
        const { title, titleOpts, hasTitleBar, backgroundColor, modalSize, closeOnBackdropClick, closeOnNavigate, close, } = config || {};
        const size = modalSize || ModalSize.SMALL;
        const overlayRef = this._initOverlay(size, hasParentContainer);
        const modalComponent = new ComponentPortal(OverlayComponent);
        const overlayWrapperRef = overlayRef.attach(modalComponent);
        const overlayComponent = overlayWrapperRef.instance;
        const subscriptions = new Subscription();
        const overlayConfig = {
            overlayRef,
            componentRef,
            overlayComponent,
            hostElement,
            shadowDom,
            subscriptions,
            close,
        };
        this.overlays.push(overlayConfig);
        if (closeOnBackdropClick !== false) {
            subscriptions.add(overlayRef.backdropClick().subscribe(() => this._closeModal(overlayConfig)));
        }
        if (closeOnNavigate && this._router) {
            subscriptions.add(this._router.events
                .pipe(filter((event) => event instanceof NavigationStart))
                .subscribe(() => this._closeModal(overlayConfig)));
        }
        overlayComponent.init(title, titleOpts, hasTitleBar, backgroundColor, size, componentRef);
        subscriptions.add(overlayComponent.viewContainerInserted.subscribe(() => {
            if (config?.init && componentRef.instance['ngOnChanges']) {
                const changes = {};
                for (const [key, currentValue] of Object.entries(componentRef.instance)) {
                    const previousValue = previousInstance[key];
                    if (previousValue !== currentValue) {
                        changes[key] = new SimpleChange(previousValue, currentValue, true);
                    }
                }
                componentRef.instance['ngOnChanges'](changes);
            }
        }));
        subscriptions.add(overlayComponent.didClickClose.subscribe(() => this._closeModal(overlayConfig)));
        subscriptions.add(overlayComponent.didResize
            .pipe(startWith(undefined))
            .subscribe(() => overlayRef.updatePositionStrategy(this._calculatePositionStrategy(overlayComponent, size))));
        subscriptions.add(overlayComponent.didResize.subscribe(() => overlayRef.updateSize(this._size(size))));
        return overlayComponent;
    }
    _initOverlay(modalSize = ModalSize.SMALL, hasParentContainer = false) {
        return this._overlay.create({
            hasBackdrop: true,
            backdropClass: 'cdk-overlay-dark-backdrop',
            positionStrategy: this._calculatePositionStrategy(undefined, modalSize),
            scrollStrategy: hasParentContainer ? undefined : this._overlay.scrollStrategies.block(),
            width: this._width(modalSize),
            height: this._height(modalSize),
            disposeOnNavigation: true,
        });
    }
    _closeModal(overlay) {
        if (overlay.close) {
            overlay.close(overlay.componentRef.instance);
        }
        overlay.overlayRef.detach();
        overlay.subscriptions.unsubscribe();
        const foundOverlayIndex = this.overlays.findIndex((o) => o === overlay);
        if (foundOverlayIndex > -1) {
            this.overlays.splice(foundOverlayIndex, 1);
        }
        if (this.overlays.length === 0) {
            const container = this._getContainer(overlay.hostElement.nativeElement);
            container?.classList.remove('scrollblock');
            const outlet = this._getOutlet(container, overlay.shadowDom);
            outlet?.classList.add('empty');
            const cdkContainer = this._getCdkContainer(outlet, overlay.shadowDom);
            cdkContainer?.classList.add('empty');
            this._setRootContainer();
        }
    }
    closeModal(overlayComponent) {
        let overlayConfig = undefined;
        if (overlayComponent) {
            overlayConfig = this.overlays.find((overlay) => overlay.overlayComponent === overlayComponent);
        }
        else {
            overlayConfig = this.overlays[this.overlays.length - 1];
        }
        if (overlayConfig) {
            this._closeModal(overlayConfig);
        }
    }
    closeAllModals() {
        const overlaysCopy = [...this.overlays];
        for (const overlay of overlaysCopy) {
            if (overlay) {
                this._closeModal(overlay);
            }
        }
        this.overlays = [];
    }
    createRootOverlayContainer() {
        try {
            this._rootContainerRef = this._portalHost.attach(new ComponentPortal(OverlayRootContainerComponent));
            this._rootContainerRef.instance.afterViewInit$.subscribe(() => {
                this._setRootContainer();
            });
        }
        catch (e) {
            console.warn(e);
        }
    }
    _width(size) {
        if (this._fullscreen(size)) {
            return `100%`;
        }
        else {
            return `${modalSizeToPixels(size)}px`;
        }
    }
    _height(size) {
        if (this._fullscreen(size)) {
            return `100%`;
        }
        else {
            return 'auto';
        }
    }
    _size(size) {
        return { width: this._width(size), height: this._height(size) };
    }
    _calculatePositionStrategy(componentRef, size) {
        const fullscreen = this._fullscreen(size);
        const landscape = (screen?.orientation?.angle || window.orientation) === 90 ||
            (screen?.orientation?.angle || window.orientation) === -90;
        const top = fullscreen ? '0px' : landscape ? '24px' : '100px';
        const bottom = fullscreen ? '0px' : landscape ? '24px' : '50px';
        if (componentRef) {
            componentRef.elementRef.nativeElement.style.setProperty('--overlay-top', top);
            componentRef.elementRef.nativeElement.style.setProperty('--overlay-bottom', bottom);
        }
        return this._overlay.position().global().centerHorizontally().top(top);
    }
    _breakpointMatched() {
        return this._breakpointObserver.isMatched('(max-width: 424px)');
    }
    _fullscreen(size) {
        return (size !== ModalSize.COMPACT_EXTRA_SMALL &&
            size !== ModalSize.DYNAMIC &&
            (window.innerWidth <= modalSizeToPixels(size) || this._breakpointMatched()));
    }
    _getContainer(element) {
        const container = element.closest('ax-overlay-container');
        if (container) {
            return container;
        }
        this._setRootContainerTheme(element);
        const instance = this._rootContainerRef?.instance;
        return instance ? instance.elementRef.nativeElement : undefined;
    }
    _setRootContainerTheme(element) {
        const instance = this._rootContainerRef?.instance;
        if (instance) {
            const computedStyleHost = getComputedStyle(element);
            instance.primaryColor = computedStyleHost.getPropertyValue('--primary-color-500');
            instance.accentColor = computedStyleHost.getPropertyValue('--accent-color-500');
            instance.warnColor = computedStyleHost.getPropertyValue('--warn-color-500');
            instance.fontFamily = computedStyleHost.getPropertyValue('--font');
            instance.fontColor = computedStyleHost.getPropertyValue('--font-color');
        }
    }
    _setRootContainer() {
        const element = document.getElementsByTagName('ax-theme');
        const container = this._getContainer(element[0]);
        const outlet = this._getOutlet(container, false);
        const cdkOverlayContainer = this._getCdkContainer(outlet, false);
        this._cdkContainer$.next(cdkOverlayContainer);
    }
    _getOutlet(container, shadowDom) {
        return Array.from(container?.children || []).find((e) => shadowDom
            ? e.localName.startsWith('ax-overlay-outlet-shadow-dom')
            : e.localName.startsWith('ax-overlay-outlet'));
    }
    _getCdkContainer(outlet, shadowDom) {
        const children = Array.from((shadowDom ? outlet?.shadowRoot?.children : outlet?.children) || []);
        const cdkOverlayContainer = children.find((e) => e.classList.contains('cdk-overlay-container'));
        if (cdkOverlayContainer) {
            return cdkOverlayContainer;
        }
        else {
            const themeComponent = children.find((e) => e.localName === 'ax-theme');
            return Array.from(themeComponent?.children || []).find((e) => e.classList.contains('cdk-overlay-container'));
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayService, deps: [{ token: i1$1.Overlay }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: i2.BreakpointObserver }, { token: OVERLAY_CDK_CONTAINER }, { token: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: i2.BreakpointObserver }, { type: i4.BehaviorSubject, decorators: [{
                    type: Inject,
                    args: [OVERLAY_CDK_CONTAINER]
                }] }, { type: i3.Router, decorators: [{
                    type: Optional
                }] }] });

class OverlayContentDirective {
    constructor(viewContainerRef) {
        this.viewContainerRef = viewContainerRef;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OverlayContentDirective, isStandalone: true, selector: "[axOverlayContent]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[axOverlayContent]',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });

const FOCUSABLE_ELEMENTS_SELECTOR = [
    'a[href]',
    'button:not([disabled]):not(.c-modal__close)',
    'input:not([disabled]):not([type="hidden"])',
    'select:not([disabled])',
    'textarea:not([disabled])',
    '[contenteditable]',
    '[tabindex]:not([tabindex="-1"])',
].join(', ');
class OverlayComponent {
    constructor(elementRef, _changeDetector, _breakpointObserver) {
        this.elementRef = elementRef;
        this._changeDetector = _changeDetector;
        this._breakpointObserver = _breakpointObserver;
        this.backgroundColor = '#fff';
        this.didClickClose = new EventEmitter();
        this.didResize = new EventEmitter();
        this.viewContainerInserted = new EventEmitter();
    }
    ngAfterViewInit() {
        this._loadComponent();
        this._focusFirstElement();
        this._changeDetector.detectChanges();
    }
    init(title, titleOpts, hasTitleBar = true, backgroundColor = '#fff', modalSize, componentRef) {
        this.title = title;
        this.titleOpts = titleOpts;
        this.hasTitleBar = hasTitleBar;
        this.modalSize = modalSize;
        this.backgroundColor = backgroundColor;
        this.componentRef = componentRef;
    }
    _loadComponent() {
        const viewContainerRef = this.modalContent.viewContainerRef;
        viewContainerRef.clear();
        viewContainerRef.insert(this.componentRef.hostView);
        this.viewContainerInserted.next();
    }
    _focusFirstElement() {
        if (!this.elementRef.nativeElement.contains(document.activeElement)) {
            const autoFocusable = this.elementRef.nativeElement.querySelector(`[autofocus]`);
            const firstFocusable = (this.elementRef.nativeElement.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)[0]);
            const elementToFocus = autoFocusable || firstFocusable || this.elementRef.nativeElement;
            elementToFocus.focus();
        }
    }
    keyboardEventHanlder(event) {
        if (event.key === 'Escape') {
            this.didClickClose.emit();
        }
    }
    didResizeWindow() {
        this.didResize.emit();
    }
    get fullScreenModal() {
        return (this.modalSize !== ModalSize.COMPACT_EXTRA_SMALL &&
            this.modalSize !== ModalSize.DYNAMIC &&
            (window.innerWidth <= modalSizeToPixels(this.modalSize) || this._breakpointMatched()));
    }
    _breakpointMatched() {
        return this._breakpointObserver.isMatched('(max-width: 424px)');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverlayComponent, isStandalone: true, selector: "ax-overlay", host: { listeners: { "window:keyup": "keyboardEventHanlder($event)", "window:resize": "didResizeWindow()" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: OverlayContentDirective, descendants: true }], ngImport: i0, template: "<div\n  class=\"c-modal__dialog fade-in\"\n  [ngClass]=\"{'no-title': !title, 'no-title-bar': !hasTitleBar, full: fullScreenModal}\"\n  [style.background-color]=\"backgroundColor\"\n>\n  <div *ngIf=\"hasTitleBar\" class=\"c-modal__header\">\n    <button\n      axButton\n      class=\"c-modal__close cy-close\"\n      [ariaLabel]=\"'modal.close' | translate\"\n      icon-button\n      (click)=\"didClickClose.emit()\"\n    >\n      <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n    </button>\n    <div class=\"c-modal__title\" *ngIf=\"title\">\n      <h4>\n        {{ title | translate: titleOpts }}\n      </h4>\n    </div>\n  </div>\n  <div class=\"c-modal__body\" [ngClass]=\"{'top-rounded': !hasTitleBar}\">\n    <ng-template axOverlayContent></ng-template>\n  </div>\n</div>\n", styles: [":host{width:100%;height:100%;--overlay-header-height: 50px}:host ::ng-deep mat-tab-group{padding-bottom:1rem}.fade-in{animation-name:fadeInZoom;animation-iteration-count:1;animation-timing-function:ease-in-out;animation-duration:.2s}@keyframes fadeInZoom{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.c-modal__body{height:100%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--overlay-top, 0px) - var(--overlay-bottom, 0px) - var(--overlay-header-height, 0px) - var(--overlay-inset-bottom, 0px));width:100%;overflow-y:auto;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.c-modal__body.top-rounded{border-top-left-radius:10px;border-top-right-radius:10px}.c-modal__body ::ng-deep .h-button-wrapper{padding:.5rem 0}.c-modal__dialog{height:100%;border-radius:10px}.c-modal__dialog.no-title-bar .c-modal__body{max-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--overlay-top, 0px) - var(--overlay-bottom, 0px) - var(--overlay-inset-bottom, 0px))}.c-modal__dialog.no-title .c-modal__header{background-color:transparent}.c-modal__dialog ::ng-deep ax-snackbar{margin:0}.c-modal__dialog ::ng-deep ax-snackbar .m-snackbar__wrapper{padding:0}.c-modal__dialog.full{border-radius:0;overflow:hidden;margin:initial}.c-modal__dialog.full .c-modal__body{width:100%;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal__dialog.full .c-modal__header{border-top-right-radius:0;border-top-left-radius:0}.c-modal__header{height:var(--overlay-header-height);display:grid;grid-template-columns:50px 1fr 50px;align-items:center;justify-content:space-between;text-align:center;width:100%;background-color:#efefef;color:#363f48;border-top-right-radius:10px;border-top-left-radius:10px}.c-modal__title{font-size:1.125rem}.c-modal__title h1,.c-modal__title h2,.c-modal__title h3,.c-modal__title h4,.c-modal__title h5,.c-modal__title h6{font-size:1.125rem;margin:0}.c-modal__title .icon{width:1em;height:1em;line-height:1;margin-right:.25rem}.c-modal__close{margin-left:.5rem;font-size:.875rem}.c-modal__close .icon{cursor:pointer}.close{position:absolute;z-index:2;top:-16px;left:-16px;padding:0;min-width:36px;justify-content:center;color:#000;background-color:#fff}.close:hover{background-color:#27ae600f}\n"], dependencies: [{ kind: "directive", type: OverlayContentDirective, selector: "[axOverlayContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: i3$1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "ngmodule", type: HelperPipesModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-overlay', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [OverlayContentDirective, CommonModule, IconsModule, ButtonModule, HelperPipesModule], template: "<div\n  class=\"c-modal__dialog fade-in\"\n  [ngClass]=\"{'no-title': !title, 'no-title-bar': !hasTitleBar, full: fullScreenModal}\"\n  [style.background-color]=\"backgroundColor\"\n>\n  <div *ngIf=\"hasTitleBar\" class=\"c-modal__header\">\n    <button\n      axButton\n      class=\"c-modal__close cy-close\"\n      [ariaLabel]=\"'modal.close' | translate\"\n      icon-button\n      (click)=\"didClickClose.emit()\"\n    >\n      <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n    </button>\n    <div class=\"c-modal__title\" *ngIf=\"title\">\n      <h4>\n        {{ title | translate: titleOpts }}\n      </h4>\n    </div>\n  </div>\n  <div class=\"c-modal__body\" [ngClass]=\"{'top-rounded': !hasTitleBar}\">\n    <ng-template axOverlayContent></ng-template>\n  </div>\n</div>\n", styles: [":host{width:100%;height:100%;--overlay-header-height: 50px}:host ::ng-deep mat-tab-group{padding-bottom:1rem}.fade-in{animation-name:fadeInZoom;animation-iteration-count:1;animation-timing-function:ease-in-out;animation-duration:.2s}@keyframes fadeInZoom{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.c-modal__body{height:100%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--overlay-top, 0px) - var(--overlay-bottom, 0px) - var(--overlay-header-height, 0px) - var(--overlay-inset-bottom, 0px));width:100%;overflow-y:auto;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.c-modal__body.top-rounded{border-top-left-radius:10px;border-top-right-radius:10px}.c-modal__body ::ng-deep .h-button-wrapper{padding:.5rem 0}.c-modal__dialog{height:100%;border-radius:10px}.c-modal__dialog.no-title-bar .c-modal__body{max-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--overlay-top, 0px) - var(--overlay-bottom, 0px) - var(--overlay-inset-bottom, 0px))}.c-modal__dialog.no-title .c-modal__header{background-color:transparent}.c-modal__dialog ::ng-deep ax-snackbar{margin:0}.c-modal__dialog ::ng-deep ax-snackbar .m-snackbar__wrapper{padding:0}.c-modal__dialog.full{border-radius:0;overflow:hidden;margin:initial}.c-modal__dialog.full .c-modal__body{width:100%;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal__dialog.full .c-modal__header{border-top-right-radius:0;border-top-left-radius:0}.c-modal__header{height:var(--overlay-header-height);display:grid;grid-template-columns:50px 1fr 50px;align-items:center;justify-content:space-between;text-align:center;width:100%;background-color:#efefef;color:#363f48;border-top-right-radius:10px;border-top-left-radius:10px}.c-modal__title{font-size:1.125rem}.c-modal__title h1,.c-modal__title h2,.c-modal__title h3,.c-modal__title h4,.c-modal__title h5,.c-modal__title h6{font-size:1.125rem;margin:0}.c-modal__title .icon{width:1em;height:1em;line-height:1;margin-right:.25rem}.c-modal__close{margin-left:.5rem;font-size:.875rem}.c-modal__close .icon{cursor:pointer}.close{position:absolute;z-index:2;top:-16px;left:-16px;padding:0;min-width:36px;justify-content:center;color:#000;background-color:#fff}.close:hover{background-color:#27ae600f}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.BreakpointObserver }], propDecorators: { modalContent: [{
                type: ViewChild,
                args: [OverlayContentDirective]
            }], keyboardEventHanlder: [{
                type: HostListener,
                args: ['window:keyup', ['$event']]
            }], didResizeWindow: [{
                type: HostListener,
                args: ['window:resize']
            }] } });

class AztrixOverlayContainer extends OverlayContainer {
    constructor(document, platform, _cdkContainer$) {
        super(document, platform);
        this._cdkContainer$ = _cdkContainer$;
    }
    _createContainer() {
        this._cdkContainer$.subscribe((containerElement) => {
            this._containerElement = containerElement;
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AztrixOverlayContainer, deps: [{ token: DOCUMENT }, { token: i1$2.Platform }, { token: OVERLAY_CDK_CONTAINER }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AztrixOverlayContainer, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AztrixOverlayContainer, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i1$2.Platform }, { type: i4.BehaviorSubject, decorators: [{
                    type: Inject,
                    args: [OVERLAY_CDK_CONTAINER]
                }] }] });

class OverlayContainerComponent {
    constructor() {
        this.preview = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverlayContainerComponent, isStandalone: true, selector: "ax-overlay-container", inputs: { preview: "preview" }, ngImport: i0, template: `<ng-content class="overlay-container-content"></ng-content>
    <ax-overlay-outlet [preview]="preview"></ax-overlay-outlet>
    <ax-overlay-outlet-shadow-dom [preview]="preview"></ax-overlay-outlet-shadow-dom>`, isInline: true, styles: [".empty{position:inherit}:host{display:block;overflow:auto;height:100%;scrollbar-width:none}:host ::-webkit-scrollbar{width:0px}:host.scrollblock{overflow:hidden;display:block}::-webkit-scrollbar{width:0px}\n"], dependencies: [{ kind: "component", type: OverlayOutletComponent, selector: "ax-overlay-outlet", inputs: ["preview"] }, { kind: "component", type: OverlayOutletShadowDomComponent, selector: "ax-overlay-outlet-shadow-dom", inputs: ["preview"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-overlay-container', template: `<ng-content class="overlay-container-content"></ng-content>
    <ax-overlay-outlet [preview]="preview"></ax-overlay-outlet>
    <ax-overlay-outlet-shadow-dom [preview]="preview"></ax-overlay-outlet-shadow-dom>`, standalone: true, imports: [OverlayOutletComponent, OverlayOutletShadowDomComponent], styles: [".empty{position:inherit}:host{display:block;overflow:auto;height:100%;scrollbar-width:none}:host ::-webkit-scrollbar{width:0px}:host.scrollblock{overflow:hidden;display:block}::-webkit-scrollbar{width:0px}\n"] }]
        }], propDecorators: { preview: [{
                type: Input
            }] } });

class OverlayModule {
    static forRoot() {
        return {
            ngModule: OverlayModule,
            providers: provideOverlay(),
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: OverlayModule, imports: [OverlayContainerComponent], exports: [OverlayContainerComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayModule, imports: [OverlayContainerComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [OverlayContainerComponent],
                    exports: [OverlayContainerComponent],
                }]
        }] });
function provideOverlay() {
    return [
        OverlayComponent,
        OverlayService,
        {
            provide: OVERLAY_CDK_CONTAINER,
            useValue: new BehaviorSubject(undefined),
        },
        { provide: OverlayContainer, useClass: AztrixOverlayContainer },
    ];
}

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

export { ModalSize, OVERLAY_CDK_CONTAINER, OverlayComponent, OverlayContainerComponent, OverlayContentDirective, OverlayModule, OverlayService, provideOverlay };
//# sourceMappingURL=aztrix-components-overlay.mjs.map
