@acorex/components 19.14.0 → 19.14.2

package/fesm2022/acorex-components-modal-modal-content.component-Ef5XWxUb.mjs

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

package/fesm2022/acorex-components-modal-modal-content.component-Ef5XWxUb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-modal-modal-content.component-Ef5XWxUb.mjs","sources":["../../../../packages/components/modal/src/lib/modal-content/modal-content.component.ts","../../../../packages/components/modal/src/lib/modal-content/modal-content.component.html"],"sourcesContent":["import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport { AXFocusTrapDirective } from '@acorex/cdk/focus-trap';\nimport { AXButtonComponent } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXComponentContent, AXComponentInputs, AXComponentType } from '@acorex/core/components';\nimport { animate, style, transition, trigger } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  model,\n  signal,\n  TemplateRef,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { AXModalFooterComponent } from '../modal-footer/modal-footer.component';\nimport { AXModalStateService } from '../modal-state.service';\n\n@Component({\n  selector: 'ax-modal-content',\n  templateUrl: './modal-content.component.html',\n  styleUrl: './modal-content.component.scss',\n  imports: [CommonModule, AXButtonComponent, AXDecoratorModule],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [AXFocusTrapDirective],\n  animations: [\n    trigger('modalAnimation', [\n      transition(':enter', [\n        style({ opacity: 0, scale: 0.8, transformOrigin: 'top left' }),\n        animate('200ms ease-out', style({ opacity: 1, scale: 1, transformOrigin: 'top left' })),\n      ]),\n      transition(':leave', [\n        style({ opacity: 1, scale: 1, transformOrigin: 'top left' }),\n        animate('200ms ease-out', style({ opacity: 0, scale: 0.8, transformOrigin: 'top left' })),\n      ]),\n    ]),\n  ],\n  providers: [{ provide: AXComponent, useExisting: AXModalContentComponent }],\n})\nexport class AXModalContentComponent extends NXComponent {\n  __content__ = input.required<AXComponentContent | HTMLElement>();\n  public id = input<number>();\n  public inputs = model<AXComponentInputs>();\n  private serviceState = inject(AXModalStateService);\n  protected sanitizer = inject(DomSanitizer);\n\n  protected modalContainer = viewChild<ElementRef>('c');\n  protected footer = viewChild<AXModalFooterComponent>(AXModalFooterComponent);\n\n  protected isTemplate = computed(() => this.__content__() instanceof TemplateRef);\n  protected isHtmlElement = computed(() => this.__content__() instanceof HTMLElement);\n\n  public component = computed(() => this.__content__() as AXComponentType<any>);\n  public template = computed(() => this.__content__() as TemplateRef<any>);\n  public element = computed(() => this.__content__() as HTMLElement);\n\n  protected modalSizeState = signal<'minimize' | 'normal'>('normal');\n  protected fullScreenState = signal(false);\n  private isMouseDown = signal(false);\n  private offsetX = signal(0);\n  private offsetY = signal(0);\n  private prevLeft = signal('');\n  private prevTop = signal('');\n  private backdropState = computed(() => this.serviceState.modalOption()?.backdrop?.enabled);\n  protected closeHeaderButton = computed(() => this.serviceState.modalOption()?.buttons.close);\n  private backdropBackground = computed(() => this.serviceState.modalOption()?.backdrop?.background);\n  private backdropClass = computed(() => this.serviceState.modalOption()?.backdrop?.cssClass);\n  private backdropCloseOnClick = computed(() => this.serviceState.modalOption()?.backdrop?.closeOnClick);\n  private minimizePosition = computed(() => this.serviceState.modalOption()?.buttons.minimize.position);\n  protected minimizeState = computed(() => this.serviceState.modalOption()?.buttons.minimize.enable);\n  protected maximizeState = computed(() => this.serviceState.modalOption()?.buttons.maximize);\n  protected modalSize = computed(() => this.serviceState.modalOption()?.size || 'fit');\n  protected headerTitle = computed(() => this.serviceState.modalOption()?.title);\n  private draggable = computed(() => this.serviceState.modalOption()?.draggable);\n\n  #init = afterNextRender(() => {\n    const popFooter = this.nativeElement.querySelector<HTMLDivElement>('.ax-modal-footer');\n    const footer = this.nativeElement.querySelector<HTMLDivElement>('.ax-modal-content ax-modal-footer');\n    if (footer) {\n      popFooter?.append(footer);\n    }\n  });\n\n  protected closeHandler() {\n    this.serviceState.close(this.id());\n  }\n\n  minimize() {\n    if (this.fullScreenState()) document.exitFullscreen();\n    this.modalContainer().nativeElement.style.transition = 'all 200ms ease-out';\n\n    this.modalContainer().nativeElement.style.top = `auto`;\n    this.modalContainer().nativeElement.style.bottom = `0`;\n\n    if (this.backdropState()) this.removeBackdrop();\n    this.modalContainer().nativeElement.classList.remove('ax-normal-modal');\n    this.modalContainer().nativeElement.classList.add('ax-minimize-modal');\n\n    requestAnimationFrame(() => {\n      const width = this.modalContainer().nativeElement.offsetWidth;\n      const index = this.serviceState.getMapIndexOf(this.id());\n\n      if (this.minimizePosition() === 'bottom-right') {\n        this.modalContainer().nativeElement.style.left = `auto`;\n        this.modalContainer().nativeElement.style.right = `${index * (width + 10)}px`;\n      } else {\n        this.modalContainer().nativeElement.style.right = `auto`;\n        this.modalContainer().nativeElement.style.left = `${index * (width + 10)}px`;\n      }\n    });\n\n    this.modalSizeState.set('minimize');\n  }\n\n  maximize() {\n    this.modalContainer().nativeElement.style.transition = 'none';\n\n    if (this.modalSizeState() === 'minimize') this.restore();\n\n    if (!document.fullscreenElement) {\n      this.modalContainer().nativeElement.requestFullscreen();\n      this.fullScreenState.set(true);\n    } else {\n      document.exitFullscreen();\n    }\n\n    document.addEventListener('fullscreenchange', () => {\n      if (!document.fullscreenElement) {\n        this.fullScreenState.set(false);\n      }\n    });\n  }\n\n  restore() {\n    setTimeout(() => {\n      this.modalContainer().nativeElement.style.transition = 'none';\n    }, 200);\n\n    if (this.fullScreenState()) {\n      document.exitFullscreen();\n      return;\n    }\n\n    this.modalContainer().nativeElement.style.bottom = `auto`;\n    this.modalContainer().nativeElement.style.right = `auto`;\n    this.modalContainer().nativeElement.style.left = this.prevLeft();\n    this.modalContainer().nativeElement.style.top = this.prevTop();\n\n    if (this.backdropState()) this.addBackdrop();\n    this.modalContainer().nativeElement.classList.remove(`ax-minimize-modal`);\n    this.modalContainer().nativeElement.classList.add('ax-normal-modal');\n    this.modalSizeState.set('normal');\n  }\n\n  protected pointerDownHandler(e: MouseEvent) {\n    if (!this.draggable() || this.modalSizeState() === 'minimize' || this.fullScreenState()) return;\n    this.isMouseDown.set(true);\n    this.offsetX.set(e.clientX - this.modalContainer().nativeElement.offsetLeft);\n    this.offsetY.set(e.clientY - this.modalContainer().nativeElement.offsetTop);\n  }\n\n  private addBackdrop() {\n    const backdropElem = document.createElement('div');\n    backdropElem.classList.add('ax-modal-drawer-backdrop');\n\n    if (this.backdropClass()) {\n      backdropElem.classList.add(...this.backdropClass().split(' '));\n    } else {\n      backdropElem.classList.add('ax-default-backdrop');\n    }\n\n    backdropElem.addEventListener('pointerdown', (e: MouseEvent) => {\n      if (!this.backdropCloseOnClick()) return;\n      if (e.target === e.currentTarget) {\n        this.closeHandler();\n      }\n    });\n\n    this.nativeElement.appendChild(backdropElem);\n  }\n\n  private removeBackdrop() {\n    const backdropElem = this.nativeElement.querySelector('.ax-modal-drawer-backdrop');\n    if (backdropElem) {\n      backdropElem.remove();\n    }\n  }\n\n  @HostListener('pointermove', ['$event'])\n  protected pointerMoveHandler(e: MouseEvent) {\n    if (!this.draggable() || this.modalSizeState() === 'minimize' || this.fullScreenState()) return;\n    if (!this.isMouseDown()) return;\n    this.modalContainer().nativeElement.style.left = `${e.clientX - this.offsetX()}px`;\n    this.modalContainer().nativeElement.style.top = `${e.clientY - this.offsetY()}px`;\n    this.prevLeft.set(`${e.clientX - this.offsetX()}px`);\n    this.prevTop.set(`${e.clientY - this.offsetY()}px`);\n  }\n\n  @HostListener('pointerup', ['$event'])\n  @HostListener('pointerleave', ['$event'])\n  protected pointerUpHandler() {\n    if (!this.draggable() || this.modalSizeState() === 'minimize' || this.fullScreenState()) return;\n    this.isMouseDown.set(false);\n  }\n\n  #eff = effect(() => {\n    const host = this.nativeElement;\n    if (this.draggable()) host.classList.add('ax-draggable');\n    if (!this.backdropState()) return;\n    this.addBackdrop();\n    if (!this.backdropBackground()) return;\n  });\n}\n","<div #c class=\"ax-modal-container ax-{{ modalSizeState() }}-modal  ax-modal-{{ modalSize() }}\" [@modalAnimation]>\n  <div (pointerdown)=\"pointerDownHandler($event)\" class=\"ax-modal-header\">\n    <ax-text>{{ headerTitle() }}</ax-text>\n\n    <div>\n      @if (minimizeState()) {\n        <ax-button class=\"ax-sm\" (onClick)=\"minimize()\" look=\"blank\" color=\"primary\">\n          <ax-icon class=\"ax-icon ax-icon-minimize\"> </ax-icon>\n        </ax-button>\n      }\n\n      @if (modalSizeState() !== 'normal' || fullScreenState()) {\n        <ax-button class=\"ax-sm\" (onClick)=\"restore()\" look=\"blank\" color=\"primary\">\n          <ax-icon class=\"ax-icon ax-icon-maximize\"> </ax-icon>\n        </ax-button>\n      }\n\n      @if (maximizeState()) {\n        <ax-button class=\"ax-sm\" (onClick)=\"maximize()\" look=\"blank\" color=\"primary\">\n          <ax-icon class=\"ax-icon ax-icon-full-screen\"> </ax-icon>\n        </ax-button>\n      }\n\n      @if (closeHeaderButton()) {\n        <ax-button class=\"ax-sm\" look=\"blank\" (onClick)=\"closeHandler()\" color=\"danger\">\n          <ax-icon class=\"ax-icon ax-icon-close\"> </ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n  <div class=\"ax-modal-content\">\n    @if (isTemplate()) {\n      <ng-container [ngTemplateOutlet]=\"this.template()\" [ngTemplateOutletContext]=\"inputs()\"></ng-container>\n    } @else if (isHtmlElement()) {\n      <div [innerHTML]=\"sanitizer.bypassSecurityTrustHtml(this.element().outerHTML)\"></div>\n    } @else {\n      <ng-container [ngComponentOutlet]=\"this.component()\" [ngComponentOutletInputs]=\"inputs()\"></ng-container>\n    }\n  </div>\n  <div class=\"ax-modal-footer\"></div>\n</div>\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-modal.mjs

@@ -1,2 +1,2 @@
-export { b as AXModalComponent, e as AXModalComponentBase, a as AXModalFooterComponent, c as AXModalModule, d as AXModalService } from './acorex-components-modal-acorex-components-modal-Ckn70-o5.mjs';
+export { b as AXModalComponent, e as AXModalComponentBase, a as AXModalFooterComponent, c as AXModalModule, d as AXModalService } from './acorex-components-modal-acorex-components-modal-CJ3M9U7p.mjs';
 //# sourceMappingURL=acorex-components-modal.mjs.map

package/fesm2022/acorex-components-navbar.mjs

@@ -1,4 +1,4 @@
-import { MXLookComponent } from '@acorex/components/common';
+import { MXLookComponent, AXComponent } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
 import { HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -12,23 +12,23 @@ class AXNavbarComponent extends MXLookComponent {
     get __hostClass() {
         return `ax-alert ax-none ax-${this.look}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXNavbarComponent, isStandalone: true, selector: "ax-navbar", inputs: { look: "look" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-navbar-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["ax-navbar.ax-fill{--ax-comp-navbar-bg-color: var(--ax-sys-color-surface)}ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-navbar-border-width: 1px}.ax-dark ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-darkest-surface)}ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-lightest-surface)}.ax-dark ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-darkest-surface)}ax-navbar{display:flex;min-height:3.5rem;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:1rem;padding-block:.5rem;background-color:rgba(var(--ax-comp-navbar-bg-color, none));border-bottom-width:var(--ax-comp-navbar-border-width, 0);border-color:rgba(var(--ax-comp-navbar-border-color, none))}ax-navbar .ax-navbar-start-side{margin-inline-end:2rem;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.5rem}ax-navbar .ax-navbar-start-side ax-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}ax-navbar .ax-navbar-end-side ax-suffix{display:flex;gap:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: AXNavbarComponent, isStandalone: true, selector: "ax-navbar", inputs: { look: "look" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXNavbarComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-navbar-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["ax-navbar.ax-fill{--ax-comp-navbar-bg-color: var(--ax-sys-color-surface)}ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-navbar-border-width: 1px}.ax-dark ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-darkest-surface)}ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-lightest-surface)}.ax-dark ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-darkest-surface)}ax-navbar{display:flex;min-height:3.5rem;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:1rem;padding-block:.5rem;background-color:rgba(var(--ax-comp-navbar-bg-color, none));border-bottom-width:var(--ax-comp-navbar-border-width, 0);border-color:rgba(var(--ax-comp-navbar-border-color, none))}ax-navbar .ax-navbar-start-side{margin-inline-end:2rem;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.5rem}ax-navbar .ax-navbar-start-side ax-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}ax-navbar .ax-navbar-end-side ax-suffix{display:flex;gap:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-navbar', inputs: ['look'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-navbar-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["ax-navbar.ax-fill{--ax-comp-navbar-bg-color: var(--ax-sys-color-surface)}ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-navbar-border-width: 1px}.ax-dark ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-darkest-surface)}ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-lightest-surface)}.ax-dark ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-darkest-surface)}ax-navbar{display:flex;min-height:3.5rem;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:1rem;padding-block:.5rem;background-color:rgba(var(--ax-comp-navbar-bg-color, none));border-bottom-width:var(--ax-comp-navbar-border-width, 0);border-color:rgba(var(--ax-comp-navbar-border-color, none))}ax-navbar .ax-navbar-start-side{margin-inline-end:2rem;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.5rem}ax-navbar .ax-navbar-start-side ax-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}ax-navbar .ax-navbar-end-side ax-suffix{display:flex;gap:.5rem}\n"] }]
+            args: [{ selector: 'ax-navbar', inputs: ['look'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXNavbarComponent }], template: "<div class=\"ax-navbar-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["ax-navbar.ax-fill{--ax-comp-navbar-bg-color: var(--ax-sys-color-surface)}ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-navbar-border-width: 1px}.ax-dark ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-darkest-surface)}ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-lightest-surface)}.ax-dark ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-darkest-surface)}ax-navbar{display:flex;min-height:3.5rem;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:1rem;padding-block:.5rem;background-color:rgba(var(--ax-comp-navbar-bg-color, none));border-bottom-width:var(--ax-comp-navbar-border-width, 0);border-color:rgba(var(--ax-comp-navbar-border-color, none))}ax-navbar .ax-navbar-start-side{margin-inline-end:2rem;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.5rem}ax-navbar .ax-navbar-start-side ax-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}ax-navbar .ax-navbar-end-side ax-suffix{display:flex;gap:.5rem}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class AXNavbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: AXNavbarModule, imports: [CommonModule, AXNavbarComponent], exports: [AXNavbarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNavbarModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: AXNavbarModule, imports: [CommonModule, AXNavbarComponent], exports: [AXNavbarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNavbarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNavbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNavbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXNavbarComponent],

package/fesm2022/acorex-components-navbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-navbar.mjs","sources":["../../../../packages/components/navbar/src/lib/navbar.component.ts","../../../../packages/components/navbar/src/lib/navbar.component.html","../../../../packages/components/navbar/src/lib/navbar.module.ts","../../../../packages/components/navbar/src/acorex-components-navbar.ts"],"sourcesContent":["import { MXLookComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n/**\n * @category Components\n * A navigation bar component that supports custom styling and encapsulation.\n */\n@Component({\n  selector: 'ax-navbar',\n  templateUrl: './navbar.component.html',\n  styleUrls: ['./navbar.component.scss'],\n  inputs: ['look'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXNavbarComponent extends MXLookComponent {\n  /** @ignore */\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `ax-alert ax-none ax-${this.look}`;\n  }\n}\n","<div class=\"ax-navbar-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXNavbarComponent } from './navbar.component';\n\n@NgModule({\n  imports: [CommonModule, AXNavbarComponent],\n  exports: [AXNavbarComponent],\n})\nexport class AXNavbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAGA;;;AAGG;AASG,MAAO,iBAAkB,SAAQ,eAAe,CAAA;;AAEpD,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,CAAuB,oBAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;+GAJhC,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,6KCf9B,4QAQA,EAAA,MAAA,EAAA,CAAA,4kCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FDOa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;+BACE,WAAW,EAAA,MAAA,EAGb,CAAC,MAAM,CAAC,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,4QAAA,EAAA,MAAA,EAAA,CAAA,4kCAAA,CAAA,EAAA;8BAKjC,WAAW,EAAA,CAAA;sBADd,WAAW;uBAAC,OAAO;;;METT,cAAc,CAAA;+GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,EAHf,OAAA,EAAA,CAAA,YAAY,EAAE,iBAAiB,aAC/B,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAEhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAHf,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAGX,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,iBAAiB,CAAC;oBAC1C,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC7B,iBAAA;;;ACPD;;AAEG;;;;"}
+{"version":3,"file":"acorex-components-navbar.mjs","sources":["../../../../packages/components/navbar/src/lib/navbar.component.ts","../../../../packages/components/navbar/src/lib/navbar.component.html","../../../../packages/components/navbar/src/lib/navbar.module.ts","../../../../packages/components/navbar/src/acorex-components-navbar.ts"],"sourcesContent":["import { AXComponent, MXLookComponent } from '@acorex/cdk/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';\n\n/**\n * @category Components\n * A navigation bar component that supports custom styling and encapsulation.\n */\n@Component({\n  selector: 'ax-navbar',\n  templateUrl: './navbar.component.html',\n  styleUrls: ['./navbar.component.scss'],\n  inputs: ['look'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [{ provide: AXComponent, useExisting: AXNavbarComponent }],\n})\nexport class AXNavbarComponent extends MXLookComponent {\n  /** @ignore */\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `ax-alert ax-none ax-${this.look}`;\n  }\n}\n","<div class=\"ax-navbar-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXNavbarComponent } from './navbar.component';\n\n@NgModule({\n  imports: [CommonModule, AXNavbarComponent],\n  exports: [AXNavbarComponent],\n})\nexport class AXNavbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAGA;;;AAGG;AAUG,MAAO,iBAAkB,SAAQ,eAAe,CAAA;;AAEpD,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,CAAuB,oBAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;+GAJhC,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,EAFjB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC,iDCdvE,4QAQA,EAAA,MAAA,EAAA,CAAA,4kCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FDQa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAT7B,SAAS;+BACE,WAAW,EAAA,MAAA,EAGb,CAAC,MAAM,CAAC,mBACC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAC1B,SAAA,EAAA,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAmB,iBAAA,EAAE,CAAC,EAAA,QAAA,EAAA,4QAAA,EAAA,MAAA,EAAA,CAAA,4kCAAA,CAAA,EAAA;8BAKjE,WAAW,EAAA,CAAA;sBADd,WAAW;uBAAC,OAAO;;;MEVT,cAAc,CAAA;+GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,EAHf,OAAA,EAAA,CAAA,YAAY,EAAE,iBAAiB,aAC/B,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAEhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAHf,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAGX,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,iBAAiB,CAAC;oBAC1C,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC7B,iBAAA;;;ACPD;;AAEG;;;;"}

package/fesm2022/acorex-components-notification.mjs

@@ -1,5 +1,5 @@
+import { MXBaseComponent, AXClosableComponent, AXComponent } from '@acorex/cdk/common';
 import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
-import { MXBaseComponent, AXClosbaleComponent } from '@acorex/components/common';
 import { AXDecoratorCloseButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
 import { AXTranslatorPipe, AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
@@ -114,12 +114,18 @@ class AXNotificationComponent extends MXBaseComponent {
             htmlElement: this.getHostElement(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNotificationComponent, deps: [{ token: DIALOG_DATA }, { token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXNotificationComponent, isStandalone: true, selector: "ax-notification", host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXNotificationComponent }], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-notification-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-notification-content\">\n  <div class=\"ax-notification-title\">{{ config.title | translate | async }}</div>\n  @if (_selectedPortal) {\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\"></ng-template>\n  } @else {\n    <div>{{ config.content }}</div>\n  }\n\n  @if (config.buttons?.length) {\n    <div class=\"ax-notification-buttons\">\n      @for (button of config.buttons; track $index) {\n        <ax-button\n          class=\"ax-xs\"\n          [text]=\"button.text | translate | async\"\n          [color]=\"button.color\"\n          [look]=\"button.look\"\n          [disabled]=\"button.disabled\"\n          (onClick)=\"_handleButtonClick(button)\"\n        >\n          @if (button.loading) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n@if (config.closeButton) {\n  <ax-close-button></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut && remainingTime()) {\n  <div class=\"ax-notification-progress\" [style.transition-duration]=\"transitionDuration()\" [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"></div>\n}\n", styles: ["ax-notification.ax-default{--ax-comp-notification-icon-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-surface)}.ax-dark ax-notification.ax-default{--ax-comp-notification-icon-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-lightest-surface)}ax-notification.ax-primary{--ax-comp-notification-icon-text-color: var(--ax-sys-color-primary-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-primary-surface)}ax-notification.ax-secondary{--ax-comp-notification-icon-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-secondary-surface)}ax-notification.ax-success{--ax-comp-notification-icon-text-color: var(--ax-sys-color-success-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-success-surface)}ax-notification.ax-warning{--ax-comp-notification-icon-text-color: var(--ax-sys-color-warning-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-warning-surface)}ax-notification.ax-danger{--ax-comp-notification-icon-text-color: var(--ax-sys-color-danger-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-danger-surface)}ax-notification{position:relative;display:flex;width:98vw;overflow:hidden;padding:1rem;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);background-color:rgba(var(--ax-comp-notification-bg-color, var(--ax-sys-color-lightest-surface)));font-size:var(--ax-comp-notification-font-size, .875rem);line-height:var(--ax-comp-notification-line-height, 1.25rem);border-width:var(--ax-comp-notification-border-width, 1px);border-color:rgba(var(--ax-comp-notification-border-color, var(--ax-sys-color-border-lightest-surface)));border-radius:var(--ax-comp-notification-border-radius, var(--ax-sys-border-radius))}@media (min-width: 768px){ax-notification{width:24rem}}ax-notification .ax-notification-icon,ax-notification .ax-icon-close{font-size:1.25rem;line-height:1.75rem;max-width:fit-content;align-items:flex-start}ax-notification .ax-notification-icon{color:rgba(var(--ax-comp-notification-icon-text-color));padding-inline-end:.75rem}ax-notification .ax-notification-content{display:flex;flex:1 1 0%;flex-direction:column;font-weight:400;justify-content:center;color:rgba(var(--ax-comp-notification-text-color, var(--ax-sys-color-on-surface)))}ax-notification .ax-notification-content .ax-notification-title{font-weight:500;line-height:1.5}ax-notification .ax-notification-content .ax-notification-buttons{margin-top:.75rem;display:flex;gap:.75rem}ax-notification .ax-notification-progress{width:100%;bottom:0;height:.25rem;position:absolute;inset-inline-end:0px;inset-inline-start:0px;transition-property:width;transition-timing-function:linear;transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-notification-progress-bg-color, 255, 255, 255, .46))}.ax-dark ax-notification{--ax-comp-notification-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-notification-border-color: var(--ax-sys-color-border-darkest-surface)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNotificationComponent, deps: [{ token: DIALOG_DATA }, { token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: AXNotificationComponent, isStandalone: true, selector: "ax-notification", host: { properties: { "class": "this.__hostClass" } }, providers: [
+            { provide: AXClosableComponent, useExisting: AXNotificationComponent },
+            { provide: AXComponent, useExisting: AXNotificationComponent },
+        ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-notification-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-notification-content\">\n  <div class=\"ax-notification-title\">{{ config.title | translate | async }}</div>\n  @if (_selectedPortal) {\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\"></ng-template>\n  } @else {\n    <div>{{ config.content }}</div>\n  }\n\n  @if (config.buttons?.length) {\n    <div class=\"ax-notification-buttons\">\n      @for (button of config.buttons; track $index) {\n        <ax-button\n          class=\"ax-xs\"\n          [text]=\"button.text | translate | async\"\n          [color]=\"button.color\"\n          [look]=\"button.look\"\n          [disabled]=\"button.disabled\"\n          (onClick)=\"_handleButtonClick(button)\"\n        >\n          @if (button.loading) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n@if (config.closeButton) {\n  <ax-close-button></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut && remainingTime()) {\n  <div class=\"ax-notification-progress\" [style.transition-duration]=\"transitionDuration()\" [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"></div>\n}\n", styles: ["ax-notification.ax-default{--ax-comp-notification-icon-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-surface)}.ax-dark ax-notification.ax-default{--ax-comp-notification-icon-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-lightest-surface)}ax-notification.ax-primary{--ax-comp-notification-icon-text-color: var(--ax-sys-color-primary-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-primary-surface)}ax-notification.ax-secondary{--ax-comp-notification-icon-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-secondary-surface)}ax-notification.ax-success{--ax-comp-notification-icon-text-color: var(--ax-sys-color-success-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-success-surface)}ax-notification.ax-warning{--ax-comp-notification-icon-text-color: var(--ax-sys-color-warning-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-warning-surface)}ax-notification.ax-danger{--ax-comp-notification-icon-text-color: var(--ax-sys-color-danger-surface);--ax-comp-notification-progress-bg-color: var(--ax-sys-color-danger-surface)}ax-notification{position:relative;display:flex;width:98vw;overflow:hidden;padding:1rem;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);background-color:rgba(var(--ax-comp-notification-bg-color, var(--ax-sys-color-lightest-surface)));font-size:var(--ax-comp-notification-font-size, .875rem);line-height:var(--ax-comp-notification-line-height, 1.25rem);border-width:var(--ax-comp-notification-border-width, 1px);border-color:rgba(var(--ax-comp-notification-border-color, var(--ax-sys-color-border-lightest-surface)));border-radius:var(--ax-comp-notification-border-radius, var(--ax-sys-border-radius))}@media (min-width: 768px){ax-notification{width:24rem}}ax-notification .ax-notification-icon,ax-notification .ax-icon-close{font-size:1.25rem;line-height:1.75rem;max-width:fit-content;align-items:flex-start}ax-notification .ax-notification-icon{color:rgba(var(--ax-comp-notification-icon-text-color));padding-inline-end:.75rem}ax-notification .ax-notification-content{display:flex;flex:1 1 0%;flex-direction:column;font-weight:400;justify-content:center;color:rgba(var(--ax-comp-notification-text-color, var(--ax-sys-color-on-surface)))}ax-notification .ax-notification-content .ax-notification-title{font-weight:500;line-height:1.5}ax-notification .ax-notification-content .ax-notification-buttons{margin-top:.75rem;display:flex;gap:.75rem}ax-notification .ax-notification-progress{width:100%;bottom:0;height:.25rem;position:absolute;inset-inline-end:0px;inset-inline-start:0px;transition-property:width;transition-timing-function:linear;transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-notification-progress-bg-color, 255, 255, 255, .46))}.ax-dark ax-notification{--ax-comp-notification-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-notification-border-color: var(--ax-sys-color-border-darkest-surface)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-notification', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXNotificationComponent }], imports: [
+            args: [{ selector: 'ax-notification', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: AXClosableComponent, useExisting: AXNotificationComponent },
+                        { provide: AXComponent, useExisting: AXNotificationComponent },
+                    ], imports: [
                         CdkPortalOutlet,
                         AXButtonComponent,
                         AXLoadingComponent,
@@ -334,10 +340,10 @@ class AXNotificationService {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNotificationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNotificationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNotificationService, decorators: [{
             type: Injectable
         }] });
 
@@ -352,17 +358,17 @@ const MODULES = [
     AXTranslationModule,
 ];
 class AXNotificationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: AXNotificationModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: AXNotificationModule, imports: [CommonModule,
             PortalModule,
             AXButtonModule,
             DialogModule,
             AXLoadingModule,
             AXDecoratorModule,
             AXTranslationModule, AXNotificationComponent], exports: [AXNotificationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNotificationModule, providers: [AXNotificationService], imports: [MODULES, COMPONENT] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNotificationModule, providers: [AXNotificationService], imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXNotificationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXNotificationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],