@acorex/components 18.5.14 → 18.5.15

package/button/index.d.ts

@@ -1,5 +1,6 @@
 export * from './lib/button-item-list.component';
 export * from './lib/button-item.class';
 export * from './lib/button-item.component';
+export * from './lib/button.class';
 export * from './lib/button.component';
 export * from './lib/button.module';

package/button/lib/button.class.d.ts

@@ -0,0 +1 @@
+export type AXResponsiveOn = 'xs' | 'md' | 'lg' | 'xl' | '2xl';

package/button/lib/button.component.d.ts

@@ -1,6 +1,7 @@
 import { AXClickEvent, MXButtonBaseComponent } from '@acorex/components/common';
 import { AfterViewInit, EventEmitter } from '@angular/core';
 import { AXButtonType } from './button-item.class';
+import { AXResponsiveOn } from './button.class';
 import * as i0 from "@angular/core";
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
@@ -14,6 +15,7 @@ export declare class AXButtonComponent extends MXButtonBaseComponent implements
      */
     onClick: EventEmitter<AXClickEvent>;
     type: import("@angular/core").InputSignal<AXButtonType>;
+    responsiveOn: import("@angular/core").ModelSignal<AXResponsiveOn>;
     loadingText: import("@angular/core").ModelSignal<string>;
     ngAfterViewInit(): void;
     private getButton;
@@ -23,5 +25,5 @@ export declare class AXButtonComponent extends MXButtonBaseComponent implements
     focus(): void;
     blur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonComponent, "ax-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "loadingText": "loadingTextChange"; }, never, ["ax-prefix, ax-loading, ax-loading-spinner, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel", ".tab-content"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonComponent, "ax-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "responsiveOn": { "alias": "responsiveOn"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "responsiveOn": "responsiveOnChange"; "loadingText": "loadingTextChange"; }, never, ["ax-prefix, ax-loading, ax-loading-spinner, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel", ".tab-content"], false, never>;
 }

package/dialog/lib/dialog.class.d.ts

@@ -21,6 +21,7 @@ export interface AXDialogConfig {
     closeButton?: boolean;
     orientation?: 'horizontal' | 'vertical';
     icon?: string | 'none';
+    draggable?: boolean;
 }
 export interface AXDialogRef {
     close(): void;

package/dialog/lib/dialog.service.d.ts

@@ -12,11 +12,11 @@ export declare class AXDialogService {
     /**
      *  Show an alert box with 'Okay' button.
      */
-    alert(title: string, content: string, type?: AXStyleColorType, orientation?: 'horizontal' | 'vertical'): Promise<void>;
+    alert(title: string, content: string, type?: AXStyleColorType, orientation?: 'horizontal' | 'vertical', draggable?: boolean): Promise<void>;
     /**
      *  Show a confirm box with 'Okay' & 'Cancel' buttons.
      */
-    confirm(title: string, content: string, type?: AXStyleColorType, orientation?: 'horizontal' | 'vertical'): Promise<{
+    confirm(title: string, content: string, type?: AXStyleColorType, orientation?: 'horizontal' | 'vertical', draggable?: boolean): Promise<{
         result: boolean;
     }>;
     /**

package/esm2022/button/index.mjs

@@ -1,6 +1,7 @@
 export * from './lib/button-item-list.component';
 export * from './lib/button-item.class';
 export * from './lib/button-item.component';
+export * from './lib/button.class';
 export * from './lib/button.component';
 export * from './lib/button.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvYnV0dG9uL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMscUJBQXFCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24taXRlbS1saXN0LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24taXRlbS5jbGFzcyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24taXRlbS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYnV0dG9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24ubW9kdWxlJztcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvYnV0dG9uL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLG9CQUFvQixDQUFDO0FBQ25DLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyxxQkFBcUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL2J1dHRvbi1pdGVtLWxpc3QuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2J1dHRvbi1pdGVtLmNsYXNzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2J1dHRvbi1pdGVtLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24uY2xhc3MnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYnV0dG9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24ubW9kdWxlJztcbiJdfQ==

package/esm2022/button/lib/button.class.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2J1dHRvbi9zcmMvbGliL2J1dHRvbi5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUgQVhSZXNwb25zaXZlT24gPSAneHMnIHwgJ21kJyB8ICdsZycgfCAneGwnIHwgJzJ4bCc7XG4iXX0=

package/esm2022/button/lib/button.component.mjs

@@ -17,6 +17,7 @@ export class AXButtonComponent extends MXButtonBaseComponent {
          */
         this.onClick = new EventEmitter();
         this.type = input('button');
+        this.responsiveOn = model();
         this.loadingText = model(null);
     }
     ngAfterViewInit() {
@@ -59,11 +60,11 @@ export class AXButtonComponent extends MXButtonBaseComponent {
         this.getButton().classList.remove('ax-state-focus');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", loadingText: "loadingTextChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, responsiveOn: { classPropertyName: "responsiveOn", publicName: "responsiveOn", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", responsiveOn: "responsiveOnChange", loadingText: "loadingTextChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXButtonComponent },
             { provide: AXButtonItemComponent, useExisting: AXButtonComponent },
             { provide: AXFocusableComponent, useExisting: AXButtonComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<button [axRipple] [disabled]=\"disabled\" [attr.tabindex]=\"tabIndex\" (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\" (click)=\"_handleClick($event)\" [attr.type]=\"type()\">\n  <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner, ax-icon\"> </ng-content>\n  <ng-content select=\"ax-content\"> </ng-content>\n\n  @if(text && !loadingText()){\n  <span class=\"ax-button-text\">{{ text }}</span>\n  }\n  @if(loadingText()){\n  <span class=\"ax-button-text\">{{ loadingText() }}</span>\n  }\n\n  <ng-content select=\"ax-suffix\"> </ng-content>\n  <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n  <ng-content select=\".tab-content\"> </ng-content>\n</button>", styles: ["ax-button{position:relative;display:inline-flex;height:var(--ax-size-default);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-button.ax-xs{font-size:.75rem;line-height:1rem}ax-button.ax-xs>button{padding-left:.25rem;padding-right:.25rem}ax-button.ax-sm>button{padding-left:.5rem;padding-right:.5rem}ax-button.ax-sm,ax-button.ax-md{font-size:.875rem;line-height:1.25rem}ax-button.ax-lg{font-size:1rem;line-height:1.25rem}ax-button.ax-lg>button{padding-left:1.5rem;padding-right:1.5rem}ax-button.ax-xl{font-size:1.125rem;line-height:1.75rem}ax-button.ax-xl>button{padding-left:2rem;padding-right:2rem}ax-button.ax-xl.ax-button-icon{font-size:1.5rem}ax-button.ax-xs.ax-button-icon,ax-button.ax-sm.ax-button-icon{font-size:1rem}ax-button.ax-button-icon{height:var(--ax-size-default);width:var(--ax-size-default);font-size:1.25rem}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;padding-left:1rem;padding-right:1rem;outline-color:transparent}ax-button>button.ax-state-focus:focus,ax-button>button:focus-visible{outline-width:2px;outline-offset:2px;outline-color:#000;border-radius:inherit}ax-button>button .ax-button-text{white-space:nowrap;padding-left:.5rem;padding-right:.5rem;font-weight:500;line-height:1}ax-button ax-button-item.ax-divided{border-bottom-width:1px!important;border-color:rgba(var(--ax-color-border-default))!important}\n"], dependencies: [{ kind: "directive", type: i1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<button [axRipple] [disabled]=\"disabled\" [class]=\"'ax-state-responsive-'+responsiveOn()\" [attr.tabindex]=\"tabIndex\"\n  (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"_handleClick($event)\"\n  [attr.type]=\"type()\">\n  <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner, ax-icon\"> </ng-content>\n  <ng-content select=\"ax-content\"> </ng-content>\n\n  @if(text && !loadingText()){\n  <span class=\"ax-button-text\">{{ text }}</span>\n  }\n  @if(loadingText()){\n  <span class=\"ax-button-text\">{{ loadingText() }}</span>\n  }\n\n  <ng-content select=\"ax-suffix\"> </ng-content>\n  <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n  <ng-content select=\".tab-content\"> </ng-content>\n</button>", styles: ["ax-button{position:relative;display:inline-flex;height:var(--ax-size-default);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-button.ax-xs{font-size:.75rem;line-height:1rem}ax-button.ax-xs>button{padding-left:.25rem;padding-right:.25rem}ax-button.ax-sm>button{padding-left:.5rem;padding-right:.5rem}ax-button.ax-sm,ax-button.ax-md{font-size:.875rem;line-height:1.25rem}ax-button.ax-lg{font-size:1rem;line-height:1.25rem}ax-button.ax-lg>button{padding-left:1.5rem;padding-right:1.5rem}ax-button.ax-xl{font-size:1.125rem;line-height:1.75rem}ax-button.ax-xl>button{padding-left:2rem;padding-right:2rem}ax-button.ax-xl.ax-button-icon{font-size:1.5rem}ax-button.ax-xs.ax-button-icon,ax-button.ax-sm.ax-button-icon{font-size:1rem}ax-button.ax-button-icon{height:var(--ax-size-default);width:var(--ax-size-default);font-size:1.25rem}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;padding-left:1rem;padding-right:1rem;outline-color:transparent}@media (min-width: 320px) and (max-width: 600px){ax-button>button.ax-state-responsive-xs .ax-button-text{display:none!important}}@media (min-width: 768px){ax-button>button.ax-state-responsive-md .ax-button-text{display:none!important}}@media (min-width: 1024px){ax-button>button.ax-state-responsive-lg .ax-button-text{display:none!important}}@media (min-width: 1280px){ax-button>button.ax-state-responsive-xl .ax-button-text{display:none!important}}@media (min-width: 1536px){ax-button>button.ax-state-responsive-2xl .ax-button-text{display:none!important}}ax-button>button.ax-state-focus:focus,ax-button>button:focus-visible{outline-width:2px;outline-offset:2px;outline-color:#000;border-radius:inherit}ax-button>button .ax-button-text{white-space:nowrap;padding-left:.5rem;padding-right:.5rem;font-weight:500;line-height:1}ax-button ax-button-item.ax-divided{border-bottom-width:1px!important;border-color:rgba(var(--ax-color-border-default))!important}\n"], dependencies: [{ kind: "directive", type: i1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
@@ -71,9 +72,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         { provide: AXComponent, useExisting: AXButtonComponent },
                         { provide: AXButtonItemComponent, useExisting: AXButtonComponent },
                         { provide: AXFocusableComponent, useExisting: AXButtonComponent },
-                    ], template: "<button [axRipple] [disabled]=\"disabled\" [attr.tabindex]=\"tabIndex\" (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\" (click)=\"_handleClick($event)\" [attr.type]=\"type()\">\n  <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner, ax-icon\"> </ng-content>\n  <ng-content select=\"ax-content\"> </ng-content>\n\n  @if(text && !loadingText()){\n  <span class=\"ax-button-text\">{{ text }}</span>\n  }\n  @if(loadingText()){\n  <span class=\"ax-button-text\">{{ loadingText() }}</span>\n  }\n\n  <ng-content select=\"ax-suffix\"> </ng-content>\n  <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n  <ng-content select=\".tab-content\"> </ng-content>\n</button>", styles: ["ax-button{position:relative;display:inline-flex;height:var(--ax-size-default);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-button.ax-xs{font-size:.75rem;line-height:1rem}ax-button.ax-xs>button{padding-left:.25rem;padding-right:.25rem}ax-button.ax-sm>button{padding-left:.5rem;padding-right:.5rem}ax-button.ax-sm,ax-button.ax-md{font-size:.875rem;line-height:1.25rem}ax-button.ax-lg{font-size:1rem;line-height:1.25rem}ax-button.ax-lg>button{padding-left:1.5rem;padding-right:1.5rem}ax-button.ax-xl{font-size:1.125rem;line-height:1.75rem}ax-button.ax-xl>button{padding-left:2rem;padding-right:2rem}ax-button.ax-xl.ax-button-icon{font-size:1.5rem}ax-button.ax-xs.ax-button-icon,ax-button.ax-sm.ax-button-icon{font-size:1rem}ax-button.ax-button-icon{height:var(--ax-size-default);width:var(--ax-size-default);font-size:1.25rem}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;padding-left:1rem;padding-right:1rem;outline-color:transparent}ax-button>button.ax-state-focus:focus,ax-button>button:focus-visible{outline-width:2px;outline-offset:2px;outline-color:#000;border-radius:inherit}ax-button>button .ax-button-text{white-space:nowrap;padding-left:.5rem;padding-right:.5rem;font-weight:500;line-height:1}ax-button ax-button-item.ax-divided{border-bottom-width:1px!important;border-color:rgba(var(--ax-color-border-default))!important}\n"] }]
+                    ], template: "<button [axRipple] [disabled]=\"disabled\" [class]=\"'ax-state-responsive-'+responsiveOn()\" [attr.tabindex]=\"tabIndex\"\n  (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"_handleClick($event)\"\n  [attr.type]=\"type()\">\n  <ng-content select=\"ax-prefix, ax-loading, ax-loading-spinner, ax-icon\"> </ng-content>\n  <ng-content select=\"ax-content\"> </ng-content>\n\n  @if(text && !loadingText()){\n  <span class=\"ax-button-text\">{{ text }}</span>\n  }\n  @if(loadingText()){\n  <span class=\"ax-button-text\">{{ loadingText() }}</span>\n  }\n\n  <ng-content select=\"ax-suffix\"> </ng-content>\n  <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n  <ng-content select=\".tab-content\"> </ng-content>\n</button>", styles: ["ax-button{position:relative;display:inline-flex;height:var(--ax-size-default);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-button.ax-xs{font-size:.75rem;line-height:1rem}ax-button.ax-xs>button{padding-left:.25rem;padding-right:.25rem}ax-button.ax-sm>button{padding-left:.5rem;padding-right:.5rem}ax-button.ax-sm,ax-button.ax-md{font-size:.875rem;line-height:1.25rem}ax-button.ax-lg{font-size:1rem;line-height:1.25rem}ax-button.ax-lg>button{padding-left:1.5rem;padding-right:1.5rem}ax-button.ax-xl{font-size:1.125rem;line-height:1.75rem}ax-button.ax-xl>button{padding-left:2rem;padding-right:2rem}ax-button.ax-xl.ax-button-icon{font-size:1.5rem}ax-button.ax-xs.ax-button-icon,ax-button.ax-sm.ax-button-icon{font-size:1rem}ax-button.ax-button-icon{height:var(--ax-size-default);width:var(--ax-size-default);font-size:1.25rem}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;padding-left:1rem;padding-right:1rem;outline-color:transparent}@media (min-width: 320px) and (max-width: 600px){ax-button>button.ax-state-responsive-xs .ax-button-text{display:none!important}}@media (min-width: 768px){ax-button>button.ax-state-responsive-md .ax-button-text{display:none!important}}@media (min-width: 1024px){ax-button>button.ax-state-responsive-lg .ax-button-text{display:none!important}}@media (min-width: 1280px){ax-button>button.ax-state-responsive-xl .ax-button-text{display:none!important}}@media (min-width: 1536px){ax-button>button.ax-state-responsive-2xl .ax-button-text{display:none!important}}ax-button>button.ax-state-focus:focus,ax-button>button:focus-visible{outline-width:2px;outline-offset:2px;outline-color:#000;border-radius:inherit}ax-button>button .ax-button-text{white-space:nowrap;padding-left:.5rem;padding-right:.5rem;font-weight:500;line-height:1}ax-button ax-button-item.ax-divided{border-bottom-width:1px!important;border-color:rgba(var(--ax-color-border-default))!important}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9idXR0b24vc3JjL2xpYi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2J1dHRvbi9zcmMvbGliL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWdCLFdBQVcsRUFBRSxvQkFBb0IsRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ25ILE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixXQUFXLEVBQ1gsaUJBQWlCLEVBQ2pCLEtBQUssRUFDTCxLQUFLLEdBQ04sTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUJBQXlCLENBQUM7OztBQUVoRTs7OztHQUlHO0FBZUgsTUFBTSxPQUFPLGlCQUFrQixTQUFRLHFCQUFxQjtJQWQ1RDs7UUFlRTs7O1dBR0c7UUFDSCxZQUFPLEdBQStCLElBQUksWUFBWSxFQUFnQixDQUFDO1FBRXZFLFNBQUksR0FBRyxLQUFLLENBQWUsUUFBUSxDQUFDLENBQUM7UUFFckMsZ0JBQVcsR0FBRyxLQUFLLENBQWdCLElBQUksQ0FBQyxDQUFDO0tBZ0QxQztJQTlDQyxlQUFlO1FBQ2IsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDLGVBQWUsQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNwRCxDQUFDO0lBRU8sU0FBUztRQUNmLE9BQU8sSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDLGlCQUFzQyxDQUFDO0lBQ3RFLENBQUM7SUFFRCxZQUFZLENBQUMsQ0FBYTtRQUN4QixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixDQUFDLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDbkIsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUNwQixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUNqQyxDQUFDO1FBQ0QsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7WUFDaEIsU0FBUyxFQUFFLElBQUk7WUFDZixXQUFXLEVBQUUsSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUNsQyxXQUFXLEVBQUUsQ0FBQztTQUNmLENBQUMsQ0FBQztRQUVILDZCQUE2QjtRQUM3QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2QsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxTQUFTLEVBQUUsRUFBRSxLQUFLLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsSUFDWSxXQUFXO1FBQ3JCLE9BQU8sTUFBTSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDO2FBQ25DLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQ25CLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDdEIsQ0FBQztJQUVRLEtBQUs7UUFDWixJQUFJLENBQUMsU0FBUyxFQUFFLEVBQUUsS0FBSyxFQUFFLENBQUM7UUFDMUIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUNuRCxDQUFDO0lBQ1EsSUFBSTtRQUNYLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7SUFDdEQsQ0FBQzs4R0F4RFUsaUJBQWlCO2tHQUFqQixpQkFBaUIsd2xEQU5qQjtZQUNULEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsaUJBQWlCLEVBQUU7WUFDeEQsRUFBRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsV0FBVyxFQUFFLGlCQUFpQixFQUFFO1lBQ2xFLEVBQUUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRTtTQUNsRSxpREMvQkgsa3NCQWVTOzsyRkRrQkksaUJBQWlCO2tCQWQ3QixTQUFTOytCQUNFLFdBQVcsVUFHYixDQUFDLFVBQVUsRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxVQUFVLENBQUMsV0FDbEYsQ0FBQyxRQUFRLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxrQkFBa0IsRUFBRSxZQUFZLEVBQUUsYUFBYSxFQUFFLGdCQUFnQixDQUFDLG1CQUM3Ryx1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxpQkFBaUIsQ0FBQyxJQUFJLGFBQzFCO3dCQUNULEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxXQUFXLG1CQUFtQixFQUFFO3dCQUN4RCxFQUFFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxXQUFXLG1CQUFtQixFQUFFO3dCQUNsRSxFQUFFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxXQUFXLG1CQUFtQixFQUFFO3FCQUNsRTs4QkE4Q1csV0FBVztzQkFEdEIsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhDbGlja0V2ZW50LCBBWENvbXBvbmVudCwgQVhGb2N1c2FibGVDb21wb25lbnQsIE1YQnV0dG9uQmFzZUNvbXBvbmVudCB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9jb21tb24nO1xuaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0QmluZGluZyxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIGlucHV0LFxuICBtb2RlbCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBWEJ1dHRvblR5cGUgfSBmcm9tICcuL2J1dHRvbi1pdGVtLmNsYXNzJztcbmltcG9ydCB7IEFYQnV0dG9uSXRlbUNvbXBvbmVudCB9IGZyb20gJy4vYnV0dG9uLWl0ZW0uY29tcG9uZW50JztcblxuLyoqXG4gKiBUaGUgQnV0dG9uIGlzIGEgY29tcG9uZW50IHdoaWNoIGRldGVjdHMgdXNlciBpbnRlcmFjdGlvbiBhbmQgdHJpZ2dlcnMgYSBjb3JyZXNwb25kaW5nIGV2ZW50XG4gKlxuICogQGNhdGVnb3J5IENvbXBvbmVudHNcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2J1dHRvbi5jb21wb25lbnQuc2NzcyddLFxuICBpbnB1dHM6IFsnZGlzYWJsZWQnLCAnc2l6ZScsICd0YWJJbmRleCcsICdjb2xvcicsICdsb29rJywgJ3RleHQnLCAndG9nZ2xlYWJsZScsICdzZWxlY3RlZCddLFxuICBvdXRwdXRzOiBbJ29uQmx1cicsICdvbkZvY3VzJywgJ29uQ2xpY2snLCAnc2VsZWN0ZWRDaGFuZ2UnLCAndG9nZ2xlYWJsZUNoYW5nZScsICdsb29rQ2hhbmdlJywgJ2NvbG9yQ2hhbmdlJywgJ2Rpc2FibGVkQ2hhbmdlJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBwcm92aWRlcnM6IFtcbiAgICB7IHByb3ZpZGU6IEFYQ29tcG9uZW50LCB1c2VFeGlzdGluZzogQVhCdXR0b25Db21wb25lbnQgfSxcbiAgICB7IHByb3ZpZGU6IEFYQnV0dG9uSXRlbUNvbXBvbmVudCwgdXNlRXhpc3Rpbmc6IEFYQnV0dG9uQ29tcG9uZW50IH0sXG4gICAgeyBwcm92aWRlOiBBWEZvY3VzYWJsZUNvbXBvbmVudCwgdXNlRXhpc3Rpbmc6IEFYQnV0dG9uQ29tcG9uZW50IH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEFYQnV0dG9uQ29tcG9uZW50IGV4dGVuZHMgTVhCdXR0b25CYXNlQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIC8qKlxuICAgKiAgRmlyZXMgZWFjaCB0aW1lIHRoZSB1c2VyIGNsaWNrcyB0aGUgYnV0dG9uLlxuICAgKiAgQGV2ZW50XG4gICAqL1xuICBvbkNsaWNrOiBFdmVudEVtaXR0ZXI8QVhDbGlja0V2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8QVhDbGlja0V2ZW50PigpO1xuXG4gIHR5cGUgPSBpbnB1dDxBWEJ1dHRvblR5cGU+KCdidXR0b24nKTtcblxuICBsb2FkaW5nVGV4dCA9IG1vZGVsPHN0cmluZyB8IG51bGw+KG51bGwpO1xuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmdldEhvc3RFbGVtZW50KCkucmVtb3ZlQXR0cmlidXRlKCd0YWJpbmRleCcpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRCdXR0b24oKTogSFRNTEJ1dHRvbkVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLmdldEhvc3RFbGVtZW50KCkuZmlyc3RFbGVtZW50Q2hpbGQgYXMgSFRNTEJ1dHRvbkVsZW1lbnQ7XG4gIH1cblxuICBfaGFuZGxlQ2xpY2soZTogTW91c2VFdmVudCkge1xuICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICh0aGlzLnRvZ2dsZWFibGUpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWQgPSAhdGhpcy5zZWxlY3RlZDtcbiAgICB9XG4gICAgdGhpcy5vbkNsaWNrLmVtaXQoe1xuICAgICAgY29tcG9uZW50OiB0aGlzLFxuICAgICAgaHRtbEVsZW1lbnQ6IHRoaXMuZ2V0SG9zdEVsZW1lbnQoKSxcbiAgICAgIG5hdGl2ZUV2ZW50OiBlLFxuICAgIH0pO1xuXG4gICAgLy8gVE9ETzogY2hlY2sga2V5Ym9hcmQgZXZlbnRcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuYmx1cigpO1xuICAgIH0pO1xuICB9XG5cbiAgY2xpY2soKSB7XG4gICAgdGhpcy5nZXRCdXR0b24oKT8uY2xpY2soKTtcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBwcml2YXRlIGdldCBfX2hvc3RDbGFzcygpOiBzdHJpbmdbXSB7XG4gICAgcmV0dXJuIE9iamVjdC5lbnRyaWVzKHRoaXMuY3NzQ2xhc3NlcylcbiAgICAgIC5maWx0ZXIoKGMpID0+IGNbMV0pXG4gICAgICAubWFwKChjKSA9PiBjWzBdKTtcbiAgfVxuXG4gIG92ZXJyaWRlIGZvY3VzKCkge1xuICAgIHRoaXMuZ2V0QnV0dG9uKCk/LmZvY3VzKCk7XG4gICAgdGhpcy5nZXRCdXR0b24oKS5jbGFzc0xpc3QuYWRkKCdheC1zdGF0ZS1mb2N1cycpO1xuICB9XG4gIG92ZXJyaWRlIGJsdXIoKSB7XG4gICAgdGhpcy5nZXRCdXR0b24oKS5jbGFzc0xpc3QucmVtb3ZlKCdheC1zdGF0ZS1mb2N1cycpO1xuICB9XG59XG4iLCI8YnV0dG9uIFtheFJpcHBsZV0gW2Rpc2FibGVkXT1cImRpc2FibGVkXCIgW2F0dHIudGFiaW5kZXhdPVwidGFiSW5kZXhcIiAoZm9jdXMpPVwiZW1pdE9uRm9jdXNFdmVudCgkZXZlbnQpXCJcbiAgKGJsdXIpPVwiZW1pdE9uQmx1ckV2ZW50KCRldmVudClcIiAoY2xpY2spPVwiX2hhbmRsZUNsaWNrKCRldmVudClcIiBbYXR0ci50eXBlXT1cInR5cGUoKVwiPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJheC1wcmVmaXgsIGF4LWxvYWRpbmcsIGF4LWxvYWRpbmctc3Bpbm5lciwgYXgtaWNvblwiPiA8L25nLWNvbnRlbnQ+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LWNvbnRlbnRcIj4gPC9uZy1jb250ZW50PlxuXG4gIEBpZih0ZXh0ICYmICFsb2FkaW5nVGV4dCgpKXtcbiAgPHNwYW4gY2xhc3M9XCJheC1idXR0b24tdGV4dFwiPnt7IHRleHQgfX08L3NwYW4+XG4gIH1cbiAgQGlmKGxvYWRpbmdUZXh0KCkpe1xuICA8c3BhbiBjbGFzcz1cImF4LWJ1dHRvbi10ZXh0XCI+e3sgbG9hZGluZ1RleHQoKSB9fTwvc3Bhbj5cbiAgfVxuXG4gIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LXN1ZmZpeFwiPiA8L25nLWNvbnRlbnQ+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LWRyb3Bkb3duLXBhbmVsXCI+IDwvbmctY29udGVudD5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiLnRhYi1jb250ZW50XCI+IDwvbmctY29udGVudD5cbjwvYnV0dG9uPiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9idXR0b24vc3JjL2xpYi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2J1dHRvbi9zcmMvbGliL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWdCLFdBQVcsRUFBRSxvQkFBb0IsRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ25ILE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixXQUFXLEVBQ1gsaUJBQWlCLEVBQ2pCLEtBQUssRUFDTCxLQUFLLEdBQ04sTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUJBQXlCLENBQUM7OztBQUdoRTs7OztHQUlHO0FBZUgsTUFBTSxPQUFPLGlCQUFrQixTQUFRLHFCQUFxQjtJQWQ1RDs7UUFlRTs7O1dBR0c7UUFDSCxZQUFPLEdBQStCLElBQUksWUFBWSxFQUFnQixDQUFDO1FBRXZFLFNBQUksR0FBRyxLQUFLLENBQWUsUUFBUSxDQUFDLENBQUM7UUFFckMsaUJBQVksR0FBRyxLQUFLLEVBQWtCLENBQUM7UUFFdkMsZ0JBQVcsR0FBRyxLQUFLLENBQWdCLElBQUksQ0FBQyxDQUFDO0tBZ0QxQztJQTlDQyxlQUFlO1FBQ2IsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDLGVBQWUsQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNwRCxDQUFDO0lBRU8sU0FBUztRQUNmLE9BQU8sSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDLGlCQUFzQyxDQUFDO0lBQ3RFLENBQUM7SUFFRCxZQUFZLENBQUMsQ0FBYTtRQUN4QixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixDQUFDLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDbkIsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUNwQixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUNqQyxDQUFDO1FBQ0QsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7WUFDaEIsU0FBUyxFQUFFLElBQUk7WUFDZixXQUFXLEVBQUUsSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUNsQyxXQUFXLEVBQUUsQ0FBQztTQUNmLENBQUMsQ0FBQztRQUVILDZCQUE2QjtRQUM3QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2QsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxTQUFTLEVBQUUsRUFBRSxLQUFLLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsSUFDWSxXQUFXO1FBQ3JCLE9BQU8sTUFBTSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDO2FBQ25DLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQ25CLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDdEIsQ0FBQztJQUVRLEtBQUs7UUFDWixJQUFJLENBQUMsU0FBUyxFQUFFLEVBQUUsS0FBSyxFQUFFLENBQUM7UUFDMUIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUNuRCxDQUFDO0lBQ1EsSUFBSTtRQUNYLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7SUFDdEQsQ0FBQzs4R0ExRFUsaUJBQWlCO2tHQUFqQixpQkFBaUIseXdEQU5qQjtZQUNULEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsaUJBQWlCLEVBQUU7WUFDeEQsRUFBRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsV0FBVyxFQUFFLGlCQUFpQixFQUFFO1lBQ2xFLEVBQUUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRTtTQUNsRSxpRENoQ0gsdXZCQWdCUzs7MkZEa0JJLGlCQUFpQjtrQkFkN0IsU0FBUzsrQkFDRSxXQUFXLFVBR2IsQ0FBQyxVQUFVLEVBQUUsTUFBTSxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsVUFBVSxDQUFDLFdBQ2xGLENBQUMsUUFBUSxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsa0JBQWtCLEVBQUUsWUFBWSxFQUFFLGFBQWEsRUFBRSxnQkFBZ0IsQ0FBQyxtQkFDN0csdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSxhQUMxQjt3QkFDVCxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxtQkFBbUIsRUFBRTt3QkFDeEQsRUFBRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsV0FBVyxtQkFBbUIsRUFBRTt3QkFDbEUsRUFBRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsV0FBVyxtQkFBbUIsRUFBRTtxQkFDbEU7OEJBZ0RXLFdBQVc7c0JBRHRCLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQ2xpY2tFdmVudCwgQVhDb21wb25lbnQsIEFYRm9jdXNhYmxlQ29tcG9uZW50LCBNWEJ1dHRvbkJhc2VDb21wb25lbnQgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvY29tbW9uJztcbmltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdEJpbmRpbmcsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBpbnB1dCxcbiAgbW9kZWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQVhCdXR0b25UeXBlIH0gZnJvbSAnLi9idXR0b24taXRlbS5jbGFzcyc7XG5pbXBvcnQgeyBBWEJ1dHRvbkl0ZW1Db21wb25lbnQgfSBmcm9tICcuL2J1dHRvbi1pdGVtLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBWFJlc3BvbnNpdmVPbiB9IGZyb20gJy4vYnV0dG9uLmNsYXNzJztcblxuLyoqXG4gKiBUaGUgQnV0dG9uIGlzIGEgY29tcG9uZW50IHdoaWNoIGRldGVjdHMgdXNlciBpbnRlcmFjdGlvbiBhbmQgdHJpZ2dlcnMgYSBjb3JyZXNwb25kaW5nIGV2ZW50XG4gKlxuICogQGNhdGVnb3J5IENvbXBvbmVudHNcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2J1dHRvbi5jb21wb25lbnQuc2NzcyddLFxuICBpbnB1dHM6IFsnZGlzYWJsZWQnLCAnc2l6ZScsICd0YWJJbmRleCcsICdjb2xvcicsICdsb29rJywgJ3RleHQnLCAndG9nZ2xlYWJsZScsICdzZWxlY3RlZCddLFxuICBvdXRwdXRzOiBbJ29uQmx1cicsICdvbkZvY3VzJywgJ29uQ2xpY2snLCAnc2VsZWN0ZWRDaGFuZ2UnLCAndG9nZ2xlYWJsZUNoYW5nZScsICdsb29rQ2hhbmdlJywgJ2NvbG9yQ2hhbmdlJywgJ2Rpc2FibGVkQ2hhbmdlJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBwcm92aWRlcnM6IFtcbiAgICB7IHByb3ZpZGU6IEFYQ29tcG9uZW50LCB1c2VFeGlzdGluZzogQVhCdXR0b25Db21wb25lbnQgfSxcbiAgICB7IHByb3ZpZGU6IEFYQnV0dG9uSXRlbUNvbXBvbmVudCwgdXNlRXhpc3Rpbmc6IEFYQnV0dG9uQ29tcG9uZW50IH0sXG4gICAgeyBwcm92aWRlOiBBWEZvY3VzYWJsZUNvbXBvbmVudCwgdXNlRXhpc3Rpbmc6IEFYQnV0dG9uQ29tcG9uZW50IH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEFYQnV0dG9uQ29tcG9uZW50IGV4dGVuZHMgTVhCdXR0b25CYXNlQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIC8qKlxuICAgKiAgRmlyZXMgZWFjaCB0aW1lIHRoZSB1c2VyIGNsaWNrcyB0aGUgYnV0dG9uLlxuICAgKiAgQGV2ZW50XG4gICAqL1xuICBvbkNsaWNrOiBFdmVudEVtaXR0ZXI8QVhDbGlja0V2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8QVhDbGlja0V2ZW50PigpO1xuXG4gIHR5cGUgPSBpbnB1dDxBWEJ1dHRvblR5cGU+KCdidXR0b24nKTtcblxuICByZXNwb25zaXZlT24gPSBtb2RlbDxBWFJlc3BvbnNpdmVPbj4oKTtcblxuICBsb2FkaW5nVGV4dCA9IG1vZGVsPHN0cmluZyB8IG51bGw+KG51bGwpO1xuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmdldEhvc3RFbGVtZW50KCkucmVtb3ZlQXR0cmlidXRlKCd0YWJpbmRleCcpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRCdXR0b24oKTogSFRNTEJ1dHRvbkVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLmdldEhvc3RFbGVtZW50KCkuZmlyc3RFbGVtZW50Q2hpbGQgYXMgSFRNTEJ1dHRvbkVsZW1lbnQ7XG4gIH1cblxuICBfaGFuZGxlQ2xpY2soZTogTW91c2VFdmVudCkge1xuICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICh0aGlzLnRvZ2dsZWFibGUpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWQgPSAhdGhpcy5zZWxlY3RlZDtcbiAgICB9XG4gICAgdGhpcy5vbkNsaWNrLmVtaXQoe1xuICAgICAgY29tcG9uZW50OiB0aGlzLFxuICAgICAgaHRtbEVsZW1lbnQ6IHRoaXMuZ2V0SG9zdEVsZW1lbnQoKSxcbiAgICAgIG5hdGl2ZUV2ZW50OiBlLFxuICAgIH0pO1xuXG4gICAgLy8gVE9ETzogY2hlY2sga2V5Ym9hcmQgZXZlbnRcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuYmx1cigpO1xuICAgIH0pO1xuICB9XG5cbiAgY2xpY2soKSB7XG4gICAgdGhpcy5nZXRCdXR0b24oKT8uY2xpY2soKTtcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBwcml2YXRlIGdldCBfX2hvc3RDbGFzcygpOiBzdHJpbmdbXSB7XG4gICAgcmV0dXJuIE9iamVjdC5lbnRyaWVzKHRoaXMuY3NzQ2xhc3NlcylcbiAgICAgIC5maWx0ZXIoKGMpID0+IGNbMV0pXG4gICAgICAubWFwKChjKSA9PiBjWzBdKTtcbiAgfVxuXG4gIG92ZXJyaWRlIGZvY3VzKCkge1xuICAgIHRoaXMuZ2V0QnV0dG9uKCk/LmZvY3VzKCk7XG4gICAgdGhpcy5nZXRCdXR0b24oKS5jbGFzc0xpc3QuYWRkKCdheC1zdGF0ZS1mb2N1cycpO1xuICB9XG4gIG92ZXJyaWRlIGJsdXIoKSB7XG4gICAgdGhpcy5nZXRCdXR0b24oKS5jbGFzc0xpc3QucmVtb3ZlKCdheC1zdGF0ZS1mb2N1cycpO1xuICB9XG59XG4iLCI8YnV0dG9uIFtheFJpcHBsZV0gW2Rpc2FibGVkXT1cImRpc2FibGVkXCIgW2NsYXNzXT1cIidheC1zdGF0ZS1yZXNwb25zaXZlLScrcmVzcG9uc2l2ZU9uKClcIiBbYXR0ci50YWJpbmRleF09XCJ0YWJJbmRleFwiXG4gIChmb2N1cyk9XCJlbWl0T25Gb2N1c0V2ZW50KCRldmVudClcIiAoYmx1cik9XCJlbWl0T25CbHVyRXZlbnQoJGV2ZW50KVwiIChjbGljayk9XCJfaGFuZGxlQ2xpY2soJGV2ZW50KVwiXG4gIFthdHRyLnR5cGVdPVwidHlwZSgpXCI+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LXByZWZpeCwgYXgtbG9hZGluZywgYXgtbG9hZGluZy1zcGlubmVyLCBheC1pY29uXCI+IDwvbmctY29udGVudD5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgtY29udGVudFwiPiA8L25nLWNvbnRlbnQ+XG5cbiAgQGlmKHRleHQgJiYgIWxvYWRpbmdUZXh0KCkpe1xuICA8c3BhbiBjbGFzcz1cImF4LWJ1dHRvbi10ZXh0XCI+e3sgdGV4dCB9fTwvc3Bhbj5cbiAgfVxuICBAaWYobG9hZGluZ1RleHQoKSl7XG4gIDxzcGFuIGNsYXNzPVwiYXgtYnV0dG9uLXRleHRcIj57eyBsb2FkaW5nVGV4dCgpIH19PC9zcGFuPlxuICB9XG5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgtc3VmZml4XCI+IDwvbmctY29udGVudD5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgtZHJvcGRvd24tcGFuZWxcIj4gPC9uZy1jb250ZW50PlxuICA8bmctY29udGVudCBzZWxlY3Q9XCIudGFiLWNvbnRlbnRcIj4gPC9uZy1jb250ZW50PlxuPC9idXR0b24+Il19

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

@@ -98,7 +98,7 @@ export class AXConversationInputComponent extends classes((MXInputBaseValueCompo
                 useExisting: forwardRef(() => AXConversationInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (replyChat()) {\n  <div class=\"ax-editor-reply-container ax-editor-container ax-look-{{ look }}\">\n    <div class=\"ax-reply-start\">\n      <i class=\"fa-solid fa-reply\"></i>\n      @switch (replyChat().type) {\n        @case ('text') {\n          <p>\n            {{ replyChat().content }}\n          </p>\n        }\n        @case ('image') {\n          <div class=\"ax-reply-types\">\n            <img src=\"{{ replyChat().content }}\" alt=\"\" />\n            {{ replyChat().type }}\n          </div>\n        }\n        @case ('video') {\n          <div class=\"ax-reply-types\">\n            <video src=\"{{ replyChat().content }}\" alt=\"\"></video>\n            {{ replyChat().type }}\n          </div>\n        }\n        @case ('file') {\n          <div class=\"ax-reply-types\">\n            <i class=\"fa-regular fa-folder-open\"></i>\n            {{ replyChat().name }}\n          </div>\n        }\n        @default {\n          <p>\n            {{ replyChat().type }}\n          </p>\n        }\n      }\n    </div>\n    <i (click)=\"closeReplyHandler()\" class=\"fa-solid fa-xmark ax-cursor-pointer\"></i>\n  </div>\n}\n\n<div class=\"ax-conversation-input ax-editor-container ax-look-{{ look }}\" [class.ax-state-recording]=\"recording()\">\n  @if (recording()) {\n    <div class=\"ax-conversation-input-start-side\">\n      <span class=\"ax-record-dot\"></span>\n      <span>{{ recordingService.timer() }}</span>\n    </div>\n    <div class=\"ax-conversation-input-main-side\">\n      <ax-button\n        class=\"ax-sm\"\n        look=\"blank\"\n        color=\"primary\"\n        [text]=\"'cancel' | translate | async\"\n        (onClick)=\"handleCancelRecordingClick()\"\n      ></ax-button>\n    </div>\n    <div class=\"ax-conversation-input-end-side\">\n      <ax-button look=\"solid\" color=\"danger\" class=\"ax-blob ax-sm\" (onClick)=\"handleSendVoiceClick()\">\n        <ax-icon>\n          <i class=\"ax-icon ax-icon-send\"></i>\n        </ax-icon>\n      </ax-button>\n    </div>\n  } @else {\n    <div class=\"ax-conversation-input-start-side\">\n      <ax-button look=\"blank\" class=\"ax-sm\">\n        <ax-icon>\n          <i class=\"ax-icon ax-icon-emoji\"></i>\n        </ax-icon>\n        <ax-dropdown-panel>\n          <ng-container>\n            <div class=\"ax-emoji-container\">\n              <div>\u26A0\uFE0F</div>\n              <div>\u27A1\uFE0F</div>\n              <div>\uD83D\uDD03</div>\n              <div>\uD83D\uDD37</div>\n              <div>\uD83E\uDD1A</div>\n              <div>\uD83D\uDE02</div>\n              <div>\uD83D\uDE0A</div>\n            </div>\n          </ng-container>\n        </ax-dropdown-panel>\n      </ax-button>\n    </div>\n\n    <textarea\n      class=\"ax-conversation-input-main-side\"\n      oninput='this.style.height = \"\";this.style.height = this.scrollHeight + \"px\"'\n      type=\"text\"\n      rows=\"1\"\n      [id]=\"id\"\n      [name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.maxlength]=\"maxLength()\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [tabindex]=\"tabIndex\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [ngModelOptions]=\"{ updateOn: _updateOn }\"\n      (keydown)=\"emitOnKeydownEvent($event)\"\n      (keyup)=\"emitOnKeyupEvent($event)\"\n      (keypress)=\"emitOnKeypressEvent($event)\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n    >\n    </textarea>\n\n    <div class=\"ax-conversation-input-end-side\">\n      @if (!value) {\n        <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"handleAttachClick()\">\n          <ax-icon>\n            <i class=\"ax-icon ax-icon-attach\"></i>\n          </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"handleRecordClick()\">\n          <ax-icon>\n            <i class=\"ax-icon ax-icon-mic\"></i>\n          </ax-icon>\n        </ax-button>\n        <input multiple #inputFile [accept]=\"acceptFileType()\" type=\"file\" class=\"ax-attach-input\" (change)=\"handleChangeFile($event)\" />\n      } @else {\n        <ax-button look=\"solid\" color=\"primary\" class=\"ax-sm\" (onClick)=\"handleSendClick()\">\n          <ax-icon>\n            <i class=\"ax-icon ax-icon-send\"></i>\n          </ax-icon>\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ax-dark .ax-conversation-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-primary-200));border-color:rgba(var(--ax-color-primary-200))}ax-conversation-input{width:100%}ax-conversation-input .ax-conversation-input{display:flex;align-items:flex-end;position:relative;resize:vertical;height:auto;padding:.5rem;font-size:.875rem}ax-conversation-input .ax-conversation-input.ax-state-recording{align-items:center;display:grid;grid-template-columns:repeat(3,1fr)}ax-conversation-input .ax-conversation-input.ax-state-recording .ax-conversation-input-start-side{justify-content:flex-start}ax-conversation-input .ax-conversation-input.ax-state-recording .ax-conversation-input-end-side{justify-content:flex-end}ax-conversation-input .ax-conversation-input>textarea{font-size:.875rem;background-color:transparent;max-height:10rem;min-height:1.5rem;line-height:2rem;flex:1 1 auto;height:auto;resize:none}ax-conversation-input .ax-conversation-input>textarea:focus,ax-conversation-input .ax-conversation-input>textarea:focus-visible{outline:unset}ax-conversation-input .ax-conversation-input .ax-conversation-input-start-side,ax-conversation-input .ax-conversation-input .ax-conversation-input-end-side{display:flex;align-items:center;justify-content:center}ax-conversation-input .ax-conversation-input .ax-conversation-input-start-side{padding-inline-end:.75rem}ax-conversation-input .ax-conversation-input .ax-conversation-input-main-side{flex:1 1 auto;display:flex;align-items:center;justify-content:center}ax-conversation-input .ax-conversation-input .ax-conversation-input-end-side{padding-inline-start:.75rem;gap:.5rem}ax-conversation-input .ax-conversation-input .ax-record-dot{display:inline-flex;width:.5rem;height:.5rem;background-color:rgba(var(--ax-color-danger-500));border-radius:999rem;margin-inline-end:.5rem}ax-conversation-input .ax-conversation-input .ax-blob{animation:pulse .75s infinite}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 rgba(var(--ax-color-danger-500),.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(var(--ax-color-danger-500),0)}to{transform:scale(1);box-shadow:0 0 rgba(var(--ax-color-danger-500),0)}}ax-conversation-input .ax-conversation-input .ax-attach-input{opacity:0;width:0;height:0;position:absolute}ax-conversation-input .ax-emoji-container{padding:.75rem;gap:.5rem;display:grid;grid-template-columns:repeat(7,1fr)}ax-conversation-input .ax-emoji-container>div{padding:.25rem;cursor:pointer;border-radius:var(--ax-rounded-border-default)}ax-conversation-input .ax-emoji-container>div:hover{background-color:rgba(var(--ax-color-on-surface))}ax-conversation-input .ax-editor-reply-container{display:flex;padding:.75rem;justify-content:space-between}ax-conversation-input .ax-reply-start{display:flex;align-items:center}ax-conversation-input .ax-cursor-pointer{cursor:pointer}ax-conversation-input .ax-reply-types{display:flex;align-items:center}ax-conversation-input .ax-reply-start i{margin-inline-end:1rem}ax-conversation-input .ax-reply-start img,ax-conversation-input .ax-reply-start video{margin-inline-end:.5rem;height:1.75rem;width:1.75rem}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (replyChat()) {\n  <div class=\"ax-editor-reply-container ax-editor-container ax-look-{{ look }}\">\n    <div class=\"ax-reply-start\">\n      <i class=\"fa-solid fa-reply\"></i>\n      @switch (replyChat().type) {\n        @case ('text') {\n          <p>\n            {{ replyChat().content }}\n          </p>\n        }\n        @case ('image') {\n          <div class=\"ax-reply-types\">\n            <img src=\"{{ replyChat().content }}\" alt=\"\" />\n            {{ replyChat().type }}\n          </div>\n        }\n        @case ('video') {\n          <div class=\"ax-reply-types\">\n            <video src=\"{{ replyChat().content }}\" alt=\"\"></video>\n            {{ replyChat().type }}\n          </div>\n        }\n        @case ('file') {\n          <div class=\"ax-reply-types\">\n            <i class=\"fa-regular fa-folder-open\"></i>\n            {{ replyChat().name }}\n          </div>\n        }\n        @default {\n          <p>\n            {{ replyChat().type }}\n          </p>\n        }\n      }\n    </div>\n    <i (click)=\"closeReplyHandler()\" class=\"fa-solid fa-xmark ax-cursor-pointer\"></i>\n  </div>\n}\n\n<div class=\"ax-conversation-input ax-editor-container ax-look-{{ look }}\" [class.ax-state-recording]=\"recording()\">\n  @if (recording()) {\n    <div class=\"ax-conversation-input-start-side\">\n      <span class=\"ax-record-dot\"></span>\n      <span>{{ recordingService.timer() }}</span>\n    </div>\n    <div class=\"ax-conversation-input-main-side\">\n      <ax-button\n        class=\"ax-sm\"\n        look=\"blank\"\n        color=\"primary\"\n        [text]=\"'cancel' | translate | async\"\n        (onClick)=\"handleCancelRecordingClick()\"\n      ></ax-button>\n    </div>\n    <div class=\"ax-conversation-input-end-side\">\n      <ax-button look=\"solid\" color=\"danger\" class=\"ax-blob ax-sm\" (onClick)=\"handleSendVoiceClick()\">\n        <ax-icon>\n          <i class=\"ax-icon ax-icon-send\"></i>\n        </ax-icon>\n      </ax-button>\n    </div>\n  } @else {\n    <div class=\"ax-conversation-input-start-side\">\n      <ax-button look=\"blank\" class=\"ax-sm\">\n        <ax-icon>\n          <i class=\"ax-icon ax-icon-emoji\"></i>\n        </ax-icon>\n        <ax-dropdown-panel>\n          <ng-container>\n            <div class=\"ax-emoji-container\">\n              <div>\u26A0\uFE0F</div>\n              <div>\u27A1\uFE0F</div>\n              <div>\uD83D\uDD03</div>\n              <div>\uD83D\uDD37</div>\n              <div>\uD83E\uDD1A</div>\n              <div>\uD83D\uDE02</div>\n              <div>\uD83D\uDE0A</div>\n            </div>\n          </ng-container>\n        </ax-dropdown-panel>\n      </ax-button>\n    </div>\n\n    <textarea\n      class=\"ax-conversation-input-main-side\"\n      oninput='this.style.height = \"\";this.style.height = this.scrollHeight + \"px\"'\n      type=\"text\"\n      rows=\"1\"\n      [id]=\"id\"\n      [name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.maxlength]=\"maxLength()\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [tabindex]=\"tabIndex\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [ngModelOptions]=\"{ updateOn: _updateOn }\"\n      (keydown)=\"emitOnKeydownEvent($event)\"\n      (keyup)=\"emitOnKeyupEvent($event)\"\n      (keypress)=\"emitOnKeypressEvent($event)\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n    >\n    </textarea>\n\n    <div class=\"ax-conversation-input-end-side\">\n      @if (!value) {\n        <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"handleAttachClick()\">\n          <ax-icon>\n            <i class=\"ax-icon ax-icon-attach\"></i>\n          </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"handleRecordClick()\">\n          <ax-icon>\n            <i class=\"ax-icon ax-icon-mic\"></i>\n          </ax-icon>\n        </ax-button>\n        <input multiple #inputFile [accept]=\"acceptFileType()\" type=\"file\" class=\"ax-attach-input\" (change)=\"handleChangeFile($event)\" />\n      } @else {\n        <ax-button look=\"solid\" color=\"primary\" class=\"ax-sm\" (onClick)=\"handleSendClick()\">\n          <ax-icon>\n            <i class=\"ax-icon ax-icon-send\"></i>\n          </ax-icon>\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ax-dark .ax-conversation-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-primary-200));border-color:rgba(var(--ax-color-primary-200))}ax-conversation-input{width:100%}ax-conversation-input .ax-conversation-input{display:flex;align-items:flex-end;position:relative;resize:vertical;height:auto;padding:.5rem;font-size:.875rem}ax-conversation-input .ax-conversation-input.ax-state-recording{align-items:center;display:grid;grid-template-columns:repeat(3,1fr)}ax-conversation-input .ax-conversation-input.ax-state-recording .ax-conversation-input-start-side{justify-content:flex-start}ax-conversation-input .ax-conversation-input.ax-state-recording .ax-conversation-input-end-side{justify-content:flex-end}ax-conversation-input .ax-conversation-input>textarea{font-size:.875rem;background-color:transparent;max-height:10rem;min-height:1.5rem;line-height:2rem;flex:1 1 auto;height:auto;resize:none}ax-conversation-input .ax-conversation-input>textarea:focus,ax-conversation-input .ax-conversation-input>textarea:focus-visible{outline:unset}ax-conversation-input .ax-conversation-input .ax-conversation-input-start-side,ax-conversation-input .ax-conversation-input .ax-conversation-input-end-side{display:flex;align-items:center;justify-content:center}ax-conversation-input .ax-conversation-input .ax-conversation-input-start-side{padding-inline-end:.75rem}ax-conversation-input .ax-conversation-input .ax-conversation-input-main-side{flex:1 1 auto;display:flex;align-items:center;justify-content:center}ax-conversation-input .ax-conversation-input .ax-conversation-input-end-side{padding-inline-start:.75rem;gap:.5rem}ax-conversation-input .ax-conversation-input .ax-record-dot{display:inline-flex;width:.5rem;height:.5rem;background-color:rgba(var(--ax-color-danger-500));border-radius:999rem;margin-inline-end:.5rem}ax-conversation-input .ax-conversation-input .ax-blob{animation:pulse .75s infinite}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 rgba(var(--ax-color-danger-500),.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(var(--ax-color-danger-500),0)}to{transform:scale(1);box-shadow:0 0 rgba(var(--ax-color-danger-500),0)}}ax-conversation-input .ax-conversation-input .ax-attach-input{opacity:0;width:0;height:0;position:absolute}ax-conversation-input .ax-emoji-container{padding:.75rem;gap:.5rem;display:grid;grid-template-columns:repeat(7,1fr)}ax-conversation-input .ax-emoji-container>div{padding:.25rem;cursor:pointer;border-radius:var(--ax-rounded-border-default)}ax-conversation-input .ax-emoji-container>div:hover{background-color:rgba(var(--ax-color-on-surface))}ax-conversation-input .ax-editor-reply-container{display:flex;padding:.75rem;justify-content:space-between}ax-conversation-input .ax-reply-start{display:flex;align-items:center}ax-conversation-input .ax-cursor-pointer{cursor:pointer}ax-conversation-input .ax-reply-types{display:flex;align-items:center}ax-conversation-input .ax-reply-start i{margin-inline-end:1rem}ax-conversation-input .ax-reply-start img,ax-conversation-input .ax-reply-start video{margin-inline-end:.5rem;height:1.75rem;width:1.75rem}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationInputComponent, decorators: [{
             type: Component,

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

@@ -60,7 +60,7 @@ export class AXConversationMessageComponent extends MXBaseComponent {
         this.conversationService.replyId.set(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (chatMessage().fromId) {\n  <ax-avatar [size]=\"36\"></ax-avatar>\n}\n\n@if (isOwn) {\n  <i (click)=\"replyHandler(chatMessage().id)\" class=\"fa-solid fa-reply ax-cursor-pointer\"></i>\n}\n\n<div class=\"ax-message-content\" [class.ax-state-own]=\"!chatMessage().fromId\" [class.ax-state-other]=\"chatMessage().fromId\">\n  <ng-template [cdkPortalOutlet]=\"_portal\" (attached)=\"_handleAttached($event)\"></ng-template>\n\n  <div class=\"ax-chat-message-status\">\n    <div class=\"ax-message-prefix\"></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\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        <ax-content> </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        </ax-button-item-list>\n      </div>\n    </ax-popover>\n  </ax-button>\n}\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-reply-color: rgba(var(--ax-color-primary-200));--ax-message-own-reply-color-fore: rgba(var(--ax-color-primary-800));--ax-message-other-reply-color: rgba(var(--ax-color-primary-700));--ax-message-other-reply-color-fore: white;--ax-message-border-color: rgba(var(--ax-color-primary-800));--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-message-reply-container{border-left:.3rem solid var(--ax-message-border-color);border-radius:.75rem;padding:.75rem;margin-bottom:.25rem}ax-conversation-message .ax-message-reply-container .file{display:flex;align-items:center}ax-conversation-message .ax-message-reply-container .file i{margin-inline-end:.5rem}ax-conversation-message .ax-message-reply-container img,ax-conversation-message .ax-message-reply-container video{width:6rem}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-own .ax-message-reply-container{background-color:var(--ax-message-own-reply-color);color:var(--ax-message-own-reply-color-fore)}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-state-other .ax-message-reply-container{background-color:var(--ax-message-other-reply-color);color:var(--ax-message-other-reply-color-fore)}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}ax-conversation-message .ax-cursor-pointer{cursor:pointer}ax-conversation-message .ax-rounded{border-radius:.75rem}ax-conversation-message .ax-message-content p{padding:.75rem;color:rgba(var(--ax-color-primary-fore))}@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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { 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"], outputs: ["sizeChange"] }, { 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: "18.0.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, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (chatMessage().fromId) {\n  <ax-avatar [size]=\"36\"></ax-avatar>\n}\n\n@if (isOwn) {\n  <i (click)=\"replyHandler(chatMessage().id)\" class=\"fa-solid fa-reply ax-cursor-pointer\"></i>\n}\n\n<div class=\"ax-message-content\" [class.ax-state-own]=\"!chatMessage().fromId\" [class.ax-state-other]=\"chatMessage().fromId\">\n  <ng-template [cdkPortalOutlet]=\"_portal\" (attached)=\"_handleAttached($event)\"></ng-template>\n\n  <div class=\"ax-chat-message-status\">\n    <div class=\"ax-message-prefix\"></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\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        <ax-content> </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        </ax-button-item-list>\n      </div>\n    </ax-popover>\n  </ax-button>\n}\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-reply-color: rgba(var(--ax-color-primary-200));--ax-message-own-reply-color-fore: rgba(var(--ax-color-primary-800));--ax-message-other-reply-color: rgba(var(--ax-color-primary-700));--ax-message-other-reply-color-fore: white;--ax-message-border-color: rgba(var(--ax-color-primary-800));--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-message-reply-container{border-left:.3rem solid var(--ax-message-border-color);border-radius:.75rem;padding:.75rem;margin-bottom:.25rem}ax-conversation-message .ax-message-reply-container .file{display:flex;align-items:center}ax-conversation-message .ax-message-reply-container .file i{margin-inline-end:.5rem}ax-conversation-message .ax-message-reply-container img,ax-conversation-message .ax-message-reply-container video{width:6rem}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-own .ax-message-reply-container{background-color:var(--ax-message-own-reply-color);color:var(--ax-message-own-reply-color-fore)}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-state-other .ax-message-reply-container{background-color:var(--ax-message-other-reply-color);color:var(--ax-message-other-reply-color-fore)}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}ax-conversation-message .ax-cursor-pointer{cursor:pointer}ax-conversation-message .ax-rounded{border-radius:.75rem}ax-conversation-message .ax-message-content p{padding:.75rem;color:rgba(var(--ax-color-primary-fore))}@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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { 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"], outputs: ["sizeChange"] }, { 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: "18.0.2", ngImport: i0, type: AXConversationMessageComponent, decorators: [{
             type: Component,

package/esm2022/data-pager/lib/data-pager-next-buttons.components.mjs

@@ -37,7 +37,7 @@ export class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
     <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the last page" (onClick)="_emitOnLastPageClick($event)">
       <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-first-page': rtl, 'ax-icon-last-page': !rtl }"></ax-icon>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
             type: Component,

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

@@ -88,7 +88,7 @@ export class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
     >
       <ax-icon class="ax-icon ax-icon-last-page ax-text-xl"></ax-icon>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
             type: Component,

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

@@ -49,7 +49,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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { 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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { 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: "18.0.2", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
             type: Component,

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

@@ -37,7 +37,7 @@ export class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
         }"
       ></ax-icon>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXDataPagerPrevButtonsComponent, decorators: [{
             type: Component,

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

@@ -267,7 +267,7 @@ export class AXDataTableComponent extends AXBaseDataTable {
                 useExisting: AXDataTableComponent,
             },
             AXUnsubscriber,
-        ], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "dataPager", first: true, predicate: ["dataPager"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n@if (!displayedRows().length) {\n  <div class=\"ax-data-table-empty-data\">\n    @if (emptyTemplate) {\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n    } @else {\n      <span>No Record Found!</span>\n    }\n  </div>\n}\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n        @if (rowTemplate) {\n          <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: rowIndex } }\"> </ng-container>\n        } @else {\n          <tr\n            [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n            [attr.data-index]=\"rowIndex\"\n            [class.ax-state-selected]=\"selectedRows.includes(row)\"\n            style.height=\"{{ itemHeight }}px\"\n            style.max-height=\"{{ itemHeight }}px\"\n            (click)=\"handleRowClick($event, row)\"\n          >\n            @for (c of startFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-start]=\"true\"\n                [class.isLast]=\"c['isLastFixedColumn']\"\n                [style.--sticky-start]=\"c['stickyStart']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            @for (c of normalColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            <td></td>\n            @for (c of endFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-end]=\"true\"\n                [class.isFirst]=\"c['isFirstFixedColumn']\"\n                [style.--sticky-end]=\"c['stickyEnd']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n\n      <tr class=\"empty-row\"></tr>\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ax-data-pager\n      #dataPager\n      [displayMode]=\"'custom'\"\n      (onChanged)=\"onPageChanged($event)\"\n      [total]=\"dataSource.totalCount\"\n      [size]=\"dataSource.pageSize\"\n      [isLoading]=\"isLoading()\"\n    >\n      <ax-prefix class=\"ax-data-table-numeric-paging\">\n        <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n        <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n      </ax-prefix>\n      <ax-prefix class=\"ax-data-table-input-paging\">\n        <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n        <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n        <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n      </ax-prefix>\n      <ax-suffix class=\"ax-data-table-info\">\n        <ax-data-pager-info> </ax-data-pager-info>\n        <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n          <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n        </ax-button>\n      </ax-suffix>\n    </ax-data-pager>\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: [".ax-dark ax-data-table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-color-neutral-500));text-align:center}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px rgba(var(--ax-color-border-default))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-color-surface));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tbody .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-data-table-wrapper table tfoot tr td{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:0;border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-color-border-default)),0 -1px rgba(var(--ax-color-border-default))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { 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" }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i6.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: i6.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i6.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i6.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i6.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i6.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i6.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "dataPager", first: true, predicate: ["dataPager"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n@if (!displayedRows().length) {\n  <div class=\"ax-data-table-empty-data\">\n    @if (emptyTemplate) {\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n    } @else {\n      <span>No Record Found!</span>\n    }\n  </div>\n}\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n        @if (rowTemplate) {\n          <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: rowIndex } }\"> </ng-container>\n        } @else {\n          <tr\n            [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n            [attr.data-index]=\"rowIndex\"\n            [class.ax-state-selected]=\"selectedRows.includes(row)\"\n            style.height=\"{{ itemHeight }}px\"\n            style.max-height=\"{{ itemHeight }}px\"\n            (click)=\"handleRowClick($event, row)\"\n          >\n            @for (c of startFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-start]=\"true\"\n                [class.isLast]=\"c['isLastFixedColumn']\"\n                [style.--sticky-start]=\"c['stickyStart']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            @for (c of normalColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            <td></td>\n            @for (c of endFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-end]=\"true\"\n                [class.isFirst]=\"c['isFirstFixedColumn']\"\n                [style.--sticky-end]=\"c['stickyEnd']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n\n      <tr class=\"empty-row\"></tr>\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ax-data-pager\n      #dataPager\n      [displayMode]=\"'custom'\"\n      (onChanged)=\"onPageChanged($event)\"\n      [total]=\"dataSource.totalCount\"\n      [size]=\"dataSource.pageSize\"\n      [isLoading]=\"isLoading()\"\n    >\n      <ax-prefix class=\"ax-data-table-numeric-paging\">\n        <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n        <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n      </ax-prefix>\n      <ax-prefix class=\"ax-data-table-input-paging\">\n        <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n        <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n        <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n      </ax-prefix>\n      <ax-suffix class=\"ax-data-table-info\">\n        <ax-data-pager-info> </ax-data-pager-info>\n        <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n          <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n        </ax-button>\n      </ax-suffix>\n    </ax-data-pager>\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: [".ax-dark ax-data-table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-color-neutral-500));text-align:center}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px rgba(var(--ax-color-border-default))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-color-surface));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tbody .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-data-table-wrapper table tfoot tr td{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:0;border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-color-border-default)),0 -1px rgba(var(--ax-color-border-default))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { 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" }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i6.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: i6.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i6.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i6.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i6.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i6.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i6.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,