@acorex/components 17.0.25 → 17.1.0

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

@@ -1,12 +1,12 @@
 import { AXColorPalleteComponent } from '@acorex/components/color-palette';
-import { AXEvent, MXInputBaseValueComponent } from '@acorex/components/common';
+import { AXEvent, MXColorLookComponent, MXInputBaseValueComponent } from '@acorex/components/common';
 import { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';
 import * as i0 from "@angular/core";
 declare const AXColorBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXDropdownBoxBaseComponent, {
     new (): MXInputBaseValueComponent<string>;
     ɵfac: unknown;
     ɵprov: import("@angular/core").ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
-}]>;
+}, typeof MXColorLookComponent]>;
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
  *
@@ -22,6 +22,6 @@ export declare class AXColorBoxComponent extends AXColorBoxComponent_base {
     protected _handleOnClosedEvent(e: AXEvent): void;
     internalValueChanged(value?: Date): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXColorBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXColorBoxComponent, "ax-color-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; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXColorBoxComponent, "ax-color-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; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
 }
 export {};

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

@@ -1,5 +1,5 @@
 import { AXCalendarNavigateEvent, MXCalendarBaseComponent } from '@acorex/components/calendar';
-import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/components/common';
+import { AXEvent, AXFocusEvent, MXInputBaseValueComponent, MXLookComponent } from '@acorex/components/common';
 import { AXDateTimeInputComponent } from '@acorex/components/datetime-input';
 import { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';
 import { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';
@@ -20,17 +20,20 @@ export declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base
     protected picker: AXDateTimePickerComponent;
     protected dropdown: AXDropdownBoxComponent;
     formatChange: EventEmitter<string>;
+    allowTyping: import("@angular/core").InputSignal<boolean>;
     private _format;
     get format(): string;
     set format(v: string);
     protected _handleInputModelChange(value: Date | null): void;
     protected _handlePickerModelChange(value: Date | null): void;
-    protected _handleOnOpenedEvent(): void;
-    protected _handleOnClosedEvent(): void;
+    protected _handleOnOpenedEvent(e: AXEvent): void;
+    protected _handleOnClosedEvent(e: AXEvent): void;
+    protected _handleInputOnFocusEvent(e: AXFocusEvent): void;
+    protected _handleInputOnBlurEvent(e: AXFocusEvent): void;
     protected _handleCalendarOnNavigate(e: AXCalendarNavigateEvent): void;
     internalValueChanged(): void;
     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; }; "format": { "alias": "format"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "formatChange": "formatChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, 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; }; "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"], false, never>;
 }
 export {};

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

@@ -7,6 +7,7 @@ export declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<
     protected _editingText: string;
     protected _inputChars: string[];
     private _type;
+    allowTyping: import("@angular/core").InputSignal<boolean>;
     get type(): string;
     set type(v: string);
     private _activePart;
@@ -15,7 +16,6 @@ export declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<
     private _editingDateObj;
     private get editingDateObj();
     input: ElementRef<HTMLInputElement>;
-    input2: ElementRef<HTMLInputElement>;
     private _minValue;
     get minValue(): Date;
     set minValue(v: Date);
@@ -41,5 +41,5 @@ export declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<
     private _highlightActivePart;
     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; }; "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"], false, 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"], false, never>;
 }

package/decorators/lib/components/generic-content.component.d.ts

@@ -2,5 +2,5 @@ import { MXBaseComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
 export declare class AXDecoratorGenericComponent extends MXBaseComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDecoratorGenericComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDecoratorGenericComponent, "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay", never, {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDecoratorGenericComponent, "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay", never, {}, {}, never, ["*"], false, never>;
 }

package/dropdown/lib/dropdown-box.class.d.ts

@@ -4,7 +4,9 @@ import { AXDropdownBoxComponent } from './dropdown-box.component';
 import * as i0 from "@angular/core";
 export declare abstract class MXDropdownBoxBaseComponent extends MXInteractiveComponent {
     onOpened: EventEmitter<AXEvent>;
+    protected emitOnOpenedEvent(): void;
     onClosed: EventEmitter<AXEvent>;
+    protected emitOnClosedEvent(): void;
     protected abstract dropdown: AXDropdownBoxComponent;
     toggle(): void;
     close(): void;

package/esm2022/action-sheet/lib/action-sheet.component.mjs

@@ -74,7 +74,7 @@ export class AXActionSheetComponent extends MXBaseComponent {
                 provide: AXFocusableComponent,
                 useExisting: AXActionSheetComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(data.header){\n<ax-header>\n  <ax-prefix>\n    <ax-title>{{ data.title | translate | async }}</ax-title>\n\n    @if(data.subTitle){\n    <ax-sub-title>\n      {{ data.subTitle }}\n    </ax-sub-title>\n\n    }\n  </ax-prefix>\n  @if(data.closeButton){\n  <ax-suffix>\n    <ax-close-button></ax-close-button>\n  </ax-suffix>\n  }\n</ax-header>\n}\n<ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n<div class=\"ax-action-sheet-items\">\n  @for(item of data.items; let i = $index; track i){\n  <div class=\"ax-action-sheet-item ax-{{ item.color }}\" [class.ax-state-disabled]=\"item.disabled\" [tabindex]=\"i\"\n    (click)=\"onItemClick(item)\">\n    @if(item.icon){\n    <span class=\"item-icon\" [class]=\"item.icon\"></span>\n    }\n    <span class=\"item-text\">{{ item.text | translate | async }}</span>\n  </div>\n  }\n</div>", styles: ["ax-action-sheet{display:block;width:100vw}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-suffix{align-items:flex-end}ax-action-sheet .ax-action-sheet-items{padding-top:.5rem;padding-bottom:.5rem}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item{display:flex;padding:.75rem 1rem;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item:hover{background-color:rgba(var(--ax-color-on-surface))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item .item-icon{margin-inline-end:.75rem;font-size:1.5rem;line-height:2rem}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-primary{color:rgba(var(--ax-color-primary-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-secondary{color:rgba(var(--ax-color-secondary-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-success{color:rgba(var(--ax-color-success-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-warning{color:rgba(var(--ax-color-warning-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-danger{color:rgba(var(--ax-color-danger-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-info{color:rgba(var(--ax-color-info-500))}\n"], dependencies: [{ kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", 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-sub-title, ax-placeholder, ax-overlay" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if(data.header){\n<ax-header>\n  <ax-prefix>\n    <ax-title>{{ data.title | translate | async }}</ax-title>\n\n    @if(data.subTitle){\n    <ax-sub-title>\n      {{ data.subTitle }}\n    </ax-sub-title>\n\n    }\n  </ax-prefix>\n  @if(data.closeButton){\n  <ax-suffix>\n    <ax-close-button></ax-close-button>\n  </ax-suffix>\n  }\n</ax-header>\n}\n<ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n<div class=\"ax-action-sheet-items\">\n  @for(item of data.items; let i = $index; track i){\n  <div class=\"ax-action-sheet-item ax-{{ item.color }}\" [class.ax-state-disabled]=\"item.disabled\" [tabindex]=\"i\"\n    (click)=\"onItemClick(item)\">\n    @if(item.icon){\n    <span class=\"item-icon\" [class]=\"item.icon\"></span>\n    }\n    <span class=\"item-text\">{{ item.text | translate | async }}</span>\n  </div>\n  }\n</div>", styles: ["ax-action-sheet{display:block;width:100vw}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-suffix{align-items:flex-end}ax-action-sheet .ax-action-sheet-items{padding-top:.5rem;padding-bottom:.5rem}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item{display:flex;padding:.75rem 1rem;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item:hover{background-color:rgba(var(--ax-color-on-surface))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item .item-icon{margin-inline-end:.75rem;font-size:1.5rem;line-height:2rem}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-primary{color:rgba(var(--ax-color-primary-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-secondary{color:rgba(var(--ax-color-secondary-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-success{color:rgba(var(--ax-color-success-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-warning{color:rgba(var(--ax-color-warning-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-danger{color:rgba(var(--ax-color-danger-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-info{color:rgba(var(--ax-color-info-500))}\n"], dependencies: [{ kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", 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-sub-title, ax-placeholder, ax-overlay" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXActionSheetComponent, decorators: [{
             type: Component,

package/esm2022/button/lib/button-item-list.component.mjs

@@ -71,7 +71,7 @@ export class AXButtonItemListComponent extends MXInteractiveComponent {
       }
     }
     <ng-content select="ax-button-item, ax-title, ax-divider, ng-container"></ng-content>
-  `, isInline: true, styles: ["ax-button-item-list{display:flex;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem}ax-button-item-list ax-title{padding-top:.25rem;padding-bottom:.25rem;padding-inline-end:2.5rem;padding-inline-start:1rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-button-item-list ax-divider{margin-top:.25rem;margin-bottom:.25rem;height:1px;width:100%;background-color:rgba(var(--ax-color-border-default))}ax-button-item-list ax-button-item{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:flex-start;padding:.5rem;padding-inline-end:4rem;padding-inline-start:1rem;font-size:.875rem;line-height:1.25rem;color:rgb(var(--ax-color-text-default))}ax-button-item-list ax-button-item:hover:not(ax-button-item-list ax-button-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-surface))}ax-button-item-list ax-button-item.ax-divide{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-button-item-list ax-button-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-button-item-list ax-button-item ax-prefix,ax-button-item-list ax-button-item ax-suffix{display:flex}ax-button-item-list ax-button-item ax-prefix{padding-inline-end:.5rem}ax-button-item-list ax-button-item ax-suffix{padding-inline-start:.5rem}ax-button-item-list ax-button-item.ax-primary-default{color:rgba(var(--ax-color-primary-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-primary-default:hover,ax-button-item-list ax-button-item.ax-primary-default:focus{color:rgba(var(--ax-color-primary-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-primary-default:active{color:rgba(var(--ax-color-primary-400))}ax-button-item-list ax-button-item.ax-primary-default.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-button-item-list ax-button-item.ax-secondary-default{color:rgba(var(--ax-color-secondary-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-secondary-default:hover,ax-button-item-list ax-button-item.ax-secondary-default:focus{color:rgba(var(--ax-color-secondary-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-secondary-default:active{color:rgba(var(--ax-color-secondary-400))}ax-button-item-list ax-button-item.ax-secondary-default.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-button-item-list ax-button-item.ax-success-default{color:rgba(var(--ax-color-success-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-success-default:hover,ax-button-item-list ax-button-item.ax-success-default:focus{color:rgba(var(--ax-color-success-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-success-default:active{color:rgba(var(--ax-color-success-400))}ax-button-item-list ax-button-item.ax-success-default.ax-state-selected{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-button-item-list ax-button-item.ax-warning-default{color:rgba(var(--ax-color-warning-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-warning-default:hover,ax-button-item-list ax-button-item.ax-warning-default:focus{color:rgba(var(--ax-color-warning-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-warning-default:active{color:rgba(var(--ax-color-warning-400))}ax-button-item-list ax-button-item.ax-warning-default.ax-state-selected{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-button-item-list ax-button-item.ax-danger-default{color:rgba(var(--ax-color-danger-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-danger-default:hover,ax-button-item-list ax-button-item.ax-danger-default:focus{color:rgba(var(--ax-color-danger-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-danger-default:active{color:rgba(var(--ax-color-danger-400))}ax-button-item-list ax-button-item.ax-danger-default.ax-state-selected{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-button-item-list ax-button-item.ax-info-default{color:rgba(var(--ax-color-info-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-info-default:hover,ax-button-item-list ax-button-item.ax-info-default:focus{color:rgba(var(--ax-color-info-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-info-default:active{color:rgba(var(--ax-color-info-400))}ax-button-item-list ax-button-item.ax-info-default.ax-state-selected{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}.ax-dark ax-button-item-list ax-button-item.ax-primary-default{color:rgba(var(--ax-color-primary-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-primary-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-primary-default:focus{color:rgba(var(--ax-color-primary-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-primary-default:active{color:rgba(var(--ax-color-primary-100))}.ax-dark ax-button-item-list ax-button-item.ax-primary-default.ax-state-selected{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button-item-list ax-button-item.ax-secondary-default{color:rgba(var(--ax-color-secondary-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-secondary-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-secondary-default:focus{color:rgba(var(--ax-color-secondary-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-secondary-default:active{color:rgba(var(--ax-color-secondary-100))}.ax-dark ax-button-item-list ax-button-item.ax-secondary-default.ax-state-selected{background-color:rgba(var(--ax-color-secondary-200));color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button-item-list ax-button-item.ax-success-default{color:rgba(var(--ax-color-success-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-success-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-success-default:focus{color:rgba(var(--ax-color-success-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-success-default:active{color:rgba(var(--ax-color-success-100))}.ax-dark ax-button-item-list ax-button-item.ax-success-default.ax-state-selected{background-color:rgba(var(--ax-color-success-200));color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button-item-list ax-button-item.ax-warning-default{color:rgba(var(--ax-color-warning-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-warning-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-warning-default:focus{color:rgba(var(--ax-color-warning-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-warning-default:active{color:rgba(var(--ax-color-warning-100))}.ax-dark ax-button-item-list ax-button-item.ax-warning-default.ax-state-selected{background-color:rgba(var(--ax-color-warning-200));color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button-item-list ax-button-item.ax-danger-default{color:rgba(var(--ax-color-danger-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-danger-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-danger-default:focus{color:rgba(var(--ax-color-danger-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-danger-default:active{color:rgba(var(--ax-color-danger-100))}.ax-dark ax-button-item-list ax-button-item.ax-danger-default.ax-state-selected{background-color:rgba(var(--ax-color-danger-200));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button-item-list ax-button-item.ax-info-default{color:rgba(var(--ax-color-info-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-info-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-info-default:focus{color:rgba(var(--ax-color-info-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-info-default:active{color:rgba(var(--ax-color-info-100))}.ax-dark ax-button-item-list ax-button-item.ax-info-default.ax-state-selected{background-color:rgba(var(--ax-color-info-200));color:rgba(var(--ax-color-info-fore))}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["ax-button-item-list{display:flex;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem}ax-button-item-list ax-title{padding-top:.25rem;padding-bottom:.25rem;padding-inline-end:2.5rem;padding-inline-start:1rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-button-item-list ax-divider{margin-top:.25rem;margin-bottom:.25rem;height:1px;width:100%;background-color:rgba(var(--ax-color-border-default))}ax-button-item-list ax-button-item{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:flex-start;padding:.5rem;padding-inline-end:4rem;padding-inline-start:1rem;font-size:.875rem;line-height:1.25rem;color:rgb(var(--ax-color-text-default))}ax-button-item-list ax-button-item:hover:not(ax-button-item-list ax-button-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-surface))}ax-button-item-list ax-button-item.ax-divide{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-button-item-list ax-button-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-button-item-list ax-button-item ax-prefix,ax-button-item-list ax-button-item ax-suffix{display:flex}ax-button-item-list ax-button-item ax-prefix{padding-inline-end:.5rem}ax-button-item-list ax-button-item ax-suffix{padding-inline-start:.5rem}ax-button-item-list ax-button-item.ax-primary-default{color:rgba(var(--ax-color-primary-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-primary-default:hover,ax-button-item-list ax-button-item.ax-primary-default:focus{color:rgba(var(--ax-color-primary-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-primary-default:active{color:rgba(var(--ax-color-primary-400))}ax-button-item-list ax-button-item.ax-primary-default.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-button-item-list ax-button-item.ax-secondary-default{color:rgba(var(--ax-color-secondary-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-secondary-default:hover,ax-button-item-list ax-button-item.ax-secondary-default:focus{color:rgba(var(--ax-color-secondary-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-secondary-default:active{color:rgba(var(--ax-color-secondary-400))}ax-button-item-list ax-button-item.ax-secondary-default.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-button-item-list ax-button-item.ax-success-default{color:rgba(var(--ax-color-success-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-success-default:hover,ax-button-item-list ax-button-item.ax-success-default:focus{color:rgba(var(--ax-color-success-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-success-default:active{color:rgba(var(--ax-color-success-400))}ax-button-item-list ax-button-item.ax-success-default.ax-state-selected{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-button-item-list ax-button-item.ax-warning-default{color:rgba(var(--ax-color-warning-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-warning-default:hover,ax-button-item-list ax-button-item.ax-warning-default:focus{color:rgba(var(--ax-color-warning-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-warning-default:active{color:rgba(var(--ax-color-warning-400))}ax-button-item-list ax-button-item.ax-warning-default.ax-state-selected{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-button-item-list ax-button-item.ax-danger-default{color:rgba(var(--ax-color-danger-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-danger-default:hover,ax-button-item-list ax-button-item.ax-danger-default:focus{color:rgba(var(--ax-color-danger-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-danger-default:active{color:rgba(var(--ax-color-danger-400))}ax-button-item-list ax-button-item.ax-danger-default.ax-state-selected{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-button-item-list ax-button-item.ax-info-default{color:rgba(var(--ax-color-info-500));border:transparent;background:transparent}ax-button-item-list ax-button-item.ax-info-default:hover,ax-button-item-list ax-button-item.ax-info-default:focus{color:rgba(var(--ax-color-info-fore-tint));background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-info-default:active{color:rgba(var(--ax-color-info-400))}ax-button-item-list ax-button-item.ax-info-default.ax-state-selected{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}.ax-dark ax-button-item-list ax-button-item.ax-primary-default{color:rgba(var(--ax-color-primary-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-primary-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-primary-default:focus{color:rgba(var(--ax-color-primary-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-primary-default:active{color:rgba(var(--ax-color-primary-100))}.ax-dark ax-button-item-list ax-button-item.ax-primary-default.ax-state-selected{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button-item-list ax-button-item.ax-secondary-default{color:rgba(var(--ax-color-secondary-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-secondary-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-secondary-default:focus{color:rgba(var(--ax-color-secondary-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-secondary-default:active{color:rgba(var(--ax-color-secondary-100))}.ax-dark ax-button-item-list ax-button-item.ax-secondary-default.ax-state-selected{background-color:rgba(var(--ax-color-secondary-200));color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button-item-list ax-button-item.ax-success-default{color:rgba(var(--ax-color-success-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-success-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-success-default:focus{color:rgba(var(--ax-color-success-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-success-default:active{color:rgba(var(--ax-color-success-100))}.ax-dark ax-button-item-list ax-button-item.ax-success-default.ax-state-selected{background-color:rgba(var(--ax-color-success-200));color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button-item-list ax-button-item.ax-warning-default{color:rgba(var(--ax-color-warning-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-warning-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-warning-default:focus{color:rgba(var(--ax-color-warning-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-warning-default:active{color:rgba(var(--ax-color-warning-100))}.ax-dark ax-button-item-list ax-button-item.ax-warning-default.ax-state-selected{background-color:rgba(var(--ax-color-warning-200));color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button-item-list ax-button-item.ax-danger-default{color:rgba(var(--ax-color-danger-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-danger-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-danger-default:focus{color:rgba(var(--ax-color-danger-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-danger-default:active{color:rgba(var(--ax-color-danger-100))}.ax-dark ax-button-item-list ax-button-item.ax-danger-default.ax-state-selected{background-color:rgba(var(--ax-color-danger-200));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button-item-list ax-button-item.ax-info-default{color:rgba(var(--ax-color-info-200));border:transparent;background:transparent}.ax-dark ax-button-item-list ax-button-item.ax-info-default:hover,.ax-dark ax-button-item-list ax-button-item.ax-info-default:focus{color:rgba(var(--ax-color-info-300));background-color:rgba(var(--ax-color-on-surface))}.ax-dark ax-button-item-list ax-button-item.ax-info-default:active{color:rgba(var(--ax-color-info-100))}.ax-dark ax-button-item-list ax-button-item.ax-info-default.ax-state-selected{background-color:rgba(var(--ax-color-info-200));color:rgba(var(--ax-color-info-fore))}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXButtonItemListComponent, decorators: [{
             type: Component,

package/esm2022/color-box/lib/color-box.component.mjs

@@ -1,5 +1,5 @@
 import { AXColorPalleteComponent } from '@acorex/components/color-palette';
-import { AXClearableComponent, AXComponent, AXFocusableComponent, AXValuableComponent, MXInputBaseValueComponent, } from '@acorex/components/common';
+import { AXClearableComponent, AXComponent, AXFocusableComponent, AXValuableComponent, MXColorLookComponent, MXInputBaseValueComponent, } from '@acorex/components/common';
 import { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';
 import { ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -14,7 +14,7 @@ import * as i4 from "@acorex/components/dropdown";
  *
  * @category Components
  */
-export class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MXInputBaseValueComponent)) {
+export class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MXInputBaseValueComponent), MXColorLookComponent) {
     _handleModelChange(value) {
         this.commitValue(value, true);
     }
@@ -36,7 +36,7 @@ export class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MX
         //this.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXColorBoxComponent, selector: "ax-color-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", minValue: "minValue", maxValue: "maxValue", value: "value", state: "state", name: "name", id: "id", type: "type" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXColorBoxComponent, selector: "ax-color-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", minValue: "minValue", maxValue: "maxValue", value: "value", state: "state", name: "name", id: "id", type: "type", look: "look" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
             { provide: AXComponent, useExisting: AXColorBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXColorBoxComponent },
             { provide: AXValuableComponent, useExisting: AXColorBoxComponent },
@@ -46,11 +46,11 @@ export class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MX
                 useExisting: forwardRef(() => AXColorBoxComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "picker", first: true, predicate: AXColorPalleteComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\">\n      @if(value){\n      <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n\n      }\n      <div class=\"color-value\">{{ value }}</div>\n    </div>\n    @if(value && !disabled && !readonly){\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" class=\"ax-general-button ax-button-icon\" [tabIndex]=\"-1\" [disabled]=\"disabled\"\n      (click)=\"_handleArrowClickEvent($event)\">\n      <span class=\"ax-icon ax-icon-color-palette\"></span>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette [ngModel]=\"value\" (ngModelChange)=\"_handleModelChange($event)\" [disabled]=\"disabled\"\n      [readonly]=\"readonly\">\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>", styles: ["ax-color-box{display:flex;flex:1 1 0%}ax-color-box .ax-content{margin-left:.5rem;margin-right:.5rem;display:flex;height:100%;flex:1 1 0%;align-items:center}ax-color-box .ax-content .color-badge{margin-inline-end:.5rem;display:block;height:1rem;width:1rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-box .ax-content .color-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i3.AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: i3.AXColorPaletteInputComponent, selector: "ax-color-palette-input" }, { kind: "component", type: i3.AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: i4.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: AXColorPalleteComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box [look]=\"look\" [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\" [tabindex]=\"tabIndex\">\n      @if(value){\n      <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      }\n      <div class=\"color-value\">{{ value }}</div>\n    </div>\n    @if(value && !disabled && !readonly){\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" class=\"ax-general-button ax-button-icon\" [tabIndex]=\"-1\" [disabled]=\"disabled\"\n      (click)=\"_handleArrowClickEvent($event)\">\n      <span class=\"ax-icon ax-icon-color-palette\"></span>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette [ngModel]=\"value\" (ngModelChange)=\"_handleModelChange($event)\" [disabled]=\"disabled\"\n      [readonly]=\"readonly\">\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>", styles: ["ax-color-box{display:flex;flex:1 1 0%}ax-color-box .ax-content{margin-left:.5rem;margin-right:.5rem;display:flex;height:100%;flex:1 1 0%;align-items:center;outline-color:transparent}ax-color-box .ax-content .color-badge{margin-inline-end:.5rem;display:block;height:1rem;width:1rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-box .ax-content .color-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i3.AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: i3.AXColorPaletteInputComponent, selector: "ax-color-palette-input" }, { kind: "component", type: i3.AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: i4.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-color-box', inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'minValue', 'maxValue', 'value', 'state', 'name', 'id', 'type'], outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus', 'readonlyChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'ax-color-box', inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'minValue', 'maxValue', 'value', 'state', 'name', 'id', 'type', 'look'], outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus', 'readonlyChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXComponent, useExisting: AXColorBoxComponent },
                         { provide: AXFocusableComponent, useExisting: AXColorBoxComponent },
                         { provide: AXValuableComponent, useExisting: AXColorBoxComponent },
@@ -60,7 +60,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                             useExisting: forwardRef(() => AXColorBoxComponent),
                             multi: true,
                         },
-                    ], host: { ngSkipHydration: 'true' }, template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\">\n      @if(value){\n      <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n\n      }\n      <div class=\"color-value\">{{ value }}</div>\n    </div>\n    @if(value && !disabled && !readonly){\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" class=\"ax-general-button ax-button-icon\" [tabIndex]=\"-1\" [disabled]=\"disabled\"\n      (click)=\"_handleArrowClickEvent($event)\">\n      <span class=\"ax-icon ax-icon-color-palette\"></span>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette [ngModel]=\"value\" (ngModelChange)=\"_handleModelChange($event)\" [disabled]=\"disabled\"\n      [readonly]=\"readonly\">\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>", styles: ["ax-color-box{display:flex;flex:1 1 0%}ax-color-box .ax-content{margin-left:.5rem;margin-right:.5rem;display:flex;height:100%;flex:1 1 0%;align-items:center}ax-color-box .ax-content .color-badge{margin-inline-end:.5rem;display:block;height:1rem;width:1rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-box .ax-content .color-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}\n"] }]
+                    ], host: { ngSkipHydration: 'true' }, template: "<ax-dropdown-box [look]=\"look\" [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\" [tabindex]=\"tabIndex\">\n      @if(value){\n      <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      }\n      <div class=\"color-value\">{{ value }}</div>\n    </div>\n    @if(value && !disabled && !readonly){\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" class=\"ax-general-button ax-button-icon\" [tabIndex]=\"-1\" [disabled]=\"disabled\"\n      (click)=\"_handleArrowClickEvent($event)\">\n      <span class=\"ax-icon ax-icon-color-palette\"></span>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette [ngModel]=\"value\" (ngModelChange)=\"_handleModelChange($event)\" [disabled]=\"disabled\"\n      [readonly]=\"readonly\">\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>", styles: ["ax-color-box{display:flex;flex:1 1 0%}ax-color-box .ax-content{margin-left:.5rem;margin-right:.5rem;display:flex;height:100%;flex:1 1 0%;align-items:center;outline-color:transparent}ax-color-box .ax-content .color-badge{margin-inline-end:.5rem;display:block;height:1rem;width:1rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-box .ax-content .color-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}\n"] }]
         }], propDecorators: { picker: [{
                 type: ViewChild,
                 args: [AXColorPalleteComponent]
@@ -68,4 +68,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 type: ViewChild,
                 args: [AXDropdownBoxComponent]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9jb2xvci1ib3gvc3JjL2xpYi9jb2xvci1ib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2NvbG9yLWJveC9zcmMvbGliL2NvbG9yLWJveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUMzRSxPQUFPLEVBQ0wsb0JBQW9CLEVBQ3BCLFdBQVcsRUFFWCxvQkFBb0IsRUFDcEIsbUJBQW1CLEVBQ25CLHlCQUF5QixHQUMxQixNQUFNLDJCQUEyQixDQUFDO0FBQ25DLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ2pHLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sVUFBVSxDQUFDOzs7Ozs7QUFFbkM7Ozs7R0FJRztBQXNCSCxNQUFNLE9BQU8sbUJBQW9CLFNBQVEsT0FBTyxDQUFDLDBCQUEwQixFQUFFLENBQUEseUJBQWlDLENBQUEsQ0FBQztJQVduRyxrQkFBa0IsQ0FBQyxLQUFvQjtRQUMvQyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsQ0FBQztJQUNoQyxDQUFDO0lBRVMsc0JBQXNCLENBQUMsQ0FBYTtRQUM1QyxDQUFDLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ2hCLENBQUM7SUFFUyxzQkFBc0IsQ0FBQyxDQUFhO1FBQzVDLENBQUMsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDaEIsQ0FBQztJQUVTLG9CQUFvQixDQUFDLENBQVU7UUFDdkMseUJBQXlCO0lBQzNCLENBQUM7SUFFUyxvQkFBb0IsQ0FBQyxDQUFVO1FBQ3ZDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNmLENBQUM7SUFFUSxvQkFBb0IsQ0FBQyxLQUFZO1FBQ3hDLGVBQWU7SUFDakIsQ0FBQzs4R0FuQ1UsbUJBQW1CO2tHQUFuQixtQkFBbUIseWdCQWJuQjtZQUNULEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsbUJBQW1CLEVBQUU7WUFDMUQsRUFBRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsV0FBVyxFQUFFLG1CQUFtQixFQUFFO1lBQ25FLEVBQUUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLFdBQVcsRUFBRSxtQkFBbUIsRUFBRTtZQUNsRSxFQUFFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxXQUFXLEVBQUUsbUJBQW1CLEVBQUU7WUFDbkU7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQztnQkFDbEQsS0FBSyxFQUFFLElBQUk7YUFDWjtTQUNGLGtFQVFVLHVCQUF1QiwyRUFHdkIsc0JBQXNCLHVFQ2hEbkMsaTFDQTZCa0I7OzJGRFdMLG1CQUFtQjtrQkFyQi9CLFNBQVM7K0JBQ0UsY0FBYyxVQUdoQixDQUFDLFVBQVUsRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLGFBQWEsRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxNQUFNLENBQUMsV0FDbEgsQ0FBQyxhQUFhLEVBQUUsYUFBYSxFQUFFLGdCQUFnQixFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsZ0JBQWdCLENBQUMsbUJBQ2pHLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksYUFDMUI7d0JBQ1QsRUFBRSxPQUFPLEVBQUUsV0FBVyxFQUFFLFdBQVcscUJBQXFCLEVBQUU7d0JBQzFELEVBQUUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFdBQVcscUJBQXFCLEVBQUU7d0JBQ25FLEVBQUUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLFdBQVcscUJBQXFCLEVBQUU7d0JBQ2xFLEVBQUUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFdBQVcscUJBQXFCLEVBQUU7d0JBQ25FOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLG9CQUFvQixDQUFDOzRCQUNsRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRixRQUNLLEVBQUUsZUFBZSxFQUFFLE1BQU0sRUFBRTs4QkFRdkIsTUFBTTtzQkFEZixTQUFTO3VCQUFDLHVCQUF1QjtnQkFJeEIsUUFBUTtzQkFEakIsU0FBUzt1QkFBQyxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBWENvbG9yUGFsbGV0ZUNvbXBvbmVudCB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9jb2xvci1wYWxldHRlJztcbmltcG9ydCB7XG4gIEFYQ2xlYXJhYmxlQ29tcG9uZW50LFxuICBBWENvbXBvbmVudCxcbiAgQVhFdmVudCxcbiAgQVhGb2N1c2FibGVDb21wb25lbnQsXG4gIEFYVmFsdWFibGVDb21wb25lbnQsXG4gIE1YSW5wdXRCYXNlVmFsdWVDb21wb25lbnQsXG59IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9jb21tb24nO1xuaW1wb3J0IHsgQVhEcm9wZG93bkJveENvbXBvbmVudCwgTVhEcm9wZG93bkJveEJhc2VDb21wb25lbnQgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvZHJvcGRvd24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgVmlld0NoaWxkLCBWaWV3RW5jYXBzdWxhdGlvbiwgZm9yd2FyZFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBjbGFzc2VzIH0gZnJvbSAncG9seXR5cGUnO1xuXG4vKipcbiAqIFRoZSBCdXR0b24gaXMgYSBjb21wb25lbnQgd2hpY2ggZGV0ZWN0cyB1c2VyIGludGVyYWN0aW9uIGFuZCB0cmlnZ2VycyBhIGNvcnJlc3BvbmRpbmcgZXZlbnRcbiAqXG4gKiBAY2F0ZWdvcnkgQ29tcG9uZW50c1xuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1jb2xvci1ib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY29sb3ItYm94LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY29sb3ItYm94LmNvbXBvbmVudC5zY3NzJ10sXG4gIGlucHV0czogWydkaXNhYmxlZCcsICdyZWFkb25seScsICd0YWJJbmRleCcsICdwbGFjZWhvbGRlcicsICdtaW5WYWx1ZScsICdtYXhWYWx1ZScsICd2YWx1ZScsICdzdGF0ZScsICduYW1lJywgJ2lkJywgJ3R5cGUnXSxcbiAgb3V0cHV0czogWyd2YWx1ZUNoYW5nZScsICdzdGF0ZUNoYW5nZScsICdvblZhbHVlQ2hhbmdlZCcsICdvbkJsdXInLCAnb25Gb2N1cycsICdyZWFkb25seUNoYW5nZScsICdkaXNhYmxlZENoYW5nZSddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgcHJvdmlkZXJzOiBbXG4gICAgeyBwcm92aWRlOiBBWENvbXBvbmVudCwgdXNlRXhpc3Rpbmc6IEFYQ29sb3JCb3hDb21wb25lbnQgfSxcbiAgICB7IHByb3ZpZGU6IEFYRm9jdXNhYmxlQ29tcG9uZW50LCB1c2VFeGlzdGluZzogQVhDb2xvckJveENvbXBvbmVudCB9LFxuICAgIHsgcHJvdmlkZTogQVhWYWx1YWJsZUNvbXBvbmVudCwgdXNlRXhpc3Rpbmc6IEFYQ29sb3JCb3hDb21wb25lbnQgfSxcbiAgICB7IHByb3ZpZGU6IEFYQ2xlYXJhYmxlQ29tcG9uZW50LCB1c2VFeGlzdGluZzogQVhDb2xvckJveENvbXBvbmVudCB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQVhDb2xvckJveENvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICBdLFxuICBob3N0OiB7IG5nU2tpcEh5ZHJhdGlvbjogJ3RydWUnIH0sXG59KVxuZXhwb3J0IGNsYXNzIEFYQ29sb3JCb3hDb21wb25lbnQgZXh0ZW5kcyBjbGFzc2VzKE1YRHJvcGRvd25Cb3hCYXNlQ29tcG9uZW50LCBNWElucHV0QmFzZVZhbHVlQ29tcG9uZW50PHN0cmluZz4pIHtcbiAgLy9UT0RPOiBpbXBsZW1lbnQgdGhlIGNvbG9yIGlucHV0IGNvbXBvbmVudFxuICAvLyBAVmlld0NoaWxkKEFYRGF0ZVRpbWVJbnB1dENvbXBvbmVudClcbiAgLy8gcHJvdGVjdGVkIGlucHV0OiBBWERhdGVUaW1lSW5wdXRDb21wb25lbnQ7XG5cbiAgQFZpZXdDaGlsZChBWENvbG9yUGFsbGV0ZUNvbXBvbmVudClcbiAgcHJvdGVjdGVkIHBpY2tlcjogQVhDb2xvclBhbGxldGVDb21wb25lbnQ7XG5cbiAgQFZpZXdDaGlsZChBWERyb3Bkb3duQm94Q29tcG9uZW50KVxuICBwcm90ZWN0ZWQgZHJvcGRvd246IEFYRHJvcGRvd25Cb3hDb21wb25lbnQ7XG5cbiAgcHJvdGVjdGVkIF9oYW5kbGVNb2RlbENoYW5nZSh2YWx1ZTogc3RyaW5nIHwgbnVsbCkge1xuICAgIHRoaXMuY29tbWl0VmFsdWUodmFsdWUsIHRydWUpO1xuICB9XG5cbiAgcHJvdGVjdGVkIF9oYW5kbGVBcnJvd0NsaWNrRXZlbnQoZTogTW91c2VFdmVudCkge1xuICAgIGUuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgdGhpcy50b2dnbGUoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBfaGFuZGxlSW5wdXRDbGlja0V2ZW50KGU6IE1vdXNlRXZlbnQpIHtcbiAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMudG9nZ2xlKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgX2hhbmRsZU9uT3BlbmVkRXZlbnQoZTogQVhFdmVudCkge1xuICAgIC8vdGhpcy5waWNrZXI/LnJlZnJlc2goKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBfaGFuZGxlT25DbG9zZWRFdmVudChlOiBBWEV2ZW50KSB7XG4gICAgdGhpcy5mb2N1cygpO1xuICB9XG5cbiAgb3ZlcnJpZGUgaW50ZXJuYWxWYWx1ZUNoYW5nZWQodmFsdWU/OiBEYXRlKTogdm9pZCB7XG4gICAgLy90aGlzLmNsb3NlKCk7XG4gIH1cbn1cbiIsIjxheC1kcm9wZG93bi1ib3ggW2Rpc2FibGVkXT1cImRpc2FibGVkXCIgKG9uT3BlbmVkKT1cIl9oYW5kbGVPbk9wZW5lZEV2ZW50KCRldmVudClcIlxuICAob25DbG9zZWQpPVwiX2hhbmRsZU9uQ2xvc2VkRXZlbnQoJGV2ZW50KVwiPlxuICA8bmctY29udGFpbmVyIGlucHV0PlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LXByZWZpeFwiPiA8L25nLWNvbnRlbnQ+XG4gICAgPGRpdiBjbGFzcz1cImF4LWNvbnRlbnRcIiAoY2xpY2spPVwiX2hhbmRsZUlucHV0Q2xpY2tFdmVudCgkZXZlbnQpXCI+XG4gICAgICBAaWYodmFsdWUpe1xuICAgICAgPGRpdiBjbGFzcz1cImNvbG9yLWJhZGdlXCIgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1jb2xvcic6IHZhbHVlIH1cIj48L2Rpdj5cblxuICAgICAgfVxuICAgICAgPGRpdiBjbGFzcz1cImNvbG9yLXZhbHVlXCI+e3sgdmFsdWUgfX08L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICBAaWYodmFsdWUgJiYgIWRpc2FibGVkICYmICFyZWFkb25seSl7XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgtY2xlYXItYnV0dG9uXCI+PC9uZy1jb250ZW50PlxuICAgIH1cbiAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImF4LWdlbmVyYWwtYnV0dG9uIGF4LWJ1dHRvbi1pY29uXCIgW3RhYkluZGV4XT1cIi0xXCIgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgIChjbGljayk9XCJfaGFuZGxlQXJyb3dDbGlja0V2ZW50KCRldmVudClcIj5cbiAgICAgIDxzcGFuIGNsYXNzPVwiYXgtaWNvbiBheC1pY29uLWNvbG9yLXBhbGV0dGVcIj48L3NwYW4+XG4gICAgPC9idXR0b24+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgtc3VmZml4XCI+IDwvbmctY29udGVudD5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJheC12YWxpZGF0aW9uLXJ1bGVcIj4gPC9uZy1jb250ZW50PlxuICA8L25nLWNvbnRhaW5lcj5cbiAgPG5nLWNvbnRhaW5lciBwYW5lbD5cbiAgICA8YXgtY29sb3ItcGFsZXR0ZSBbbmdNb2RlbF09XCJ2YWx1ZVwiIChuZ01vZGVsQ2hhbmdlKT1cIl9oYW5kbGVNb2RlbENoYW5nZSgkZXZlbnQpXCIgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgIFtyZWFkb25seV09XCJyZWFkb25seVwiPlxuICAgICAgPGF4LWNvbG9yLXBhbGV0dGUtcGlja2VyPjwvYXgtY29sb3ItcGFsZXR0ZS1waWNrZXI+XG4gICAgICA8YXgtY29sb3ItcGFsZXR0ZS1zd2F0Y2hlcz48L2F4LWNvbG9yLXBhbGV0dGUtc3dhdGNoZXM+XG4gICAgICA8YXgtY29sb3ItcGFsZXR0ZS1pbnB1dD48L2F4LWNvbG9yLXBhbGV0dGUtaW5wdXQ+XG4gICAgPC9heC1jb2xvci1wYWxldHRlPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvYXgtZHJvcGRvd24tYm94PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9jb2xvci1ib3gvc3JjL2xpYi9jb2xvci1ib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2NvbG9yLWJveC9zcmMvbGliL2NvbG9yLWJveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUMzRSxPQUFPLEVBQ0wsb0JBQW9CLEVBQ3BCLFdBQVcsRUFFWCxvQkFBb0IsRUFDcEIsbUJBQW1CLEVBQ25CLG9CQUFvQixFQUNwQix5QkFBeUIsR0FDMUIsTUFBTSwyQkFBMkIsQ0FBQztBQUNuQyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUNqRyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0csT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLFVBQVUsQ0FBQzs7Ozs7O0FBRW5DOzs7O0dBSUc7QUFzQkgsTUFBTSxPQUFPLG1CQUFvQixTQUFRLE9BQU8sQ0FBQywwQkFBMEIsRUFBRSxDQUFBLHlCQUFpQyxDQUFBLEVBQUUsb0JBQW9CLENBQUM7SUFXekgsa0JBQWtCLENBQUMsS0FBb0I7UUFDL0MsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVTLHNCQUFzQixDQUFDLENBQWE7UUFDNUMsQ0FBQyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUNoQixDQUFDO0lBRVMsc0JBQXNCLENBQUMsQ0FBYTtRQUM1QyxDQUFDLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ2hCLENBQUM7SUFFUyxvQkFBb0IsQ0FBQyxDQUFVO1FBQ3ZDLHlCQUF5QjtJQUMzQixDQUFDO0lBRVMsb0JBQW9CLENBQUMsQ0FBVTtRQUN2QyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDZixDQUFDO0lBRVEsb0JBQW9CLENBQUMsS0FBWTtRQUN4QyxlQUFlO0lBQ2pCLENBQUM7OEdBbkNVLG1CQUFtQjtrR0FBbkIsbUJBQW1CLHVoQkFibkI7WUFDVCxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLG1CQUFtQixFQUFFO1lBQzFELEVBQUUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFdBQVcsRUFBRSxtQkFBbUIsRUFBRTtZQUNuRSxFQUFFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxXQUFXLEVBQUUsbUJBQW1CLEVBQUU7WUFDbEUsRUFBRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsV0FBVyxFQUFFLG1CQUFtQixFQUFFO1lBQ25FO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsbUJBQW1CLENBQUM7Z0JBQ2xELEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRixrRUFRVSx1QkFBdUIsMkVBR3ZCLHNCQUFzQix1RUNqRG5DLHUzQ0E0QmtCOzsyRkRhTCxtQkFBbUI7a0JBckIvQixTQUFTOytCQUNFLGNBQWMsVUFHaEIsQ0FBQyxVQUFVLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxhQUFhLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLE1BQU0sQ0FBQyxXQUMxSCxDQUFDLGFBQWEsRUFBRSxhQUFhLEVBQUUsZ0JBQWdCLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxnQkFBZ0IsQ0FBQyxtQkFDakcsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSxhQUMxQjt3QkFDVCxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxxQkFBcUIsRUFBRTt3QkFDMUQsRUFBRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsV0FBVyxxQkFBcUIsRUFBRTt3QkFDbkUsRUFBRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsV0FBVyxxQkFBcUIsRUFBRTt3QkFDbEUsRUFBRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsV0FBVyxxQkFBcUIsRUFBRTt3QkFDbkU7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsb0JBQW9CLENBQUM7NEJBQ2xELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGLFFBQ0ssRUFBRSxlQUFlLEVBQUUsTUFBTSxFQUFFOzhCQVF2QixNQUFNO3NCQURmLFNBQVM7dUJBQUMsdUJBQXVCO2dCQUl4QixRQUFRO3NCQURqQixTQUFTO3VCQUFDLHNCQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQ29sb3JQYWxsZXRlQ29tcG9uZW50IH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2NvbG9yLXBhbGV0dGUnO1xuaW1wb3J0IHtcbiAgQVhDbGVhcmFibGVDb21wb25lbnQsXG4gIEFYQ29tcG9uZW50LFxuICBBWEV2ZW50LFxuICBBWEZvY3VzYWJsZUNvbXBvbmVudCxcbiAgQVhWYWx1YWJsZUNvbXBvbmVudCxcbiAgTVhDb2xvckxvb2tDb21wb25lbnQsXG4gIE1YSW5wdXRCYXNlVmFsdWVDb21wb25lbnQsXG59IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9jb21tb24nO1xuaW1wb3J0IHsgQVhEcm9wZG93bkJveENvbXBvbmVudCwgTVhEcm9wZG93bkJveEJhc2VDb21wb25lbnQgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvZHJvcGRvd24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgVmlld0NoaWxkLCBWaWV3RW5jYXBzdWxhdGlvbiwgZm9yd2FyZFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBjbGFzc2VzIH0gZnJvbSAncG9seXR5cGUnO1xuXG4vKipcbiAqIFRoZSBCdXR0b24gaXMgYSBjb21wb25lbnQgd2hpY2ggZGV0ZWN0cyB1c2VyIGludGVyYWN0aW9uIGFuZCB0cmlnZ2VycyBhIGNvcnJlc3BvbmRpbmcgZXZlbnRcbiAqXG4gKiBAY2F0ZWdvcnkgQ29tcG9uZW50c1xuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1jb2xvci1ib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY29sb3ItYm94LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY29sb3ItYm94LmNvbXBvbmVudC5zY3NzJ10sXG4gIGlucHV0czogWydkaXNhYmxlZCcsICdyZWFkb25seScsICd0YWJJbmRleCcsICdwbGFjZWhvbGRlcicsICdtaW5WYWx1ZScsICdtYXhWYWx1ZScsICd2YWx1ZScsICdzdGF0ZScsICduYW1lJywgJ2lkJywgJ3R5cGUnLCAnbG9vayddLFxuICBvdXRwdXRzOiBbJ3ZhbHVlQ2hhbmdlJywgJ3N0YXRlQ2hhbmdlJywgJ29uVmFsdWVDaGFuZ2VkJywgJ29uQmx1cicsICdvbkZvY3VzJywgJ3JlYWRvbmx5Q2hhbmdlJywgJ2Rpc2FibGVkQ2hhbmdlJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBwcm92aWRlcnM6IFtcbiAgICB7IHByb3ZpZGU6IEFYQ29tcG9uZW50LCB1c2VFeGlzdGluZzogQVhDb2xvckJveENvbXBvbmVudCB9LFxuICAgIHsgcHJvdmlkZTogQVhGb2N1c2FibGVDb21wb25lbnQsIHVzZUV4aXN0aW5nOiBBWENvbG9yQm94Q29tcG9uZW50IH0sXG4gICAgeyBwcm92aWRlOiBBWFZhbHVhYmxlQ29tcG9uZW50LCB1c2VFeGlzdGluZzogQVhDb2xvckJveENvbXBvbmVudCB9LFxuICAgIHsgcHJvdmlkZTogQVhDbGVhcmFibGVDb21wb25lbnQsIHVzZUV4aXN0aW5nOiBBWENvbG9yQm94Q29tcG9uZW50IH0sXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBBWENvbG9yQm94Q29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG4gIGhvc3Q6IHsgbmdTa2lwSHlkcmF0aW9uOiAndHJ1ZScgfSxcbn0pXG5leHBvcnQgY2xhc3MgQVhDb2xvckJveENvbXBvbmVudCBleHRlbmRzIGNsYXNzZXMoTVhEcm9wZG93bkJveEJhc2VDb21wb25lbnQsIE1YSW5wdXRCYXNlVmFsdWVDb21wb25lbnQ8c3RyaW5nPiwgTVhDb2xvckxvb2tDb21wb25lbnQpIHtcbiAgLy9UT0RPOiBpbXBsZW1lbnQgdGhlIGNvbG9yIGlucHV0IGNvbXBvbmVudFxuICAvLyBAVmlld0NoaWxkKEFYRGF0ZVRpbWVJbnB1dENvbXBvbmVudClcbiAgLy8gcHJvdGVjdGVkIGlucHV0OiBBWERhdGVUaW1lSW5wdXRDb21wb25lbnQ7XG5cbiAgQFZpZXdDaGlsZChBWENvbG9yUGFsbGV0ZUNvbXBvbmVudClcbiAgcHJvdGVjdGVkIHBpY2tlcjogQVhDb2xvclBhbGxldGVDb21wb25lbnQ7XG5cbiAgQFZpZXdDaGlsZChBWERyb3Bkb3duQm94Q29tcG9uZW50KVxuICBwcm90ZWN0ZWQgZHJvcGRvd246IEFYRHJvcGRvd25Cb3hDb21wb25lbnQ7XG5cbiAgcHJvdGVjdGVkIF9oYW5kbGVNb2RlbENoYW5nZSh2YWx1ZTogc3RyaW5nIHwgbnVsbCkge1xuICAgIHRoaXMuY29tbWl0VmFsdWUodmFsdWUsIHRydWUpO1xuICB9XG5cbiAgcHJvdGVjdGVkIF9oYW5kbGVBcnJvd0NsaWNrRXZlbnQoZTogTW91c2VFdmVudCkge1xuICAgIGUuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgdGhpcy50b2dnbGUoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBfaGFuZGxlSW5wdXRDbGlja0V2ZW50KGU6IE1vdXNlRXZlbnQpIHtcbiAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMudG9nZ2xlKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgX2hhbmRsZU9uT3BlbmVkRXZlbnQoZTogQVhFdmVudCkge1xuICAgIC8vdGhpcy5waWNrZXI/LnJlZnJlc2goKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBfaGFuZGxlT25DbG9zZWRFdmVudChlOiBBWEV2ZW50KSB7XG4gICAgdGhpcy5mb2N1cygpO1xuICB9XG5cbiAgb3ZlcnJpZGUgaW50ZXJuYWxWYWx1ZUNoYW5nZWQodmFsdWU/OiBEYXRlKTogdm9pZCB7XG4gICAgLy90aGlzLmNsb3NlKCk7XG4gIH1cbn1cbiIsIjxheC1kcm9wZG93bi1ib3ggW2xvb2tdPVwibG9va1wiIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIChvbk9wZW5lZCk9XCJfaGFuZGxlT25PcGVuZWRFdmVudCgkZXZlbnQpXCJcbiAgKG9uQ2xvc2VkKT1cIl9oYW5kbGVPbkNsb3NlZEV2ZW50KCRldmVudClcIj5cbiAgPG5nLWNvbnRhaW5lciBpbnB1dD5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJheC1wcmVmaXhcIj4gPC9uZy1jb250ZW50PlxuICAgIDxkaXYgY2xhc3M9XCJheC1jb250ZW50XCIgKGNsaWNrKT1cIl9oYW5kbGVJbnB1dENsaWNrRXZlbnQoJGV2ZW50KVwiIFt0YWJpbmRleF09XCJ0YWJJbmRleFwiPlxuICAgICAgQGlmKHZhbHVlKXtcbiAgICAgIDxkaXYgY2xhc3M9XCJjb2xvci1iYWRnZVwiIFtuZ1N0eWxlXT1cInsgJ2JhY2tncm91bmQtY29sb3InOiB2YWx1ZSB9XCI+PC9kaXY+XG4gICAgICB9XG4gICAgICA8ZGl2IGNsYXNzPVwiY29sb3ItdmFsdWVcIj57eyB2YWx1ZSB9fTwvZGl2PlxuICAgIDwvZGl2PlxuICAgIEBpZih2YWx1ZSAmJiAhZGlzYWJsZWQgJiYgIXJlYWRvbmx5KXtcbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJheC1jbGVhci1idXR0b25cIj48L25nLWNvbnRlbnQ+XG4gICAgfVxuICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiYXgtZ2VuZXJhbC1idXR0b24gYXgtYnV0dG9uLWljb25cIiBbdGFiSW5kZXhdPVwiLTFcIiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgKGNsaWNrKT1cIl9oYW5kbGVBcnJvd0NsaWNrRXZlbnQoJGV2ZW50KVwiPlxuICAgICAgPHNwYW4gY2xhc3M9XCJheC1pY29uIGF4LWljb24tY29sb3ItcGFsZXR0ZVwiPjwvc3Bhbj5cbiAgICA8L2J1dHRvbj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJheC1zdWZmaXhcIj4gPC9uZy1jb250ZW50PlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LXZhbGlkYXRpb24tcnVsZVwiPiA8L25nLWNvbnRlbnQ+XG4gIDwvbmctY29udGFpbmVyPlxuICA8bmctY29udGFpbmVyIHBhbmVsPlxuICAgIDxheC1jb2xvci1wYWxldHRlIFtuZ01vZGVsXT1cInZhbHVlXCIgKG5nTW9kZWxDaGFuZ2UpPVwiX2hhbmRsZU1vZGVsQ2hhbmdlKCRldmVudClcIiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgW3JlYWRvbmx5XT1cInJlYWRvbmx5XCI+XG4gICAgICA8YXgtY29sb3ItcGFsZXR0ZS1waWNrZXI+PC9heC1jb2xvci1wYWxldHRlLXBpY2tlcj5cbiAgICAgIDxheC1jb2xvci1wYWxldHRlLXN3YXRjaGVzPjwvYXgtY29sb3ItcGFsZXR0ZS1zd2F0Y2hlcz5cbiAgICAgIDxheC1jb2xvci1wYWxldHRlLWlucHV0PjwvYXgtY29sb3ItcGFsZXR0ZS1pbnB1dD5cbiAgICA8L2F4LWNvbG9yLXBhbGV0dGU+XG4gIDwvbmctY29udGFpbmVyPlxuPC9heC1kcm9wZG93bi1ib3g+Il19

package/esm2022/common/lib/components/interactive-component.class.mjs

@@ -1,5 +1,5 @@
 import { AXHtmlUtil } from '@acorex/core/utils';
-import { coerceBooleanProperty, coerceNumberProperty, } from '@angular/cdk/coercion';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { EventEmitter } from '@angular/core';
 import { noop } from 'rxjs';
 import { MXBaseComponent } from './base-component.class';
@@ -20,6 +20,13 @@ export class MXInteractiveComponent extends MXBaseComponent {
          *  @event
          */
         this.onBlur = new EventEmitter();
+        // private _focused = signal(false);
+        // protected markAsFocused() {
+        //   this._focused.set(true);
+        // }
+        // protected markAsBlured() {
+        //   this._focused.set(false);
+        // }
     }
     registerOnTouched(fn) {
         this.onTouchedCallback = fn;
@@ -104,4 +111,4 @@ export class MXInteractiveComponent extends MXBaseComponent {
         return AXHtmlUtil.hasFocus(this.getHostElement());
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJhY3RpdmUtY29tcG9uZW50LmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2NvbW1vbi9zcmMvbGliL2NvbXBvbmVudHMvaW50ZXJhY3RpdmUtY29tcG9uZW50LmNsYXNzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUNoRCxPQUFPLEVBQ0wscUJBQXFCLEVBQ3JCLG9CQUFvQixHQUNyQixNQUFNLHVCQUF1QixDQUFDO0FBQy9CLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0MsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUU1QixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFFekQsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGVBQWU7SUFBM0Q7O1FBQ1ksc0JBQWlCLEdBQWUsSUFBSSxDQUFDO1FBTXZDLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFZekIsbUJBQWMsR0FBMEIsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQXVCcEUsY0FBUyxHQUFHLENBQUMsQ0FBQztRQWNkOzs7V0FHRztRQUNILFlBQU8sR0FBK0IsSUFBSSxZQUFZLEVBQWdCLENBQUM7UUFVdkU7OztXQUdHO1FBQ0gsV0FBTSxHQUErQixJQUFJLFlBQVksRUFBZ0IsQ0FBQztJQXVDeEUsQ0FBQztJQTlHQyxpQkFBaUIsQ0FBQyxFQUFjO1FBQzlCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxFQUFFLENBQUM7SUFDOUIsQ0FBQztJQUdELElBQVcsT0FBTztRQUNoQixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDdkIsQ0FBQztJQUVTLGFBQWE7UUFDckIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNsQixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztZQUN6QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztRQUN2QixDQUFDO0lBQ0gsQ0FBQztJQUlEOztPQUVHO0lBQ0gsSUFBVyxRQUFRO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUN4QixDQUFDO0lBQ0QsSUFBSSxRQUFRLENBQUMsS0FBYztRQUN6QixLQUFLLEdBQUcscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLFNBQVMsQ0FBQztZQUNiLElBQUksRUFBRSxVQUFVO1lBQ2hCLEtBQUs7WUFDTCxhQUFhLEVBQUUsR0FBRyxFQUFFO2dCQUNsQixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQzFCLENBQUM7U0FDRixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDN0IsQ0FBQztJQUdEOztPQUVHO0lBQ0gsSUFBSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUM3QyxDQUFDO0lBQ0QsSUFBSSxRQUFRLENBQUMsS0FBYTtRQUN4QixJQUFJLENBQUMsU0FBUyxDQUFDO1lBQ2IsSUFBSSxFQUFFLFVBQVU7WUFDaEIsS0FBSyxFQUFFLEtBQUssSUFBSSxJQUFJLENBQUMsQ0FBQyxDQUFDLG9CQUFvQixDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1NBQ3ZELENBQUMsQ0FBQztJQUNMLENBQUM7SUFRUyxnQkFBZ0IsQ0FBQyxDQUFhO1FBQ3RDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO1lBQ2hCLFNBQVMsRUFBRSxJQUFJO1lBQ2YsV0FBVyxFQUFFLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDbEMsV0FBVyxFQUFFLENBQUM7U0FDZixDQUFDLENBQUM7SUFDTCxDQUFDO0lBUVMsZUFBZSxDQUFDLENBQWE7UUFDckMsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDO1lBQ2YsU0FBUyxFQUFFLElBQUk7WUFDZixXQUFXLEVBQUUsSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUNsQyxXQUFXLEVBQUUsQ0FBQztTQUNmLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxNQUFNO0lBQ04sa0RBQWtEO0lBQ2xELGFBQWE7SUFDYixNQUFNO0lBQ04sMEVBQTBFO0lBRTFFLG9EQUFvRDtJQUNwRCx3QkFBd0I7SUFDeEIsdUJBQXVCO0lBQ3ZCLDBDQUEwQztJQUMxQyxzQkFBc0I7SUFDdEIsUUFBUTtJQUNSLElBQUk7SUFFSixLQUFLO1FBQ0gsVUFBVSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQsSUFBSTtRQUNGLFVBQVUsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDLENBQUM7SUFDaEQsQ0FBQztJQUVEOztPQUVHO0lBQ0gsUUFBUTtRQUNOLE9BQU8sVUFBVSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBQztJQUNwRCxDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBWEh0bWxVdGlsIH0gZnJvbSAnQGFjb3JleC9jb3JlL3V0aWxzJztcbmltcG9ydCB7XG4gIGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSxcbiAgY29lcmNlTnVtYmVyUHJvcGVydHksXG59IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5pbXBvcnQgeyBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IG5vb3AgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IEFYRm9jdXNFdmVudCB9IGZyb20gJy4uL2NsYXNzZXMvZXZlbnRzLmNsYXNzJztcbmltcG9ydCB7IE1YQmFzZUNvbXBvbmVudCB9IGZyb20gJy4vYmFzZS1jb21wb25lbnQuY2xhc3MnO1xuXG5leHBvcnQgY2xhc3MgTVhJbnRlcmFjdGl2ZUNvbXBvbmVudCBleHRlbmRzIE1YQmFzZUNvbXBvbmVudCB7XG4gIHByb3RlY3RlZCBvblRvdWNoZWRDYWxsYmFjazogKCkgPT4gdm9pZCA9IG5vb3A7XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZENhbGxiYWNrID0gZm47XG4gIH1cblxuICBwcml2YXRlIF90b3VjaGVkID0gZmFsc2U7XG4gIHB1YmxpYyBnZXQgdG91Y2hlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5fdG91Y2hlZDtcbiAgfVxuXG4gIHByb3RlY3RlZCBtYXJrQXNUb3VjaGVkKCkge1xuICAgIGlmICghdGhpcy50b3VjaGVkKSB7XG4gICAgICB0aGlzLm9uVG91Y2hlZENhbGxiYWNrKCk7XG4gICAgICB0aGlzLl90b3VjaGVkID0gdHJ1ZTtcbiAgICB9XG4gIH1cblxuICBkaXNhYmxlZENoYW5nZTogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuICBwcml2YXRlIF9kaXNhYmxlZDogYm9vbGVhbjtcbiAgLyoqXG4gICAqICBJZiBzZXQgdG8gdHJ1ZSwgaXQgZGlzYWJsZXMgdGhlIGNvbXBvbmVudC5cbiAgICovXG4gIHB1YmxpYyBnZXQgZGlzYWJsZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2Rpc2FibGVkO1xuICB9XG4gIHNldCBkaXNhYmxlZCh2YWx1ZTogYm9vbGVhbikge1xuICAgIHZhbHVlID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcbiAgICB0aGlzLnNldE9wdGlvbih7XG4gICAgICBuYW1lOiAnZGlzYWJsZWQnLFxuICAgICAgdmFsdWUsXG4gICAgICBhZnRlckNhbGxiYWNrOiAoKSA9PiB7XG4gICAgICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICAgICAgfSxcbiAgICB9KTtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xuICB9XG5cbiAgX3RhYkluZGV4ID0gMDtcbiAgLyoqXG4gICAqICBTcGVjaWZpZXMgdGhlIHRhYmluZGV4IG9mIHRoZSBjb21wb25lbnQuXG4gICAqL1xuICBnZXQgdGFiSW5kZXgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5kaXNhYmxlZCA/IC0xIDogdGhpcy5fdGFiSW5kZXg7XG4gIH1cbiAgc2V0IHRhYkluZGV4KHZhbHVlOiBudW1iZXIpIHtcbiAgICB0aGlzLnNldE9wdGlvbih7XG4gICAgICBuYW1lOiAndGFiSW5kZXgnLFxuICAgICAgdmFsdWU6IHZhbHVlICE9IG51bGwgPyBjb2VyY2VOdW1iZXJQcm9wZXJ0eSh2YWx1ZSkgOiAwLFxuICAgIH0pO1xuICB9XG5cbiAgLyoqXG4gICAqICBGaXJlcyBlYWNoIHRpbWUgdGhlIGNvbXBvbmVudCBnZXRzIGZvY3VzZWQuXG4gICAqICBAZXZlbnRcbiAgICovXG4gIG9uRm9jdXM6IEV2ZW50RW1pdHRlcjxBWEZvY3VzRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxBWEZvY3VzRXZlbnQ+KCk7XG5cbiAgcHJvdGVjdGVkIGVtaXRPbkZvY3VzRXZlbnQoZTogRm9jdXNFdmVudCk6IHZvaWQge1xuICAgIHRoaXMub25Gb2N1cy5lbWl0KHtcbiAgICAgIGNvbXBvbmVudDogdGhpcyxcbiAgICAgIGh0bWxFbGVtZW50OiB0aGlzLmdldEhvc3RFbGVtZW50KCksXG4gICAgICBuYXRpdmVFdmVudDogZSxcbiAgICB9KTtcbiAgfVxuXG4gIC8qKlxuICAgKiAgRmlyZXMgZWFjaCB0aW1lIHRoZSBjb21wb25lbnQgZ2V0cyBibHVycmVkLlxuICAgKiAgQGV2ZW50XG4gICAqL1xuICBvbkJsdXI6IEV2ZW50RW1pdHRlcjxBWEZvY3VzRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxBWEZvY3VzRXZlbnQ+KCk7XG5cbiAgcHJvdGVjdGVkIGVtaXRPbkJsdXJFdmVudChlOiBGb2N1c0V2ZW50KTogdm9pZCB7XG4gICAgdGhpcy5tYXJrQXNUb3VjaGVkKCk7XG4gICAgdGhpcy5vbkJsdXIuZW1pdCh7XG4gICAgICBjb21wb25lbnQ6IHRoaXMsXG4gICAgICBodG1sRWxlbWVudDogdGhpcy5nZXRIb3N0RWxlbWVudCgpLFxuICAgICAgbmF0aXZlRXZlbnQ6IGUsXG4gICAgfSk7XG4gIH1cblxuICAvLyAvKipcbiAgLy8gICogIEZpcmVzIGVhY2ggdGltZSB0aGUgdXNlciBjbGlja3MgdGhlIGJ1dHRvbi5cbiAgLy8gICogIEBldmVudFxuICAvLyAgKi9cbiAgLy8gb25DbGljazogRXZlbnRFbWl0dGVyPEFYQ2xpY2tFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPEFYQ2xpY2tFdmVudD4oKTtcblxuICAvLyBwcm90ZWN0ZWQgZW1pdE9uQ2xpY2tFdmVudChlOiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gIC8vICAgdGhpcy5vbkNsaWNrLmVtaXQoe1xuICAvLyAgICAgY29tcG9uZW50OiB0aGlzLFxuICAvLyAgICAgaHRtbEVsZW1lbnQ6IHRoaXMuZ2V0SG9zdEVsZW1lbnQoKSxcbiAgLy8gICAgIG5hdGl2ZUV2ZW50OiBlLFxuICAvLyAgIH0pO1xuICAvLyB9XG5cbiAgZm9jdXMoKSB7XG4gICAgQVhIdG1sVXRpbC5mb2N1c0VsZW1lbnQodGhpcy5nZXRIb3N0RWxlbWVudCgpKTtcbiAgfVxuXG4gIGJsdXIoKSB7XG4gICAgQVhIdG1sVXRpbC5ibHVyRWxlbWVudCh0aGlzLmdldEhvc3RFbGVtZW50KCkpO1xuICB9XG5cbiAgLyoqXG4gICAqICBDaGVjayBjb21wb25lbnQgaXMgZm9jdXNlZCBvciBoYXMgYW55IGZvY3VzZWQgZWxlbWVudC5cbiAgICovXG4gIGhhc0ZvY3VzKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiBBWEh0bWxVdGlsLmhhc0ZvY3VzKHRoaXMuZ2V0SG9zdEVsZW1lbnQoKSk7XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJhY3RpdmUtY29tcG9uZW50LmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2NvbW1vbi9zcmMvbGliL2NvbXBvbmVudHMvaW50ZXJhY3RpdmUtY29tcG9uZW50LmNsYXNzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUNoRCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUNwRixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFNUIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRXpELE1BQU0sT0FBTyxzQkFBdUIsU0FBUSxlQUFlO0lBQTNEOztRQUNZLHNCQUFpQixHQUFlLElBQUksQ0FBQztRQU12QyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBWXpCLG1CQUFjLEdBQTBCLElBQUksWUFBWSxFQUFXLENBQUM7UUF1QnBFLGNBQVMsR0FBRyxDQUFDLENBQUM7UUFjZDs7O1dBR0c7UUFDSCxZQUFPLEdBQStCLElBQUksWUFBWSxFQUFnQixDQUFDO1FBVXZFOzs7V0FHRztRQUNILFdBQU0sR0FBK0IsSUFBSSxZQUFZLEVBQWdCLENBQUM7UUF3Q3RFLG9DQUFvQztRQUVwQyw4QkFBOEI7UUFDOUIsNkJBQTZCO1FBQzdCLElBQUk7UUFFSiw2QkFBNkI7UUFDN0IsOEJBQThCO1FBQzlCLElBQUk7SUFDTixDQUFDO0lBeEhDLGlCQUFpQixDQUFDLEVBQWM7UUFDOUIsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztJQUM5QixDQUFDO0lBR0QsSUFBVyxPQUFPO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUN2QixDQUFDO0lBRVMsYUFBYTtRQUNyQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2xCLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1lBQ3pCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLENBQUM7SUFDSCxDQUFDO0lBSUQ7O09BRUc7SUFDSCxJQUFXLFFBQVE7UUFDakIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3hCLENBQUM7SUFDRCxJQUFJLFFBQVEsQ0FBQyxLQUFjO1FBQ3pCLEtBQUssR0FBRyxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsU0FBUyxDQUFDO1lBQ2IsSUFBSSxFQUFFLFVBQVU7WUFDaEIsS0FBSztZQUNMLGFBQWEsRUFBRSxHQUFHLEVBQUU7Z0JBQ2xCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDMUIsQ0FBQztTQUNGLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztJQUM3QixDQUFDO0lBR0Q7O09BRUc7SUFDSCxJQUFJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQzdDLENBQUM7SUFDRCxJQUFJLFFBQVEsQ0FBQyxLQUFhO1FBQ3hCLElBQUksQ0FBQyxTQUFTLENBQUM7WUFDYixJQUFJLEVBQUUsVUFBVTtZQUNoQixLQUFLLEVBQUUsS0FBSyxJQUFJLElBQUksQ0FBQyxDQUFDLENBQUMsb0JBQW9CLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDdkQsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQVFTLGdCQUFnQixDQUFDLENBQWE7UUFDdEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7WUFDaEIsU0FBUyxFQUFFLElBQUk7WUFDZixXQUFXLEVBQUUsSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUNsQyxXQUFXLEVBQUUsQ0FBQztTQUNmLENBQUMsQ0FBQztJQUNMLENBQUM7SUFRUyxlQUFlLENBQUMsQ0FBYTtRQUNyQyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7WUFDZixTQUFTLEVBQUUsSUFBSTtZQUNmLFdBQVcsRUFBRSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ2xDLFdBQVcsRUFBRSxDQUFDO1NBQ2YsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELE1BQU07SUFDTixrREFBa0Q7SUFDbEQsYUFBYTtJQUNiLE1BQU07SUFDTiwwRUFBMEU7SUFFMUUsb0RBQW9EO0lBQ3BELHdCQUF3QjtJQUN4Qix1QkFBdUI7SUFDdkIsMENBQTBDO0lBQzFDLHNCQUFzQjtJQUN0QixRQUFRO0lBQ1IsSUFBSTtJQUVKLEtBQUs7UUFDSCxVQUFVLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFFRCxJQUFJO1FBQ0YsVUFBVSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBRUQ7O09BRUc7SUFDSCxRQUFRO1FBQ04sT0FBTyxVQUFVLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQyxDQUFDO0lBQ3BELENBQUM7Q0FXRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYSHRtbFV0aWwgfSBmcm9tICdAYWNvcmV4L2NvcmUvdXRpbHMnO1xuaW1wb3J0IHsgY29lcmNlQm9vbGVhblByb3BlcnR5LCBjb2VyY2VOdW1iZXJQcm9wZXJ0eSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5pbXBvcnQgeyBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IG5vb3AgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IEFYRm9jdXNFdmVudCB9IGZyb20gJy4uL2NsYXNzZXMvZXZlbnRzLmNsYXNzJztcbmltcG9ydCB7IE1YQmFzZUNvbXBvbmVudCB9IGZyb20gJy4vYmFzZS1jb21wb25lbnQuY2xhc3MnO1xuXG5leHBvcnQgY2xhc3MgTVhJbnRlcmFjdGl2ZUNvbXBvbmVudCBleHRlbmRzIE1YQmFzZUNvbXBvbmVudCB7XG4gIHByb3RlY3RlZCBvblRvdWNoZWRDYWxsYmFjazogKCkgPT4gdm9pZCA9IG5vb3A7XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZENhbGxiYWNrID0gZm47XG4gIH1cblxuICBwcml2YXRlIF90b3VjaGVkID0gZmFsc2U7XG4gIHB1YmxpYyBnZXQgdG91Y2hlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5fdG91Y2hlZDtcbiAgfVxuXG4gIHByb3RlY3RlZCBtYXJrQXNUb3VjaGVkKCkge1xuICAgIGlmICghdGhpcy50b3VjaGVkKSB7XG4gICAgICB0aGlzLm9uVG91Y2hlZENhbGxiYWNrKCk7XG4gICAgICB0aGlzLl90b3VjaGVkID0gdHJ1ZTtcbiAgICB9XG4gIH1cblxuICBkaXNhYmxlZENoYW5nZTogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuICBwcml2YXRlIF9kaXNhYmxlZDogYm9vbGVhbjtcbiAgLyoqXG4gICAqICBJZiBzZXQgdG8gdHJ1ZSwgaXQgZGlzYWJsZXMgdGhlIGNvbXBvbmVudC5cbiAgICovXG4gIHB1YmxpYyBnZXQgZGlzYWJsZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2Rpc2FibGVkO1xuICB9XG4gIHNldCBkaXNhYmxlZCh2YWx1ZTogYm9vbGVhbikge1xuICAgIHZhbHVlID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcbiAgICB0aGlzLnNldE9wdGlvbih7XG4gICAgICBuYW1lOiAnZGlzYWJsZWQnLFxuICAgICAgdmFsdWUsXG4gICAgICBhZnRlckNhbGxiYWNrOiAoKSA9PiB7XG4gICAgICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICAgICAgfSxcbiAgICB9KTtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xuICB9XG5cbiAgX3RhYkluZGV4ID0gMDtcbiAgLyoqXG4gICAqICBTcGVjaWZpZXMgdGhlIHRhYmluZGV4IG9mIHRoZSBjb21wb25lbnQuXG4gICAqL1xuICBnZXQgdGFiSW5kZXgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5kaXNhYmxlZCA/IC0xIDogdGhpcy5fdGFiSW5kZXg7XG4gIH1cbiAgc2V0IHRhYkluZGV4KHZhbHVlOiBudW1iZXIpIHtcbiAgICB0aGlzLnNldE9wdGlvbih7XG4gICAgICBuYW1lOiAndGFiSW5kZXgnLFxuICAgICAgdmFsdWU6IHZhbHVlICE9IG51bGwgPyBjb2VyY2VOdW1iZXJQcm9wZXJ0eSh2YWx1ZSkgOiAwLFxuICAgIH0pO1xuICB9XG5cbiAgLyoqXG4gICAqICBGaXJlcyBlYWNoIHRpbWUgdGhlIGNvbXBvbmVudCBnZXRzIGZvY3VzZWQuXG4gICAqICBAZXZlbnRcbiAgICovXG4gIG9uRm9jdXM6IEV2ZW50RW1pdHRlcjxBWEZvY3VzRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxBWEZvY3VzRXZlbnQ+KCk7XG5cbiAgcHJvdGVjdGVkIGVtaXRPbkZvY3VzRXZlbnQoZTogRm9jdXNFdmVudCk6IHZvaWQge1xuICAgIHRoaXMub25Gb2N1cy5lbWl0KHtcbiAgICAgIGNvbXBvbmVudDogdGhpcyxcbiAgICAgIGh0bWxFbGVtZW50OiB0aGlzLmdldEhvc3RFbGVtZW50KCksXG4gICAgICBuYXRpdmVFdmVudDogZSxcbiAgICB9KTtcbiAgfVxuXG4gIC8qKlxuICAgKiAgRmlyZXMgZWFjaCB0aW1lIHRoZSBjb21wb25lbnQgZ2V0cyBibHVycmVkLlxuICAgKiAgQGV2ZW50XG4gICAqL1xuICBvbkJsdXI6IEV2ZW50RW1pdHRlcjxBWEZvY3VzRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxBWEZvY3VzRXZlbnQ+KCk7XG5cbiAgcHJvdGVjdGVkIGVtaXRPbkJsdXJFdmVudChlOiBGb2N1c0V2ZW50KTogdm9pZCB7XG4gICAgdGhpcy5tYXJrQXNUb3VjaGVkKCk7XG4gICAgdGhpcy5vbkJsdXIuZW1pdCh7XG4gICAgICBjb21wb25lbnQ6IHRoaXMsXG4gICAgICBodG1sRWxlbWVudDogdGhpcy5nZXRIb3N0RWxlbWVudCgpLFxuICAgICAgbmF0aXZlRXZlbnQ6IGUsXG4gICAgfSk7XG4gIH1cblxuICAvLyAvKipcbiAgLy8gICogIEZpcmVzIGVhY2ggdGltZSB0aGUgdXNlciBjbGlja3MgdGhlIGJ1dHRvbi5cbiAgLy8gICogIEBldmVudFxuICAvLyAgKi9cbiAgLy8gb25DbGljazogRXZlbnRFbWl0dGVyPEFYQ2xpY2tFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPEFYQ2xpY2tFdmVudD4oKTtcblxuICAvLyBwcm90ZWN0ZWQgZW1pdE9uQ2xpY2tFdmVudChlOiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gIC8vICAgdGhpcy5vbkNsaWNrLmVtaXQoe1xuICAvLyAgICAgY29tcG9uZW50OiB0aGlzLFxuICAvLyAgICAgaHRtbEVsZW1lbnQ6IHRoaXMuZ2V0SG9zdEVsZW1lbnQoKSxcbiAgLy8gICAgIG5hdGl2ZUV2ZW50OiBlLFxuICAvLyAgIH0pO1xuICAvLyB9XG5cbiAgZm9jdXMoKSB7XG4gICAgQVhIdG1sVXRpbC5mb2N1c0VsZW1lbnQodGhpcy5nZXRIb3N0RWxlbWVudCgpKTtcbiAgfVxuXG4gIGJsdXIoKSB7XG4gICAgQVhIdG1sVXRpbC5ibHVyRWxlbWVudCh0aGlzLmdldEhvc3RFbGVtZW50KCkpO1xuICB9XG5cbiAgLyoqXG4gICAqICBDaGVjayBjb21wb25lbnQgaXMgZm9jdXNlZCBvciBoYXMgYW55IGZvY3VzZWQgZWxlbWVudC5cbiAgICovXG4gIGhhc0ZvY3VzKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiBBWEh0bWxVdGlsLmhhc0ZvY3VzKHRoaXMuZ2V0SG9zdEVsZW1lbnQoKSk7XG4gIH1cblxuICAvLyBwcml2YXRlIF9mb2N1c2VkID0gc2lnbmFsKGZhbHNlKTtcblxuICAvLyBwcm90ZWN0ZWQgbWFya0FzRm9jdXNlZCgpIHtcbiAgLy8gICB0aGlzLl9mb2N1c2VkLnNldCh0cnVlKTtcbiAgLy8gfVxuXG4gIC8vIHByb3RlY3RlZCBtYXJrQXNCbHVyZWQoKSB7XG4gIC8vICAgdGhpcy5fZm9jdXNlZC5zZXQoZmFsc2UpO1xuICAvLyB9XG59XG4iXX0=

package/esm2022/common/lib/directives/inverted-color.directive.mjs

@@ -1,4 +1,4 @@
-import { AfterRenderPhase, Directive, ViewContainerRef, afterNextRender, effect, inject, input } from '@angular/core';
+import { Directive, ViewContainerRef, afterNextRender, effect, inject, input } from '@angular/core';
 import * as i0 from "@angular/core";
 export class AXInvertedColorDirective {
     constructor() {
@@ -6,11 +6,9 @@ export class AXInvertedColorDirective {
         this.ref = inject(ViewContainerRef);
         afterNextRender(() => {
             this.invertColor();
-            console.log('changed');
-        }, { phase: AfterRenderPhase.MixedReadWrite });
+        });
         effect(() => {
             this.invertColor();
-            console.log('changed');
         });
     }
     invertColor() {
@@ -47,4 +45,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                     standalone: true,
                 }]
         }], ctorParameters: () => [] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW52ZXJ0ZWQtY29sb3IuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2NvbW1vbi9zcmMvbGliL2RpcmVjdGl2ZXMvaW52ZXJ0ZWQtY29sb3IuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsZUFBZSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQU90SCxNQUFNLE9BQU8sd0JBQXdCO0lBR25DO1FBRkEsVUFBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQW9CLENBQUM7UUFDM0MsUUFBRyxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBRTdCLGVBQWUsQ0FDYixHQUFHLEVBQUU7WUFDSCxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDbkIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUN6QixDQUFDLEVBQ0QsRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLENBQUMsY0FBYyxFQUFFLENBQzNDLENBQUM7UUFDRixNQUFNLENBQUMsR0FBRyxFQUFFO1lBQ1YsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQ25CLE9BQU8sQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDekIsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRVMsV0FBVztRQUNuQixJQUFJLEtBQUssQ0FBQztRQUNWLElBQUksU0FBUyxDQUFDO1FBQ2QsTUFBTSxpQkFBaUIsR0FBRyxFQUFFLENBQUM7UUFFN0IsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLEtBQUssT0FBTyxFQUFFLENBQUM7WUFDN0IsS0FBSyxHQUFHLGdCQUFnQixDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxjQUFjLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDbEcsU0FBUyxHQUFHLGdCQUFnQixDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxjQUFjLElBQUksQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDLENBQUM7WUFDM0csaUJBQWlCLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSSxFQUFFLGtCQUFrQixFQUFFLEtBQUssRUFBRSxHQUFHLFNBQVMsRUFBRSxFQUFFLENBQUMsQ0FBQztZQUM1RSxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsdUJBQXVCLEVBQUUsS0FBSyxFQUFFLEdBQUcsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQy9FLENBQUM7YUFBTSxDQUFDO1lBQ04sTUFBTSxLQUFLLEdBQUcsQ0FBQyxFQUFFLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFFckUsS0FBSyxHQUFHLGdCQUFnQixDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxjQUFjLElBQUksQ0FBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLENBQUM7WUFDdEcsU0FBUyxHQUFHLGdCQUFnQixDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxjQUFjLElBQUksQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDLENBQUM7WUFDM0csS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFO2dCQUNsQixpQkFBaUIsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsY0FBYyxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxFQUFFLEVBQUUsS0FBSyxFQUFFLEdBQUcsU0FBUyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQzdGLENBQUMsQ0FBQyxDQUFDO1lBQ0gsaUJBQWlCLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSSxFQUFFLGNBQWMsSUFBSSxDQUFDLEtBQUssRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQ3ZGLGlCQUFpQixDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxjQUFjLElBQUksQ0FBQyxLQUFLLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxHQUFHLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQztRQUM5RixDQUFDO1FBRUQsaUJBQWlCLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7WUFDN0IsSUFBSSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsYUFBNkIsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JGLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs4R0ExQ1Usd0JBQXdCO2tHQUF4Qix3QkFBd0I7OzJGQUF4Qix3QkFBd0I7a0JBSnBDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG1CQUFtQjtvQkFDN0IsVUFBVSxFQUFFLElBQUk7aUJBQ2pCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJSZW5kZXJQaGFzZSwgRGlyZWN0aXZlLCBWaWV3Q29udGFpbmVyUmVmLCBhZnRlck5leHRSZW5kZXIsIGVmZmVjdCwgaW5qZWN0LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQVhTdHlsZUNvbG9yVHlwZSB9IGZyb20gJy4uL2NsYXNzZXMvc3R5bGVzLmNsYXNzJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2F4SW52ZXJ0ZWRDb2xvcl0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBBWEludmVydGVkQ29sb3JEaXJlY3RpdmUge1xuICBjb2xvciA9IGlucHV0LnJlcXVpcmVkPEFYU3R5bGVDb2xvclR5cGU+KCk7XG4gIHJlZiA9IGluamVjdChWaWV3Q29udGFpbmVyUmVmKTtcbiAgY29uc3RydWN0b3IoKSB7XG4gICAgYWZ0ZXJOZXh0UmVuZGVyKFxuICAgICAgKCkgPT4ge1xuICAgICAgICB0aGlzLmludmVydENvbG9yKCk7XG4gICAgICAgIGNvbnNvbGUubG9nKCdjaGFuZ2VkJyk7XG4gICAgICB9LFxuICAgICAgeyBwaGFzZTogQWZ0ZXJSZW5kZXJQaGFzZS5NaXhlZFJlYWRXcml0ZSB9LFxuICAgICk7XG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIHRoaXMuaW52ZXJ0Q29sb3IoKTtcbiAgICAgIGNvbnNvbGUubG9nKCdjaGFuZ2VkJyk7XG4gICAgfSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaW52ZXJ0Q29sb3IoKSB7XG4gICAgbGV0IGNvbG9yO1xuICAgIGxldCBmb3JlQ29sb3I7XG4gICAgY29uc3QgaW52ZXJ0ZWRWYXJpYWJsZXMgPSBbXTtcblxuICAgIGlmICh0aGlzLmNvbG9yKCkgPT09ICdnaG9zdCcpIHtcbiAgICAgIGNvbG9yID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdldFByb3BlcnR5VmFsdWUoYC0tYXgtY29sb3ItJHt0aGlzLmNvbG9yKCl9YCk7XG4gICAgICBmb3JlQ29sb3IgPSBnZXRDb21wdXRlZFN0eWxlKGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkuZ2V0UHJvcGVydHlWYWx1ZShgLS1heC1jb2xvci0ke3RoaXMuY29sb3IoKX0tZm9yZWApO1xuICAgICAgaW52ZXJ0ZWRWYXJpYWJsZXMucHVzaCh7IG5hbWU6IGAtLWF4LWNvbG9yLWdob3N0YCwgdmFsdWU6IGAke2ZvcmVDb2xvcn1gIH0pO1xuICAgICAgaW52ZXJ0ZWRWYXJpYWJsZXMucHVzaCh7IG5hbWU6IGAtLWF4LWNvbG9yLWdob3N0LWZvcmVgLCB2YWx1ZTogYCR7Y29sb3J9YCB9KTtcbiAgICB9IGVsc2Uge1xuICAgICAgY29uc3QgcmFuZ2UgPSBbNTAsIDEwMCwgMjAwLCAzMDAsIDQwMCwgNTAwLCA2MDAsIDcwMCwgODAwLCA5MDAsIDk1MF07XG5cbiAgICAgIGNvbG9yID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdldFByb3BlcnR5VmFsdWUoYC0tYXgtY29sb3ItJHt0aGlzLmNvbG9yKCl9LTUwMGApO1xuICAgICAgZm9yZUNvbG9yID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdldFByb3BlcnR5VmFsdWUoYC0tYXgtY29sb3ItJHt0aGlzLmNvbG9yKCl9LWZvcmVgKTtcbiAgICAgIHJhbmdlLmZvckVhY2goKGMpID0+IHtcbiAgICAgICAgaW52ZXJ0ZWRWYXJpYWJsZXMucHVzaCh7IG5hbWU6IGAtLWF4LWNvbG9yLSR7dGhpcy5jb2xvcigpfS0ke2N9YCwgdmFsdWU6IGAke2ZvcmVDb2xvcn1gIH0pO1xuICAgICAgfSk7XG4gICAgICBpbnZlcnRlZFZhcmlhYmxlcy5wdXNoKHsgbmFtZTogYC0tYXgtY29sb3ItJHt0aGlzLmNvbG9yKCl9LWZvcmVgLCB2YWx1ZTogYCR7Y29sb3J9YCB9KTtcbiAgICAgIGludmVydGVkVmFyaWFibGVzLnB1c2goeyBuYW1lOiBgLS1heC1jb2xvci0ke3RoaXMuY29sb3IoKX0tZm9yZS10aW50YCwgdmFsdWU6IGAke2NvbG9yfWAgfSk7XG4gICAgfVxuXG4gICAgaW52ZXJ0ZWRWYXJpYWJsZXMuZm9yRWFjaCgoYykgPT4ge1xuICAgICAgKHRoaXMucmVmLmVsZW1lbnQubmF0aXZlRWxlbWVudCBhcyBIVE1MRWxlbWVudCkuc3R5bGUuc2V0UHJvcGVydHkoYy5uYW1lLCBjLnZhbHVlKTtcbiAgICB9KTtcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW52ZXJ0ZWQtY29sb3IuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2NvbW1vbi9zcmMvbGliL2RpcmVjdGl2ZXMvaW52ZXJ0ZWQtY29sb3IuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsZUFBZSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQU9wRyxNQUFNLE9BQU8sd0JBQXdCO0lBR25DO1FBRkEsVUFBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQW9CLENBQUM7UUFDM0MsUUFBRyxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBRTdCLGVBQWUsQ0FBQyxHQUFHLEVBQUU7WUFDbkIsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3JCLENBQUMsQ0FBQyxDQUFDO1FBQ0gsTUFBTSxDQUFDLEdBQUcsRUFBRTtZQUNWLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNyQixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFUyxXQUFXO1FBQ25CLElBQUksS0FBSyxDQUFDO1FBQ1YsSUFBSSxTQUFTLENBQUM7UUFDZCxNQUFNLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztRQUU3QixJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsS0FBSyxPQUFPLEVBQUUsQ0FBQztZQUM3QixLQUFLLEdBQUcsZ0JBQWdCLENBQUMsUUFBUSxDQUFDLGVBQWUsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLGNBQWMsSUFBSSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQztZQUNsRyxTQUFTLEdBQUcsZ0JBQWdCLENBQUMsUUFBUSxDQUFDLGVBQWUsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLGNBQWMsSUFBSSxDQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsQ0FBQztZQUMzRyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsa0JBQWtCLEVBQUUsS0FBSyxFQUFFLEdBQUcsU0FBUyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQzVFLGlCQUFpQixDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSx1QkFBdUIsRUFBRSxLQUFLLEVBQUUsR0FBRyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFDL0UsQ0FBQzthQUFNLENBQUM7WUFDTixNQUFNLEtBQUssR0FBRyxDQUFDLEVBQUUsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztZQUVyRSxLQUFLLEdBQUcsZ0JBQWdCLENBQUMsUUFBUSxDQUFDLGVBQWUsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLGNBQWMsSUFBSSxDQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsQ0FBQztZQUN0RyxTQUFTLEdBQUcsZ0JBQWdCLENBQUMsUUFBUSxDQUFDLGVBQWUsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLGNBQWMsSUFBSSxDQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsQ0FBQztZQUMzRyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7Z0JBQ2xCLGlCQUFpQixDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxjQUFjLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEVBQUUsRUFBRSxLQUFLLEVBQUUsR0FBRyxTQUFTLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDN0YsQ0FBQyxDQUFDLENBQUM7WUFDSCxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsY0FBYyxJQUFJLENBQUMsS0FBSyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsR0FBRyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDdkYsaUJBQWlCLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSSxFQUFFLGNBQWMsSUFBSSxDQUFDLEtBQUssRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLEdBQUcsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQzlGLENBQUM7UUFFRCxpQkFBaUIsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRTtZQUM3QixJQUFJLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxhQUE2QixDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDckYsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDOzhHQXJDVSx3QkFBd0I7a0dBQXhCLHdCQUF3Qjs7MkZBQXhCLHdCQUF3QjtrQkFKcEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsbUJBQW1CO29CQUM3QixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIFZpZXdDb250YWluZXJSZWYsIGFmdGVyTmV4dFJlbmRlciwgZWZmZWN0LCBpbmplY3QsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBWFN0eWxlQ29sb3JUeXBlIH0gZnJvbSAnLi4vY2xhc3Nlcy9zdHlsZXMuY2xhc3MnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbYXhJbnZlcnRlZENvbG9yXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIEFYSW52ZXJ0ZWRDb2xvckRpcmVjdGl2ZSB7XG4gIGNvbG9yID0gaW5wdXQucmVxdWlyZWQ8QVhTdHlsZUNvbG9yVHlwZT4oKTtcbiAgcmVmID0gaW5qZWN0KFZpZXdDb250YWluZXJSZWYpO1xuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBhZnRlck5leHRSZW5kZXIoKCkgPT4ge1xuICAgICAgdGhpcy5pbnZlcnRDb2xvcigpO1xuICAgIH0pO1xuICAgIGVmZmVjdCgoKSA9PiB7XG4gICAgICB0aGlzLmludmVydENvbG9yKCk7XG4gICAgfSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaW52ZXJ0Q29sb3IoKSB7XG4gICAgbGV0IGNvbG9yO1xuICAgIGxldCBmb3JlQ29sb3I7XG4gICAgY29uc3QgaW52ZXJ0ZWRWYXJpYWJsZXMgPSBbXTtcblxuICAgIGlmICh0aGlzLmNvbG9yKCkgPT09ICdnaG9zdCcpIHtcbiAgICAgIGNvbG9yID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdldFByb3BlcnR5VmFsdWUoYC0tYXgtY29sb3ItJHt0aGlzLmNvbG9yKCl9YCk7XG4gICAgICBmb3JlQ29sb3IgPSBnZXRDb21wdXRlZFN0eWxlKGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkuZ2V0UHJvcGVydHlWYWx1ZShgLS1heC1jb2xvci0ke3RoaXMuY29sb3IoKX0tZm9yZWApO1xuICAgICAgaW52ZXJ0ZWRWYXJpYWJsZXMucHVzaCh7IG5hbWU6IGAtLWF4LWNvbG9yLWdob3N0YCwgdmFsdWU6IGAke2ZvcmVDb2xvcn1gIH0pO1xuICAgICAgaW52ZXJ0ZWRWYXJpYWJsZXMucHVzaCh7IG5hbWU6IGAtLWF4LWNvbG9yLWdob3N0LWZvcmVgLCB2YWx1ZTogYCR7Y29sb3J9YCB9KTtcbiAgICB9IGVsc2Uge1xuICAgICAgY29uc3QgcmFuZ2UgPSBbNTAsIDEwMCwgMjAwLCAzMDAsIDQwMCwgNTAwLCA2MDAsIDcwMCwgODAwLCA5MDAsIDk1MF07XG5cbiAgICAgIGNvbG9yID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdldFByb3BlcnR5VmFsdWUoYC0tYXgtY29sb3ItJHt0aGlzLmNvbG9yKCl9LTUwMGApO1xuICAgICAgZm9yZUNvbG9yID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdldFByb3BlcnR5VmFsdWUoYC0tYXgtY29sb3ItJHt0aGlzLmNvbG9yKCl9LWZvcmVgKTtcbiAgICAgIHJhbmdlLmZvckVhY2goKGMpID0+IHtcbiAgICAgICAgaW52ZXJ0ZWRWYXJpYWJsZXMucHVzaCh7IG5hbWU6IGAtLWF4LWNvbG9yLSR7dGhpcy5jb2xvcigpfS0ke2N9YCwgdmFsdWU6IGAke2ZvcmVDb2xvcn1gIH0pO1xuICAgICAgfSk7XG4gICAgICBpbnZlcnRlZFZhcmlhYmxlcy5wdXNoKHsgbmFtZTogYC0tYXgtY29sb3ItJHt0aGlzLmNvbG9yKCl9LWZvcmVgLCB2YWx1ZTogYCR7Y29sb3J9YCB9KTtcbiAgICAgIGludmVydGVkVmFyaWFibGVzLnB1c2goeyBuYW1lOiBgLS1heC1jb2xvci0ke3RoaXMuY29sb3IoKX0tZm9yZS10aW50YCwgdmFsdWU6IGAke2NvbG9yfWAgfSk7XG4gICAgfVxuXG4gICAgaW52ZXJ0ZWRWYXJpYWJsZXMuZm9yRWFjaCgoYykgPT4ge1xuICAgICAgKHRoaXMucmVmLmVsZW1lbnQubmF0aXZlRWxlbWVudCBhcyBIVE1MRWxlbWVudCkuc3R5bGUuc2V0UHJvcGVydHkoYy5uYW1lLCBjLnZhbHVlKTtcbiAgICB9KTtcbiAgfVxufVxuIl19

package/esm2022/conversation/lib/conversation-message/conversation-message.component.mjs

@@ -55,7 +55,7 @@ export class AXConversationMessageComponent extends MXBaseComponent {
         this.chatMessage().onDeleteClick();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXConversationMessageComponent, selector: "ax-conversation-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(chatMessage().fromId){\n<ax-avatar [size]=\"36\"></ax-avatar>\n}\n<div class=\"ax-message-content\" [class.ax-state-own]=\"!chatMessage().fromId\"\n    [class.ax-state-other]=\"chatMessage().fromId\">\n    <ng-template [cdkPortalOutlet]=\"_portal\" (attached)=\"_handleAttched($event)\"></ng-template>\n\n    <div class=\"ax-chat-message-status\">\n        <div class=\"ax-message-prefix\">\n        </div>\n        <div>\n            <div class=\"ax-message-suffix\"></div>\n            <span>\n                {{ chatMessage().sendTime | format:'datetime':'HH:mm' | async }}\n            </span>\n            <span>\n                @if(isOwn) {\n                @if(chatMessage().deliverTime && chatMessage().sendTime){\n                <i class=\"ax-icon ax-icon-check ax-message-status\"></i>\n                }\n                @if(chatMessage().readTime && chatMessage().sendTime){\n                <i class=\"ax-icon ax-icon-dobble-check ax-message-status\"></i>\n                }\n                }\n            </span>\n        </div>\n    </div>\n</div>\n@if(!chatMessage().sendTime){\n<ax-button class=\"ax-resend-button ax-xs\" color=\"danger\" #b>\n    <ax-icon class=\"ax-icon ax-icon-error\"></ax-icon>\n\n    <ax-popover [target]=\"b\" placement=\"bottom-end\" #popover>\n        <div class=\"ax-overlay-pane\">\n\n            <ax-content>\n            </ax-content>\n            <ax-button-item-list>\n                @if(chatMessage().onResendClick){\n                <ax-button-item text=\"Resend\" (onClick)=\"handleResendClick()\">\n                    <ax-icon class=\"ax-icon ax-icon-reload ax-bold\"></ax-icon>\n                </ax-button-item>\n                }\n                @if(chatMessage().onDeleteClick){\n                <ax-button-item text=\"Delete\" color=\"danger\" (onClick)=\"handleDeleteClick()\">\n                    <ax-icon class=\"ax-icon ax-icon-clear ax-bold\"></ax-icon>\n                </ax-button-item>\n                }\n\n            </ax-button-item-list>\n        </div>\n\n    </ax-popover>\n</ax-button>\n}", styles: [":root{--ax-message-other-color: rgba(var(--ax-color-primary-500));--ax-message-other-color-fore: rgba(var(--ax-color-primary-fore));--ax-message-status-color: rgba(var(--ax-color-primary-700));--ax-message-other-bar-color: rgba(var(--ax-color-primary-400));--ax-message-other-progress-color: rgba(var(--ax-color-primary-fore));--ax-message-own-color: rgba(var(--ax-color-primary-100));--ax-message-own-color-fore: rgba(var(--ax-color-primary-700));--ax-message-own-bar-color: rgba(var(--ax-color-primary-200));--ax-message-own-progress-color: rgba(var(--ax-color-primary-700))}ax-conversation-message{display:flex;gap:.5rem;align-items:flex-end}ax-conversation-message.ax-state-own{justify-content:flex-end}ax-conversation-message.ax-state-own .ax-conversation-controller button{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}ax-conversation-message.ax-state-other .ax-conversation-controller button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color)}ax-conversation-message .ax-conversation-controller button{width:2.5rem;height:2.5rem;border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-conversation-message .ax-conversation-controller button ax-loading-spinner{display:flex}ax-conversation-message .ax-conversation-controller button.ax-state-error{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-conversation-message .ax-conversation-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700}ax-conversation-message .ax-message-content{display:block;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:1rem;width:fit-content;max-width:50%}ax-conversation-message .ax-message-content.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-message-own-color);color:var(--ax-message-own-color-fore);justify-content:flex-end}ax-conversation-message .ax-message-content.ax-state-own .ax-chat-message-status{color:var(--ax-message-own-color-fore)}ax-conversation-message .ax-message-content.ax-state-other{border-end-start-radius:0!important;background-color:var(--ax-message-other-color);color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content.ax-state-other .ax-chat-message-status{color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-conversation-message .ax-message-content .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-message-status{color:var(--ax-message-status-color)}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon{font-weight:700;font-size:.875rem}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon-error{color:rgba(var(--ax-color-danger-500))}ax-conversation-message .ax-message-content ax-prefix,ax-conversation-message .ax-message-content ax-suffix{display:none}ax-conversation-message .ax-resend-button{border-radius:999rem}@media (min-width: 320px) and (max-width: 600px){ax-conversation-message ax-avatar{display:none!important}ax-conversation-message .ax-message-content{max-width:100%}}\n"], dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i4.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "look"] }, { kind: "component", type: i5.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXConversationMessageComponent, selector: "ax-conversation-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(chatMessage().fromId){\n<ax-avatar [size]=\"36\"></ax-avatar>\n}\n<div class=\"ax-message-content\" [class.ax-state-own]=\"!chatMessage().fromId\"\n    [class.ax-state-other]=\"chatMessage().fromId\">\n    <ng-template [cdkPortalOutlet]=\"_portal\" (attached)=\"_handleAttched($event)\"></ng-template>\n\n    <div class=\"ax-chat-message-status\">\n        <div class=\"ax-message-prefix\">\n        </div>\n        <div>\n            <div class=\"ax-message-suffix\"></div>\n            <span>\n                {{ chatMessage().sendTime | format:'datetime':'HH:mm' | async }}\n            </span>\n            <span>\n                @if(isOwn) {\n                @if(chatMessage().deliverTime && chatMessage().sendTime){\n                <i class=\"ax-icon ax-icon-check ax-message-status\"></i>\n                }\n                @if(chatMessage().readTime && chatMessage().sendTime){\n                <i class=\"ax-icon ax-icon-dobble-check ax-message-status\"></i>\n                }\n                }\n            </span>\n        </div>\n    </div>\n</div>\n@if(!chatMessage().sendTime){\n<ax-button class=\"ax-resend-button ax-xs\" color=\"danger\" #b>\n    <ax-icon class=\"ax-icon ax-icon-error\"></ax-icon>\n\n    <ax-popover [target]=\"b\" placement=\"bottom-end\" #popover>\n        <div class=\"ax-overlay-pane\">\n\n            <ax-content>\n            </ax-content>\n            <ax-button-item-list>\n                @if(chatMessage().onResendClick){\n                <ax-button-item text=\"Resend\" (onClick)=\"handleResendClick()\">\n                    <ax-icon class=\"ax-icon ax-icon-reload ax-bold\"></ax-icon>\n                </ax-button-item>\n                }\n                @if(chatMessage().onDeleteClick){\n                <ax-button-item text=\"Delete\" color=\"danger\" (onClick)=\"handleDeleteClick()\">\n                    <ax-icon class=\"ax-icon ax-icon-clear ax-bold\"></ax-icon>\n                </ax-button-item>\n                }\n\n            </ax-button-item-list>\n        </div>\n\n    </ax-popover>\n</ax-button>\n}", styles: [":root{--ax-message-other-color: rgba(var(--ax-color-primary-500));--ax-message-other-color-fore: rgba(var(--ax-color-primary-fore));--ax-message-status-color: rgba(var(--ax-color-primary-700));--ax-message-other-bar-color: rgba(var(--ax-color-primary-400));--ax-message-other-progress-color: rgba(var(--ax-color-primary-fore));--ax-message-own-color: rgba(var(--ax-color-primary-100));--ax-message-own-color-fore: rgba(var(--ax-color-primary-700));--ax-message-own-bar-color: rgba(var(--ax-color-primary-200));--ax-message-own-progress-color: rgba(var(--ax-color-primary-700))}ax-conversation-message{display:flex;gap:.5rem;align-items:flex-end}ax-conversation-message.ax-state-own{justify-content:flex-end}ax-conversation-message.ax-state-own .ax-conversation-controller button{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}ax-conversation-message.ax-state-other .ax-conversation-controller button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color)}ax-conversation-message .ax-conversation-controller button{width:2.5rem;height:2.5rem;border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-conversation-message .ax-conversation-controller button ax-loading-spinner{display:flex}ax-conversation-message .ax-conversation-controller button.ax-state-error{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-conversation-message .ax-conversation-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700}ax-conversation-message .ax-message-content{display:block;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:1rem;width:fit-content;max-width:50%}ax-conversation-message .ax-message-content.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-message-own-color);color:var(--ax-message-own-color-fore);justify-content:flex-end}ax-conversation-message .ax-message-content.ax-state-own .ax-chat-message-status{color:var(--ax-message-own-color-fore)}ax-conversation-message .ax-message-content.ax-state-other{border-end-start-radius:0!important;background-color:var(--ax-message-other-color);color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content.ax-state-other .ax-chat-message-status{color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-conversation-message .ax-message-content .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-message-status{color:var(--ax-message-status-color)}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon{font-weight:700;font-size:.875rem}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon-error{color:rgba(var(--ax-color-danger-500))}ax-conversation-message .ax-message-content ax-prefix,ax-conversation-message .ax-message-content ax-suffix{display:none}ax-conversation-message .ax-resend-button{border-radius:999rem}@media (min-width: 320px) and (max-width: 600px){ax-conversation-message ax-avatar{display:none!important}ax-conversation-message .ax-message-content{max-width:100%}}\n"], dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i4.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "look"] }, { kind: "component", type: i5.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationMessageComponent, decorators: [{
             type: Component,

package/esm2022/conversation/lib/conversation-messages/conversation-message-file/conversation-message-file.component.mjs

@@ -28,7 +28,7 @@ export class AXConversationFileMessageComponent extends AXConversationMessageBas
         this.parent.onAction.emit({ component: this, data: this.message, isUserInteraction: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationFileMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXConversationFileMessageComponent, selector: "ax-conversation-message-file", usesInheritance: true, ngImport: i0, template: "<ax-prefix>\n    {{fileSize() | format:'filesize' | async}}\n</ax-prefix>\n<div class=\"ax-file-container\">\n    <div class=\"ax-conversation-controller\">\n\n        @switch (fileState()) {\n        @case ('ready') {\n        <button (click)=\"handleDownloadFile()\">\n            <i class=\"ax-icon ax-icon-download\"></i>\n        </button>\n        }\n\n        @default {\n        <button (click)=\"handleCancelLoading()\">\n            <ax-loading-spinner [size]=\"24\" [stroke]=\"2\"\n                [color]=\"message.fromId?'var(--ax-other-color)':'var(--ax-own-color)'\"></ax-loading-spinner>\n        </button>\n        }\n        }\n\n    </div>\n\n    <div class=\"ax-file-name\">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </div>\n</div>", styles: ["ax-conversation-message-file .ax-file-container{display:flex;align-items:center;justify-content:center;gap:.5rem}ax-conversation-message-file .ax-file-container .ax-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["color", "size", "stroke"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXConversationFileMessageComponent, selector: "ax-conversation-message-file", usesInheritance: true, ngImport: i0, template: "<ax-prefix>\n    {{fileSize() | format:'filesize' | async}}\n</ax-prefix>\n<div class=\"ax-file-container\">\n    <div class=\"ax-conversation-controller\">\n\n        @switch (fileState()) {\n        @case ('ready') {\n        <button (click)=\"handleDownloadFile()\">\n            <i class=\"ax-icon ax-icon-download\"></i>\n        </button>\n        }\n\n        @default {\n        <button (click)=\"handleCancelLoading()\">\n            <ax-loading-spinner [size]=\"24\" [stroke]=\"2\"\n                [color]=\"message.fromId?'var(--ax-other-color)':'var(--ax-own-color)'\"></ax-loading-spinner>\n        </button>\n        }\n        }\n\n    </div>\n\n    <div class=\"ax-file-name\">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </div>\n</div>", styles: ["ax-conversation-message-file .ax-file-container{display:flex;align-items:center;justify-content:center;gap:.5rem}ax-conversation-message-file .ax-file-container .ax-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["color", "size", "stroke"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationFileMessageComponent, decorators: [{
             type: Component,

package/esm2022/conversation/lib/conversation-messages/conversation-message-voice/conversation-message-voice.component.mjs

@@ -102,7 +102,7 @@ export class AXConversationAudioMessageComponent extends AXConversationMessageBa
         return `${this.message.fromId ? 'ax-state-other' : 'ax-state-own'}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationAudioMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXConversationAudioMessageComponent, selector: "ax-conversation-message-audio", inputs: { message: "message" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "audio", first: true, predicate: ["a"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-prefix>\n  @switch (audioState()) {\n  @case ('paused')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @case ('playing')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @default {\n  {{duration() | format:'time-duration' | async}}\n  }\n  }\n  <button class=\"ax-audio-speed\" (click)=\"handleRateClick()\"></button>\n\n</ax-prefix>\n<div class=\"ax-conversation-controller\">\n\n  @switch (audioState()) {\n  @case ('playing') {\n  <button (click)=\"handlePauseClick()\">\n    <i class=\"ax-icon ax-icon-pause\"></i>\n  </button>\n  }\n\n  @case ('ready') {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"ax-icon ax-icon-play\"></i>\n  </button>\n  }\n\n  @case ('paused')\n  {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"ax-icon ax-icon-play\"></i>\n  </button>\n  }\n\n  @case ('error')\n  {\n  <button class=\"ax-state-error\" (click)=\"handleReloadClick()\">\n    <i class=\"ax-icon ax-icon-reload\"></i>\n  </button>\n  }\n\n  @default {\n  <button (click)=\"handleCancelLoading()\">\n    <ax-loading-spinner [size]=\"24\" [stroke]=\"2\"\n      [color]=\"message.fromId?'var(--ax-other-color)':'var(--ax-own-color)'\"></ax-loading-spinner>\n  </button>\n  }\n  }\n\n</div>\n<ax-audio-wave #a [config]=\"config\" (onStatusChanged)=\"handleOnStatusChanged($event)\"></ax-audio-wave>\n<ax-suffix>\n  <div class=\"ax-audio-rate-button\" [class.ax-state-own]=\"!message?.fromId\" (click)=\"handleRateClick()\">\n    {{selectedRate()}}X</div>\n</ax-suffix>", styles: ["ax-conversation-message-audio{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:18rem;max-width:100%}ax-conversation-message-audio .ax-audio-wave{flex:1}.ax-audio-rate-button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color);border-radius:.5rem;padding:0 .5rem;font-weight:700;margin-inline-end:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-audio-rate-button.ax-state-own{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}html[dir=rtl] ax-conversation-message-audio{flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXAudioWaveComponent, selector: "ax-audio-wave", inputs: ["config"], outputs: ["onStatusChanged"] }, { kind: "component", type: i3.AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["color", "size", "stroke"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXConversationAudioMessageComponent, selector: "ax-conversation-message-audio", inputs: { message: "message" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "audio", first: true, predicate: ["a"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-prefix>\n  @switch (audioState()) {\n  @case ('paused')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @case ('playing')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @default {\n  {{duration() | format:'time-duration' | async}}\n  }\n  }\n  <button class=\"ax-audio-speed\" (click)=\"handleRateClick()\"></button>\n\n</ax-prefix>\n<div class=\"ax-conversation-controller\">\n\n  @switch (audioState()) {\n  @case ('playing') {\n  <button (click)=\"handlePauseClick()\">\n    <i class=\"ax-icon ax-icon-pause\"></i>\n  </button>\n  }\n\n  @case ('ready') {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"ax-icon ax-icon-play\"></i>\n  </button>\n  }\n\n  @case ('paused')\n  {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"ax-icon ax-icon-play\"></i>\n  </button>\n  }\n\n  @case ('error')\n  {\n  <button class=\"ax-state-error\" (click)=\"handleReloadClick()\">\n    <i class=\"ax-icon ax-icon-reload\"></i>\n  </button>\n  }\n\n  @default {\n  <button (click)=\"handleCancelLoading()\">\n    <ax-loading-spinner [size]=\"24\" [stroke]=\"2\"\n      [color]=\"message.fromId?'var(--ax-other-color)':'var(--ax-own-color)'\"></ax-loading-spinner>\n  </button>\n  }\n  }\n\n</div>\n<ax-audio-wave #a [config]=\"config\" (onStatusChanged)=\"handleOnStatusChanged($event)\"></ax-audio-wave>\n<ax-suffix>\n  <div class=\"ax-audio-rate-button\" [class.ax-state-own]=\"!message?.fromId\" (click)=\"handleRateClick()\">\n    {{selectedRate()}}X</div>\n</ax-suffix>", styles: ["ax-conversation-message-audio{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:18rem;max-width:100%}ax-conversation-message-audio .ax-audio-wave{flex:1}.ax-audio-rate-button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color);border-radius:.5rem;padding:0 .5rem;font-weight:700;margin-inline-end:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-audio-rate-button.ax-state-own{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}html[dir=rtl] ax-conversation-message-audio{flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXAudioWaveComponent, selector: "ax-audio-wave", inputs: ["config"], outputs: ["onStatusChanged"] }, { kind: "component", type: i3.AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["color", "size", "stroke"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationAudioMessageComponent, decorators: [{
             type: Component,

package/esm2022/data-pager/lib/data-pager-pagesize-dropdown.component.mjs

@@ -63,7 +63,7 @@ export class AXDataPagerPageSizesComponent extends AXDataPagerChild {
       </ax-suffix>
     </ax-button>
     <!-- <span >items per page</span> -->
-  `, isInline: true, dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
             type: Component,

package/esm2022/data-pager/lib/data-pager.component.mjs

@@ -151,7 +151,7 @@ export class AXDataPagerComponent extends MXValueComponent {
                 useExisting: forwardRef(() => AXDataPagerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@switch(displayMode){\n@case('full'){\n<ax-prefix>\n    <ax-data-pager-numeric-selector>\n    </ax-data-pager-numeric-selector>\n    <ax-data-pager-page-sizes>\n    </ax-data-pager-page-sizes>\n</ax-prefix>\n<ax-suffix>\n    <ax-data-pager-info>\n    </ax-data-pager-info>\n</ax-suffix>\n}\n@case('compact'){\n<ax-prefix>\n    <ax-data-pager-prev-buttons>\n    </ax-data-pager-prev-buttons>\n    <ax-data-pager-input-selector>\n    </ax-data-pager-input-selector>\n    <ax-data-pager-next-buttons>\n    </ax-data-pager-next-buttons>\n</ax-prefix>\n<ax-suffix>\n    <ax-data-pager-info>\n    </ax-data-pager-info>\n</ax-suffix>\n}\n@default{\n<ng-content select=\"ax-prefix\"></ng-content>\n<ng-content select=\"ax-suffix\"></ng-content>\n}\n}", styles: ["html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem;font-size:.875rem;line-height:1.25rem}ax-data-pager ax-button-group{display:flex!important;gap:1rem!important;border-radius:0!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-width:0px!important;padding:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:4rem!important;max-width:10rem!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{display:flex;gap:.5rem}ax-data-pager ax-data-pager-next-buttons ax-skeleton,ax-data-pager ax-data-pager-prev-buttons ax-skeleton,ax-data-pager ax-data-pager-numeric-selector ax-skeleton{width:100%;min-width:14rem;border-radius:var(--ax-rounded-border-default)}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-pager ax-prefix,ax-data-pager ax-suffix{display:flex}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i3.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i4.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i5.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i6.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i7.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "@switch(displayMode){\n@case('full'){\n<ax-prefix>\n    <ax-data-pager-numeric-selector>\n    </ax-data-pager-numeric-selector>\n    <ax-data-pager-page-sizes>\n    </ax-data-pager-page-sizes>\n</ax-prefix>\n<ax-suffix>\n    <ax-data-pager-info>\n    </ax-data-pager-info>\n</ax-suffix>\n}\n@case('compact'){\n<ax-prefix>\n    <ax-data-pager-prev-buttons>\n    </ax-data-pager-prev-buttons>\n    <ax-data-pager-input-selector>\n    </ax-data-pager-input-selector>\n    <ax-data-pager-next-buttons>\n    </ax-data-pager-next-buttons>\n</ax-prefix>\n<ax-suffix>\n    <ax-data-pager-info>\n    </ax-data-pager-info>\n</ax-suffix>\n}\n@default{\n<ng-content select=\"ax-prefix\"></ng-content>\n<ng-content select=\"ax-suffix\"></ng-content>\n}\n}", styles: ["html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem;font-size:.875rem;line-height:1.25rem}ax-data-pager ax-button-group{display:flex!important;gap:1rem!important;border-radius:0!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-width:0px!important;padding:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:4rem!important;max-width:10rem!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{display:flex;gap:.5rem}ax-data-pager ax-data-pager-next-buttons ax-skeleton,ax-data-pager ax-data-pager-prev-buttons ax-skeleton,ax-data-pager ax-data-pager-numeric-selector ax-skeleton{width:100%;min-width:14rem;border-radius:var(--ax-rounded-border-default)}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-pager ax-prefix,ax-data-pager ax-suffix{display:flex}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i3.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i4.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i5.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i6.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i7.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerComponent, decorators: [{
             type: Component,