@acorex/platform 20.6.0-next.10 → 20.6.0-next.12

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

@@ -274,7 +274,7 @@ class AXPEntityCategoryComponent {
         this.isLoading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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: "<axp-layout-header>\n  <axp-layout-title>{{\n    vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n  }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box\n      (onValueChanged)=\"handleCategorySearchChange($event)\"\n      [delayTime]=\"300\"\n      [placeholder]=\"'@general:terms.interface.category.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    <axp-state-message\n      icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-records.description'\"\n    >\n      <ax-button\n        slot=\"actions\"\n        (onClick)=\"handleCreateRootClick($event)\"\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.add-new.title' | translate | async\"\n      >\n        <ax-icon class=\"fas fa-plus\"></ax-icon>\n      </ax-button>\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title }}</span>\n      </div>\n      @if (item.id && item.id !== 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n            <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item\n                  (onClick)=\"handleCreateChildClick(item, $event)\"\n                  look=\"blank\"\n                  color=\"default\"\n                  text=\"Add New Child\"\n                >\n                  <ax-icon class=\"fas fa-plus\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item (onClick)=\"handleEditNodeClick(item, $event)\" look=\"blank\" text=\"Edit\">\n                  <ax-icon class=\"fas fa-pen\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                  color=\"danger\"\n                  look=\"blank\"\n                  text=\"Delete\"\n                >\n                  <ax-icon class=\"fas fa-trash\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n      } @else if (item.id === 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: ["ax-tree-view-item .ax-tree-view-items{width:100%;min-width:0px}ax-tree-view-item .ax-tree-view-items>div{width:100%}ax-tree-view-item .ax-state-tree-view-active{background-color:rgb(var(--ax-sys-color-light-surface))!important;color:rgb(var(--ax-sys-color-on-light-surface))!important;border-color:rgb(var(--ax-sys-color-border-light-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: i2$1.AXTreeViewComponent, selector: "ax-tree-view", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    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: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$1.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: "component", type: i3$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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: "<axp-layout-header>\n  <axp-layout-title>{{\n    vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n    }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box (onValueChanged)=\"handleCategorySearchChange($event)\" [delayTime]=\"300\"\n      [placeholder]=\"'@general:terms.interface.category.search.placeholder' | translate | async\">\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 (onNodeClick)=\"handleNodeClick($event)\" (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n      [showCheckbox]=\"false\" [itemTemplate]=\"itemTemplate\" #treeRef\n      [textField]=\"vm().entityDef.category?.textField || 'title'\"\n      [valueField]=\"vm().entityDef.category?.valueField || 'id'\" [expandedField]=\"'expand'\" [items]=\"treeItems()\" #tree>\n    </ax-tree-view>\n  </div>\n  } @else {\n  <axp-state-message icon=\"fa-light fa-folder-open\"\n    [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n    [description]=\"'@general:terms.interface.category.search.no-records.description'\">\n    <ax-button slot=\"actions\" (onClick)=\"handleCreateRootClick($event)\" look=\"solid\" color=\"primary\"\n      [text]=\"'@general:actions.add-new.title' | translate | async\">\n      <ax-icon class=\"fas fa-plus\"></ax-icon>\n    </ax-button>\n  </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas  fa-folder\"\n          [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title }}</span>\n      </div>\n      @if (item.id && item.id !== 'all') {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n          <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <ax-button-item (onClick)=\"handleCreateChildClick(item, $event)\" look=\"blank\" color=\"default\"\n                text=\"Add New Child\">\n                <ax-icon class=\"fas fa-plus\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleEditNodeClick(item, $event)\" look=\"blank\" text=\"Edit\">\n                <ax-icon class=\"fas fa-pen\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleDeleteNodeClick(item, $event)\" color=\"danger\" look=\"blank\" text=\"Delete\">\n                <ax-icon class=\"fas fa-trash\"></ax-icon>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n      } @else if (item.id === 'all') {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>", styles: ["ax-tree-view-item .ax-tree-view-items{width:100%;min-width:0px}ax-tree-view-item .ax-tree-view-items>div{width:100%}ax-tree-view-item .ax-state-tree-view-active{background-color:rgb(var(--ax-sys-color-light-surface))!important;color:rgb(var(--ax-sys-color-on-light-surface))!important;border-color:rgb(var(--ax-sys-color-border-light-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: i2$1.AXTreeViewComponent, selector: "ax-tree-view", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    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: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$1.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: "component", type: i3$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryComponent, decorators: [{
             type: Component,
@@ -291,7 +291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXButtonModule,
                         AXDropdownModule,
                         AXPStateMessageComponent
-                    ], template: "<axp-layout-header>\n  <axp-layout-title>{{\n    vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n  }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box\n      (onValueChanged)=\"handleCategorySearchChange($event)\"\n      [delayTime]=\"300\"\n      [placeholder]=\"'@general:terms.interface.category.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    <axp-state-message\n      icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-records.description'\"\n    >\n      <ax-button\n        slot=\"actions\"\n        (onClick)=\"handleCreateRootClick($event)\"\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.add-new.title' | translate | async\"\n      >\n        <ax-icon class=\"fas fa-plus\"></ax-icon>\n      </ax-button>\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title }}</span>\n      </div>\n      @if (item.id && item.id !== 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n            <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item\n                  (onClick)=\"handleCreateChildClick(item, $event)\"\n                  look=\"blank\"\n                  color=\"default\"\n                  text=\"Add New Child\"\n                >\n                  <ax-icon class=\"fas fa-plus\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item (onClick)=\"handleEditNodeClick(item, $event)\" look=\"blank\" text=\"Edit\">\n                  <ax-icon class=\"fas fa-pen\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                  color=\"danger\"\n                  look=\"blank\"\n                  text=\"Delete\"\n                >\n                  <ax-icon class=\"fas fa-trash\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n      } @else if (item.id === 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: ["ax-tree-view-item .ax-tree-view-items{width:100%;min-width:0px}ax-tree-view-item .ax-tree-view-items>div{width:100%}ax-tree-view-item .ax-state-tree-view-active{background-color:rgb(var(--ax-sys-color-light-surface))!important;color:rgb(var(--ax-sys-color-on-light-surface))!important;border-color:rgb(var(--ax-sys-color-border-light-surface))!important}\n"] }]
+                    ], template: "<axp-layout-header>\n  <axp-layout-title>{{\n    vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n    }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box (onValueChanged)=\"handleCategorySearchChange($event)\" [delayTime]=\"300\"\n      [placeholder]=\"'@general:terms.interface.category.search.placeholder' | translate | async\">\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 (onNodeClick)=\"handleNodeClick($event)\" (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n      [showCheckbox]=\"false\" [itemTemplate]=\"itemTemplate\" #treeRef\n      [textField]=\"vm().entityDef.category?.textField || 'title'\"\n      [valueField]=\"vm().entityDef.category?.valueField || 'id'\" [expandedField]=\"'expand'\" [items]=\"treeItems()\" #tree>\n    </ax-tree-view>\n  </div>\n  } @else {\n  <axp-state-message icon=\"fa-light fa-folder-open\"\n    [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n    [description]=\"'@general:terms.interface.category.search.no-records.description'\">\n    <ax-button slot=\"actions\" (onClick)=\"handleCreateRootClick($event)\" look=\"solid\" color=\"primary\"\n      [text]=\"'@general:actions.add-new.title' | translate | async\">\n      <ax-icon class=\"fas fa-plus\"></ax-icon>\n    </ax-button>\n  </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas  fa-folder\"\n          [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title }}</span>\n      </div>\n      @if (item.id && item.id !== 'all') {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n          <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <ax-button-item (onClick)=\"handleCreateChildClick(item, $event)\" look=\"blank\" color=\"default\"\n                text=\"Add New Child\">\n                <ax-icon class=\"fas fa-plus\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleEditNodeClick(item, $event)\" look=\"blank\" text=\"Edit\">\n                <ax-icon class=\"fas fa-pen\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleDeleteNodeClick(item, $event)\" color=\"danger\" look=\"blank\" text=\"Delete\">\n                <ax-icon class=\"fas fa-trash\"></ax-icon>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n      } @else if (item.id === 'all') {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>", styles: ["ax-tree-view-item .ax-tree-view-items{width:100%;min-width:0px}ax-tree-view-item .ax-tree-view-items>div{width:100%}ax-tree-view-item .ax-state-tree-view-active{background-color:rgb(var(--ax-sys-color-light-surface))!important;color:rgb(var(--ax-sys-color-on-light-surface))!important;border-color:rgb(var(--ax-sys-color-border-light-surface))!important}\n"] }]
         }], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }] } });
 
 class AXPEntityMasterToolbarViewComponent {
@@ -800,4 +800,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }], ctorParameters: () => [{ type: i1$1.AXPlatform }], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
 
 export { AXPEntityMasterListViewComponent };
-//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-CD7rJIMh.mjs.map
+//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-xq3eQ6t2.mjs.map