@acorex/components 7.1.0 → 7.1.2

package/fesm2022/acorex-components-popup.mjs

@@ -16,270 +16,270 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXPopupComponent extends AXBaseComponentMixin {
-    _zone;
-    _viewContainerRef;
-    loadingService;
-    _platform;
-    isLoading = true;
-    _loadingId;
-    title;
-    onClosed = new EventEmitter();
-    size = 'sm';
-    draggable = true;
-    data = {};
-    showCloseButton = true;
-    showHeader = true;
-    content;
-    _selectedPortal;
-    _footerPortal;
-    _headerPortal;
-    /**
-     *  @ignore
-     */
-    constructor(elementRef, cdr, _zone, _viewContainerRef, loadingService, _platform) {
-        super(elementRef, cdr);
-        this._zone = _zone;
-        this._viewContainerRef = _viewContainerRef;
-        this.loadingService = loadingService;
-        this._platform = _platform;
-    }
-    onInit() {
-        super.onInit();
-        if (this._platform.is('Mobile')) {
-            this.draggable = false;
-        }
-        this._loadingId = this.loadingService.show(
-        //TODO: check ts error
-        //@ts-ignore
-        this._getHostElement().querySelector('.ax-popup-body-container'));
-        //
-        if (typeof this.content === 'string') {
-            //   this.rendererService.findLoadedComponentByRoute(this.content, 20).then(route => {
-            //     setTimeout(() => {
-            //       this.loadComponent(route.component);
-            //     }, 300);
-            //   });
-        }
-        else if (this.content instanceof TemplateRef) {
-            this._selectedPortal = new TemplatePortal(this.content, this._viewContainerRef, { $implicit: this.data, ref: this });
-            this._cdr.markForCheck();
-        }
-        else if (typeof this.content === 'function') {
-            this._selectedPortal = new ComponentPortal(this.content);
-            this._cdr.markForCheck();
-        }
-        //
-        // this._platform.keydown.subscribe((e) => {
-        //     this.close();
-        //     e.nativeEvent.stopPropagation();
-        // });
-    }
-    _handleAttched(ref) {
-        ref = ref;
-        if (ref.instance) {
-            this[TAB_META_KEY].component = ref.instance;
-            Object.assign(this[TAB_META_KEY].component, this.data);
-            Object.assign(this[TAB_META_KEY].component, { _isPopup: true });
-            if (ref.instance.onClosed) {
-                ref.instance.onClosed.subscribe((e) => {
-                    this.onClosed.emit(e);
-                });
-            }
-        }
-        this._zone.runOutsideAngular(() => {
-            setTimeout(() => {
-                const main = this._getHostElement().querySelector('.ax-popup-main-container');
-                const popHeader = this._getHostElement().querySelector('.ax-popup-header-container');
-                const popFooter = this._getHostElement().querySelector('.ax-popup-footer-container');
-                const footer = main.querySelector('ax-footer');
-                const header = main.querySelector('ax-header');
-                if (footer) {
-                    popFooter.append(footer);
-                }
-                if (header) {
-                    //TODO: check ts error
-                    //@ts-ignore
-                    popHeader.innerHTML = '';
-                    popHeader.append(header);
-                }
-                this.focus();
-            });
-        });
-        this.loadingService.hide(this._loadingId);
-        this._cdr.markForCheck();
-    }
-    onKeydownHandler(event) {
-        let focusedOrHasFocused = this._getHostElement().matches(':focus-within');
-        if (this.showCloseButton && focusedOrHasFocused) {
-            this.close();
-        }
-    }
-    _handleCloseClick() {
-        this.close();
-    }
-    ngOnDestroy() {
-        this.loadingService.hide(this._loadingId);
-    }
-    focus() {
-        setTimeout(() => this._getHostElement().querySelector('.ax-popup')?.focus());
-    }
-    close() {
-        this.onClosed.emit({
-            //TODO: check ts error
-            //@ts-ignore
-            component: this[TAB_META_KEY].component,
-            htmlElement: this._getHostElement(),
-        });
-        this._cdr.detectChanges();
-    }
-    onFullScreen() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: i1.AXLoadingService }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <div class=\"ax-popup-header\" *ngIf=\"showHeader\">\r\n                <span class=\"ax-popup-title\">{{title}}</span>\r\n                <span class=\"ax-icon ax-icon-close\" (click)=\"_handleCloseClick()\" tabindex=\"1\"></span>\r\n            </div>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>", styles: [".ax-popup{display:flex;flex-direction:column;background-color:rgba(var(--ax-color-surface));box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);outline-color:transparent;padding:0;width:50%;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:-moz-fit-content;min-height:fit-content;margin:0 auto;width:auto}.ax-popup .ax-popup-header{padding:.75rem;display:flex;align-items:center;justify-content:space-between}.ax-popup .ax-popup-header .ax-popup-title{font-size:1rem}.ax-popup .ax-popup-header .ax-icon-close{font-size:1.5rem;cursor:pointer}.ax-popup .ax-popup-header .ax-icon-close:hover{opacity:.5}.ax-popup ax-footer{padding:.75rem;display:flex;align-items:center;justify-content:space-between}.ax-popup:focus{outline-color:transparent}.ax-popup:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}.ax-popup ax-footer{background-color:rgba(var(--ax-color-on-surface))}.ax-popup .ax-popup-main-container{overflow:auto;flex:1 1 0%}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.ax-popup.ax-fit{width:-moz-fit-content;width:fit-content}@media (max-width: 599px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-main-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-main-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-main-container>ng-component>div{width:100%}}@media (min-width: 600px){.ax-popup.ax-popup-sm{min-width:60vw!important;max-width:85vw!important}.ax-popup.ax-popup-md{min-width:70vw!important;max-width:85vw!important}.ax-popup.ax-popup-lg{min-width:85vw!important;max-width:90vw!important}}@media (min-width: 1200px){.ax-popup.ax-popup-sm{min-width:25vw!important;max-width:35vw!important}.ax-popup.ax-popup-md{min-width:45vw!important;max-width:55vw!important}.ax-popup.ax-popup-lg{min-width:75vw!important;max-width:95vw!important}}@media (min-width: 1800px){.ax-popup.ax-popup-sm{min-width:15vw!important;max-width:25vw!important}.ax-popup.ax-popup-md{min-width:30vw!important;max-width:50vw!important}.ax-popup.ax-popup-lg{min-width:45vw!important;max-width:85vw!important}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <div class=\"ax-popup-header\" *ngIf=\"showHeader\">\r\n                <span class=\"ax-popup-title\">{{title}}</span>\r\n                <span class=\"ax-icon ax-icon-close\" (click)=\"_handleCloseClick()\" tabindex=\"1\"></span>\r\n            </div>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>", styles: [".ax-popup{display:flex;flex-direction:column;background-color:rgba(var(--ax-color-surface));box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);outline-color:transparent;padding:0;width:50%;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:-moz-fit-content;min-height:fit-content;margin:0 auto;width:auto}.ax-popup .ax-popup-header{padding:.75rem;display:flex;align-items:center;justify-content:space-between}.ax-popup .ax-popup-header .ax-popup-title{font-size:1rem}.ax-popup .ax-popup-header .ax-icon-close{font-size:1.5rem;cursor:pointer}.ax-popup .ax-popup-header .ax-icon-close:hover{opacity:.5}.ax-popup ax-footer{padding:.75rem;display:flex;align-items:center;justify-content:space-between}.ax-popup:focus{outline-color:transparent}.ax-popup:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}.ax-popup ax-footer{background-color:rgba(var(--ax-color-on-surface))}.ax-popup .ax-popup-main-container{overflow:auto;flex:1 1 0%}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.ax-popup.ax-fit{width:-moz-fit-content;width:fit-content}@media (max-width: 599px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-main-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-main-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-main-container>ng-component>div{width:100%}}@media (min-width: 600px){.ax-popup.ax-popup-sm{min-width:60vw!important;max-width:85vw!important}.ax-popup.ax-popup-md{min-width:70vw!important;max-width:85vw!important}.ax-popup.ax-popup-lg{min-width:85vw!important;max-width:90vw!important}}@media (min-width: 1200px){.ax-popup.ax-popup-sm{min-width:25vw!important;max-width:35vw!important}.ax-popup.ax-popup-md{min-width:45vw!important;max-width:55vw!important}.ax-popup.ax-popup-lg{min-width:75vw!important;max-width:95vw!important}}@media (min-width: 1800px){.ax-popup.ax-popup-sm{min-width:15vw!important;max-width:25vw!important}.ax-popup.ax-popup-md{min-width:30vw!important;max-width:50vw!important}.ax-popup.ax-popup-lg{min-width:45vw!important;max-width:85vw!important}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: i1.AXLoadingService }, { type: i2.AXPlatform }]; }, propDecorators: { onKeydownHandler: [{
-                type: HostListener,
-                args: ['keydown.escape', ['$event']]
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXPopupComponent extends AXBaseComponentMixin {
+    _zone;
+    _viewContainerRef;
+    loadingService;
+    _platform;
+    isLoading = true;
+    _loadingId;
+    title;
+    onClosed = new EventEmitter();
+    size = 'sm';
+    draggable = true;
+    data = {};
+    showCloseButton = true;
+    showHeader = true;
+    content;
+    _selectedPortal;
+    _footerPortal;
+    _headerPortal;
+    /**
+     *  @ignore
+     */
+    constructor(elementRef, cdr, _zone, _viewContainerRef, loadingService, _platform) {
+        super(elementRef, cdr);
+        this._zone = _zone;
+        this._viewContainerRef = _viewContainerRef;
+        this.loadingService = loadingService;
+        this._platform = _platform;
+    }
+    onInit() {
+        super.onInit();
+        if (this._platform.is('Mobile')) {
+            this.draggable = false;
+        }
+        this._loadingId = this.loadingService.show(
+        //TODO: check ts error
+        //@ts-ignore
+        this._getHostElement().querySelector('.ax-popup-body-container'));
+        //
+        if (typeof this.content === 'string') {
+            //   this.rendererService.findLoadedComponentByRoute(this.content, 20).then(route => {
+            //     setTimeout(() => {
+            //       this.loadComponent(route.component);
+            //     }, 300);
+            //   });
+        }
+        else if (this.content instanceof TemplateRef) {
+            this._selectedPortal = new TemplatePortal(this.content, this._viewContainerRef, { $implicit: this.data, ref: this });
+            this._cdr.markForCheck();
+        }
+        else if (typeof this.content === 'function') {
+            this._selectedPortal = new ComponentPortal(this.content);
+            this._cdr.markForCheck();
+        }
+        //
+        // this._platform.keydown.subscribe((e) => {
+        //     this.close();
+        //     e.nativeEvent.stopPropagation();
+        // });
+    }
+    _handleAttched(ref) {
+        ref = ref;
+        if (ref.instance) {
+            this[TAB_META_KEY].component = ref.instance;
+            Object.assign(this[TAB_META_KEY].component, this.data);
+            Object.assign(this[TAB_META_KEY].component, { _isPopup: true });
+            if (ref.instance.onClosed) {
+                ref.instance.onClosed.subscribe((e) => {
+                    this.onClosed.emit(e);
+                });
+            }
+        }
+        this._zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                const main = this._getHostElement().querySelector('.ax-popup-main-container');
+                const popHeader = this._getHostElement().querySelector('.ax-popup-header-container');
+                const popFooter = this._getHostElement().querySelector('.ax-popup-footer-container');
+                const footer = main.querySelector('ax-footer');
+                const header = main.querySelector('ax-header');
+                if (footer) {
+                    popFooter.append(footer);
+                }
+                if (header) {
+                    //TODO: check ts error
+                    //@ts-ignore
+                    popHeader.innerHTML = '';
+                    popHeader.append(header);
+                }
+                this.focus();
+            });
+        });
+        this.loadingService.hide(this._loadingId);
+        this._cdr.markForCheck();
+    }
+    onKeydownHandler(event) {
+        let focusedOrHasFocused = this._getHostElement().matches(':focus-within');
+        if (this.showCloseButton && focusedOrHasFocused) {
+            this.close();
+        }
+    }
+    _handleCloseClick() {
+        this.close();
+    }
+    ngOnDestroy() {
+        this.loadingService.hide(this._loadingId);
+    }
+    focus() {
+        setTimeout(() => this._getHostElement().querySelector('.ax-popup')?.focus());
+    }
+    close() {
+        this.onClosed.emit({
+            //TODO: check ts error
+            //@ts-ignore
+            component: this[TAB_META_KEY].component,
+            htmlElement: this._getHostElement(),
+        });
+        this._cdr.detectChanges();
+    }
+    onFullScreen() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: i1.AXLoadingService }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <div class=\"ax-popup-header\" *ngIf=\"showHeader\">\r\n                <span class=\"ax-popup-title\">{{title}}</span>\r\n                <span class=\"ax-icon ax-icon-close\" (click)=\"_handleCloseClick()\" tabindex=\"1\"></span>\r\n            </div>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>", styles: [".ax-popup{display:flex;flex-direction:column;background-color:rgba(var(--ax-color-surface));box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);outline-color:transparent;padding:0;width:50%;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:-moz-fit-content;min-height:fit-content;margin:0 auto;width:auto}.ax-popup .ax-popup-header{padding:.75rem;display:flex;align-items:center;justify-content:space-between}.ax-popup .ax-popup-header .ax-popup-title{font-size:1rem}.ax-popup .ax-popup-header .ax-icon-close{font-size:1.5rem;cursor:pointer}.ax-popup .ax-popup-header .ax-icon-close:hover{opacity:.5}.ax-popup ax-footer{padding:.75rem;display:flex;align-items:center;justify-content:space-between}.ax-popup:focus{outline-color:transparent}.ax-popup:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}.ax-popup ax-footer{background-color:rgba(var(--ax-color-on-surface))}.ax-popup .ax-popup-main-container{overflow:auto;flex:1 1 0%}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.ax-popup.ax-fit{width:-moz-fit-content;width:fit-content}@media (max-width: 599px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-main-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-main-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-main-container>ng-component>div{width:100%}}@media (min-width: 600px){.ax-popup.ax-popup-sm{min-width:60vw!important;max-width:85vw!important}.ax-popup.ax-popup-md{min-width:70vw!important;max-width:85vw!important}.ax-popup.ax-popup-lg{min-width:85vw!important;max-width:90vw!important}}@media (min-width: 1200px){.ax-popup.ax-popup-sm{min-width:25vw!important;max-width:35vw!important}.ax-popup.ax-popup-md{min-width:45vw!important;max-width:55vw!important}.ax-popup.ax-popup-lg{min-width:75vw!important;max-width:95vw!important}}@media (min-width: 1800px){.ax-popup.ax-popup-sm{min-width:15vw!important;max-width:25vw!important}.ax-popup.ax-popup-md{min-width:30vw!important;max-width:50vw!important}.ax-popup.ax-popup-lg{min-width:45vw!important;max-width:85vw!important}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <div class=\"ax-popup-header\" *ngIf=\"showHeader\">\r\n                <span class=\"ax-popup-title\">{{title}}</span>\r\n                <span class=\"ax-icon ax-icon-close\" (click)=\"_handleCloseClick()\" tabindex=\"1\"></span>\r\n            </div>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>", styles: [".ax-popup{display:flex;flex-direction:column;background-color:rgba(var(--ax-color-surface));box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);outline-color:transparent;padding:0;width:50%;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:-moz-fit-content;min-height:fit-content;margin:0 auto;width:auto}.ax-popup .ax-popup-header{padding:.75rem;display:flex;align-items:center;justify-content:space-between}.ax-popup .ax-popup-header .ax-popup-title{font-size:1rem}.ax-popup .ax-popup-header .ax-icon-close{font-size:1.5rem;cursor:pointer}.ax-popup .ax-popup-header .ax-icon-close:hover{opacity:.5}.ax-popup ax-footer{padding:.75rem;display:flex;align-items:center;justify-content:space-between}.ax-popup:focus{outline-color:transparent}.ax-popup:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}.ax-popup ax-footer{background-color:rgba(var(--ax-color-on-surface))}.ax-popup .ax-popup-main-container{overflow:auto;flex:1 1 0%}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.ax-popup.ax-fit{width:-moz-fit-content;width:fit-content}@media (max-width: 599px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-main-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-main-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-main-container>ng-component>div{width:100%}}@media (min-width: 600px){.ax-popup.ax-popup-sm{min-width:60vw!important;max-width:85vw!important}.ax-popup.ax-popup-md{min-width:70vw!important;max-width:85vw!important}.ax-popup.ax-popup-lg{min-width:85vw!important;max-width:90vw!important}}@media (min-width: 1200px){.ax-popup.ax-popup-sm{min-width:25vw!important;max-width:35vw!important}.ax-popup.ax-popup-md{min-width:45vw!important;max-width:55vw!important}.ax-popup.ax-popup-lg{min-width:75vw!important;max-width:95vw!important}}@media (min-width: 1800px){.ax-popup.ax-popup-sm{min-width:15vw!important;max-width:25vw!important}.ax-popup.ax-popup-md{min-width:30vw!important;max-width:50vw!important}.ax-popup.ax-popup-lg{min-width:45vw!important;max-width:85vw!important}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: i1.AXLoadingService }, { type: i2.AXPlatform }]; }, propDecorators: { onKeydownHandler: [{
+                type: HostListener,
+                args: ['keydown.escape', ['$event']]
             }] } });
 
-/**
- * This is a service which you can create popup with it
- *
- * @category Components
- */
-class AXPopupService {
-    overlayService;
-    stack = [];
-    options;
-    /**
-     *  @ignore
-     */
-    constructor(overlayService) {
-        this.overlayService = overlayService;
-    }
-    /**
-     *  @ignore
-     */
-    open(arg1, arg2) {
-        const options = {
-            showCloseButton: true,
-            showHeader: true,
-            size: 'md',
-            maximizable: false,
-            draggable: true,
-            transparentBackdrop: false,
-            closeOnClickOutside: false,
-        };
-        if (typeof arg2 === 'string') {
-            options.title = arg2;
-        }
-        else {
-            Object.assign(options, arg2);
-        }
-        const lastActiveElement = document.activeElement;
-        const com = this.overlayService.show(AXPopupComponent, options, {
-            transparentBackdrop: options.transparentBackdrop,
-            scroll: 'block',
-            onBackdropClick: () => {
-                if (options.closeOnClickOutside) {
-                    popup.close();
-                }
-            },
-            // onBackdropClick: () => {
-            //   console.log('back');
-            // },
-        });
-        const popup = com.instance;
-        popup.content = arg1;
-        popup[TAB_META_KEY] = {};
-        if (options.size) {
-            popup.size = options.size;
-        }
-        this.stack.push(popup);
-        popup.onClosed.subscribe(c => {
-            this.closePopup(popup, com, c, lastActiveElement);
-        });
-        const promise = new AXComponentClosedPromise(resolve => {
-            popup[TAB_META_KEY].close = e => {
-                if (resolve) {
-                    resolve(e);
-                }
-            };
-        });
-        promise['closeMethod'] = () => {
-            popup.close();
-        };
-        return promise;
-    }
-    closePopup(popup, com, result, lastActiveElement) {
-        const closeFunc = e => {
-            com.dispose();
-            this.stack.pop();
-            delete e.cancel;
-            popup[TAB_META_KEY].close(e);
-            if (lastActiveElement?.focus) {
-                lastActiveElement.focus();
-            }
-            else if (this.stack.length) {
-                this.stack.reverse()[0].focus();
-            }
-        };
-        const e = { cancel: false };
-        const closingFunc = popup[TAB_META_KEY].component.onClosing;
-        if (closingFunc) {
-            const res = closingFunc(e);
-            if (res instanceof Promise) {
-                res.then(() => {
-                    if (e == null || e.cancel !== true) {
-                        closeFunc(result);
-                    }
-                });
-            }
-            else {
-                if (e == null || e.cancel !== true) {
-                    closeFunc(result);
-                }
-            }
-        }
-        else {
-            closeFunc(result);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupService, deps: [{ token: i1$1.AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+/**
+ * This is a service which you can create popup with it
+ *
+ * @category Components
+ */
+class AXPopupService {
+    overlayService;
+    stack = [];
+    options;
+    /**
+     *  @ignore
+     */
+    constructor(overlayService) {
+        this.overlayService = overlayService;
+    }
+    /**
+     *  @ignore
+     */
+    open(arg1, arg2) {
+        const options = {
+            showCloseButton: true,
+            showHeader: true,
+            size: 'md',
+            maximizable: false,
+            draggable: true,
+            transparentBackdrop: false,
+            closeOnClickOutside: false,
+        };
+        if (typeof arg2 === 'string') {
+            options.title = arg2;
+        }
+        else {
+            Object.assign(options, arg2);
+        }
+        const lastActiveElement = document.activeElement;
+        const com = this.overlayService.show(AXPopupComponent, options, {
+            transparentBackdrop: options.transparentBackdrop,
+            scroll: 'block',
+            onBackdropClick: () => {
+                if (options.closeOnClickOutside) {
+                    popup.close();
+                }
+            },
+            // onBackdropClick: () => {
+            //   console.log('back');
+            // },
+        });
+        const popup = com.instance;
+        popup.content = arg1;
+        popup[TAB_META_KEY] = {};
+        if (options.size) {
+            popup.size = options.size;
+        }
+        this.stack.push(popup);
+        popup.onClosed.subscribe(c => {
+            this.closePopup(popup, com, c, lastActiveElement);
+        });
+        const promise = new AXComponentClosedPromise(resolve => {
+            popup[TAB_META_KEY].close = e => {
+                if (resolve) {
+                    resolve(e);
+                }
+            };
+        });
+        promise['closeMethod'] = () => {
+            popup.close();
+        };
+        return promise;
+    }
+    closePopup(popup, com, result, lastActiveElement) {
+        const closeFunc = e => {
+            com.dispose();
+            this.stack.pop();
+            delete e.cancel;
+            popup[TAB_META_KEY].close(e);
+            if (lastActiveElement?.focus) {
+                lastActiveElement.focus();
+            }
+            else if (this.stack.length) {
+                this.stack.reverse()[0].focus();
+            }
+        };
+        const e = { cancel: false };
+        const closingFunc = popup[TAB_META_KEY].component.onClosing;
+        if (closingFunc) {
+            const res = closingFunc(e);
+            if (res instanceof Promise) {
+                res.then(() => {
+                    if (e == null || e.cancel !== true) {
+                        closeFunc(result);
+                    }
+                });
+            }
+            else {
+                if (e == null || e.cancel !== true) {
+                    closeFunc(result);
+                }
+            }
+        }
+        else {
+            closeFunc(result);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupService, deps: [{ token: i1$1.AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$1.AXOverlayService }]; } });
 
-const COMPONENT = [AXPopupComponent];
-const MODULES = [CommonModule, AXCommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule];
-class AXPopupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, AXCommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule], exports: [AXPopupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupModule, imports: [MODULES] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT],
-                    imports: [...MODULES],
-                    exports: [...COMPONENT],
-                    providers: [],
-                }]
+const COMPONENT = [AXPopupComponent];
+const MODULES = [CommonModule, AXCommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule];
+class AXPopupModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, AXCommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule], exports: [AXPopupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupModule, imports: [MODULES] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXPopupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXPopupComponent, AXPopupModule, AXPopupService };