@acorex/platform 21.0.0-next.63 → 21.0.0-next.64

package/fesm2022/acorex-platform-layout-components.mjs

@@ -1988,7 +1988,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n    <!-- Category Filter Side Panel -->\n    @if (config().categoryFilter?.enabled) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().categoryFilter!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"ax-w-full ax-mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <!-- TODO: needs to show checkbox for single selection mode too -->\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-h-[50vh]\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\" (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\" (onRowDbClick)=\"handleRowDbClick($event)\">\n        @if (config().selectionMode === 'multiple') {\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n\n        @for (col of config().columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if ((config().allowCreate === 'full' || config().allowCreate === 'quick') && config().onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().allowCreate === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (config().selectionMode === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area .ax-data-table{flex:1;min-height:0}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n    <!-- Category Filter Side Panel -->\n    @if (config().categoryFilter?.enabled) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().categoryFilter!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"ax-w-full ax-mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <!-- TODO: needs to show checkbox for single selection mode too -->\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-h-[50vh]\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\" (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\" (onRowDbClick)=\"handleRowDbClick($event)\">\n        @if (config().selectionMode === 'multiple') {\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n\n        @for (col of config().columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if ((config().allowCreate === 'full' || config().allowCreate === 'quick') && config().onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().allowCreate === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (config().selectionMode === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area .ax-data-table{flex:1;min-height:0}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
             type: Component,
@@ -6534,29 +6534,38 @@ class AXPQuerySortsComponent {
         this.sortQueries = signal([], { ...(ngDevMode ? { debugName: "sortQueries" } : /* istanbul ignore next */ {}), equal: isEqual });
         this.initialSortQueries = input([], ...(ngDevMode ? [{ debugName: "initialSortQueries" }] : /* istanbul ignore next */ []));
         this.sortQueriesChange = output();
-        // Recompute merged sort queries whenever inputs change
+        // Sync from parent while preserving active-sort order (e.g. column click order).
         effect(() => {
             const initialQueries = this.initialSortQueries();
             const definitions = this.sortDefinitions();
-            const existingQueriesMap = new Map(initialQueries.map((q) => [q.name, q]));
-            const mergedQueries = definitions.map((def) => {
-                const existingQuery = existingQueriesMap.get(def.name);
-                return existingQuery ? { ...def, dir: existingQuery.dir } : { ...def };
-            });
+            const definitionsMap = new Map(definitions.map((def) => [def.name, def]));
+            const included = new Set();
+            const mergedQueries = [];
+            for (const query of initialQueries) {
+                const definition = definitionsMap.get(query.name);
+                if (!definition) {
+                    continue;
+                }
+                mergedQueries.push({ ...definition, dir: query.dir });
+                included.add(query.name);
+            }
+            for (const definition of definitions) {
+                if (!included.has(definition.name)) {
+                    mergedQueries.push({ ...definition });
+                }
+            }
             this.sortQueries.set(mergedQueries);
         });
-        effect(() => {
-            this.sortQueriesChange.emit(this.sortQueries().filter((q) => q.dir !== undefined));
-        });
+    }
+    emitActiveSortQueries() {
+        this.sortQueriesChange.emit(this.sortQueries().filter((q) => q.dir !== undefined));
     }
     drop(event) {
-        const sd = this.sortDefinitions();
-        moveItemInArray(sd, event.previousIndex, event.currentIndex);
-        this.sortDefinitions.set([...sd]);
-        // Reorder sortQueries based on new sortDefinitions order
-        const sq = this.sortQueries();
+        const sq = [...this.sortQueries()];
         moveItemInArray(sq, event.previousIndex, event.currentIndex);
-        this.sortQueries.set([...sq]);
+        this.sortQueries.set(sq);
+        this.sortDefinitions.set([...sq]);
+        this.emitActiveSortQueries();
     }
     getSortDirection(item) {
         return this.sortQueries().find((i) => i.name === item.name)?.dir;
@@ -6572,9 +6581,10 @@ class AXPQuerySortsComponent {
                 return field;
             });
         });
+        this.emitActiveSortQueries();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortQueries(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
             type: Component,
@@ -6587,7 +6597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         CommonModule,
                         AXDecoratorModule,
                         AXButtonModule,
-                    ], template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortQueries(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { sortDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDefinitions", required: false }] }, { type: i0.Output, args: ["sortDefinitionsChange"] }], initialSortQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSortQueries", required: false }] }], sortQueriesChange: [{ type: i0.Output, args: ["sortQueriesChange"] }] } });
 
 //#region ----   Component Definition   ----