@acorex/components 19.1.0-next.0 → 19.1.0-next.2

package/color-palette/lib/color-palette-picker.component.d.ts

@@ -82,8 +82,8 @@ export declare class AXColorPalettePickerComponent extends MXBaseComponent {
      *  @ignore
      */
     private get __hostClass();
-    protected handleMove(event: MouseEvent): void;
-    protected handleDown(event: MouseEvent): void;
+    protected handleMove(event: MouseEvent | TouchEvent): void;
+    protected handleDown(event: MouseEvent | TouchEvent): void;
     protected handleUp(): void;
     private setColor;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalettePickerComponent, never>;

package/common/lib/classes/datasource.class.d.ts

@@ -41,6 +41,10 @@ export interface AXDataSourceChangedEvent<T = unknown> {
     totalPages: number;
     page: number;
 }
+export interface AXDataSourceItemExpandedEvent<T = unknown> {
+    expandedItem: T;
+    children: Array<T>;
+}
 export declare class AXDataSource<T = unknown> {
     config: AXDataSourceConfig<T>;
     useCache: boolean;
@@ -57,11 +61,13 @@ export declare class AXDataSource<T = unknown> {
     private _query;
     get query(): AXDataSourceQuery;
     onChanged: Subject<AXDataSourceChangedEvent<T>>;
+    onItemExpanded: Subject<AXDataSourceItemExpandedEvent<T>>;
     onLoadingChanged: Subject<boolean>;
     private _isLoading;
     get isLoading(): boolean;
     constructor(config: AXDataSourceConfig<T>);
     private load;
+    getItemsByFilter(filter: AXDataSourceFilterOption): Promise<AXDataSourceCallbackResult<T>>;
     private setLoadingState;
     setPage(page: number): void;
     setPageSize(pageSize: number): void;

package/data-pager/index.d.ts

@@ -1,7 +1,7 @@
 export * from './lib/data-pager-base.component';
 export * from './lib/data-pager-info.component';
 export * from './lib/data-pager-input-selector.component';
-export * from './lib/data-pager-next-buttons.components';
+export * from './lib/data-pager-next-buttons.component';
 export * from './lib/data-pager-numeric-selector.component';
 export * from './lib/data-pager-pagesize-dropdown.component';
 export * from './lib/data-pager-prev-buttons.component';

package/data-pager/lib/data-pager-numeric-selector.component.d.ts

@@ -15,6 +15,14 @@ export declare class AXDataPagerNumericSelectorComponent extends AXDataPagerChil
      *  @ignore
      */
     private _displayCount;
+    /**
+     *  @ignore
+     */
+    protected rtl: boolean;
+    /**
+     *  @ignore
+     */
+    ngOnInit(): void;
     /**
      *  @ignore
      */

package/data-pager/lib/data-pager.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./data-pager.component";
-import * as i2 from "./data-pager-next-buttons.components";
+import * as i2 from "./data-pager-next-buttons.component";
 import * as i3 from "./data-pager-prev-buttons.component";
 import * as i4 from "./data-pager-pagesize-dropdown.component";
 import * as i5 from "./data-pager-numeric-selector.component";

package/data-table/index.d.ts

@@ -3,6 +3,7 @@ export * from './lib/columns/data-table-column';
 export * from './lib/columns/data-table-column-resizable.directive';
 export * from './lib/columns/data-text-column.component';
 export * from './lib/columns/row-command-column.component';
+export * from './lib/columns/row-expand-column.component';
 export * from './lib/columns/row-index-column.component';
 export * from './lib/columns/row-select-column.component';
 export * from './lib/data-table.module';

package/data-table/lib/base-data-table.class.d.ts

@@ -10,15 +10,26 @@ export interface AXDataTableRowClick extends AXEvent {
 export interface AXColumnsOrderChangedEvent extends AXEvent {
     data?: any;
 }
+export interface onColumnSizeChangedEvent extends AXEvent {
+    type: 'start' | 'end';
+    data?: any;
+}
 export interface AXDataTableRowDbClick extends AXDataTableRowClick {
 }
 export declare abstract class AXBaseDataTable extends MXBaseComponent {
     dataSource: AXDataSource<unknown>;
+    /**
+     * For handle nested rows.
+     *
+     * @defaultValue `parentId`
+     */
+    parentField: string;
     selectedRowsChange: EventEmitter<unknown[]>;
-    private getDataSourceKey;
+    getDataSourceKey(): string;
     private _selectedRows;
     get selectedRows(): unknown[];
     set selectedRows(v: unknown[]);
+    expandRow(row: any): Promise<void>;
     selectRows(...rows: unknown[]): void;
     unSelectRows(...rows: unknown[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXBaseDataTable, never>;

package/data-table/lib/columns/data-text-column.component.d.ts

@@ -8,10 +8,21 @@ import * as i0 from "@angular/core";
  * @category Components
  */
 export declare class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
+    private grid;
+    protected loadingRow: import("@angular/core").WritableSignal<any>;
+    protected initialWidth: string;
     /**
      * Defines the data field to display in the column.
      */
     dataField: string;
+    /**
+     * Controls the display of an expandable arrow icon beside the cell text.
+     * If set to `true`, an arrow icon is shown next to the text, indicating expandability.
+     *
+     * @defaultValue false
+     *
+     */
+    expandHandler: boolean;
     /**
      * Toggles text wrapping in the cell.
      *
@@ -61,6 +72,10 @@ export declare class AXDataTableTextColumnComponent extends AXDataTableColumnCom
      * Indicates whether loading functionality is enabled.
      */
     get loadingEnabled(): boolean;
+    /**
+     *  @ignore
+     */
+    protected handleExpandRow(row: any): Promise<void>;
     /**
      * Generates a unique name based on the `dataField` value.
      */
@@ -71,13 +86,13 @@ export declare class AXDataTableTextColumnComponent extends AXDataTableColumnCom
     private formatService;
     protected getDisplayText(rowData: unknown, dataField: string): string;
     /**
-   * Defines the format string for displaying values in the component.
-   */
+     * Defines the format string for displaying values in the component.
+     */
     format: string;
     /**
-   * Provides additional options for formatting values.
-   */
+     * Provides additional options for formatting values.
+     */
     formatOptions: AXFormatOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableTextColumnComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableTextColumnComponent, "ax-text-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "allowResizing": { "alias": "allowResizing"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "dataField": { "alias": "dataField"; "required": false; }; "wrapText": { "alias": "wrapText"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableTextColumnComponent, "ax-text-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "allowResizing": { "alias": "allowResizing"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "dataField": { "alias": "dataField"; "required": false; }; "expandHandler": { "alias": "expandHandler"; "required": false; }; "wrapText": { "alias": "wrapText"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; }, {}, never, never, false, never>;
 }

package/data-table/lib/columns/row-expand-column.component.d.ts

@@ -0,0 +1,50 @@
+import { TemplateRef } from '@angular/core';
+import { AXDataTableColumnComponent } from './data-table-column';
+import * as i0 from "@angular/core";
+/**
+ * Column component that provides checkboxes for row selection in a data table.
+ *
+ * @category Components
+ */
+export declare class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
+    private grid;
+    protected loadingRow: import("@angular/core").WritableSignal<any>;
+    /**
+     *  @ignore
+     */
+    private _cellTemplate;
+    /**
+     * Gets the template used to render cells in the column.
+     */
+    get renderCellTemplate(): TemplateRef<unknown>;
+    /**
+     *  @ignore
+     */
+    private _contentHeaderTemplate;
+    /**
+     * Gets the template used to render the column header.
+     */
+    get renderHeaderTemplate(): TemplateRef<unknown>;
+    /**
+     *  @ignore
+     */
+    private _contentFooterTemplate;
+    /**
+     * Gets the template used to render the column footer.
+     */
+    get renderFooterTemplate(): TemplateRef<unknown>;
+    /**
+     * Gets the unique identifier for the column.
+     */
+    get name(): string;
+    /**
+     *  @ignore
+     */
+    protected handleExpandRow(row: any): Promise<void>;
+    /**
+     * Indicates whether loading is enabled for the column.
+     */
+    get loadingEnabled(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXRowExpandColumnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXRowExpandColumnComponent, "ax-expand-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; }, {}, never, never, false, never>;
+}

package/data-table/lib/data-table/data-table.component.d.ts

@@ -1,7 +1,7 @@
 import { AXDataPagerChangedEvent } from '@acorex/components/data-pager';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { AfterViewInit, EventEmitter, OnInit, QueryList, Signal, TemplateRef, WritableSignal } from '@angular/core';
-import { AXBaseDataTable, AXColumnsOrderChangedEvent, AXDataTableRowClick, AXDataTableRowDbClick } from '../base-data-table.class';
+import { AXBaseDataTable, AXColumnsOrderChangedEvent, AXDataTableRowClick, AXDataTableRowDbClick, onColumnSizeChangedEvent } from '../base-data-table.class';
 import { AXDataTableColumnComponent } from '../columns/data-table-column';
 import * as i0 from "@angular/core";
 /**
@@ -194,6 +194,12 @@ export declare class AXDataTableComponent extends AXBaseDataTable implements OnI
      * @event onColumnsOrderChanged
      */
     onColumnsOrderChanged: EventEmitter<AXColumnsOrderChangedEvent>;
+    /**
+     * Emits when the order of columns changes.
+     *
+     * @event onColumnSizeChanged
+     */
+    onColumnSizeChanged: EventEmitter<onColumnSizeChangedEvent>;
     /**
      *  @ignore
      */
@@ -210,6 +216,7 @@ export declare class AXDataTableComponent extends AXBaseDataTable implements OnI
      *  @ignore
      */
     ngAfterViewInit(): void;
+    protected toggleExpanded(rows: any[], expandedItem: any, children: any[]): any[];
     /**
      *  @ignore
      */
@@ -273,5 +280,5 @@ export declare class AXDataTableComponent extends AXBaseDataTable implements OnI
      */
     private calculateStickyColumnsPositions;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; }, ["columns"], ["ax-header", "ax-footer"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "parentField": { "alias": "parentField"; "required": false; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; "onColumnSizeChanged": "onColumnSizeChanged"; }, ["columns"], ["ax-header", "ax-footer"], false, never>;
 }

package/data-table/lib/data-table.module.d.ts

@@ -4,23 +4,24 @@ import * as i2 from "./data-table/data-table.component";
 import * as i3 from "./columns/data-text-column.component";
 import * as i4 from "./columns/row-index-column.component";
 import * as i5 from "./columns/row-select-column.component";
-import * as i6 from "./columns/row-command-column.component";
-import * as i7 from "./columns/data-table-column-resizable.directive";
-import * as i8 from "@angular/common";
-import * as i9 from "@acorex/components/common";
-import * as i10 from "@angular/cdk/scrolling";
-import * as i11 from "@acorex/core/translation";
-import * as i12 from "@acorex/components/result";
-import * as i13 from "@acorex/components/loading";
-import * as i14 from "@acorex/components/decorators";
+import * as i6 from "./columns/row-expand-column.component";
+import * as i7 from "./columns/row-command-column.component";
+import * as i8 from "./columns/data-table-column-resizable.directive";
+import * as i9 from "@angular/common";
+import * as i10 from "@acorex/components/common";
+import * as i11 from "@angular/cdk/scrolling";
+import * as i12 from "@acorex/core/translation";
+import * as i13 from "@acorex/components/result";
+import * as i14 from "@acorex/components/loading";
 import * as i15 from "@acorex/components/skeleton";
 import * as i16 from "@acorex/components/button";
-import * as i17 from "@acorex/components/dropdown";
-import * as i18 from "@acorex/core/format";
-import * as i19 from "@acorex/components/data-pager";
-import * as i20 from "@angular/cdk/drag-drop";
+import * as i17 from "@acorex/components/decorators";
+import * as i18 from "@acorex/components/dropdown";
+import * as i19 from "@acorex/core/format";
+import * as i20 from "@acorex/components/data-pager";
+import * as i21 from "@angular/cdk/drag-drop";
 export declare class AXDataTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDataTableModule, [typeof i1.AXInfiniteScrollDataTableComponent, typeof i2.AXDataTableComponent, typeof i3.AXDataTableTextColumnComponent, typeof i4.AXRowIndexColumnComponent, typeof i5.AXRowSelectColumnComponent, typeof i6.AXRowCommandColumnComponent, typeof i6.AXRowDropdownCommandColumnComponent, typeof i7.AXDataTableColumnResizableDirective], [typeof i8.CommonModule, typeof i9.AXCommonModule, typeof i10.ScrollingModule, typeof i11.AXTranslationModule, typeof i12.AXResultModule, typeof i13.AXLoadingModule, typeof i14.AXDecoratorModule, typeof i15.AXSkeletonModule, typeof i16.AXButtonModule, typeof i17.AXDropdownModule, typeof i18.AXFormatModule, typeof i9.AXRippleDirective, typeof i19.AXDataPagerModule, typeof i20.CdkDropList, typeof i20.CdkDrag, typeof i20.CdkDragPlaceholder, typeof i20.CdkDragHandle], [typeof i1.AXInfiniteScrollDataTableComponent, typeof i2.AXDataTableComponent, typeof i3.AXDataTableTextColumnComponent, typeof i4.AXRowIndexColumnComponent, typeof i5.AXRowSelectColumnComponent, typeof i6.AXRowCommandColumnComponent, typeof i6.AXRowDropdownCommandColumnComponent, typeof i7.AXDataTableColumnResizableDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDataTableModule, [typeof i1.AXInfiniteScrollDataTableComponent, typeof i2.AXDataTableComponent, typeof i3.AXDataTableTextColumnComponent, typeof i4.AXRowIndexColumnComponent, typeof i5.AXRowSelectColumnComponent, typeof i6.AXRowExpandColumnComponent, typeof i7.AXRowCommandColumnComponent, typeof i7.AXRowDropdownCommandColumnComponent, typeof i8.AXDataTableColumnResizableDirective], [typeof i9.CommonModule, typeof i10.AXCommonModule, typeof i11.ScrollingModule, typeof i12.AXTranslationModule, typeof i13.AXResultModule, typeof i14.AXLoadingModule, typeof i15.AXSkeletonModule, typeof i16.AXButtonModule, typeof i17.AXDecoratorModule, typeof i18.AXDropdownModule, typeof i19.AXFormatModule, typeof i10.AXRippleDirective, typeof i20.AXDataPagerModule, typeof i21.CdkDropList, typeof i21.CdkDrag, typeof i21.CdkDragPlaceholder, typeof i21.CdkDragHandle], [typeof i1.AXInfiniteScrollDataTableComponent, typeof i2.AXDataTableComponent, typeof i3.AXDataTableTextColumnComponent, typeof i4.AXRowIndexColumnComponent, typeof i5.AXRowSelectColumnComponent, typeof i6.AXRowExpandColumnComponent, typeof i7.AXRowCommandColumnComponent, typeof i7.AXRowDropdownCommandColumnComponent, typeof i8.AXDataTableColumnResizableDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXDataTableModule>;
 }

package/fesm2022/acorex-components-color-palette.mjs

@@ -615,22 +615,34 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
     handleMove(event) {
         if (!this.changingColor())
             return;
-        this.setColor(event);
+        if (event instanceof MouseEvent) {
+            this.setColor(event.clientX, event.clientY);
+        }
+        else if (event instanceof TouchEvent) {
+            this.setColor(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+            event.preventDefault();
+        }
     }
     handleDown(event) {
         if (this._parent.disabled || this._parent.readonly)
             return;
-        this.setColor(event);
+        if (event instanceof MouseEvent) {
+            this.setColor(event.clientX, event.clientY);
+        }
+        else if (event instanceof TouchEvent) {
+            this.setColor(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+            event.preventDefault();
+        }
         this.changingColor.set(true);
     }
     handleUp() {
         this.changingColor.set(false);
     }
-    setColor(event) {
+    setColor(clientX, clientY) {
         const circleElement = this.circle().nativeElement;
         const parentStats = circleElement.parentElement.getBoundingClientRect();
-        const x = Math.max(0, Math.min(parentStats.width, event.clientX - parentStats.left));
-        const y = Math.max(0, Math.min(parentStats.height, event.clientY - parentStats.top));
+        const x = Math.max(0, Math.min(parentStats.width, clientX - parentStats.left));
+        const y = Math.max(0, Math.min(parentStats.height, clientY - parentStats.top));
         this.setColorByXY(x, y);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -640,7 +652,7 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
                 useExisting: AXColorPalettePickerComponent,
             },
             AXUnsubscriber,
-        ], viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div\n    class=\"ax-color-box-overlay\"\n    [style.background-color]=\"_bgColor\"\n    (mousemove)=\"handleMove($event)\"\n    (mousedown)=\"handleDown($event)\"\n    (mouseup)=\"handleUp()\"\n    (mouseleave)=\"handleUp()\"\n  >\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n\n<ax-range-slider\n  class=\"ax-color-box-gradient\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [mode]=\"'single'\"\n  [ngModel]=\"_gradient\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n  class=\"ax-color-box-transparent\"\n  [min]=\"0\"\n  [max]=\"1\"\n  [hasStep]=\"false\"\n  [ngModel]=\"_rgba.a\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div\n    class=\"ax-color-box-overlay\"\n    [style.background-color]=\"_bgColor\"\n    (mousemove)=\"handleMove($event)\"\n    (mousedown)=\"handleDown($event)\"\n    (mouseup)=\"handleUp()\"\n    (mouseleave)=\"handleUp()\"\n    (touchmove)=\"handleMove($event)\"\n    (touchstart)=\"handleDown($event)\"\n    (touchend)=\"handleUp()\"\n  >\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n\n<ax-range-slider\n  class=\"ax-color-box-gradient\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [mode]=\"'single'\"\n  [ngModel]=\"_gradient\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n  class=\"ax-color-box-transparent\"\n  [min]=\"0\"\n  [max]=\"1\"\n  [hasStep]=\"false\"\n  [ngModel]=\"_rgba.a\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
             type: Component,
@@ -650,7 +662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             useExisting: AXColorPalettePickerComponent,
                         },
                         AXUnsubscriber,
-                    ], standalone: false, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div\n    class=\"ax-color-box-overlay\"\n    [style.background-color]=\"_bgColor\"\n    (mousemove)=\"handleMove($event)\"\n    (mousedown)=\"handleDown($event)\"\n    (mouseup)=\"handleUp()\"\n    (mouseleave)=\"handleUp()\"\n  >\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n\n<ax-range-slider\n  class=\"ax-color-box-gradient\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [mode]=\"'single'\"\n  [ngModel]=\"_gradient\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n  class=\"ax-color-box-transparent\"\n  [min]=\"0\"\n  [max]=\"1\"\n  [hasStep]=\"false\"\n  [ngModel]=\"_rgba.a\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n" }]
+                    ], standalone: false, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div\n    class=\"ax-color-box-overlay\"\n    [style.background-color]=\"_bgColor\"\n    (mousemove)=\"handleMove($event)\"\n    (mousedown)=\"handleDown($event)\"\n    (mouseup)=\"handleUp()\"\n    (mouseleave)=\"handleUp()\"\n    (touchmove)=\"handleMove($event)\"\n    (touchstart)=\"handleDown($event)\"\n    (touchend)=\"handleUp()\"\n  >\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n\n<ax-range-slider\n  class=\"ax-color-box-gradient\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [mode]=\"'single'\"\n  [ngModel]=\"_gradient\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n  class=\"ax-color-box-transparent\"\n  [min]=\"0\"\n  [max]=\"1\"\n  [hasStep]=\"false\"\n  [ngModel]=\"_rgba.a\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n" }]
         }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
                     type: Inject,
                     args: [AXColorPaletteParentComponent]