@acorex/platform 19.3.0-next.2 → 19.3.0-next.3

package/fesm2022/{acorex-platform-themes-default-entity-master-list-view.component-BqMlSX6b.mjs → acorex-platform-themes-default-entity-master-list-view.component-CuyWAi6X.mjs}

@@ -4,7 +4,7 @@ import { AXDataTableModule } from '@acorex/components/data-table';
 import { AXDrawerModule } from '@acorex/components/drawer';
 import * as i1$1 from '@acorex/core/platform';
 import * as i0 from '@angular/core';
-import { inject, input, signal, ViewEncapsulation, Component, EventEmitter, effect, Output, Input, viewChild, linkedSignal, untracked, ViewChildren, ChangeDetectionStrategy, computed } from '@angular/core';
+import { inject, input, viewChild, signal, ViewEncapsulation, Component, EventEmitter, effect, Output, Input, linkedSignal, untracked, ViewChildren, ChangeDetectionStrategy, computed } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import * as i5 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
@@ -62,6 +62,7 @@ class AXPEntityCategoryComponent {
         this.entityResolver = inject(AXPEntityResolver);
         this.translate = inject(AXTranslationService);
         this.vm = input.required();
+        this.tree = viewChild('tree');
         this.searchValue = input('');
         this.isLoading = signal(true);
         this.basicQueryEvent = {
@@ -129,6 +130,8 @@ class AXPEntityCategoryComponent {
         this.isLoading.set(false);
     }
     async handleCollapseChanged(e) {
+        debugger;
+        this.tree()?.setNodeLoading(e.data.id, true);
         const event = {
             ...this.basicQueryEvent,
             filter: {
@@ -144,6 +147,7 @@ class AXPEntityCategoryComponent {
             ...i,
             children: prev[0].children.map((ti) => (ti.id === e.data.id ? { ...ti, children: children.items } : ti)),
         })));
+        this.tree()?.setNodeLoading(e.data.id, false);
     }
     async getCategoryEntityDef() {
         const [module, entity] = this.vm().entityDef.category?.entity?.split('.') || [];
@@ -175,7 +179,7 @@ class AXPEntityCategoryComponent {
         this.vm().dataSource.refresh();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPEntityCategoryComponent, isStandalone: true, selector: "axp-entity-category", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- <ax-tree-view [items]=\"treeItems()\"></ax-tree-view> -->\n\n<axp-layout-header>\n  <axp-layout-title>{{ vm().entityDef.category?.title || 'category' | translate | async }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box\n      (onValueChanged)=\"handleCategorySearchChange($event)\"\n      [delayTime]=\"300\"\n      [placeholder]=\"'search.placeholder' | translate | async\"\n    >\n    </ax-search-box>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if(isLoading()){\n  <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n  </div>\n  }@else if (treeItems()[0].children.length) {\n  <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n    <ax-tree-view\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n      [showCheckbox]=\"false\"\n      [itemTemplate]=\"itemTemplate\"\n      #treeRef\n      [textField]=\"vm().entityDef.category?.textField || 'title'\"\n      [valueField]=\"vm().entityDef.category?.valueField || 'id'\"\n      [expandedField]=\"'expand'\"\n      [items]=\"treeItems()\"\n    >\n    </ax-tree-view>\n  </div>\n  }@else {\n  <div class=\"ax-flex ax-items-center ax-justify-center\">\n    <span class=\"ax-text-center\"> No Record Found! </span>\n  </div>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n    {{ item.title }}\n  </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: i3$1.AXTreeViewComponent, selector: "ax-tree-view", inputs: ["items", "showCheckbox", "selectionMode", "selectionBehavior", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "itemTemplate", "expandOn"], outputs: ["onSelectionChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer,    axp-page-header,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-container,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPEntityCategoryComponent, isStandalone: true, selector: "axp-entity-category", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- <ax-tree-view [items]=\"treeItems()\"></ax-tree-view> -->\n\n<axp-layout-header>\n  <axp-layout-title>{{ vm().entityDef.category?.title || 'category' | translate | async }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box\n      (onValueChanged)=\"handleCategorySearchChange($event)\"\n      [delayTime]=\"300\"\n      [placeholder]=\"'search.placeholder' | translate | async\"\n    >\n    </ax-search-box>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if(isLoading()){\n  <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n  </div>\n  }@else if (treeItems()[0].children.length) {\n  <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n    <ax-tree-view\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n      [showCheckbox]=\"false\"\n      [itemTemplate]=\"itemTemplate\"\n      #treeRef\n      [textField]=\"vm().entityDef.category?.textField || 'title'\"\n      [valueField]=\"vm().entityDef.category?.valueField || 'id'\"\n      [expandedField]=\"'expand'\"\n      [items]=\"treeItems()\"\n      #tree\n    >\n    </ax-tree-view>\n  </div>\n  }@else {\n  <div class=\"ax-flex ax-items-center ax-justify-center\">\n    <span class=\"ax-text-center\"> No Record Found! </span>\n  </div>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n    {{ item.title }}\n  </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: i3$1.AXTreeViewComponent, selector: "ax-tree-view", inputs: ["items", "showCheckbox", "selectionMode", "selectionBehavior", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer,    axp-page-header,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-container,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityCategoryComponent, decorators: [{
             type: Component,
@@ -189,7 +193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXPThemeLayoutHeaderComponent,
                         AXPThemeLayoutToolbarComponent,
                         AXTranslationModule,
-                    ], template: "<!-- <ax-tree-view [items]=\"treeItems()\"></ax-tree-view> -->\n\n<axp-layout-header>\n  <axp-layout-title>{{ vm().entityDef.category?.title || 'category' | translate | async }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box\n      (onValueChanged)=\"handleCategorySearchChange($event)\"\n      [delayTime]=\"300\"\n      [placeholder]=\"'search.placeholder' | translate | async\"\n    >\n    </ax-search-box>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if(isLoading()){\n  <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n  </div>\n  }@else if (treeItems()[0].children.length) {\n  <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n    <ax-tree-view\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n      [showCheckbox]=\"false\"\n      [itemTemplate]=\"itemTemplate\"\n      #treeRef\n      [textField]=\"vm().entityDef.category?.textField || 'title'\"\n      [valueField]=\"vm().entityDef.category?.valueField || 'id'\"\n      [expandedField]=\"'expand'\"\n      [items]=\"treeItems()\"\n    >\n    </ax-tree-view>\n  </div>\n  }@else {\n  <div class=\"ax-flex ax-items-center ax-justify-center\">\n    <span class=\"ax-text-center\"> No Record Found! </span>\n  </div>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n    {{ item.title }}\n  </ng-template>\n</axp-layout-content>\n" }]
+                    ], template: "<!-- <ax-tree-view [items]=\"treeItems()\"></ax-tree-view> -->\n\n<axp-layout-header>\n  <axp-layout-title>{{ vm().entityDef.category?.title || 'category' | translate | async }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box\n      (onValueChanged)=\"handleCategorySearchChange($event)\"\n      [delayTime]=\"300\"\n      [placeholder]=\"'search.placeholder' | translate | async\"\n    >\n    </ax-search-box>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if(isLoading()){\n  <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n  </div>\n  }@else if (treeItems()[0].children.length) {\n  <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n    <ax-tree-view\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n      [showCheckbox]=\"false\"\n      [itemTemplate]=\"itemTemplate\"\n      #treeRef\n      [textField]=\"vm().entityDef.category?.textField || 'title'\"\n      [valueField]=\"vm().entityDef.category?.valueField || 'id'\"\n      [expandedField]=\"'expand'\"\n      [items]=\"treeItems()\"\n      #tree\n    >\n    </ax-tree-view>\n  </div>\n  }@else {\n  <div class=\"ax-flex ax-items-center ax-justify-center\">\n    <span class=\"ax-text-center\"> No Record Found! </span>\n  </div>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n    {{ item.title }}\n  </ng-template>\n</axp-layout-content>\n" }]
         }] });
 
 class AXPListViewOptionsColumnsComponent {
@@ -259,7 +263,7 @@ class AXPListViewOptionSortingComponent {
         item.dir = newDirection;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPListViewOptionSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPListViewOptionSortingComponent, isStandalone: true, selector: "axp-list-view-option-sorting", inputs: { vm: ["viewModel", "vm"] }, outputs: { onClosed: "onClosed" }, 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 vm.sortedFields();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]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir === 'asc'\"\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n          ></ax-icon>\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir === '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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], 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: AXButtonModule }, { kind: "component", type: i4$3.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: AXImageModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXSelectBoxModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPListViewOptionSortingComponent, isStandalone: true, selector: "axp-list-view-option-sorting", inputs: { vm: ["viewModel", "vm"] }, outputs: { onClosed: "onClosed" }, 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 vm.sortedFields();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]=\"item.dir === 'asc'\"\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n          ></ax-icon>\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir === '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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], 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: AXButtonModule }, { kind: "component", type: i4$3.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: AXImageModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXSelectBoxModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPListViewOptionSortingComponent, decorators: [{
             type: Component,
@@ -275,7 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXDecoratorModule,
                         AXSwitchModule,
                         AXSelectBoxModule,
-                    ], 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 vm.sortedFields();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]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir === 'asc'\"\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n          ></ax-icon>\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir === '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 vm.sortedFields();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]=\"item.dir === 'asc'\"\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n          ></ax-icon>\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir === '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" }]
         }], propDecorators: { onClosed: [{
                 type: Output
             }], vm: [{
@@ -289,7 +293,7 @@ class AXPEntityFilterToolbarComponent {
         this.calendarService = inject(AXCalendarService);
         this.tagBox = viewChild('tagBox');
         this.selectedField = signal(null);
-        this.selectedFilters = linkedSignal(() => this.convertQueriesToDefinitions(this.vm.view().conditions));
+        this.selectedFilters = linkedSignal(() => this.convertQueriesToDefinitions(this.vm.view().conditions).map((i) => ({ ...i, readOnly: true })));
         this.context = linkedSignal(() => this.convertQueriesToContext(this.vm.view().conditions));
         this.activeFilter = signal(null);
         this.asyncTags = signal([]);
@@ -301,7 +305,6 @@ class AXPEntityFilterToolbarComponent {
                     sf.operator?.type === (this.context()[sf.field]?.operation?.type || f.operator?.type)));
         };
         this.getDisplayValue = async (filter, val) => {
-            console.log(filter, val);
             if (filter.widget.type === 'select-editor' || filter.widget.type === 'select-filter') {
                 const dataSource = filter.widget.options?.['dataSource'];
                 const textField = filter.widget.options?.['textField'];
@@ -338,7 +341,7 @@ class AXPEntityFilterToolbarComponent {
             return val;
         };
         this.filterFields = () => {
-            return this.vm.filtersDef.filter((f) => f.title.toUpperCase().includes(this.inputValue().toUpperCase()) &&
+            return this.vm.filtersDef.filter((f) => f.title.toUpperCase().includes(this.tagBox()?.inputValue()?.toUpperCase() || '') &&
                 !this.selectedFilters().some((sf) => sf.field === f.field &&
                     sf.operator?.type === (this.context()[sf.field]?.operation?.type || f.operator?.type)));
         };
@@ -365,6 +368,7 @@ class AXPEntityFilterToolbarComponent {
             const filters = this.selectedFilters();
             const context = this.context();
             Promise.all(filters.map(async (filter) => {
+                console.log({ filter });
                 const val = context[filter.field]?.value;
                 const displayValue = await this.getDisplayValue(filter, val);
                 return {
@@ -408,7 +412,8 @@ class AXPEntityFilterToolbarComponent {
     }
     handleSelectField(field) {
         this.activeFilter.set(field);
-        this.inputValue.set('');
+        // this.inputValue.set('');
+        this.tagBox()?.inputValue.set('');
     }
     handleFieldKeyDown(e, field) {
         if (e.key === 'Enter') {
@@ -469,11 +474,12 @@ class AXPEntityFilterToolbarComponent {
         this.context.update((prev) => ({
             ...prev,
             [filter.field]: {
-                value: this.inputValue(),
+                value: this.tagBox()?.inputValue(),
                 operation: { type: 'contains' },
             },
         }));
-        this.inputValue.set('');
+        // this.inputValue.set('');
+        this.tagBox()?.inputValue.set('');
         this.selectedFilters.update((prev) => [...prev, filter]);
         this.popover()?.close();
     }
@@ -496,7 +502,7 @@ class AXPEntityFilterToolbarComponent {
     }
     #effect2;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityFilterToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPEntityFilterToolbarComponent, isStandalone: true, selector: "axp-entity-filter-toolbar", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "ax-w-full" }, providers: [], viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"'filter.title' | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-rounded-md ax-shadow-md\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n        }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n          </div>\n          <ng-container\n            axp-widget-renderer\n            [node]=\"{\n              type: activeFilter()?.widget?.type || 'text-editor',\n              path: activeFilter()?.field,\n              options: activeFilter()?.widget?.options\n            }\"\n            [mode]=\"'edit'\"\n          >\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      }@else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n        @if(inputValue()){ @for(inlineFilter of inlineFilters(); track inlineFilter.field){\n        <div\n          axListNavigationItem\n          #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive()\"\n          tabindex=\"0\"\n          (click)=\"handleSelectInlineFilter(inlineFilter)\"\n          (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n        >\n          {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{ inputValue() }}'\n        </div>\n        }\n        <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n        } @for (field of filterFields(); track field.field) {\n        <div\n          axListNavigationItem\n          #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive()\"\n          (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\"\n          tabindex=\"0\"\n        >\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-layout-title{display:block;width:100%;font-weight:600}axp-layout-description{display:block;width:100%;font-size:.875rem;line-height:1.25rem;opacity:.65}axp-layout-actions{display:flex;align-items:center;gap:.75rem}axp-layout-actions axp-layout-actions-primary{display:flex;align-items:center;gap:.75rem}axp-layout-footer,axp-layout-toolbar,axp-layout-header,axp-page-header,axp-page-footer,axp-page-toolbar{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}axp-layout-footer>axp-layout-prefix,axp-layout-footer>axp-layout-suffix,axp-layout-toolbar>axp-layout-prefix,axp-layout-toolbar>axp-layout-suffix,axp-layout-header>axp-layout-prefix,axp-layout-header>axp-layout-suffix,axp-page-header>axp-layout-prefix,axp-page-header>axp-layout-suffix,axp-page-footer>axp-layout-prefix,axp-page-footer>axp-layout-suffix,axp-page-toolbar>axp-layout-prefix,axp-page-toolbar>axp-layout-suffix{display:flex;flex-direction:row;align-items:center;gap:.5rem}axp-layout-footer>axp-layout-prefix,axp-layout-toolbar>axp-layout-prefix,axp-layout-header>axp-layout-prefix,axp-page-header>axp-layout-prefix,axp-page-footer>axp-layout-prefix,axp-page-toolbar>axp-layout-prefix{order:-9999}axp-layout-footer>axp-layout-suffix,axp-layout-toolbar>axp-layout-suffix,axp-layout-header>axp-layout-suffix,axp-page-header>axp-layout-suffix,axp-page-footer>axp-layout-suffix,axp-page-toolbar>axp-layout-suffix{order:9999;margin-inline-start:auto}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4$3.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: AXDecoratorModule }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i7$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i8.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i8.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i9.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onPressEnterOrSpace"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i9.AXListNavigationItemDirective, selector: "[axListNavigationItem]", exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPEntityFilterToolbarComponent, isStandalone: true, selector: "axp-entity-filter-toolbar", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "ax-w-full" }, providers: [], viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"'filter.title' | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-rounded-md ax-shadow-md\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n        }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n          </div>\n          <ng-container\n            axp-widget-renderer\n            [node]=\"{\n              type: activeFilter()?.widget?.type || 'text-editor',\n              path: activeFilter()?.field,\n              options: activeFilter()?.widget?.options\n            }\"\n            [mode]=\"'edit'\"\n          >\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      }@else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n        @if(tagBox.inputValue()){ @for(inlineFilter of inlineFilters(); track inlineFilter.field){\n        <div\n          axListNavigationItem\n          #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive()\"\n          tabindex=\"0\"\n          (click)=\"handleSelectInlineFilter(inlineFilter)\"\n          (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n        >\n          {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{ tagBox.inputValue() }}'\n        </div>\n        }\n        <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n        } @for (field of filterFields(); track field.field) {\n        <div\n          axListNavigationItem\n          #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive()\"\n          (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\"\n          tabindex=\"0\"\n        >\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-layout-title{display:block;width:100%;font-weight:600}axp-layout-description{display:block;width:100%;font-size:.875rem;line-height:1.25rem;opacity:.65}axp-layout-actions{display:flex;align-items:center;gap:.75rem}axp-layout-actions axp-layout-actions-primary{display:flex;align-items:center;gap:.75rem}axp-layout-footer,axp-layout-toolbar,axp-layout-header,axp-page-header,axp-page-footer,axp-page-toolbar{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}axp-layout-footer>axp-layout-prefix,axp-layout-footer>axp-layout-suffix,axp-layout-toolbar>axp-layout-prefix,axp-layout-toolbar>axp-layout-suffix,axp-layout-header>axp-layout-prefix,axp-layout-header>axp-layout-suffix,axp-page-header>axp-layout-prefix,axp-page-header>axp-layout-suffix,axp-page-footer>axp-layout-prefix,axp-page-footer>axp-layout-suffix,axp-page-toolbar>axp-layout-prefix,axp-page-toolbar>axp-layout-suffix{display:flex;flex-direction:row;align-items:center;gap:.5rem}axp-layout-footer>axp-layout-prefix,axp-layout-toolbar>axp-layout-prefix,axp-layout-header>axp-layout-prefix,axp-page-header>axp-layout-prefix,axp-page-footer>axp-layout-prefix,axp-page-toolbar>axp-layout-prefix{order:-9999}axp-layout-footer>axp-layout-suffix,axp-layout-toolbar>axp-layout-suffix,axp-layout-header>axp-layout-suffix,axp-page-header>axp-layout-suffix,axp-page-footer>axp-layout-suffix,axp-page-toolbar>axp-layout-suffix{order:9999;margin-inline-start:auto}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4$3.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: AXDecoratorModule }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i7$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i8.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i8.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i9.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onPressEnterOrSpace"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i9.AXListNavigationItemDirective, selector: "[axListNavigationItem]", exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityFilterToolbarComponent, decorators: [{
             type: Component,
@@ -515,7 +521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXBadgeModule,
                     ], providers: [], host: {
                         class: 'ax-w-full',
-                    }, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"'filter.title' | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-rounded-md ax-shadow-md\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n        }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n          </div>\n          <ng-container\n            axp-widget-renderer\n            [node]=\"{\n              type: activeFilter()?.widget?.type || 'text-editor',\n              path: activeFilter()?.field,\n              options: activeFilter()?.widget?.options\n            }\"\n            [mode]=\"'edit'\"\n          >\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      }@else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n        @if(inputValue()){ @for(inlineFilter of inlineFilters(); track inlineFilter.field){\n        <div\n          axListNavigationItem\n          #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive()\"\n          tabindex=\"0\"\n          (click)=\"handleSelectInlineFilter(inlineFilter)\"\n          (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n        >\n          {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{ inputValue() }}'\n        </div>\n        }\n        <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n        } @for (field of filterFields(); track field.field) {\n        <div\n          axListNavigationItem\n          #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive()\"\n          (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\"\n          tabindex=\"0\"\n        >\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-layout-title{display:block;width:100%;font-weight:600}axp-layout-description{display:block;width:100%;font-size:.875rem;line-height:1.25rem;opacity:.65}axp-layout-actions{display:flex;align-items:center;gap:.75rem}axp-layout-actions axp-layout-actions-primary{display:flex;align-items:center;gap:.75rem}axp-layout-footer,axp-layout-toolbar,axp-layout-header,axp-page-header,axp-page-footer,axp-page-toolbar{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}axp-layout-footer>axp-layout-prefix,axp-layout-footer>axp-layout-suffix,axp-layout-toolbar>axp-layout-prefix,axp-layout-toolbar>axp-layout-suffix,axp-layout-header>axp-layout-prefix,axp-layout-header>axp-layout-suffix,axp-page-header>axp-layout-prefix,axp-page-header>axp-layout-suffix,axp-page-footer>axp-layout-prefix,axp-page-footer>axp-layout-suffix,axp-page-toolbar>axp-layout-prefix,axp-page-toolbar>axp-layout-suffix{display:flex;flex-direction:row;align-items:center;gap:.5rem}axp-layout-footer>axp-layout-prefix,axp-layout-toolbar>axp-layout-prefix,axp-layout-header>axp-layout-prefix,axp-page-header>axp-layout-prefix,axp-page-footer>axp-layout-prefix,axp-page-toolbar>axp-layout-prefix{order:-9999}axp-layout-footer>axp-layout-suffix,axp-layout-toolbar>axp-layout-suffix,axp-layout-header>axp-layout-suffix,axp-page-header>axp-layout-suffix,axp-page-footer>axp-layout-suffix,axp-page-toolbar>axp-layout-suffix{order:9999;margin-inline-start:auto}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"] }]
+                    }, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"'filter.title' | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-rounded-md ax-shadow-md\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n        }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n          </div>\n          <ng-container\n            axp-widget-renderer\n            [node]=\"{\n              type: activeFilter()?.widget?.type || 'text-editor',\n              path: activeFilter()?.field,\n              options: activeFilter()?.widget?.options\n            }\"\n            [mode]=\"'edit'\"\n          >\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      }@else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n        @if(tagBox.inputValue()){ @for(inlineFilter of inlineFilters(); track inlineFilter.field){\n        <div\n          axListNavigationItem\n          #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive()\"\n          tabindex=\"0\"\n          (click)=\"handleSelectInlineFilter(inlineFilter)\"\n          (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n        >\n          {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{ tagBox.inputValue() }}'\n        </div>\n        }\n        <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n        } @for (field of filterFields(); track field.field) {\n        <div\n          axListNavigationItem\n          #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive()\"\n          (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\"\n          tabindex=\"0\"\n        >\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-layout-title{display:block;width:100%;font-weight:600}axp-layout-description{display:block;width:100%;font-size:.875rem;line-height:1.25rem;opacity:.65}axp-layout-actions{display:flex;align-items:center;gap:.75rem}axp-layout-actions axp-layout-actions-primary{display:flex;align-items:center;gap:.75rem}axp-layout-footer,axp-layout-toolbar,axp-layout-header,axp-page-header,axp-page-footer,axp-page-toolbar{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}axp-layout-footer>axp-layout-prefix,axp-layout-footer>axp-layout-suffix,axp-layout-toolbar>axp-layout-prefix,axp-layout-toolbar>axp-layout-suffix,axp-layout-header>axp-layout-prefix,axp-layout-header>axp-layout-suffix,axp-page-header>axp-layout-prefix,axp-page-header>axp-layout-suffix,axp-page-footer>axp-layout-prefix,axp-page-footer>axp-layout-suffix,axp-page-toolbar>axp-layout-prefix,axp-page-toolbar>axp-layout-suffix{display:flex;flex-direction:row;align-items:center;gap:.5rem}axp-layout-footer>axp-layout-prefix,axp-layout-toolbar>axp-layout-prefix,axp-layout-header>axp-layout-prefix,axp-page-header>axp-layout-prefix,axp-page-footer>axp-layout-prefix,axp-page-toolbar>axp-layout-prefix{order:-9999}axp-layout-footer>axp-layout-suffix,axp-layout-toolbar>axp-layout-suffix,axp-layout-header>axp-layout-suffix,axp-page-header>axp-layout-suffix,axp-page-footer>axp-layout-suffix,axp-page-toolbar>axp-layout-suffix{order:9999;margin-inline-start:auto}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { vm: [{
                 type: Input,
                 args: ['viewModel']
@@ -563,8 +569,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             }] } });
 
 class AXPEntityMasterToolbarViewComponent {
+    constructor() {
+        this.layoutService = inject(AXPLayoutThemeService);
+        this.parent = inject(AXPEntityMasterListViewComponent);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPEntityMasterToolbarViewComponent, isStandalone: true, selector: "axp-entity-master-toolbar-view", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "ax-w-full" }, ngImport: i0, template: "<axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar>\n  <div class=\"ax-flex ax-items-center ax-gap-2\">\n    <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n      <i class=\"fa-light fa-table-columns\"></i>\n    </ax-button>\n    <ax-popover\n      [adaptivityEnabled]=\"true\"\n      [offsetY]=\"30\"\n      [target]=\"columnButton\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      #popover\n    >\n      <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n        <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n          {{ 'entity.columns' | translate | async }}\n        </ax-header>\n        <div class=\"ax-py-2 ax-px-4\">\n          <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns>\n        </div>\n      </div>\n    </ax-popover>\n    @if(vm.canSort()) {\n    <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n      <i class=\"fa-light fa-sort-amount-up\"></i>\n    </ax-button>\n    <ax-popover\n      [adaptivityEnabled]=\"true\"\n      [offsetY]=\"10\"\n      [target]=\"sortButton\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      #popover\n    >\n      <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n        <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n          {{ 'entity.sorts' | translate | async }}\n        </ax-header>\n        <div class=\"ax-py-2 ax-px-4\">\n          <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting>\n        </div>\n      </div>\n    </ax-popover>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4$3.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: AXDecoratorModule }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPEntityFilterToolbarComponent, selector: "axp-entity-filter-toolbar", inputs: ["viewModel"] }, { kind: "component", type: AXPEntityViewToolbarComponent, selector: "axp-entity-view-toolbar", inputs: ["viewModel"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: ["viewModel"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: ["viewModel"], outputs: ["onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPEntityMasterToolbarViewComponent, isStandalone: true, selector: "axp-entity-master-toolbar-view", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "ax-w-full" }, ngImport: i0, template: "<axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar>\n\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n      <i class=\"fa-light fa-table-columns\"></i>\n    </ax-button>\n    <ax-popover\n      [adaptivityEnabled]=\"true\"\n      [offsetY]=\"30\"\n      [target]=\"columnButton\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      #popover\n    >\n      <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n        <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n          {{ 'entity.columns' | translate | async }}\n        </ax-header>\n        <div class=\"ax-py-2 ax-px-4\">\n          <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns>\n        </div>\n      </div>\n    </ax-popover>\n    @if(vm.canSort()) {\n    <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n      <i class=\"fa-light fa-sort-amount-up\"></i>\n    </ax-button>\n    <ax-popover\n      [adaptivityEnabled]=\"true\"\n      [offsetY]=\"10\"\n      [target]=\"sortButton\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      #popover\n    >\n      <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n        <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n          {{ 'entity.sorts' | translate | async }}\n        </ax-header>\n        <div class=\"ax-py-2 ax-px-4\">\n          <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting>\n        </div>\n      </div>\n    </ax-popover>\n    } @if(layoutService.isSmall()){\n    <ax-button (onClick)=\"parent.toggleCategoryDrawer()\" [iconOnly]=\"true\" [color]=\"'default'\">\n      <i class=\"fa-light fa-bars\"></i>\n    </ax-button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4$3.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: AXDecoratorModule }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPEntityFilterToolbarComponent, selector: "axp-entity-filter-toolbar", inputs: ["viewModel"] }, { kind: "component", type: AXPEntityViewToolbarComponent, selector: "axp-entity-view-toolbar", inputs: ["viewModel"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: ["viewModel"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: ["viewModel"], outputs: ["onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, decorators: [{
             type: Component,
@@ -580,7 +590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXPListViewOptionsColumnsComponent,
                     ], host: {
                         class: 'ax-w-full',
-                    }, template: "<axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar>\n  <div class=\"ax-flex ax-items-center ax-gap-2\">\n    <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n      <i class=\"fa-light fa-table-columns\"></i>\n    </ax-button>\n    <ax-popover\n      [adaptivityEnabled]=\"true\"\n      [offsetY]=\"30\"\n      [target]=\"columnButton\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      #popover\n    >\n      <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n        <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n          {{ 'entity.columns' | translate | async }}\n        </ax-header>\n        <div class=\"ax-py-2 ax-px-4\">\n          <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns>\n        </div>\n      </div>\n    </ax-popover>\n    @if(vm.canSort()) {\n    <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n      <i class=\"fa-light fa-sort-amount-up\"></i>\n    </ax-button>\n    <ax-popover\n      [adaptivityEnabled]=\"true\"\n      [offsetY]=\"10\"\n      [target]=\"sortButton\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      #popover\n    >\n      <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n        <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n          {{ 'entity.sorts' | translate | async }}\n        </ax-header>\n        <div class=\"ax-py-2 ax-px-4\">\n          <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting>\n        </div>\n      </div>\n    </ax-popover>\n    }\n  </div>\n</div>\n" }]
+                    }, template: "<axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar>\n\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n      <i class=\"fa-light fa-table-columns\"></i>\n    </ax-button>\n    <ax-popover\n      [adaptivityEnabled]=\"true\"\n      [offsetY]=\"30\"\n      [target]=\"columnButton\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      #popover\n    >\n      <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n        <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n          {{ 'entity.columns' | translate | async }}\n        </ax-header>\n        <div class=\"ax-py-2 ax-px-4\">\n          <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns>\n        </div>\n      </div>\n    </ax-popover>\n    @if(vm.canSort()) {\n    <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n      <i class=\"fa-light fa-sort-amount-up\"></i>\n    </ax-button>\n    <ax-popover\n      [adaptivityEnabled]=\"true\"\n      [offsetY]=\"10\"\n      [target]=\"sortButton\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      #popover\n    >\n      <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n        <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n          {{ 'entity.sorts' | translate | async }}\n        </ax-header>\n        <div class=\"ax-py-2 ax-px-4\">\n          <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting>\n        </div>\n      </div>\n    </ax-popover>\n    } @if(layoutService.isSmall()){\n    <ax-button (onClick)=\"parent.toggleCategoryDrawer()\" [iconOnly]=\"true\" [color]=\"'default'\">\n      <i class=\"fa-light fa-bars\"></i>\n    </ax-button>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { vm: [{
                 type: Input,
                 args: ['viewModel']
@@ -745,6 +755,9 @@ class AXPEntityMasterListViewComponent extends AXPBasePageComponent {
     ngOnDestroy() {
         this.vm.destroy();
     }
+    toggleCategoryDrawer() {
+        this.toggleStartSide();
+    }
     getPageTitle() {
         return this.vm.title();
     }
@@ -793,7 +806,7 @@ class AXPEntityMasterListViewComponent extends AXPBasePageComponent {
                 provide: AXPBasePage,
                 useExisting: AXPEntityMasterListViewComponent,
             },
-        ], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if(vm.entityDef.category){\n  <axp-layout-start-side>\n    <axp-entity-category [vm]=\"vm\" [searchValue]=\"categorySearchValue()\"></axp-entity-category>\n  </axp-layout-start-side>\n  }\n  <axp-page-toolbar>\n    <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n  </axp-page-toolbar>\n  <axp-page-content>\n    <ax-data-table\n      #grid\n      [showFooter]=\"false\"\n      class=\"ax-flex-1\"\n      [paging]=\"true\"\n      [fetchDataMode]=\"'manual'\"\n      [parentField]=\"vm.parentKey()\"\n      [loading]=\"{ enabled: true, animation: true }\"\n      [dataSource]=\"vm.dataSource\"\n      (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n      (onRowDbClick)=\"handleRowDbClick($event)\"\n      (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n      (onPageChanged)=\"onPageChanged($event)\"\n    >\n      @if(vm.view().indexCol === true){\n      <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n      } @if(vm.selectedScopeActionsCount()){\n      <ax-select-column fixed=\"start\" [width]=\"'60px'\"></ax-select-column>\n      } @for(col of vm.columns();track col.name) { @if(col.visible) {\n      <axp-widget-column-renderer\n        [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n        [caption]=\"(col.title | translate | async)!\"\n        [node]=\"col.node()\"\n        [customWidth]=\"col.width\"\n      ></axp-widget-column-renderer>\n      } } @if(getCommandRowItems().length){\n      <ax-command-column\n        fixed=\"end\"\n        [width]=\"getCommandRowItems().length * 60 + 'px'\"\n        [items]=\"getCommandRowItems()\"\n        (onItemClick)=\"handleRowCommandClick($event)\"\n      ></ax-command-column>\n      }\n      <ax-dropdown-command-column\n        fixed=\"end\"\n        [width]=\"'60px'\"\n        [items]=\"getDropdownRowItems\"\n        (onItemClick)=\"handleRowCommandClick($event)\"\n      ></ax-dropdown-command-column>\n    </ax-data-table>\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media (min-width: 768px){.view-drawer{width:45vw}}@media (min-width: 1024px){.view-drawer{width:35vw}}@media (min-width: 1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i8$2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "parentField", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i8$2.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i8$2.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i8$2.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i8$2.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "directive", type: i4$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if(vm.entityDef.category){\n  <axp-layout-start-side>\n    <axp-entity-category class=\"ax-w-80\" [vm]=\"vm\" [searchValue]=\"categorySearchValue()\"></axp-entity-category>\n  </axp-layout-start-side>\n  }\n  <axp-page-toolbar>\n    <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n  </axp-page-toolbar>\n  <axp-page-content>\n    <ax-data-table\n      #grid\n      [showFooter]=\"false\"\n      class=\"ax-flex-1\"\n      [paging]=\"true\"\n      [fetchDataMode]=\"'manual'\"\n      [parentField]=\"vm.parentKey()\"\n      [loading]=\"{ enabled: true, animation: true }\"\n      [dataSource]=\"vm.dataSource\"\n      (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n      (onRowDbClick)=\"handleRowDbClick($event)\"\n      (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n      (onPageChanged)=\"onPageChanged($event)\"\n    >\n      @if(vm.view().indexCol === true){\n      <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n      } @if(vm.selectedScopeActionsCount()){\n      <ax-select-column fixed=\"start\" [width]=\"'60px'\"></ax-select-column>\n      } @for(col of vm.columns();track col.name) { @if(col.visible) {\n      <axp-widget-column-renderer\n        [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n        [caption]=\"(col.title | translate | async)!\"\n        [node]=\"col.node()\"\n        [customWidth]=\"col.width\"\n      ></axp-widget-column-renderer>\n      } } @if(getCommandRowItems().length){\n      <ax-command-column\n        fixed=\"end\"\n        [width]=\"getCommandRowItems().length * 60 + 'px'\"\n        [items]=\"getCommandRowItems()\"\n        (onItemClick)=\"handleRowCommandClick($event)\"\n      ></ax-command-column>\n      }\n      <ax-dropdown-command-column\n        fixed=\"end\"\n        [width]=\"'60px'\"\n        [items]=\"getDropdownRowItems\"\n        (onItemClick)=\"handleRowCommandClick($event)\"\n      ></ax-dropdown-command-column>\n    </ax-data-table>\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media (min-width: 768px){.view-drawer{width:45vw}}@media (min-width: 1024px){.view-drawer{width:35vw}}@media (min-width: 1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i8$2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "parentField", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i8$2.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i8$2.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i8$2.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i8$2.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "directive", type: i4$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: 
                 //
                 AXPLayoutBuilderModule }, { kind: "component", type: i8.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "component", type: 
                 //
@@ -837,15 +850,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXDropdownButtonModule,
                         AXPThemeLayoutStartSideComponent,
                         AXPEntityCategoryComponent,
-                        AXPThemeLayoutHeaderComponent,
-                        AXPThemeLayoutToolbarComponent,
                     ], providers: [
                         {
                             provide: AXPBasePage,
                             useExisting: AXPEntityMasterListViewComponent,
                         },
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  @if(vm.entityDef.category){\n  <axp-layout-start-side>\n    <axp-entity-category [vm]=\"vm\" [searchValue]=\"categorySearchValue()\"></axp-entity-category>\n  </axp-layout-start-side>\n  }\n  <axp-page-toolbar>\n    <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n  </axp-page-toolbar>\n  <axp-page-content>\n    <ax-data-table\n      #grid\n      [showFooter]=\"false\"\n      class=\"ax-flex-1\"\n      [paging]=\"true\"\n      [fetchDataMode]=\"'manual'\"\n      [parentField]=\"vm.parentKey()\"\n      [loading]=\"{ enabled: true, animation: true }\"\n      [dataSource]=\"vm.dataSource\"\n      (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n      (onRowDbClick)=\"handleRowDbClick($event)\"\n      (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n      (onPageChanged)=\"onPageChanged($event)\"\n    >\n      @if(vm.view().indexCol === true){\n      <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n      } @if(vm.selectedScopeActionsCount()){\n      <ax-select-column fixed=\"start\" [width]=\"'60px'\"></ax-select-column>\n      } @for(col of vm.columns();track col.name) { @if(col.visible) {\n      <axp-widget-column-renderer\n        [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n        [caption]=\"(col.title | translate | async)!\"\n        [node]=\"col.node()\"\n        [customWidth]=\"col.width\"\n      ></axp-widget-column-renderer>\n      } } @if(getCommandRowItems().length){\n      <ax-command-column\n        fixed=\"end\"\n        [width]=\"getCommandRowItems().length * 60 + 'px'\"\n        [items]=\"getCommandRowItems()\"\n        (onItemClick)=\"handleRowCommandClick($event)\"\n      ></ax-command-column>\n      }\n      <ax-dropdown-command-column\n        fixed=\"end\"\n        [width]=\"'60px'\"\n        [items]=\"getDropdownRowItems\"\n        (onItemClick)=\"handleRowCommandClick($event)\"\n      ></ax-dropdown-command-column>\n    </ax-data-table>\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media (min-width: 768px){.view-drawer{width:45vw}}@media (min-width: 1024px){.view-drawer{width:35vw}}@media (min-width: 1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"] }]
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  @if(vm.entityDef.category){\n  <axp-layout-start-side>\n    <axp-entity-category class=\"ax-w-80\" [vm]=\"vm\" [searchValue]=\"categorySearchValue()\"></axp-entity-category>\n  </axp-layout-start-side>\n  }\n  <axp-page-toolbar>\n    <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n  </axp-page-toolbar>\n  <axp-page-content>\n    <ax-data-table\n      #grid\n      [showFooter]=\"false\"\n      class=\"ax-flex-1\"\n      [paging]=\"true\"\n      [fetchDataMode]=\"'manual'\"\n      [parentField]=\"vm.parentKey()\"\n      [loading]=\"{ enabled: true, animation: true }\"\n      [dataSource]=\"vm.dataSource\"\n      (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n      (onRowDbClick)=\"handleRowDbClick($event)\"\n      (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n      (onPageChanged)=\"onPageChanged($event)\"\n    >\n      @if(vm.view().indexCol === true){\n      <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n      } @if(vm.selectedScopeActionsCount()){\n      <ax-select-column fixed=\"start\" [width]=\"'60px'\"></ax-select-column>\n      } @for(col of vm.columns();track col.name) { @if(col.visible) {\n      <axp-widget-column-renderer\n        [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n        [caption]=\"(col.title | translate | async)!\"\n        [node]=\"col.node()\"\n        [customWidth]=\"col.width\"\n      ></axp-widget-column-renderer>\n      } } @if(getCommandRowItems().length){\n      <ax-command-column\n        fixed=\"end\"\n        [width]=\"getCommandRowItems().length * 60 + 'px'\"\n        [items]=\"getCommandRowItems()\"\n        (onItemClick)=\"handleRowCommandClick($event)\"\n      ></ax-command-column>\n      }\n      <ax-dropdown-command-column\n        fixed=\"end\"\n        [width]=\"'60px'\"\n        [items]=\"getDropdownRowItems\"\n        (onItemClick)=\"handleRowCommandClick($event)\"\n      ></ax-dropdown-command-column>\n    </ax-data-table>\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media (min-width: 768px){.view-drawer{width:45vw}}@media (min-width: 1024px){.view-drawer{width:35vw}}@media (min-width: 1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.AXPlatform }] });
 
 export { AXPEntityMasterListViewComponent };
-//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-BqMlSX6b.mjs.map
+//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-CuyWAi6X.mjs.map