@acorex/components 19.12.0 → 19.13.0-next.0

package/calendar/lib/calendar-range.component.d.ts

@@ -1,5 +1,6 @@
 import { AXRange, MXInteractiveComponent, MXValueComponent } from '@acorex/components/common';
 import { AXDateTime } from '@acorex/core/date-time';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { AfterViewInit } from '@angular/core';
 import { AXCalendarSlotClick, MXCalendarBaseComponent } from './calendar.class';
 import * as i0 from "@angular/core";
@@ -9,6 +10,8 @@ declare const AXCalendarRangeComponent_base: import("polytype").Polytype.Cluster
     ɵprov: import("@angular/core").ɵɵInjectableDeclaration<MXValueComponent<any>>;
 }, typeof MXInteractiveComponent, typeof MXCalendarBaseComponent]>;
 export declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_base implements AfterViewInit {
+    private formatService;
+    protected calendar: import("@angular/core").WritableSignal<string>;
     /**
      *  @ignore
      */
@@ -23,7 +26,7 @@ export declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_b
     /**
      *  @ignore
      */
-    constructor();
+    constructor(unsubscriber: AXUnsubscriber);
     /**
      *  @ignore
      */

package/calendar/lib/calendar.class.d.ts

@@ -1,5 +1,7 @@
 import { AXItemClickEvent, AXRangeChangedEvent, MXBaseComponent } from '@acorex/components/common';
 import { AXCalendarService, AXDateTime, AXDateTimeRange } from '@acorex/core/date-time';
+import { AXLocaleService } from '@acorex/core/locale';
+import { AXTranslationService } from '@acorex/core/translation';
 import { EventEmitter, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export type AXCalendarViewType = 'year' | 'month' | 'day';
@@ -9,6 +11,7 @@ export type AXCalendarHolidayDates = Date[] | ((date: Date) => boolean);
 export type AXCalendarCellCssClass = string | {
     [key: string]: boolean;
 } | ((date: Date) => string);
+export type AXDateTimePickerType = 'date' | 'time' | 'datetime';
 /**
  *  Contains native event
  * @category Events
@@ -37,7 +40,9 @@ export interface AXCalendarView {
     slots: AXCalendarViewSlot[];
 }
 export declare class MXCalendarBaseComponent extends MXBaseComponent {
+    protected localeService: AXLocaleService;
     protected calendarService: AXCalendarService;
+    protected translateService: AXTranslationService;
     interface: 'calendar' | 'picker';
     cellTemplate?: TemplateRef<unknown>;
     cellClass?: AXCalendarCellCssClass;
@@ -51,6 +56,9 @@ export declare class MXCalendarBaseComponent extends MXBaseComponent {
     set activeView(v: AXCalendarViewType);
     typeChange: EventEmitter<string>;
     private _type;
+    /**
+     * @deprecated use calendar input instead
+     */
     get type(): string;
     set type(v: string);
     depthChange: EventEmitter<AXCalendarViewDepth>;

package/calendar/lib/calendar.component.d.ts

@@ -14,6 +14,8 @@ declare const AXCalendarComponent_base: import("polytype").Polytype.ClusteredCon
  * @category Components
  */
 export declare class AXCalendarComponent extends AXCalendarComponent_base {
+    private formatService;
+    protected calendar: import("@angular/core").WritableSignal<string>;
     get displayRange(): AXDateTimeRange;
     /**
      *  @ignore

package/datetime-box/lib/datetime-box.component.d.ts

@@ -1,4 +1,4 @@
-import { AXCalendarNavigateEvent, MXCalendarBaseComponent } from '@acorex/components/calendar';
+import { AXCalendarNavigateEvent, AXDateTimePickerType, MXCalendarBaseComponent } from '@acorex/components/calendar';
 import { AXEvent, AXFocusEvent, MXInputBaseValueComponent, MXLookComponent } from '@acorex/components/common';
 import { AXDateTimeInputComponent } from '@acorex/components/datetime-input';
 import { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';
@@ -24,7 +24,7 @@ export declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base
     /**
      *  @ignore
      */
-    protected picker: AXDateTimePickerComponent;
+    protected pickerRef: AXDateTimePickerComponent;
     /**
      *  @ignore
      */
@@ -41,20 +41,18 @@ export declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base
      * @defaultValue false
      */
     allowTyping: import("@angular/core").InputSignal<boolean>;
-    isRtl: import("@angular/core").WritableSignal<boolean>;
+    protected isRtl: import("@angular/core").WritableSignal<boolean>;
     /**
-     *  @ignore
-     */
+   * @description The calendar type to use for the datetime input.
+   */
+    calendar: import("@angular/core").InputSignal<string>;
+    protected _calendarSystem: import("@angular/core").WritableSignal<string>;
     private _format;
+    picker: import("@angular/core").InputSignal<AXDateTimePickerType>;
     /**
-     * Gets the format string used for displaying values.
-     */
-    get format(): string;
-    /**
-     * Sets the format string for displaying values.
-     * @param v The format string to be set.
+     * @deprecated use locale & mode instead
      */
-    set format(v: string);
+    format: import("@angular/core").InputSignal<string>;
     /**
      *  @ignore
      */
@@ -94,6 +92,6 @@ export declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base
      */
     protected _handleInputOnClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDateTimeBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDateTimeBoxComponent, "ax-datetime-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onOpened": "onOpened"; "onClosed": "onClosed"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "formatChange": "formatChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDateTimeBoxComponent, "ax-datetime-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onOpened": "onOpened"; "onClosed": "onClosed"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "formatChange": "formatChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
 }
 export {};

package/datetime-input/lib/datetime-input.component.d.ts

@@ -1,5 +1,5 @@
+import { AXDateTimePickerType } from '@acorex/components/calendar';
 import { AXClickEvent, MXInputBaseValueComponent } from '@acorex/components/common';
-import { ElementRef, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * A component for date and time input with various custom features.
@@ -7,120 +7,57 @@ import * as i0 from "@angular/core";
  * @category Components
  */
 export declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
-    private calendarService;
+    #private;
     private platformService;
+    private formatService;
+    private localeService;
+    private calendarService;
     /**
      *  @ignore
      */
-    private _editingParts;
+    private readonly _editingParts;
     /**
      *  @ignore
      */
-    protected _editingText: string;
+    protected _editingText: import("@angular/core").WritableSignal<string>;
     /**
      *  @ignore
      */
     protected _inputChars: string[];
-    /**
-     *  @ignore
-     */
-    private _type;
     /**
      * Indicates whether typing is allowed in the input field.
      * @defaultValue false
      */
     allowTyping: import("@angular/core").InputSignal<boolean>;
     /**
-     * Gets the type of the datetime input.
-     */
-    get type(): string;
-    /**
-     * Sets the type of the datetime input.
-     *
-     * @param v The new type to set for the datetime input.
-     */
-    set type(v: string);
-    /**
-     *  @ignore
+     * @description The calendar type to use for the datetime input.
      */
+    calendar: import("@angular/core").InputSignal<string>;
+    protected _calendarSystem: import("@angular/core").WritableSignal<string>;
     private _activePart;
-    /**
-     * Gets the currently active part of the datetime input.
-     */
-    get activePart(): string;
-    /**
-     * Sets the currently active part of the datetime input.
-     *
-     * @param v The new name or identifier of the active part.
-     */
-    set activePart(v: string);
-    /**
-     *  @ignore
-     */
-    private _editingDateObj;
-    /**
-     *  @ignore
-     */
-    private get editingDateObj();
-    /**
-     *  @ignore
-     */
-    input: ElementRef<HTMLInputElement>;
-    /**
-     *  @ignore
-     */
-    private _minValue;
-    /**
-     * Gets the minimum allowed date value for the datetime input.
-     */
-    get minValue(): Date;
-    /**
-     * Sets the minimum allowable date value for the datetime input.
-     *
-     * @param v The minimum allowable date value to set.
-     */
-    set minValue(v: Date);
+    private _editingDate;
     /**
      *  @ignore
      */
-    private _maxValue;
-    /**
-     * Gets the maximum allowed date value for the datetime input.
-     */
-    get maxValue(): Date;
-    /**
-     * Sets the maximum allowable date value for the datetime input.
-     *
-     * @param v - The maximum allowable date value to set.
-     */
-    set maxValue(v: Date);
-    /**
-     * Emitted when the format of the datetime input changes.
-     * @event
-     */
-    formatChange: EventEmitter<string>;
+    private input;
+    minValue: import("@angular/core").InputSignal<Date>;
+    maxValue: import("@angular/core").InputSignal<Date>;
     /**
      * Emitted when a click event occurs on the datetime box.
      * @event
      */
-    onClick: EventEmitter<AXClickEvent>;
-    /**
-     *  @ignore
-     */
+    onClick: import("@angular/core").OutputEmitterRef<AXClickEvent>;
+    picker: import("@angular/core").InputSignal<AXDateTimePickerType>;
     private _format;
     /**
-     * Gets or sets the format string for displaying date and time values.
-     */
-    get format(): string;
-    /**
-     * Sets the format string for displaying date and time values.
-     * @param v - The new format string. It defines how date and time values should be formatted.
+     * @deprecated use locale & mode instead
      */
-    set format(v: string);
+    format: import("@angular/core").InputSignal<string>;
+    private _detectParts;
     /**
      * @description check if page is in rtl or ltr
      */
-    isRtl: import("@angular/core").WritableSignal<boolean>;
+    protected isRtl: import("@angular/core").WritableSignal<boolean>;
     /**
      * @description listen to direction change to react to it.
      */
@@ -183,5 +120,5 @@ export declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<
      */
     private _detectValueChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDateTimeInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDateTimeInputComponent, "ax-datetime-input", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "formatChange": "formatChange"; }, never, ["ax-validation-rule"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDateTimeInputComponent, "ax-datetime-input", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onClick": "onClick"; }, never, ["ax-validation-rule"], true, never>;
 }

package/datetime-picker/lib/datetime-picker.component.d.ts

@@ -1,8 +1,8 @@
-import { AXCalendarNavigateEvent, MXCalendarBaseComponent } from '@acorex/components/calendar';
+import { AXCalendarNavigateEvent, AXDateTimePickerType, MXCalendarBaseComponent } from '@acorex/components/calendar';
 import { AXValueChangedEvent, MXValueComponent } from '@acorex/components/common';
 import { AXTabStripChangedEvent, AXTabsComponent } from '@acorex/components/tabs';
 import { AXDateTime, AXDateTimeParts } from '@acorex/core/date-time';
-import { EventEmitter, OnInit } from '@angular/core';
+import { OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 declare const AXDateTimePickerComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXCalendarBaseComponent, {
     new (): MXValueComponent<Date>;
@@ -16,7 +16,8 @@ declare const AXDateTimePickerComponent_base: import("polytype").Polytype.Cluste
  */
 export declare class AXDateTimePickerComponent extends AXDateTimePickerComponent_base implements OnInit {
     #private;
-    buttonText: string;
+    private formatService;
+    protected buttonText: import("@angular/core").Signal<"dateTime.today" | "dateTime.now">;
     private defaultConfig;
     isRtl: import("@angular/core").ModelSignal<boolean>;
     /**
@@ -31,8 +32,6 @@ export declare class AXDateTimePickerComponent extends AXDateTimePickerComponent
      * Sets whether the button for selecting the current time is displayed.
      */
     set currentTimeButton(v: boolean);
-    private _calendarService;
-    private _tranlationService;
     /**
      *  @ignore
      */
@@ -49,7 +48,7 @@ export declare class AXDateTimePickerComponent extends AXDateTimePickerComponent
     /**
      *  @ignore
      */
-    protected _activePart: 'date' | 'time';
+    protected _activePart: import("@angular/core").WritableSignal<"date" | "time">;
     /**
      *  @ignore
      */
@@ -58,31 +57,18 @@ export declare class AXDateTimePickerComponent extends AXDateTimePickerComponent
      *  @ignore
      */
     protected get _hasTimePart(): boolean;
+    protected _editingDateObj: import("@angular/core").WritableSignal<AXDateTime>;
     /**
-     *  @ignore
-     */
-    private _editingDateObj;
-    protected get editingDateObj(): AXDateTime;
-    /**
-     * Emits an event when the format changes.
-     *
-     * @event
-     */
-    formatChange: EventEmitter<string>;
-    /**
-     *  @ignore
+     * @description The calendar type to use for the datetime input.
      */
+    calendar: import("@angular/core").InputSignal<string>;
+    protected _calendarSystem: import("@angular/core").WritableSignal<string>;
+    picker: import("@angular/core").InputSignal<AXDateTimePickerType>;
     private _format;
     /**
-     * Gets or sets the format for the datetime input.
+     * @deprecated use locale & mode instead
      */
-    get format(): string;
-    /**
-     * Sets the format for the datetime input and updates internal parts.
-     *
-     * @param v - The new format string to be set.
-     */
-    set format(v: string);
+    format: import("@angular/core").InputSignal<string>;
     /**
      *  @ignore
      */
@@ -92,10 +78,6 @@ export declare class AXDateTimePickerComponent extends AXDateTimePickerComponent
      * @param value - The new date value. If not provided, defaults to the current date.
      */
     internalValueChanged(value?: Date): void;
-    /**
-     *  @ignore
-     */
-    protected detectButtonText(): void;
     /**
      *  @ignore
      */
@@ -134,6 +116,6 @@ export declare class AXDateTimePickerComponent extends AXDateTimePickerComponent
     protected internalSetValue(value: Date): Date | null;
     protected isTodayDisabled(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDateTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDateTimePickerComponent, "ax-datetime-picker", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "currentTimeButton": { "alias": "currentTimeButton"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; "isRtl": "isRtlChange"; "formatChange": "formatChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDateTimePickerComponent, "ax-datetime-picker", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "currentTimeButton": { "alias": "currentTimeButton"; "required": false; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; "isRtl": "isRtlChange"; }, never, never, true, never>;
 }
 export {};

package/fesm2022/acorex-components-alert.mjs

@@ -129,11 +129,11 @@ class AXAlertComponent extends MXColorComponent {
         return `ax-alert ax-none ax-${this.color}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXAlertComponent, isStandalone: true, selector: "ax-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, timeOut: { classPropertyName: "timeOut", publicName: "timeOut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", onClosed: "onClosed", timeOut: "timeOutChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }], queries: [{ propertyName: "axIcon", first: true, predicate: ["ax-icon"], descendants: true, isSignal: true }, { propertyName: "axTitle", first: true, predicate: ["ax-title"], descendants: true, isSignal: true }, { propertyName: "axContent", first: true, predicate: ["ax-content"], descendants: true, isSignal: true }, { propertyName: "axFooter", first: true, predicate: ["ax-footer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\n", styles: ["ax-alert{--ax-comp-alert-bg-color-opacity: .15;--ax-comp-alert-icon-border-radius: 100%;--ax-comp-alert-border-radius: var(--ax-sys-border-radius)}ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-lightest-surface)}.ax-dark ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-darkest-surface)}ax-alert{--ax-comp-alert-title-content-text-color: var(--ax-sys-color-on-lightest-surface)}ax-alert.ax-primary{--ax-comp-alert-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-primary-surface)}ax-alert.ax-secondary{--ax-comp-alert-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-secondary-surface)}ax-alert.ax-success{--ax-comp-alert-bg-color: var(--ax-sys-color-success-surface);--ax-comp-alert-border-color: var(--ax-sys-color-success-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-success-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-success-surface)}ax-alert.ax-warning{--ax-comp-alert-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-border-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-warning-surface)}ax-alert.ax-danger{--ax-comp-alert-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-border-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-danger-surface)}ax-alert{gap:1rem;padding:1rem;display:flex;overflow:hidden;border-width:1px;position:relative;font-size:var(--ax-comp-alert-font-size, .875rem);line-height:var(--ax-comp-alert-line-height, 1.25rem);border-radius:var(--ax-comp-alert-border-radius);border-color:rgba(var(--ax-comp-alert-border-color));background-color:rgba(var(--ax-comp-alert-bg-color),var(--ax-comp-alert-bg-color-opacity))}ax-alert ax-title,ax-alert ax-content{color:rgba(var(--ax-comp-alert-title-content-text-color))}ax-alert .ax-alert-progress{background-color:rgba(var(--ax-comp-alert-progress-bg-color))}ax-alert .ax-alert-inline{display:flex;flex:1 1 0%;align-items:center;justify-content:center}ax-alert .ax-alert-block{display:flex}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column;line-height:1.5}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:.5rem}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:1rem}ax-alert .ax-alert-icon{display:grid;color:rgba(var(--ax-comp-alert-icon-color));border-radius:var(--ax-comp-alert-icon-border-radius);padding-inline-end:.5rem;font-size:1.125rem;line-height:1.75rem;align-items:start}ax-alert .ax-alert-icon ax-icon{line-height:var(--ax-comp-alert-icon-line-height, normal)}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex:1 1 0%;flex-direction:column}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{position:absolute;bottom:0;inset-inline-start:0px;height:.25rem}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXAlertComponent, isStandalone: true, selector: "ax-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, timeOut: { classPropertyName: "timeOut", publicName: "timeOut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", onClosed: "onClosed", timeOut: "timeOutChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }], queries: [{ propertyName: "axIcon", first: true, predicate: ["ax-icon"], descendants: true, isSignal: true }, { propertyName: "axTitle", first: true, predicate: ["ax-title"], descendants: true, isSignal: true }, { propertyName: "axContent", first: true, predicate: ["ax-content"], descendants: true, isSignal: true }, { propertyName: "axFooter", first: true, predicate: ["ax-footer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\n", styles: ["ax-alert{--ax-comp-alert-bg-color-opacity: .15;--ax-comp-alert-icon-border-radius: 100%;--ax-comp-alert-border-radius: var(--ax-sys-border-radius)}ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-lightest-surface)}.ax-dark ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-darkest-surface)}ax-alert{--ax-comp-alert-title-content-text-color: var(--ax-sys-color-on-lightest-surface)}ax-alert.ax-primary{--ax-comp-alert-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-primary-surface)}ax-alert.ax-secondary{--ax-comp-alert-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-secondary-surface)}ax-alert.ax-success{--ax-comp-alert-bg-color: var(--ax-sys-color-success-surface);--ax-comp-alert-border-color: var(--ax-sys-color-success-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-success-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-success-surface)}ax-alert.ax-warning{--ax-comp-alert-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-border-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-warning-surface)}ax-alert.ax-danger{--ax-comp-alert-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-border-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-danger-surface)}ax-alert{gap:1rem;padding:1rem;display:flex;overflow:hidden;border-width:1px;position:relative;font-size:var(--ax-comp-alert-font-size, .875rem);line-height:var(--ax-comp-alert-line-height, 1.25rem);border-radius:var(--ax-comp-alert-border-radius);border-color:rgba(var(--ax-comp-alert-border-color));background-color:rgba(var(--ax-comp-alert-bg-color),var(--ax-comp-alert-bg-color-opacity));width:100%}ax-alert ax-title,ax-alert ax-content{color:rgba(var(--ax-comp-alert-title-content-text-color))}ax-alert .ax-alert-progress{background-color:rgba(var(--ax-comp-alert-progress-bg-color))}ax-alert .ax-alert-inline{display:flex;flex:1 1 0%;align-items:center;justify-content:center}ax-alert .ax-alert-block{display:flex;width:100%}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column;line-height:1.5;flex:1}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:.5rem}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:1rem}ax-alert .ax-alert-icon{display:grid;color:rgba(var(--ax-comp-alert-icon-color));border-radius:var(--ax-comp-alert-icon-border-radius);padding-inline-end:.5rem;font-size:1.125rem;line-height:1.75rem;align-items:start}ax-alert .ax-alert-icon ax-icon{line-height:var(--ax-comp-alert-icon-line-height, normal)}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex:1 1 0%;flex-direction:column}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{position:absolute;bottom:0;inset-inline-start:0px;height:.25rem}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-alert', inputs: ['color'], outputs: ['colorChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }], imports: [NgTemplateOutlet], template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\n", styles: ["ax-alert{--ax-comp-alert-bg-color-opacity: .15;--ax-comp-alert-icon-border-radius: 100%;--ax-comp-alert-border-radius: var(--ax-sys-border-radius)}ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-lightest-surface)}.ax-dark ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-darkest-surface)}ax-alert{--ax-comp-alert-title-content-text-color: var(--ax-sys-color-on-lightest-surface)}ax-alert.ax-primary{--ax-comp-alert-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-primary-surface)}ax-alert.ax-secondary{--ax-comp-alert-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-secondary-surface)}ax-alert.ax-success{--ax-comp-alert-bg-color: var(--ax-sys-color-success-surface);--ax-comp-alert-border-color: var(--ax-sys-color-success-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-success-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-success-surface)}ax-alert.ax-warning{--ax-comp-alert-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-border-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-warning-surface)}ax-alert.ax-danger{--ax-comp-alert-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-border-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-danger-surface)}ax-alert{gap:1rem;padding:1rem;display:flex;overflow:hidden;border-width:1px;position:relative;font-size:var(--ax-comp-alert-font-size, .875rem);line-height:var(--ax-comp-alert-line-height, 1.25rem);border-radius:var(--ax-comp-alert-border-radius);border-color:rgba(var(--ax-comp-alert-border-color));background-color:rgba(var(--ax-comp-alert-bg-color),var(--ax-comp-alert-bg-color-opacity))}ax-alert ax-title,ax-alert ax-content{color:rgba(var(--ax-comp-alert-title-content-text-color))}ax-alert .ax-alert-progress{background-color:rgba(var(--ax-comp-alert-progress-bg-color))}ax-alert .ax-alert-inline{display:flex;flex:1 1 0%;align-items:center;justify-content:center}ax-alert .ax-alert-block{display:flex}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column;line-height:1.5}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:.5rem}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:1rem}ax-alert .ax-alert-icon{display:grid;color:rgba(var(--ax-comp-alert-icon-color));border-radius:var(--ax-comp-alert-icon-border-radius);padding-inline-end:.5rem;font-size:1.125rem;line-height:1.75rem;align-items:start}ax-alert .ax-alert-icon ax-icon{line-height:var(--ax-comp-alert-icon-line-height, normal)}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex:1 1 0%;flex-direction:column}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{position:absolute;bottom:0;inset-inline-start:0px;height:.25rem}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"] }]
+            args: [{ selector: 'ax-alert', inputs: ['color'], outputs: ['colorChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }], imports: [NgTemplateOutlet], template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\n", styles: ["ax-alert{--ax-comp-alert-bg-color-opacity: .15;--ax-comp-alert-icon-border-radius: 100%;--ax-comp-alert-border-radius: var(--ax-sys-border-radius)}ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-lightest-surface)}.ax-dark ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-darkest-surface)}ax-alert{--ax-comp-alert-title-content-text-color: var(--ax-sys-color-on-lightest-surface)}ax-alert.ax-primary{--ax-comp-alert-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-primary-surface)}ax-alert.ax-secondary{--ax-comp-alert-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-secondary-surface)}ax-alert.ax-success{--ax-comp-alert-bg-color: var(--ax-sys-color-success-surface);--ax-comp-alert-border-color: var(--ax-sys-color-success-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-success-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-success-surface)}ax-alert.ax-warning{--ax-comp-alert-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-border-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-warning-surface)}ax-alert.ax-danger{--ax-comp-alert-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-border-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-danger-surface)}ax-alert{gap:1rem;padding:1rem;display:flex;overflow:hidden;border-width:1px;position:relative;font-size:var(--ax-comp-alert-font-size, .875rem);line-height:var(--ax-comp-alert-line-height, 1.25rem);border-radius:var(--ax-comp-alert-border-radius);border-color:rgba(var(--ax-comp-alert-border-color));background-color:rgba(var(--ax-comp-alert-bg-color),var(--ax-comp-alert-bg-color-opacity));width:100%}ax-alert ax-title,ax-alert ax-content{color:rgba(var(--ax-comp-alert-title-content-text-color))}ax-alert .ax-alert-progress{background-color:rgba(var(--ax-comp-alert-progress-bg-color))}ax-alert .ax-alert-inline{display:flex;flex:1 1 0%;align-items:center;justify-content:center}ax-alert .ax-alert-block{display:flex;width:100%}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column;line-height:1.5;flex:1}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:.5rem}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:1rem}ax-alert .ax-alert-icon{display:grid;color:rgba(var(--ax-comp-alert-icon-color));border-radius:var(--ax-comp-alert-icon-border-radius);padding-inline-end:.5rem;font-size:1.125rem;line-height:1.75rem;align-items:start}ax-alert .ax-alert-icon ax-icon{line-height:var(--ax-comp-alert-icon-line-height, normal)}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex:1 1 0%;flex-direction:column}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{position:absolute;bottom:0;inset-inline-start:0px;height:.25rem}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-alert.mjs","sources":["../../../../libs/components/alert/src/lib/alert.component.ts","../../../../libs/components/alert/src/lib/alert.component.html","../../../../libs/components/alert/src/lib/alert.module.ts","../../../../libs/components/alert/src/acorex-components-alert.ts"],"sourcesContent":["import { AXClosbaleComponent, AXEvent, MXColorComponent } from '@acorex/components/common';\nimport { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';\nimport { isBrowser } from '@acorex/core/platform';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  effect,\n  HostBinding,\n  model,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * The Alert component is used to display notifications or alerts to users.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-alert',\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.scss'],\n  inputs: ['color'],\n  outputs: ['colorChange'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }],\n  imports: [NgTemplateOutlet],\n})\nexport class AXAlertComponent extends MXColorComponent {\n  /**\n   *  @ignore\n   */\n  axIcon = contentChild<AXDecoratorIconComponent>('ax-icon');\n  /**\n   *  @ignore\n   */\n  axTitle = contentChild<AXDecoratorGenericComponent>('ax-title');\n  /**\n   *  @ignore\n   */\n  axContent = contentChild<AXDecoratorGenericComponent>('ax-content');\n  /**\n   *  @ignore\n   */\n  axFooter = contentChild<AXDecoratorGenericComponent>('ax-footer');\n\n  /**\n   *  @ignore\n   */\n  protected showInline = signal(false);\n\n  /**\n   * Emits an event when the alert component is closed.\n   *\n   * @event\n   */\n  onClosed = output<AXEvent>();\n\n  /**\n   *  @ignore\n   */\n  private customIcon = signal('');\n\n  /**\n   *  @ignore\n   */\n  private _timeOutRef: number;\n\n  /**\n   * Sets the duration (in milliseconds) after which the alert will automatically close.\n   *\n   * @defaultValue 0\n   */\n  timeOut = model<number>(0);\n\n  /**\n   *  @ignore\n   */\n  //TODO: Check Console for  effect() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`\n  timeOutEffect = () => {\n    effect(() => {\n      if (this.timeOut()) {\n        clearTimeout(this._timeOutRef);\n        this._timeOutRef = window.setTimeout(() => {\n          this.close();\n        }, this.timeOut());\n      }\n    });\n  };\n\n  /**\n   *  @ignore\n   */\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.onOptionChanged.subscribe(this._handleOnOptionChanged.bind(this));\n      this._setLayout();\n      this.customIcon.set(this.axIcon()?.icon);\n    });\n    this.timeOutEffect();\n  }\n\n  /**\n   *  @ignore\n   */\n  private _setLayout() {\n    this._setIcon();\n    this.showInline.set(this.axContent() == null && this.axFooter() == null);\n    this.cdr.markForCheck();\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleOnOptionChanged() {\n    this._setIcon();\n  }\n\n  /**\n   *  @ignore\n   */\n  private _setIcon() {\n    if (!this.axIcon() || this.axIcon().getHostElement().firstElementChild) return;\n\n    switch (this.color) {\n      case 'success':\n        this.axIcon().icon = 'ax-icon ax-icon-check-circle';\n        break;\n      case 'danger':\n        this.axIcon().icon = 'ax-icon ax-icon-error';\n        break;\n      case 'warning':\n        this.axIcon().icon = 'ax-icon ax-icon-warning';\n        break;\n      default:\n        this.axIcon().icon = this.customIcon() || 'ax-icon ax-icon-info';\n        break;\n    }\n  }\n\n  /**\n   * Removes the alert from the container after a transition effect.\n   *\n   *  @ignore\n   */\n  close(): void {\n    if (isBrowser()) {\n      const host = this.getHostElement();\n      host.parentElement?.removeChild(host);\n      this.onClosed.emit({\n        component: this,\n      });\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `ax-alert ax-none ax-${this.color}`;\n  }\n}\n","@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\n","import { AXDecoratorModule } from '@acorex/components/decorators';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXAlertComponent } from './alert.component';\n\nconst COMPONENT = [AXAlertComponent];\nconst MODULES = [CommonModule, AXDecoratorModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAiBA;;;;AAIG;AAYG,MAAO,gBAAiB,SAAQ,gBAAgB,CAAA;AA8DpD;;AAEG;AACH,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;AAjET;;AAEG;AACH,QAAA,IAAA,CAAA,MAAM,GAAG,YAAY,CAA2B,SAAS,CAAC;AAC1D;;AAEG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,YAAY,CAA8B,UAAU,CAAC;AAC/D;;AAEG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,YAAY,CAA8B,YAAY,CAAC;AACnE;;AAEG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,YAAY,CAA8B,WAAW,CAAC;AAEjE;;AAEG;AACO,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;AAEpC;;;;AAIG;QACH,IAAQ,CAAA,QAAA,GAAG,MAAM,EAAW;AAE5B;;AAEG;AACK,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,EAAE,CAAC;AAO/B;;;;AAIG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAS,CAAC,CAAC;AAE1B;;AAEG;;QAEH,IAAa,CAAA,aAAA,GAAG,MAAK;YACnB,MAAM,CAAC,MAAK;AACV,gBAAA,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;AAClB,oBAAA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;oBAC9B,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;wBACxC,IAAI,CAAC,KAAK,EAAE;AACd,qBAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;;AAEtB,aAAC,CAAC;AACJ,SAAC;QAOC,eAAe,CAAC,MAAK;AACnB,YAAA,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACtE,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC;AAC1C,SAAC,CAAC;QACF,IAAI,CAAC,aAAa,EAAE;;AAGtB;;AAEG;IACK,UAAU,GAAA;QAChB,IAAI,CAAC,QAAQ,EAAE;AACf,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC;AACxE,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;;AAGzB;;AAEG;IACO,sBAAsB,GAAA;QAC9B,IAAI,CAAC,QAAQ,EAAE;;AAGjB;;AAEG;IACK,QAAQ,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,cAAc,EAAE,CAAC,iBAAiB;YAAE;AAExE,QAAA,QAAQ,IAAI,CAAC,KAAK;AAChB,YAAA,KAAK,SAAS;AACZ,gBAAA,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,GAAG,8BAA8B;gBACnD;AACF,YAAA,KAAK,QAAQ;AACX,gBAAA,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,GAAG,uBAAuB;gBAC5C;AACF,YAAA,KAAK,SAAS;AACZ,gBAAA,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,GAAG,yBAAyB;gBAC9C;AACF,YAAA;AACE,gBAAA,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,sBAAsB;gBAChE;;;AAIN;;;;AAIG;IACH,KAAK,GAAA;QACH,IAAI,SAAS,EAAE,EAAE;AACf,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE;AAClC,YAAA,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC;AACrC,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,gBAAA,SAAS,EAAE,IAAI;AAChB,aAAA,CAAC;;;AAIN;;AAEG;AACH,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,CAAuB,oBAAA,EAAA,IAAI,CAAC,KAAK,EAAE;;8GArIjC,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAHhB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,EC9B9E,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,YAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,gsDAmDA,qiIDpBY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAEf,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAX5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAGZ,MAAA,EAAA,CAAC,OAAO,CAAC,EACR,OAAA,EAAA,CAAC,aAAa,CAAC,EACP,eAAA,EAAA,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,SAAA,EAC1B,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAA,gBAAkB,EAAE,CAAC,EACnE,OAAA,EAAA,CAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,gsDAAA,EAAA,MAAA,EAAA,CAAA,6+HAAA,CAAA,EAAA;wDAsIvB,WAAW,EAAA,CAAA;sBADd,WAAW;uBAAC,OAAO;;;AE/JtB,MAAM,SAAS,GAAG,CAAC,gBAAgB,CAAC;AACpC,MAAM,OAAO,GAAG,CAAC,YAAY,EAAE,iBAAiB,CAAC;MAOpC,aAAa,CAAA;8GAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,YAPT,YAAY,EAAE,iBAAiB,EAD7B,gBAAgB,aAAhB,gBAAgB,CAAA,EAAA,CAAA,CAAA;AAQtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,YAJX,OAAO,CAAA,EAAA,CAAA,CAAA;;2FAIT,aAAa,EAAA,UAAA,EAAA,CAAA;kBALzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,GAAG,SAAS,CAAC;AACnC,oBAAA,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;AACvB,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA;;;ACZD;;AAEG;;;;"}
+{"version":3,"file":"acorex-components-alert.mjs","sources":["../../../../libs/components/alert/src/lib/alert.component.ts","../../../../libs/components/alert/src/lib/alert.component.html","../../../../libs/components/alert/src/lib/alert.module.ts","../../../../libs/components/alert/src/acorex-components-alert.ts"],"sourcesContent":["import { AXClosbaleComponent, AXEvent, MXColorComponent } from '@acorex/components/common';\nimport { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';\nimport { isBrowser } from '@acorex/core/platform';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  effect,\n  HostBinding,\n  model,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * The Alert component is used to display notifications or alerts to users.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-alert',\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.scss'],\n  inputs: ['color'],\n  outputs: ['colorChange'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }],\n  imports: [NgTemplateOutlet],\n})\nexport class AXAlertComponent extends MXColorComponent {\n  /**\n   *  @ignore\n   */\n  axIcon = contentChild<AXDecoratorIconComponent>('ax-icon');\n  /**\n   *  @ignore\n   */\n  axTitle = contentChild<AXDecoratorGenericComponent>('ax-title');\n  /**\n   *  @ignore\n   */\n  axContent = contentChild<AXDecoratorGenericComponent>('ax-content');\n  /**\n   *  @ignore\n   */\n  axFooter = contentChild<AXDecoratorGenericComponent>('ax-footer');\n\n  /**\n   *  @ignore\n   */\n  protected showInline = signal(false);\n\n  /**\n   * Emits an event when the alert component is closed.\n   *\n   * @event\n   */\n  onClosed = output<AXEvent>();\n\n  /**\n   *  @ignore\n   */\n  private customIcon = signal('');\n\n  /**\n   *  @ignore\n   */\n  private _timeOutRef: number;\n\n  /**\n   * Sets the duration (in milliseconds) after which the alert will automatically close.\n   *\n   * @defaultValue 0\n   */\n  timeOut = model<number>(0);\n\n  /**\n   *  @ignore\n   */\n  //TODO: Check Console for  effect() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`\n  timeOutEffect = () => {\n    effect(() => {\n      if (this.timeOut()) {\n        clearTimeout(this._timeOutRef);\n        this._timeOutRef = window.setTimeout(() => {\n          this.close();\n        }, this.timeOut());\n      }\n    });\n  };\n\n  /**\n   *  @ignore\n   */\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.onOptionChanged.subscribe(this._handleOnOptionChanged.bind(this));\n      this._setLayout();\n      this.customIcon.set(this.axIcon()?.icon);\n    });\n    this.timeOutEffect();\n  }\n\n  /**\n   *  @ignore\n   */\n  private _setLayout() {\n    this._setIcon();\n    this.showInline.set(this.axContent() == null && this.axFooter() == null);\n    this.cdr.markForCheck();\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleOnOptionChanged() {\n    this._setIcon();\n  }\n\n  /**\n   *  @ignore\n   */\n  private _setIcon() {\n    if (!this.axIcon() || this.axIcon().getHostElement().firstElementChild) return;\n\n    switch (this.color) {\n      case 'success':\n        this.axIcon().icon = 'ax-icon ax-icon-check-circle';\n        break;\n      case 'danger':\n        this.axIcon().icon = 'ax-icon ax-icon-error';\n        break;\n      case 'warning':\n        this.axIcon().icon = 'ax-icon ax-icon-warning';\n        break;\n      default:\n        this.axIcon().icon = this.customIcon() || 'ax-icon ax-icon-info';\n        break;\n    }\n  }\n\n  /**\n   * Removes the alert from the container after a transition effect.\n   *\n   *  @ignore\n   */\n  close(): void {\n    if (isBrowser()) {\n      const host = this.getHostElement();\n      host.parentElement?.removeChild(host);\n      this.onClosed.emit({\n        component: this,\n      });\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `ax-alert ax-none ax-${this.color}`;\n  }\n}\n","@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\n","import { AXDecoratorModule } from '@acorex/components/decorators';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXAlertComponent } from './alert.component';\n\nconst COMPONENT = [AXAlertComponent];\nconst MODULES = [CommonModule, AXDecoratorModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}