import { BreakpointObserver } from '@angular/cdk/layout';
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, ViewChild, } from '@angular/core';
import { ButtonModule } from '@aztrix/components/button';
import { HelperPipesModule } from '@aztrix/helpers';
import { IconsModule } from '@aztrix/icons';
import { ModalSize } from './overlay.service';
import { OverlayContentDirective } from './overlay-content.directive';
import { modalSizeToPixels } from './overlay-functions';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/layout";
import * as i2 from "@angular/common";
import * as i3 from "@aztrix/icons";
import * as i4 from "@aztrix/components/button";
import * as i5 from "@aztrix/helpers";
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(', ');
export 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: i1.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.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: i1.BreakpointObserver }], propDecorators: { modalContent: [{
                type: ViewChild,
                args: [OverlayContentDirective]
            }], keyboardEventHanlder: [{
                type: HostListener,
                args: ['window:keyup', ['$event']]
            }], didResizeWindow: [{
                type: HostListener,
                args: ['window:resize']
            }] } });
//# sourceMappingURL=data:application/json;base64, 