@acorex/platform 21.0.0-next.34 → 21.0.0-next.39

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

@@ -10,7 +10,7 @@ import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i4 from '@acorex/core/format';
 import { AXFormatModule, AXFormatService } from '@acorex/core/format';
-import { getSystemActions, AXPResolveMultiLanguageStringPipe, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPIconLogoConfig, AXPComponentLogoConfig, AXPImageUrlLogoConfig, AXPDataGenerator, AXPMultiLanguageStringResolverService, compareMultiLanguageStrings, containsHtmlMarkup, extractTextFromHtml } from '@acorex/platform/core';
+import { getSystemActions, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPIconLogoConfig, AXPComponentLogoConfig, AXPImageUrlLogoConfig, AXPDataGenerator, compareMultiLanguageStrings, containsHtmlMarkup, extractTextFromHtml } from '@acorex/platform/core';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXPLayoutRendererComponent, AXPLayoutBuilderService, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex/platform/layout/builder';
 import * as i1 from '@angular/common';
@@ -1039,7 +1039,7 @@ class AXPCategoryTreeComponent {
         this.isLoading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\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\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view-legacy\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view-legacy>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"((actions().createLabel || '@general:actions.add-new.title') | translate | async)!\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\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\">\n          @if (item.id === 'root') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ rawTitle | axpResolveMultiLanguageString }}\n          }\n        </span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\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                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"((actions().createChildLabel || '@general:actions.add-new-child.title') | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"((actions().updateLabel || '@general:actions.edit.title') | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"((actions().deleteLabel || '@general:actions.delete.title') | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewLegacyModule }, { kind: "component", type: i2$2.AXTreeViewLegacyComponent, selector: "ax-tree-view-legacy", 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: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n    axp-page-content, \n    axp-page-footer-container,\n    axp-page-footer,\n    axp-page-header,\n    axp-page-header-container,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "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: i1$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: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.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: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\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\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view-legacy\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view-legacy>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"(actions().createLabel || '@general:actions.add-new.title' | translate | async)!\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\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\">\n          @if (item.id === 'root') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ rawTitle | translate | async }}\n          }\n        </span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\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                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"\n                        (actions().createChildLabel || '@general:actions.add-new-child.title' | translate | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"(actions().updateLabel || '@general:actions.edit.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"(actions().deleteLabel || '@general:actions.delete.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewLegacyModule }, { kind: "component", type: i2$2.AXTreeViewLegacyComponent, selector: "ax-tree-view-legacy", 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: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n    axp-page-content, \n    axp-page-footer-container,\n    axp-page-footer,\n    axp-page-header,\n    axp-page-header-container,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "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: i1$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: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.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: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
             type: Component,
@@ -1056,8 +1056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXButtonModule,
                         AXDropdownModule,
                         AXPStateMessageComponent,
-                        AXPResolveMultiLanguageStringPipe,
-                    ], template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\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\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view-legacy\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view-legacy>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"((actions().createLabel || '@general:actions.add-new.title') | translate | async)!\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\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\">\n          @if (item.id === 'root') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ rawTitle | axpResolveMultiLanguageString }}\n          }\n        </span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\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                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"((actions().createChildLabel || '@general:actions.add-new-child.title') | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"((actions().updateLabel || '@general:actions.edit.title') | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"((actions().deleteLabel || '@general:actions.delete.title') | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\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" }]
+                    ], template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\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\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view-legacy\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view-legacy>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"(actions().createLabel || '@general:actions.add-new.title' | translate | async)!\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\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\">\n          @if (item.id === 'root') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ rawTitle | translate | async }}\n          }\n        </span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\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                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"\n                        (actions().createChildLabel || '@general:actions.add-new-child.title' | translate | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"(actions().updateLabel || '@general:actions.edit.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"(actions().deleteLabel || '@general:actions.delete.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\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" }]
         }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeCreate: [{ type: i0.Output, args: ["nodeCreate"] }], nodeUpdate: [{ type: i0.Output, args: ["nodeUpdate"] }], nodeDelete: [{ type: i0.Output, args: ["nodeDelete"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }] } });
 
 //#region ----   Tree Node Interface   ----
@@ -4748,7 +4747,7 @@ class AXPPropertyViewerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPropertyViewerComponent, isStandalone: true, selector: "axp-property-viewer", inputs: { tabsInput: { classPropertyName: "tabsInput", publicName: "tabsInput", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, bindingExpressionEditorMode: { classPropertyName: "bindingExpressionEditorMode", publicName: "bindingExpressionEditorMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-form>\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n        <!-- #region Shared property row template (used in both advanced and simple modes) -->\n        <ng-template #propertyRow let-prop=\"prop\" let-translateTitle=\"translateTitle\">\n            <div class=\"ax-flex ax-flex-col ax-gap-2 ax-py-2\">\n                <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n                <div class=\"ax-flex ax-items-center ax-gap-2 ax-w-full\">\n                    @if (prop.showLabel !== false) {\n                    @if (translateTitle) {\n                    <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title | translate | async }}</span>\n                    } @else {\n                    <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title }}</span>\n                    }\n                    }\n                    @if (prop.binding?.enabled) {\n                    <div class=\"ax-flex ax-gap-1 ax-shrink-0 ax-xs\">\n                        <ax-button [toggleable]=\"true\" [selected]=\"isExpressionMode(prop)\" look=\"twotone\"\n                            [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\" class=\"ax-shrink-0\"\n                            [title]=\"(isExpressionMode(prop) ? '@general:terms.common.expression' : '@general:terms.common.value') | translate | async\"\n                            (selectedChange)=\"setExpressionMode(prop, $event)\">\n                            @if (isExpressionMode(prop)) {\n                            <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                            } @else {\n                            <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n                            }\n                        </ax-button>\n                    </div>\n                    }\n                </div>\n                <!-- Property content: expression editor (inline or popup) or widget renderer (value mode) -->\n                @if (prop.binding?.enabled && isExpressionMode(prop)) {\n                @if (bindingExpressionEditorMode() === 'inline') {\n                <div class=\"ax-w-full ax-overflow-hidden\" style=\"direction: ltr;\">\n                    <ax-code-editor [ngModel]=\"getBindingExpressionValue(prop)\"\n                        (ngModelChange)=\"setBindingExpressionValue(prop, $event)\" language=\"javascript\"\n                        [lineNumbers]=\"true\" class=\"ax-w-full\">\n                    </ax-code-editor>\n                </div>\n                } @else {\n                <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n                    [text]=\"'@general:widgets.triggers.open-editor' | translate | async\"\n                    (onClick)=\"openBindingEditor(prop)\"\n                    [title]=\"'@general:widgets.triggers.edit-binding-expression' | translate | async\">\n                    <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                    </ax-prefix>\n                </ax-button>\n                }\n                } @else if (prop.schema.interface) {\n                <ng-container axp-widget-renderer [node]=\"prop.schema.interface\" [mode]=\"'edit'\">\n                </ng-container>\n                }\n            </div>\n        </ng-template>\n        <!-- #endregion -->\n\n        <!-- #region Advanced mode: tabs + accordion groups -->\n        @if (mode() === 'advanced') {\n        <div class=\"ax-flex ax-flex-col\">\n            @if (tabs().length > 1) {\n            <div class=\"ax-pb-2\">\n                <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                    @for (tab of tabs(); track $index) {\n                    <ax-tab-item [text]=\"(tab.title | translate | async) ?? ''\" [key]=\"$index.toString()\"\n                        [active]=\"currentTabIndex() === $index\">\n                    </ax-tab-item>\n                    }\n                </ax-tabs>\n            </div>\n            }\n            <div class=\"ax-flex-1 ax-overflow-auto\">\n                <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n                    @for (group of groups(); track $index) {\n                    <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"(group.title | translate | async) ?? ''\"\n                        [isCollapsed]=\"group.isCollapsed\"\n                        (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                        <div class=\"ax-flex ax-flex-col\">\n                            @for (p of group.props; track $index) {\n                            @if (isPropertyVisible(p)) {\n                            <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\">\n                            </ng-container>\n                            }\n                            }\n                        </div>\n                    </ax-accordion-item>\n                    }\n                </ax-accordion-group>\n            </div>\n        </div>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Simple mode: flat list of properties with padding -->\n        @else {\n        <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n            @for (group of groups(); track $index) {\n            @for (p of group.props; track $index) {\n            @if (isPropertyVisible(p)) {\n            <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\">\n            </ng-container>\n            }\n            }\n            }\n        </div>\n        }\n        <!-- #endregion -->\n    </axp-widgets-container>\n</ax-form>", styles: ["axp-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important;border-bottom-width:1px!important;background-color:rgb(var(--ax-sys-color-lighter-surface))!important;color:rgb(var(--ax-sys-color-on-lighter-surface))!important;border-color:rgb(var(--ax-sys-color-border-lighter-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i2$8.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$8.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$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: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i4$2.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$6.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i8.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i8.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPropertyViewerComponent, isStandalone: true, selector: "axp-property-viewer", inputs: { tabsInput: { classPropertyName: "tabsInput", publicName: "tabsInput", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, bindingExpressionEditorMode: { classPropertyName: "bindingExpressionEditorMode", publicName: "bindingExpressionEditorMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-form>\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n        <!-- #region Shared property row template (used in both advanced and simple modes) -->\n        <ng-template #propertyRow let-prop=\"prop\" let-translateTitle=\"translateTitle\">\n            <div class=\"ax-flex ax-flex-col ax-gap-2 ax-py-2\">\n                <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n                <div class=\"ax-flex ax-items-center ax-gap-2 ax-w-full\">\n                    @if (prop.showLabel !== false) {\n                    @if (translateTitle) {\n                    <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title | translate | async }}</span>\n                    } @else {\n                    <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title }}</span>\n                    }\n                    }\n                    @if (prop.binding?.enabled) {\n                    <div class=\"ax-flex ax-gap-1 ax-shrink-0 ax-xs\">\n                        <ax-button [toggleable]=\"true\" [selected]=\"isExpressionMode(prop)\" look=\"twotone\"\n                            [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\" class=\"ax-shrink-0\"\n                            [title]=\"(isExpressionMode(prop) ? '@general:terms.common.expression' : '@general:terms.common.value') | translate | async\"\n                            (selectedChange)=\"setExpressionMode(prop, $event)\">\n                            @if (isExpressionMode(prop)) {\n                            <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                            } @else {\n                            <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n                            }\n                        </ax-button>\n                    </div>\n                    }\n                </div>\n                <!-- Property content: expression editor (inline or popup) or widget renderer (value mode) -->\n                @if (prop.binding?.enabled && isExpressionMode(prop)) {\n                @if (bindingExpressionEditorMode() === 'inline') {\n                <div class=\"ax-w-full ax-overflow-hidden\" style=\"direction: ltr;\">\n                    <ax-code-editor [ngModel]=\"getBindingExpressionValue(prop)\"\n                        (ngModelChange)=\"setBindingExpressionValue(prop, $event)\" language=\"javascript\"\n                        [lineNumbers]=\"true\" class=\"ax-w-full\">\n                    </ax-code-editor>\n                </div>\n                } @else {\n                <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n                    [text]=\"'@general:widgets.triggers.open-editor' | translate | async\"\n                    (onClick)=\"openBindingEditor(prop)\"\n                    [title]=\"'@general:widgets.triggers.edit-binding-expression' | translate | async\">\n                    <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                    </ax-prefix>\n                </ax-button>\n                }\n                } @else if (prop.schema.interface) {\n                <ng-container axp-widget-renderer [node]=\"prop.schema.interface\" [mode]=\"'edit'\">\n                </ng-container>\n                }\n            </div>\n        </ng-template>\n        <!-- #endregion -->\n\n        <!-- #region Advanced mode: tabs + accordion groups -->\n        @if (mode() === 'advanced') {\n        <div class=\"ax-flex ax-flex-col\">\n            @if (tabs().length > 1) {\n            <div class=\"ax-pb-2\">\n                <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                    @for (tab of tabs(); track $index) {\n                    <ax-tab-item [text]=\"(tab.title | translate | async) ?? ''\" [key]=\"$index.toString()\"\n                        [active]=\"currentTabIndex() === $index\">\n                    </ax-tab-item>\n                    }\n                </ax-tabs>\n            </div>\n            }\n            <div class=\"ax-flex-1 ax-overflow-auto\">\n                <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n                    @for (group of groups(); track $index) {\n                    <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"(group.title | translate | async) ?? ''\"\n                        [isCollapsed]=\"group.isCollapsed\"\n                        (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                        <div class=\"ax-flex ax-flex-col\">\n                            @for (p of group.props; track $index) {\n                            @if (isPropertyVisible(p)) {\n                            <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\">\n                            </ng-container>\n                            }\n                            }\n                        </div>\n                    </ax-accordion-item>\n                    }\n                </ax-accordion-group>\n            </div>\n        </div>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Simple mode: flat list of properties with padding -->\n        @else {\n        <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n            @for (group of groups(); track $index) {\n            @for (p of group.props; track $index) {\n            @if (isPropertyVisible(p)) {\n            <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\">\n            </ng-container>\n            }\n            }\n            }\n        </div>\n        }\n        <!-- #endregion -->\n    </axp-widgets-container>\n</ax-form>", styles: ["axp-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important;border-bottom-width:1px!important;background-color:rgb(var(--ax-sys-color-lighter-surface))!important;color:rgb(var(--ax-sys-color-on-lighter-surface))!important;border-color:rgb(var(--ax-sys-color-border-lighter-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i2$8.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$8.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$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: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i4$2.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$6.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i8.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i8.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPropertyViewerComponent, decorators: [{
             type: Component,
@@ -6649,13 +6648,22 @@ class AXPAvatarComponent {
         const colors = ['primary', 'secondary', 'danger', 'warning', 'success', 'accent1', 'accent2', 'accent3'];
         const index = this.hashString(text) % colors.length;
         return colors[index];
+        // add tailwind classes for compilation
+        // ax-primary-lightest
+        // ax-secondary-lightest
+        // ax-danger-lightest
+        // ax-warning-lightest
+        // ax-success-lightest
+        // ax-accent1-lightest
+        // ax-accent2-lightest
+        // ax-accent3-lightest
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPAvatarComponent, isStandalone: true, selector: "axp-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: false, transformFunction: null }, fallbackText: { classPropertyName: "fallbackText", publicName: "fallbackText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\">\n  @if (hasAvatar()) {\n  <ng-container>\n    <ax-image\n      (onError)=\"onImageError($event)\"\n      (onLoad)=\"onImageLoad($event)\"\n      [src]=\"resolvedSrc()\"\n      [class.ax-opacity-0]=\"isLoading()\"\n      class=\"ax-transition-opacity ax-duration-200\"\n    />\n    @if (isLoading()) {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\" />\n    }\n  </ng-container>\n  } @else {\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest\">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n", dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$7.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPAvatarComponent, isStandalone: true, selector: "axp-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: false, transformFunction: null }, fallbackText: { classPropertyName: "fallbackText", publicName: "fallbackText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\"\n  class=\"ax-{{ avatarColor() }}-lightest ax-border \">\n  @if (hasAvatar()) {\n  <ng-container>\n    <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"resolvedSrc()\"\n      [class.ax-opacity-0]=\"isLoading()\" class=\"ax-transition-opacity ax-duration-200\" />\n    @if (isLoading()) {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\" />\n    }\n  </ng-container>\n  } @else {\n  <ax-text>\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>", styles: [":host ax-text{border-style:none;background-color:transparent;color:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$7.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\">\n  @if (hasAvatar()) {\n  <ng-container>\n    <ax-image\n      (onError)=\"onImageError($event)\"\n      (onLoad)=\"onImageLoad($event)\"\n      [src]=\"resolvedSrc()\"\n      [class.ax-opacity-0]=\"isLoading()\"\n      class=\"ax-transition-opacity ax-duration-200\"\n    />\n    @if (isLoading()) {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\" />\n    }\n  </ng-container>\n  } @else {\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest\">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n" }]
+            args: [{ selector: 'axp-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\"\n  class=\"ax-{{ avatarColor() }}-lightest ax-border \">\n  @if (hasAvatar()) {\n  <ng-container>\n    <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"resolvedSrc()\"\n      [class.ax-opacity-0]=\"isLoading()\" class=\"ax-transition-opacity ax-duration-200\" />\n    @if (isLoading()) {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\" />\n    }\n  </ng-container>\n  } @else {\n  <ax-text>\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>", styles: [":host ax-text{border-style:none;background-color:transparent;color:unset!important}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], fullName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullName", required: false }] }], fallbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
 const AXP_USER_AVATAR_PROVIDER = new InjectionToken('AXP_USER_AVATAR_PROVIDER');
@@ -6901,7 +6909,6 @@ class AXPItemConfiguratorComponent {
     //#region ----   Lifecycle   ----
     constructor() {
         //#region ----   Services & Dependencies ----
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
         //#endregion
         //#region ----   Inputs   ----
         //#region ----   Inputs   ----
@@ -6929,12 +6936,12 @@ class AXPItemConfiguratorComponent {
                 if (!id) {
                     continue;
                 }
-                const title = this.mlResolver.resolve(row.title).trim() || id;
+                const title = this.translationService.resolve(row.title).trim() || id;
                 list.push({
                     value: id,
                     text: title,
                     icon: row.icon,
-                    description: row.description != null ? this.mlResolver.resolve(row.description) : undefined,
+                    description: row.description != null ? this.translationService.resolve(row.description) : undefined,
                 });
             }
             const locale = this.translationService.getActiveLang();
@@ -6963,7 +6970,7 @@ class AXPItemConfiguratorComponent {
             const hasProperties = this.resolvedPropertyDefinitions().length > 0;
             if (listItem != null) {
                 return {
-                    title: this.mlResolver.resolve(listItem.title).trim() || itemId,
+                    title: this.translationService.resolve(listItem.title).trim() || itemId,
                     description: listItem.description,
                     icon: listItem.icon,
                     hasProperties,
@@ -7044,7 +7051,9 @@ class AXPItemConfiguratorComponent {
             options: cloneDeep(this.values()),
         });
         const rawTitle = this.currentItemConfig()?.title?.trim() || this.selectedItemId().trim();
-        const resolvedTitle = rawTitle.startsWith('@') ? (await this.translationService.translateAsync(rawTitle)) || rawTitle : rawTitle;
+        const resolvedTitle = rawTitle.startsWith('@')
+            ? (await this.translationService.translateAsync(rawTitle)) || rawTitle
+            : rawTitle;
         const nameForDialog = resolvedTitle.trim();
         const title = (await this.translationService.translateAsync('@general:actions.configure.named-title', {
             params: { name: nameForDialog || '—' },
@@ -7062,9 +7071,7 @@ class AXPItemConfiguratorComponent {
             .show());
         if (result?.values && typeof result.values === 'object') {
             const rv = result.values;
-            const optsPatch = rv['options'] !== undefined &&
-                typeof rv['options'] === 'object' &&
-                !Array.isArray(rv['options'])
+            const optsPatch = rv['options'] !== undefined && typeof rv['options'] === 'object' && !Array.isArray(rv['options'])
                 ? rv['options']
                 : rv;
             this.values.set(merge({}, cloneDeep(this.values()), cloneDeep(optsPatch)));
@@ -7091,7 +7098,7 @@ class AXPItemConfiguratorComponent {
         return action.disabled === true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPItemConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "itemSelectBox", first: true, predicate: ["itemSelectBox"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n  <div class=\"__item-selector\">\n    <ax-select-box #itemSelectBox [ngModel]=\"selectedItemId()\" [dataSource]=\"availableItems()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onSelectionChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [selectedTemplate]=\"selectedTemplate\" (onClosed)=\"exitEditMode()\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  @if (!isEditMode()) {\n  @if (selectedItemId() && currentItemConfig(); as config) {\n  <div class=\"__item-info\">\n    <div class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n      <div>\n        @if (config.icon) {\n        <i [class]=\"config.icon\"></i>\n        }\n        <div>\n          <span>\n            {{ config.title }}\n          </span>\n          @if (config.description) {\n          <p>\n            {{ (config.description | axpResolveMultiLanguageString | translate | async) ?? '' }}\n          </p>\n          }\n        </div>\n      </div>\n\n      <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n        @if (config.hasProperties) {\n        <ax-button [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openConfigureDialog()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        @for (action of visibleHeaderActions(); track action.name ?? $index) {\n        <ax-button look=\"blank\" size=\"sm\" [color]=\"action.color ?? 'default'\"\n          [disabled]=\"readonly() || isHeaderActionDisabled(action)\" [title]=\"(action.title | translate | async) ?? ''\"\n          [class.ax-icon-only]=\"action.iconOnly === true\" (onClick)=\"onHeaderActionClick(action)\">\n          @if (action.icon) {\n          <ax-icon [icon]=\"action.icon\"></ax-icon>\n          }\n          @if (action.iconOnly !== true) {\n          <span>{{ (action.title | translate | async) ?? '' }}</span>\n          }\n        </ax-button>\n        }\n      </div>\n    </div>\n\n    <!-- @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    } -->\n  </div>\n  } @else {\n  <div class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-text-neutral-600\">\n          {{ item.description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n      <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-select-box{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$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: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$5.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "itemSelectBox", first: true, predicate: ["itemSelectBox"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n    <div class=\"__item-selector\">\n      <ax-select-box\n        #itemSelectBox\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"availableItems()\"\n        [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [itemTemplate]=\"itemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-search-box></ax-search-box>\n        <ax-clear-button></ax-clear-button>\n      </ax-select-box>\n    </div>\n  }\n\n  @if (!isEditMode()) {\n    @if (selectedItemId() && currentItemConfig(); as config) {\n      <div class=\"__item-info\">\n        <div class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n          <div>\n            @if (config.icon) {\n              <i [class]=\"config.icon\"></i>\n            }\n            <div>\n              <span>\n                {{ config.title }}\n              </span>\n              @if (config.description) {\n                <p>\n                  {{ (config.description | translate | async) ?? '' }}\n                </p>\n              }\n            </div>\n          </div>\n\n          <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n            @if (config.hasProperties) {\n              <ax-button\n                [disabled]=\"!canConfigure() || readonly()\"\n                [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\"\n                look=\"blank\"\n                [color]=\"isConfigured() ? 'primary' : 'default'\"\n                size=\"sm\"\n                (onClick)=\"openConfigureDialog()\"\n              >\n                <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n              </ax-button>\n            }\n            @for (action of visibleHeaderActions(); track action.name ?? $index) {\n              <ax-button\n                look=\"blank\"\n                size=\"sm\"\n                [color]=\"action.color ?? 'default'\"\n                [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n                [title]=\"(action.title | translate | async) ?? ''\"\n                [class.ax-icon-only]=\"action.iconOnly === true\"\n                (onClick)=\"onHeaderActionClick(action)\"\n              >\n                @if (action.icon) {\n                  <ax-icon [icon]=\"action.icon\"></ax-icon>\n                }\n                @if (action.iconOnly !== true) {\n                  <span>{{ (action.title | translate | async) ?? '' }}</span>\n                }\n              </ax-button>\n            }\n          </div>\n        </div>\n\n        <!-- @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    } -->\n      </div>\n    } @else {\n      <div class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n        <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text }}\n        </div>\n        @if (item.description) {\n          <div class=\"ax-text-xs ax-text-neutral-600\">\n            {{ item.description }}\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n        <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-select-box{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$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: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$5.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPItemConfiguratorComponent, decorators: [{
             type: Component,
@@ -7104,8 +7111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXDecoratorModule,
                         AXTranslationModule,
                         AXSearchBoxModule,
-                        AXPResolveMultiLanguageStringPipe,
-                    ], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n  <div class=\"__item-selector\">\n    <ax-select-box #itemSelectBox [ngModel]=\"selectedItemId()\" [dataSource]=\"availableItems()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onSelectionChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [selectedTemplate]=\"selectedTemplate\" (onClosed)=\"exitEditMode()\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  @if (!isEditMode()) {\n  @if (selectedItemId() && currentItemConfig(); as config) {\n  <div class=\"__item-info\">\n    <div class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n      <div>\n        @if (config.icon) {\n        <i [class]=\"config.icon\"></i>\n        }\n        <div>\n          <span>\n            {{ config.title }}\n          </span>\n          @if (config.description) {\n          <p>\n            {{ (config.description | axpResolveMultiLanguageString | translate | async) ?? '' }}\n          </p>\n          }\n        </div>\n      </div>\n\n      <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n        @if (config.hasProperties) {\n        <ax-button [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openConfigureDialog()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        @for (action of visibleHeaderActions(); track action.name ?? $index) {\n        <ax-button look=\"blank\" size=\"sm\" [color]=\"action.color ?? 'default'\"\n          [disabled]=\"readonly() || isHeaderActionDisabled(action)\" [title]=\"(action.title | translate | async) ?? ''\"\n          [class.ax-icon-only]=\"action.iconOnly === true\" (onClick)=\"onHeaderActionClick(action)\">\n          @if (action.icon) {\n          <ax-icon [icon]=\"action.icon\"></ax-icon>\n          }\n          @if (action.iconOnly !== true) {\n          <span>{{ (action.title | translate | async) ?? '' }}</span>\n          }\n        </ax-button>\n        }\n      </div>\n    </div>\n\n    <!-- @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    } -->\n  </div>\n  } @else {\n  <div class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-text-neutral-600\">\n          {{ item.description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n      <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-select-box{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"] }]
+                    ], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n    <div class=\"__item-selector\">\n      <ax-select-box\n        #itemSelectBox\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"availableItems()\"\n        [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [itemTemplate]=\"itemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-search-box></ax-search-box>\n        <ax-clear-button></ax-clear-button>\n      </ax-select-box>\n    </div>\n  }\n\n  @if (!isEditMode()) {\n    @if (selectedItemId() && currentItemConfig(); as config) {\n      <div class=\"__item-info\">\n        <div class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n          <div>\n            @if (config.icon) {\n              <i [class]=\"config.icon\"></i>\n            }\n            <div>\n              <span>\n                {{ config.title }}\n              </span>\n              @if (config.description) {\n                <p>\n                  {{ (config.description | translate | async) ?? '' }}\n                </p>\n              }\n            </div>\n          </div>\n\n          <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n            @if (config.hasProperties) {\n              <ax-button\n                [disabled]=\"!canConfigure() || readonly()\"\n                [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\"\n                look=\"blank\"\n                [color]=\"isConfigured() ? 'primary' : 'default'\"\n                size=\"sm\"\n                (onClick)=\"openConfigureDialog()\"\n              >\n                <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n              </ax-button>\n            }\n            @for (action of visibleHeaderActions(); track action.name ?? $index) {\n              <ax-button\n                look=\"blank\"\n                size=\"sm\"\n                [color]=\"action.color ?? 'default'\"\n                [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n                [title]=\"(action.title | translate | async) ?? ''\"\n                [class.ax-icon-only]=\"action.iconOnly === true\"\n                (onClick)=\"onHeaderActionClick(action)\"\n              >\n                @if (action.icon) {\n                  <ax-icon [icon]=\"action.icon\"></ax-icon>\n                }\n                @if (action.iconOnly !== true) {\n                  <span>{{ (action.title | translate | async) ?? '' }}</span>\n                }\n              </ax-button>\n            }\n          </div>\n        </div>\n\n        <!-- @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    } -->\n      </div>\n    } @else {\n      <div class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n        <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text }}\n        </div>\n        @if (item.description) {\n          <div class=\"ax-text-xs ax-text-neutral-600\">\n            {{ item.description }}\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n        <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-select-box{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectedItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemId", required: false }] }, { type: i0.Output, args: ["selectedItemIdChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], itemSelectBox: [{ type: i0.ViewChild, args: ['itemSelectBox', { isSignal: true }] }] } });
 //#region ----   Helpers   ----
 function isPropertyDefinitionArray(value) {
@@ -7281,7 +7287,7 @@ class AXPWidgetItemComponent {
     handleClick(event) {
         this.onWidgetClick.emit({
             event,
-            widget: this.widget()
+            widget: this.widget(),
         });
     }
     /**
@@ -7291,7 +7297,7 @@ class AXPWidgetItemComponent {
         event.stopPropagation(); // Prevent widget click event
         this.onPinClick.emit({
             event,
-            widget: this.widget()
+            widget: this.widget(),
         });
     }
     /**
@@ -7301,11 +7307,11 @@ class AXPWidgetItemComponent {
         return this.widget().icon || 'fa-light fa-document';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPWidgetItemComponent, isStandalone: true, selector: "axp-widget-item", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, showPinButton: { classPropertyName: "showPinButton", publicName: "showPinButton", isSignal: true, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onWidgetClick: "onWidgetClick", onPinClick: "onPinClick" }, ngImport: i0, template: "<div (click)=\"handleClick($event)\"\n    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n    [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n    [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n    <!-- Widget Icon -->\n    <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n        [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n        [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n        <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n    </div>\n\n    <!-- Widget Content -->\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n            <!-- Widget Title -->\n            <div class=\"ax-font-semibold ax-text-sm ax-truncate\"\n                [title]=\"(widget().title | axpResolveMultiLanguageString | translate | async) ?? ''\">\n                {{ (widget().title | axpResolveMultiLanguageString | translate | async) ?? '' }}\n            </div>\n\n            <!-- Pin Button -->\n            @if (showPinButton()) {\n            <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n                @if (widget().isPinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\"\n                    [title]=\"(i18n.unpin | translate | async) ?? ''\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n                    [title]=\"(i18n.pin | translate | async) ?? ''\"></i>\n                }\n            </div>\n            }\n        </div>\n\n        <!-- Widget Description -->\n        @if (widget().description; as desc) {\n        <span class=\"ax-text-xs ax-truncate\"\n            [title]=\"(desc | axpResolveMultiLanguageString | translate | async) ?? ''\">\n            {{ (desc | axpResolveMultiLanguageString | translate | async) ?? '' }}\n        </span>\n        }\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPWidgetItemComponent, isStandalone: true, selector: "axp-widget-item", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, showPinButton: { classPropertyName: "showPinButton", publicName: "showPinButton", isSignal: true, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onWidgetClick: "onWidgetClick", onPinClick: "onPinClick" }, ngImport: i0, template: "<div\n  (click)=\"handleClick($event)\"\n  class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n  [class.ax-bg-primary-lightest]=\"isSelected()\"\n  [class.ax-text-primary-on-lightest]=\"isSelected()\"\n  [class.ax-border-primary-lightest]=\"isSelected()\"\n  [class]=\"customClasses()\"\n>\n  <!-- Widget Icon -->\n  <div\n    class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n    [class.ax-bg-primary-light]=\"isSelected()\"\n    [class.ax-text-primary-on-light]=\"isSelected()\"\n    [class.ax-border-primary-light]=\"isSelected()\"\n    [class.ax-surface]=\"!isSelected()\"\n  >\n    <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n  </div>\n\n  <!-- Widget Content -->\n  <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n      <!-- Widget Title -->\n      <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"(widget().title | translate | async) ?? ''\">\n        {{ (widget().title | translate | async) ?? '' }}\n      </div>\n\n      <!-- Pin Button -->\n      @if (showPinButton()) {\n        <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n          @if (widget().isPinned) {\n            <i\n              class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\"\n              [title]=\"(i18n.unpin | translate | async) ?? ''\"\n            ></i>\n          } @else {\n            <i\n              class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n              [title]=\"(i18n.pin | translate | async) ?? ''\"\n            ></i>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Widget Description -->\n    @if (widget().description; as desc) {\n      <span class=\"ax-text-xs ax-truncate\" [title]=\"(desc | translate | async) ?? ''\">\n        {{ (desc | translate | async) ?? '' }}\n      </span>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-widget-item', imports: [CommonModule, AXTranslationModule, AXPResolveMultiLanguageStringPipe], encapsulation: ViewEncapsulation.None, template: "<div (click)=\"handleClick($event)\"\n    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n    [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n    [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n    <!-- Widget Icon -->\n    <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n        [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n        [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n        <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n    </div>\n\n    <!-- Widget Content -->\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n            <!-- Widget Title -->\n            <div class=\"ax-font-semibold ax-text-sm ax-truncate\"\n                [title]=\"(widget().title | axpResolveMultiLanguageString | translate | async) ?? ''\">\n                {{ (widget().title | axpResolveMultiLanguageString | translate | async) ?? '' }}\n            </div>\n\n            <!-- Pin Button -->\n            @if (showPinButton()) {\n            <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n                @if (widget().isPinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\"\n                    [title]=\"(i18n.unpin | translate | async) ?? ''\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n                    [title]=\"(i18n.pin | translate | async) ?? ''\"></i>\n                }\n            </div>\n            }\n        </div>\n\n        <!-- Widget Description -->\n        @if (widget().description; as desc) {\n        <span class=\"ax-text-xs ax-truncate\"\n            [title]=\"(desc | axpResolveMultiLanguageString | translate | async) ?? ''\">\n            {{ (desc | axpResolveMultiLanguageString | translate | async) ?? '' }}\n        </span>\n        }\n    </div>\n</div>" }]
+            args: [{ selector: 'axp-widget-item', imports: [CommonModule, AXTranslationModule], encapsulation: ViewEncapsulation.None, template: "<div\n  (click)=\"handleClick($event)\"\n  class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n  [class.ax-bg-primary-lightest]=\"isSelected()\"\n  [class.ax-text-primary-on-lightest]=\"isSelected()\"\n  [class.ax-border-primary-lightest]=\"isSelected()\"\n  [class]=\"customClasses()\"\n>\n  <!-- Widget Icon -->\n  <div\n    class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n    [class.ax-bg-primary-light]=\"isSelected()\"\n    [class.ax-text-primary-on-light]=\"isSelected()\"\n    [class.ax-border-primary-light]=\"isSelected()\"\n    [class.ax-surface]=\"!isSelected()\"\n  >\n    <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n  </div>\n\n  <!-- Widget Content -->\n  <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n      <!-- Widget Title -->\n      <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"(widget().title | translate | async) ?? ''\">\n        {{ (widget().title | translate | async) ?? '' }}\n      </div>\n\n      <!-- Pin Button -->\n      @if (showPinButton()) {\n        <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n          @if (widget().isPinned) {\n            <i\n              class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\"\n              [title]=\"(i18n.unpin | translate | async) ?? ''\"\n            ></i>\n          } @else {\n            <i\n              class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n              [title]=\"(i18n.pin | translate | async) ?? ''\"\n            ></i>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Widget Description -->\n    @if (widget().description; as desc) {\n      <span class=\"ax-text-xs ax-truncate\" [title]=\"(desc | translate | async) ?? ''\">\n        {{ (desc | translate | async) ?? '' }}\n      </span>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], showPinButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPinButton", required: false }] }], customClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClasses", required: false }] }], onWidgetClick: [{ type: i0.Output, args: ["onWidgetClick"] }], onPinClick: [{ type: i0.Output, args: ["onPinClick"] }] } });
 
 class AXPWidgetPropertyViewerComponent {
@@ -7883,6 +7889,7 @@ class AXPResourceAppointmentComponent {
         //#region ---- Services & Dependencies ----
         this.resourceAppointmentService = inject(AXPResourceAppointmentService);
         this.formatService = inject(AXFormatService);
+        this.translateService = inject(AXTranslationService);
         //#endregion
         //#region ---- Component References ----
         this.contextMenu = viewChild('contextMenu', ...(ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []));
@@ -8006,8 +8013,14 @@ class AXPResourceAppointmentComponent {
         };
         const actions = await this.resourceAppointmentService.getActions(item, providerName);
         for (const actionItem of actions) {
+            const t = actionItem.title;
+            const text = typeof t === 'string'
+                ? t.startsWith('@')
+                    ? await this.translateService.translateAsync(t)
+                    : t
+                : this.translateService.resolve(t);
             event.items.push({
-                text: actionItem.title,
+                text,
                 icon: actionItem.icon,
                 color: actionItem.color,
                 break: actionItem.break,
@@ -8079,9 +8092,7 @@ class AXPSectionItemsBuilderComponent {
             return;
         const sections = [...this.sectionsModel().sections];
         const p = partial;
-        const fromPartial = (typeof p['name'] === 'string' && p['name'].trim()) ||
-            (typeof p['id'] === 'string' && p['id'].trim()) ||
-            '';
+        const fromPartial = (typeof p['name'] === 'string' && p['name'].trim()) || (typeof p['id'] === 'string' && p['id'].trim()) || '';
         const id = fromPartial || AXPDataGenerator.uuid();
         const section = {
             ...partial,
@@ -8318,7 +8329,7 @@ class AXPSectionItemsBuilderComponent {
         return items.map((it, i) => ({ ...it, order: i }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSectionItemsBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSectionItemsBuilderComponent, isStandalone: true, selector: "axp-section-items-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, readonlyMode: { classPropertyName: "readonlyMode", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "axp-section-items-builder-host" }, ngImport: i0, template: "<div class=\"axp-section-items-builder\" *translate=\"let t\">\n  <div class=\"__content\">\n    @if (sectionsModel().sections.length === 0) {\n    <axp-state-message icon=\"fa-light fa-layer-group\" [title]=\"definition().texts.emptySectionsTitle\"\n      [description]=\"definition().texts.emptySectionsDescription\">\n    </axp-state-message>\n    } @else {\n    <div class=\"__sections-container\" cdkDropList [cdkDropListData]=\"sectionsModel().sections\"\n      (cdkDropListDropped)=\"onSectionDrop($event)\">\n      @for (row of sectionRows(); track row.section.id) {\n      <div class=\"__section\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n        <div class=\"__section-header\">\n          @if (!readonlyMode()) {\n          <div class=\"__section-drag-handle\" cdkDragHandle>\n            <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n          </div>\n          }\n          <div class=\"__section-info\">\n            @let secTitle = sectionTitleValue(row.section) | axpResolveMultiLanguageString;\n            <h3 class=\"__section-title\" [title]=\"secTitle\">\n              {{ secTitle }}\n              @if (definition().showSectionTechnicalName) {\n              @let secTechName = sectionNameValue(row.section) | axpResolveMultiLanguageString;\n              @if (secTechName.trim()) {\n              <span class=\"__section-name-prefix\">({{ secTechName }})</span>\n              }\n              }\n              @if (isDefaultSection(row.section)) {\n              @if (definition().texts.defaultSectionBadge; as defaultBadge) {\n              <span class=\"__default-section-badge\">{{ defaultBadge | translate | async }}</span>\n              }\n              }\n            </h3>\n            @let secDesc = sectionDescriptionValue(row.section) | axpResolveMultiLanguageString;\n            @let secDescTrimmed = secDesc.trim();\n            @if (secDescTrimmed) {\n              @if (containsHtmlMarkup(secDescTrimmed)) {\n            <div\n              class=\"__section-description __section-description--rich\"\n              [title]=\"tooltipPlainTextForHtml(secDesc)\"\n              [innerHTML]=\"secDesc | safe: 'html'\"\n            ></div>\n              } @else {\n            <p class=\"__section-description\" [title]=\"secDescTrimmed\">{{ secDescTrimmed }}</p>\n              }\n            }\n          </div>\n          @if (!readonlyMode()) {\n          <div class=\"__section-actions\">\n            @if (definition().promptAddItems) {\n            <ax-button class=\"ax-sm\" [text]=\"definition().texts.addItem | translate | async\" [color]=\"'accent2'\"\n              (onClick)=\"onAddItems(row.section)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            }\n            @if (definition().promptEditSection || canRemoveSection()) {\n            <div class=\"__section-inline-actions\">\n              @if (definition().promptEditSection) {\n              <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"onEditSection(row.section)\">\n                <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n              </ax-button>\n              }\n              @if (canRemoveSection()) {\n              <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"onRemoveSection(row.section)\">\n                <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-button>\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n\n        <div class=\"__items-container\">\n          <div class=\"__items-list\" cdkDropList [id]=\"sectionItemsListId(row.section.id)\"\n            [cdkDropListData]=\"row.section.items\" [cdkDropListConnectedTo]=\"itemDropListIds()\"\n            (cdkDropListDropped)=\"onItemDrop($event, row.section.id)\">\n            @if (row.itemRows.length === 0) {\n            <axp-state-message icon=\"fa-light fa-inbox\" [title]=\"definition().texts.emptyItemsTitle\"\n              [description]=\"definition().texts.emptyItemsDescription\">\n            </axp-state-message>\n            } @else {\n            @for (ir of row.itemRows; track ir.item.id) {\n            <div class=\"__item\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n              @if (!readonlyMode()) {\n              <div class=\"__drag-handle\" cdkDragHandle>\n                <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n              </div>\n              }\n              <div class=\"__item-content\">\n                <div class=\"__item-leading\"\n                  [title]=\"itemMultilingualField(ir.item, 'title', ir.view.title) | axpResolveMultiLanguageString\">\n                  <div class=\"__item-icon\" [class.__tone-easy]=\"ir.view.iconTone === 'easy'\"\n                    [class.__tone-medium]=\"ir.view.iconTone === 'medium'\" [class.__tone-hard]=\"ir.view.iconTone === 'hard'\">\n                    <ax-icon [icon]=\"ir.view.icon\"></ax-icon>\n                  </div>\n                </div>\n                <div class=\"__item-info\">\n                  <div class=\"__item-info-body\">\n                    <div class=\"__title-row\">\n                      @let itemTitle = itemMultilingualField(ir.item, 'title', ir.view.title) | axpResolveMultiLanguageString;\n                      @let itemName = itemMultilingualField(ir.item, 'name', ir.view.name) | axpResolveMultiLanguageString;\n                      <h4 class=\"__item-title\" [title]=\"itemTitle + (itemName.trim() ? ' (' + itemName + ')' : '')\">\n                        {{ itemTitle }}\n                        @if (itemName.trim()) {\n                        <span class=\"__item-name-prefix\">({{ itemName }})</span>\n                        }\n                      </h4>\n                    </div>\n                    @let itemDesc = itemMultilingualField(ir.item, 'description', ir.view.description) | axpResolveMultiLanguageString;\n                    @let itemDescTrimmed = itemDesc.trim();\n                    @if (itemDescTrimmed) {\n                      @if (containsHtmlMarkup(itemDescTrimmed)) {\n                    <div\n                      class=\"__item-description __item-description--rich\"\n                      [title]=\"tooltipPlainTextForHtml(itemDesc)\"\n                      [innerHTML]=\"itemDesc | safe: 'html'\"\n                    ></div>\n                      } @else {\n                    <p class=\"__item-description\" [title]=\"itemDescTrimmed\">{{ itemDescTrimmed }}</p>\n                      }\n                    }\n                  </div>\n                  <div class=\"__title-actions\">\n                    @for (b of ir.view.badges; track $index) {\n                    <span class=\"__item-badge\" [class.__badge-neutral]=\"!b.variant || b.variant === 'neutral'\"\n                      [class.__badge-accent]=\"b.variant === 'accent'\" [class.__badge-warning]=\"b.variant === 'warning'\"\n                      [class.__badge-danger]=\"b.variant === 'danger'\" [class.__badge-success]=\"b.variant === 'success'\">\n                      @if (isTranslationKey(b.text)) {\n                      {{ b.text | translate | async }}\n                      } @else {\n                      {{ b.text }}\n                      }\n                    </span>\n                    }\n                    @if (!readonlyMode()) {\n                    <div class=\"__item-actions\">\n                      @if (definition().promptEditItem) {\n                      <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\"\n                        (onClick)=\"onEditItem(ir.item, row.section.id)\">\n                        <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                      </ax-button>\n                      }\n                      <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\"\n                        (onClick)=\"onRemoveItem(ir.item, row.section.id)\">\n                        <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                      </ax-button>\n                    </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n            }\n            }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [".axp-section-items-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-section-items-builder .__content{flex:1 1 0%;overflow:auto}.axp-section-items-builder .__sections-container{display:flex;flex-direction:column;gap:1rem}.axp-section-items-builder .__section{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-section-items-builder .__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-section-items-builder .__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__section .__section-header .__section-drag-handle:active{cursor:grabbing}.axp-section-items-builder .__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.axp-section-items-builder .__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description,.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p{margin:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.axp-section-items-builder .__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__section .__items-container{padding:1rem}.axp-section-items-builder .__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.axp-section-items-builder .__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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));-webkit-user-select:none;user-select:none}.axp-section-items-builder .__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__item .__drag-handle:active{cursor:grabbing}.axp-section-items-builder .__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.axp-section-items-builder .__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-section-items-builder .__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.axp-section-items-builder .__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.axp-section-items-builder .__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__item .__item-content .__item-description,.axp-section-items-builder .__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-description--rich p{margin:0}.axp-section-items-builder .__item .__item-content .__item-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.axp-section-items-builder .__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__item{cursor:move}.axp-section-items-builder .__item:hover{--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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container{padding:1rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{--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);box-sizing:border-box;opacity:.98}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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));-webkit-user-select:none;user-select:none}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-sizing:border-box;cursor:grabbing;opacity:.98}.__section.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin-bottom:1rem;min-height:8rem}.__section.cdk-drag-dragging{opacity:.7}.__item.cdk-drag-placeholder{position:relative;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));min-height:5rem;margin-bottom:.75rem;opacity:.5}.__item.cdk-drag-placeholder>*{opacity:0}.__item.cdk-drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-section-items-builder .__items-list.cdk-drop-list-dragging .__item:not(.cdk-drag-placeholder){margin-bottom:.75rem}.axp-section-items-builder .__items-list.cdk-drop-list-dragging,.axp-section-items-builder .__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__items-list.cdk-drop-list-dragging axp-state-message,.axp-section-items-builder .__items-list.cdk-drop-list-receiving axp-state-message{display:none}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging .__section:not(.cdk-drag-placeholder){margin-bottom:1rem}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging:has(.__section.cdk-drag-placeholder),.axp-section-items-builder .__sections-container.cdk-drop-list-receiving:has(.__section.cdk-drag-placeholder){border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }, { kind: "pipe", type: AXSafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSectionItemsBuilderComponent, isStandalone: true, selector: "axp-section-items-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, readonlyMode: { classPropertyName: "readonlyMode", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "axp-section-items-builder-host" }, ngImport: i0, template: "<div class=\"axp-section-items-builder\" *translate=\"let t\">\n  <div class=\"__content\">\n    @if (sectionsModel().sections.length === 0) {\n      <axp-state-message\n        icon=\"fa-light fa-layer-group\"\n        [title]=\"definition().texts.emptySectionsTitle\"\n        [description]=\"definition().texts.emptySectionsDescription\"\n      >\n      </axp-state-message>\n    } @else {\n      <div\n        class=\"__sections-container\"\n        cdkDropList\n        [cdkDropListData]=\"sectionsModel().sections\"\n        (cdkDropListDropped)=\"onSectionDrop($event)\"\n      >\n        @for (row of sectionRows(); track row.section.id) {\n          <div class=\"__section\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n            <div class=\"__section-header\">\n              @if (!readonlyMode()) {\n                <div class=\"__section-drag-handle\" cdkDragHandle>\n                  <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n                </div>\n              }\n              <div class=\"__section-info\">\n                @let secTitle = sectionTitleValue(row.section) | translate | async;\n                <h3 class=\"__section-title\" [title]=\"secTitle\">\n                  {{ secTitle }}\n                  @if (definition().showSectionTechnicalName) {\n                    @let secTechName = sectionNameValue(row.section) | translate | async;\n                    @if (secTechName?.trim()) {\n                      <span class=\"__section-name-prefix\">({{ secTechName }})</span>\n                    }\n                  }\n                  @if (isDefaultSection(row.section)) {\n                    @if (definition().texts.defaultSectionBadge; as defaultBadge) {\n                      <span class=\"__default-section-badge\">{{ defaultBadge | translate | async }}</span>\n                    }\n                  }\n                </h3>\n                @let secDesc = (sectionDescriptionValue(row.section) | translate | async) || '';\n                @let secDescTrimmed = secDesc?.trim();\n                @if (secDescTrimmed) {\n                  @if (containsHtmlMarkup(secDescTrimmed)) {\n                    <div\n                      class=\"__section-description __section-description--rich\"\n                      [title]=\"tooltipPlainTextForHtml(secDesc)\"\n                      [innerHTML]=\"secDesc | safe: 'html'\"\n                    ></div>\n                  } @else {\n                    <p class=\"__section-description\" [title]=\"secDescTrimmed\">{{ secDescTrimmed }}</p>\n                  }\n                }\n              </div>\n              @if (!readonlyMode()) {\n                <div class=\"__section-actions\">\n                  @if (definition().promptAddItems) {\n                    <ax-button\n                      class=\"ax-sm\"\n                      [text]=\"definition().texts.addItem | translate | async\"\n                      [color]=\"'accent2'\"\n                      (onClick)=\"onAddItems(row.section)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button>\n                  }\n                  @if (definition().promptEditSection || canRemoveSection()) {\n                    <div class=\"__section-inline-actions\">\n                      @if (definition().promptEditSection) {\n                        <ax-button\n                          class=\"ax-sm\"\n                          [look]=\"'blank'\"\n                          color=\"accent3\"\n                          (onClick)=\"onEditSection(row.section)\"\n                        >\n                          <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                        </ax-button>\n                      }\n                      @if (canRemoveSection()) {\n                        <ax-button\n                          class=\"ax-sm\"\n                          [look]=\"'blank'\"\n                          color=\"danger\"\n                          (onClick)=\"onRemoveSection(row.section)\"\n                        >\n                          <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                        </ax-button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n            <div class=\"__items-container\">\n              <div\n                class=\"__items-list\"\n                cdkDropList\n                [id]=\"sectionItemsListId(row.section.id)\"\n                [cdkDropListData]=\"row.section.items\"\n                [cdkDropListConnectedTo]=\"itemDropListIds()\"\n                (cdkDropListDropped)=\"onItemDrop($event, row.section.id)\"\n              >\n                @if (row.itemRows.length === 0) {\n                  <axp-state-message\n                    icon=\"fa-light fa-inbox\"\n                    [title]=\"definition().texts.emptyItemsTitle\"\n                    [description]=\"definition().texts.emptyItemsDescription\"\n                  >\n                  </axp-state-message>\n                } @else {\n                  @for (ir of row.itemRows; track ir.item.id) {\n                    <div class=\"__item\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n                      @if (!readonlyMode()) {\n                        <div class=\"__drag-handle\" cdkDragHandle>\n                          <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n                        </div>\n                      }\n                      <div class=\"__item-content\">\n                        <div\n                          class=\"__item-leading\"\n                          [title]=\"itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async\"\n                        >\n                          <div\n                            class=\"__item-icon\"\n                            [class.__tone-easy]=\"ir.view.iconTone === 'easy'\"\n                            [class.__tone-medium]=\"ir.view.iconTone === 'medium'\"\n                            [class.__tone-hard]=\"ir.view.iconTone === 'hard'\"\n                          >\n                            <ax-icon [icon]=\"ir.view.icon\"></ax-icon>\n                          </div>\n                        </div>\n                        <div class=\"__item-info\">\n                          <div class=\"__item-info-body\">\n                            <div class=\"__title-row\">\n                              @let itemTitle =\n                                itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async;\n                              @let itemName = itemMultilingualField(ir.item, 'name', ir.view.name) | translate | async;\n                              <h4\n                                class=\"__item-title\"\n                                [title]=\"itemTitle + (itemName?.trim() ? ' (' + itemName + ')' : '')\"\n                              >\n                                {{ itemTitle }}\n                                @if (itemName?.trim()) {\n                                  <span class=\"__item-name-prefix\">({{ itemName }})</span>\n                                }\n                              </h4>\n                            </div>\n                            @let itemDesc =\n                              (itemMultilingualField(ir.item, 'description', ir.view.description)\n                                | translate\n                                | async) || '';\n                            @let itemDescTrimmed = itemDesc?.trim();\n                            @if (itemDescTrimmed) {\n                              @if (containsHtmlMarkup(itemDescTrimmed)) {\n                                <div\n                                  class=\"__item-description __item-description--rich\"\n                                  [title]=\"tooltipPlainTextForHtml(itemDesc)\"\n                                  [innerHTML]=\"itemDesc | safe: 'html'\"\n                                ></div>\n                              } @else {\n                                <p class=\"__item-description\" [title]=\"itemDescTrimmed\">{{ itemDescTrimmed }}</p>\n                              }\n                            }\n                          </div>\n                          <div class=\"__title-actions\">\n                            @for (b of ir.view.badges; track $index) {\n                              <span\n                                class=\"__item-badge\"\n                                [class.__badge-neutral]=\"!b.variant || b.variant === 'neutral'\"\n                                [class.__badge-accent]=\"b.variant === 'accent'\"\n                                [class.__badge-warning]=\"b.variant === 'warning'\"\n                                [class.__badge-danger]=\"b.variant === 'danger'\"\n                                [class.__badge-success]=\"b.variant === 'success'\"\n                              >\n                                @if (isTranslationKey(b.text)) {\n                                  {{ b.text | translate | async }}\n                                } @else {\n                                  {{ b.text }}\n                                }\n                              </span>\n                            }\n                            @if (!readonlyMode()) {\n                              <div class=\"__item-actions\">\n                                @if (definition().promptEditItem) {\n                                  <ax-button\n                                    class=\"ax-sm\"\n                                    [look]=\"'blank'\"\n                                    color=\"accent3\"\n                                    (onClick)=\"onEditItem(ir.item, row.section.id)\"\n                                  >\n                                    <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                                  </ax-button>\n                                }\n                                <ax-button\n                                  [look]=\"'blank'\"\n                                  class=\"ax-sm\"\n                                  color=\"danger\"\n                                  (onClick)=\"onRemoveItem(ir.item, row.section.id)\"\n                                >\n                                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                                </ax-button>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-section-items-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-section-items-builder .__content{flex:1 1 0%;overflow:auto}.axp-section-items-builder .__sections-container{display:flex;flex-direction:column;gap:1rem}.axp-section-items-builder .__section{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-section-items-builder .__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-section-items-builder .__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__section .__section-header .__section-drag-handle:active{cursor:grabbing}.axp-section-items-builder .__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.axp-section-items-builder .__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description,.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p{margin:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.axp-section-items-builder .__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__section .__items-container{padding:1rem}.axp-section-items-builder .__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.axp-section-items-builder .__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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));-webkit-user-select:none;user-select:none}.axp-section-items-builder .__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__item .__drag-handle:active{cursor:grabbing}.axp-section-items-builder .__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.axp-section-items-builder .__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-section-items-builder .__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.axp-section-items-builder .__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.axp-section-items-builder .__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__item .__item-content .__item-description,.axp-section-items-builder .__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-description--rich p{margin:0}.axp-section-items-builder .__item .__item-content .__item-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.axp-section-items-builder .__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__item{cursor:move}.axp-section-items-builder .__item:hover{--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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container{padding:1rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{--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);box-sizing:border-box;opacity:.98}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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));-webkit-user-select:none;user-select:none}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-sizing:border-box;cursor:grabbing;opacity:.98}.__section.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin-bottom:1rem;min-height:8rem}.__section.cdk-drag-dragging{opacity:.7}.__item.cdk-drag-placeholder{position:relative;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));min-height:5rem;margin-bottom:.75rem;opacity:.5}.__item.cdk-drag-placeholder>*{opacity:0}.__item.cdk-drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-section-items-builder .__items-list.cdk-drop-list-dragging .__item:not(.cdk-drag-placeholder){margin-bottom:.75rem}.axp-section-items-builder .__items-list.cdk-drop-list-dragging,.axp-section-items-builder .__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__items-list.cdk-drop-list-dragging axp-state-message,.axp-section-items-builder .__items-list.cdk-drop-list-receiving axp-state-message{display:none}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging .__section:not(.cdk-drag-placeholder){margin-bottom:1rem}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging:has(.__section.cdk-drag-placeholder),.axp-section-items-builder .__sections-container.cdk-drop-list-receiving:has(.__section.cdk-drag-placeholder){border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXSafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSectionItemsBuilderComponent, decorators: [{
             type: Component,
@@ -8333,9 +8344,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         CdkDropList,
                         CdkDrag,
                         CdkDragHandle,
-                        AXPResolveMultiLanguageStringPipe,
                         AXSafePipe,
-                    ], template: "<div class=\"axp-section-items-builder\" *translate=\"let t\">\n  <div class=\"__content\">\n    @if (sectionsModel().sections.length === 0) {\n    <axp-state-message icon=\"fa-light fa-layer-group\" [title]=\"definition().texts.emptySectionsTitle\"\n      [description]=\"definition().texts.emptySectionsDescription\">\n    </axp-state-message>\n    } @else {\n    <div class=\"__sections-container\" cdkDropList [cdkDropListData]=\"sectionsModel().sections\"\n      (cdkDropListDropped)=\"onSectionDrop($event)\">\n      @for (row of sectionRows(); track row.section.id) {\n      <div class=\"__section\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n        <div class=\"__section-header\">\n          @if (!readonlyMode()) {\n          <div class=\"__section-drag-handle\" cdkDragHandle>\n            <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n          </div>\n          }\n          <div class=\"__section-info\">\n            @let secTitle = sectionTitleValue(row.section) | axpResolveMultiLanguageString;\n            <h3 class=\"__section-title\" [title]=\"secTitle\">\n              {{ secTitle }}\n              @if (definition().showSectionTechnicalName) {\n              @let secTechName = sectionNameValue(row.section) | axpResolveMultiLanguageString;\n              @if (secTechName.trim()) {\n              <span class=\"__section-name-prefix\">({{ secTechName }})</span>\n              }\n              }\n              @if (isDefaultSection(row.section)) {\n              @if (definition().texts.defaultSectionBadge; as defaultBadge) {\n              <span class=\"__default-section-badge\">{{ defaultBadge | translate | async }}</span>\n              }\n              }\n            </h3>\n            @let secDesc = sectionDescriptionValue(row.section) | axpResolveMultiLanguageString;\n            @let secDescTrimmed = secDesc.trim();\n            @if (secDescTrimmed) {\n              @if (containsHtmlMarkup(secDescTrimmed)) {\n            <div\n              class=\"__section-description __section-description--rich\"\n              [title]=\"tooltipPlainTextForHtml(secDesc)\"\n              [innerHTML]=\"secDesc | safe: 'html'\"\n            ></div>\n              } @else {\n            <p class=\"__section-description\" [title]=\"secDescTrimmed\">{{ secDescTrimmed }}</p>\n              }\n            }\n          </div>\n          @if (!readonlyMode()) {\n          <div class=\"__section-actions\">\n            @if (definition().promptAddItems) {\n            <ax-button class=\"ax-sm\" [text]=\"definition().texts.addItem | translate | async\" [color]=\"'accent2'\"\n              (onClick)=\"onAddItems(row.section)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            }\n            @if (definition().promptEditSection || canRemoveSection()) {\n            <div class=\"__section-inline-actions\">\n              @if (definition().promptEditSection) {\n              <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"onEditSection(row.section)\">\n                <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n              </ax-button>\n              }\n              @if (canRemoveSection()) {\n              <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"onRemoveSection(row.section)\">\n                <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-button>\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n\n        <div class=\"__items-container\">\n          <div class=\"__items-list\" cdkDropList [id]=\"sectionItemsListId(row.section.id)\"\n            [cdkDropListData]=\"row.section.items\" [cdkDropListConnectedTo]=\"itemDropListIds()\"\n            (cdkDropListDropped)=\"onItemDrop($event, row.section.id)\">\n            @if (row.itemRows.length === 0) {\n            <axp-state-message icon=\"fa-light fa-inbox\" [title]=\"definition().texts.emptyItemsTitle\"\n              [description]=\"definition().texts.emptyItemsDescription\">\n            </axp-state-message>\n            } @else {\n            @for (ir of row.itemRows; track ir.item.id) {\n            <div class=\"__item\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n              @if (!readonlyMode()) {\n              <div class=\"__drag-handle\" cdkDragHandle>\n                <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n              </div>\n              }\n              <div class=\"__item-content\">\n                <div class=\"__item-leading\"\n                  [title]=\"itemMultilingualField(ir.item, 'title', ir.view.title) | axpResolveMultiLanguageString\">\n                  <div class=\"__item-icon\" [class.__tone-easy]=\"ir.view.iconTone === 'easy'\"\n                    [class.__tone-medium]=\"ir.view.iconTone === 'medium'\" [class.__tone-hard]=\"ir.view.iconTone === 'hard'\">\n                    <ax-icon [icon]=\"ir.view.icon\"></ax-icon>\n                  </div>\n                </div>\n                <div class=\"__item-info\">\n                  <div class=\"__item-info-body\">\n                    <div class=\"__title-row\">\n                      @let itemTitle = itemMultilingualField(ir.item, 'title', ir.view.title) | axpResolveMultiLanguageString;\n                      @let itemName = itemMultilingualField(ir.item, 'name', ir.view.name) | axpResolveMultiLanguageString;\n                      <h4 class=\"__item-title\" [title]=\"itemTitle + (itemName.trim() ? ' (' + itemName + ')' : '')\">\n                        {{ itemTitle }}\n                        @if (itemName.trim()) {\n                        <span class=\"__item-name-prefix\">({{ itemName }})</span>\n                        }\n                      </h4>\n                    </div>\n                    @let itemDesc = itemMultilingualField(ir.item, 'description', ir.view.description) | axpResolveMultiLanguageString;\n                    @let itemDescTrimmed = itemDesc.trim();\n                    @if (itemDescTrimmed) {\n                      @if (containsHtmlMarkup(itemDescTrimmed)) {\n                    <div\n                      class=\"__item-description __item-description--rich\"\n                      [title]=\"tooltipPlainTextForHtml(itemDesc)\"\n                      [innerHTML]=\"itemDesc | safe: 'html'\"\n                    ></div>\n                      } @else {\n                    <p class=\"__item-description\" [title]=\"itemDescTrimmed\">{{ itemDescTrimmed }}</p>\n                      }\n                    }\n                  </div>\n                  <div class=\"__title-actions\">\n                    @for (b of ir.view.badges; track $index) {\n                    <span class=\"__item-badge\" [class.__badge-neutral]=\"!b.variant || b.variant === 'neutral'\"\n                      [class.__badge-accent]=\"b.variant === 'accent'\" [class.__badge-warning]=\"b.variant === 'warning'\"\n                      [class.__badge-danger]=\"b.variant === 'danger'\" [class.__badge-success]=\"b.variant === 'success'\">\n                      @if (isTranslationKey(b.text)) {\n                      {{ b.text | translate | async }}\n                      } @else {\n                      {{ b.text }}\n                      }\n                    </span>\n                    }\n                    @if (!readonlyMode()) {\n                    <div class=\"__item-actions\">\n                      @if (definition().promptEditItem) {\n                      <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\"\n                        (onClick)=\"onEditItem(ir.item, row.section.id)\">\n                        <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                      </ax-button>\n                      }\n                      <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\"\n                        (onClick)=\"onRemoveItem(ir.item, row.section.id)\">\n                        <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                      </ax-button>\n                    </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n            }\n            }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [".axp-section-items-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-section-items-builder .__content{flex:1 1 0%;overflow:auto}.axp-section-items-builder .__sections-container{display:flex;flex-direction:column;gap:1rem}.axp-section-items-builder .__section{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-section-items-builder .__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-section-items-builder .__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__section .__section-header .__section-drag-handle:active{cursor:grabbing}.axp-section-items-builder .__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.axp-section-items-builder .__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description,.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p{margin:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.axp-section-items-builder .__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__section .__items-container{padding:1rem}.axp-section-items-builder .__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.axp-section-items-builder .__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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));-webkit-user-select:none;user-select:none}.axp-section-items-builder .__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__item .__drag-handle:active{cursor:grabbing}.axp-section-items-builder .__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.axp-section-items-builder .__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-section-items-builder .__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.axp-section-items-builder .__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.axp-section-items-builder .__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__item .__item-content .__item-description,.axp-section-items-builder .__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-description--rich p{margin:0}.axp-section-items-builder .__item .__item-content .__item-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.axp-section-items-builder .__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__item{cursor:move}.axp-section-items-builder .__item:hover{--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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container{padding:1rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{--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);box-sizing:border-box;opacity:.98}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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));-webkit-user-select:none;user-select:none}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-sizing:border-box;cursor:grabbing;opacity:.98}.__section.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin-bottom:1rem;min-height:8rem}.__section.cdk-drag-dragging{opacity:.7}.__item.cdk-drag-placeholder{position:relative;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));min-height:5rem;margin-bottom:.75rem;opacity:.5}.__item.cdk-drag-placeholder>*{opacity:0}.__item.cdk-drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-section-items-builder .__items-list.cdk-drop-list-dragging .__item:not(.cdk-drag-placeholder){margin-bottom:.75rem}.axp-section-items-builder .__items-list.cdk-drop-list-dragging,.axp-section-items-builder .__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__items-list.cdk-drop-list-dragging axp-state-message,.axp-section-items-builder .__items-list.cdk-drop-list-receiving axp-state-message{display:none}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging .__section:not(.cdk-drag-placeholder){margin-bottom:1rem}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging:has(.__section.cdk-drag-placeholder),.axp-section-items-builder .__sections-container.cdk-drop-list-receiving:has(.__section.cdk-drag-placeholder){border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"] }]
+                    ], template: "<div class=\"axp-section-items-builder\" *translate=\"let t\">\n  <div class=\"__content\">\n    @if (sectionsModel().sections.length === 0) {\n      <axp-state-message\n        icon=\"fa-light fa-layer-group\"\n        [title]=\"definition().texts.emptySectionsTitle\"\n        [description]=\"definition().texts.emptySectionsDescription\"\n      >\n      </axp-state-message>\n    } @else {\n      <div\n        class=\"__sections-container\"\n        cdkDropList\n        [cdkDropListData]=\"sectionsModel().sections\"\n        (cdkDropListDropped)=\"onSectionDrop($event)\"\n      >\n        @for (row of sectionRows(); track row.section.id) {\n          <div class=\"__section\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n            <div class=\"__section-header\">\n              @if (!readonlyMode()) {\n                <div class=\"__section-drag-handle\" cdkDragHandle>\n                  <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n                </div>\n              }\n              <div class=\"__section-info\">\n                @let secTitle = sectionTitleValue(row.section) | translate | async;\n                <h3 class=\"__section-title\" [title]=\"secTitle\">\n                  {{ secTitle }}\n                  @if (definition().showSectionTechnicalName) {\n                    @let secTechName = sectionNameValue(row.section) | translate | async;\n                    @if (secTechName?.trim()) {\n                      <span class=\"__section-name-prefix\">({{ secTechName }})</span>\n                    }\n                  }\n                  @if (isDefaultSection(row.section)) {\n                    @if (definition().texts.defaultSectionBadge; as defaultBadge) {\n                      <span class=\"__default-section-badge\">{{ defaultBadge | translate | async }}</span>\n                    }\n                  }\n                </h3>\n                @let secDesc = (sectionDescriptionValue(row.section) | translate | async) || '';\n                @let secDescTrimmed = secDesc?.trim();\n                @if (secDescTrimmed) {\n                  @if (containsHtmlMarkup(secDescTrimmed)) {\n                    <div\n                      class=\"__section-description __section-description--rich\"\n                      [title]=\"tooltipPlainTextForHtml(secDesc)\"\n                      [innerHTML]=\"secDesc | safe: 'html'\"\n                    ></div>\n                  } @else {\n                    <p class=\"__section-description\" [title]=\"secDescTrimmed\">{{ secDescTrimmed }}</p>\n                  }\n                }\n              </div>\n              @if (!readonlyMode()) {\n                <div class=\"__section-actions\">\n                  @if (definition().promptAddItems) {\n                    <ax-button\n                      class=\"ax-sm\"\n                      [text]=\"definition().texts.addItem | translate | async\"\n                      [color]=\"'accent2'\"\n                      (onClick)=\"onAddItems(row.section)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button>\n                  }\n                  @if (definition().promptEditSection || canRemoveSection()) {\n                    <div class=\"__section-inline-actions\">\n                      @if (definition().promptEditSection) {\n                        <ax-button\n                          class=\"ax-sm\"\n                          [look]=\"'blank'\"\n                          color=\"accent3\"\n                          (onClick)=\"onEditSection(row.section)\"\n                        >\n                          <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                        </ax-button>\n                      }\n                      @if (canRemoveSection()) {\n                        <ax-button\n                          class=\"ax-sm\"\n                          [look]=\"'blank'\"\n                          color=\"danger\"\n                          (onClick)=\"onRemoveSection(row.section)\"\n                        >\n                          <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                        </ax-button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n            <div class=\"__items-container\">\n              <div\n                class=\"__items-list\"\n                cdkDropList\n                [id]=\"sectionItemsListId(row.section.id)\"\n                [cdkDropListData]=\"row.section.items\"\n                [cdkDropListConnectedTo]=\"itemDropListIds()\"\n                (cdkDropListDropped)=\"onItemDrop($event, row.section.id)\"\n              >\n                @if (row.itemRows.length === 0) {\n                  <axp-state-message\n                    icon=\"fa-light fa-inbox\"\n                    [title]=\"definition().texts.emptyItemsTitle\"\n                    [description]=\"definition().texts.emptyItemsDescription\"\n                  >\n                  </axp-state-message>\n                } @else {\n                  @for (ir of row.itemRows; track ir.item.id) {\n                    <div class=\"__item\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n                      @if (!readonlyMode()) {\n                        <div class=\"__drag-handle\" cdkDragHandle>\n                          <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n                        </div>\n                      }\n                      <div class=\"__item-content\">\n                        <div\n                          class=\"__item-leading\"\n                          [title]=\"itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async\"\n                        >\n                          <div\n                            class=\"__item-icon\"\n                            [class.__tone-easy]=\"ir.view.iconTone === 'easy'\"\n                            [class.__tone-medium]=\"ir.view.iconTone === 'medium'\"\n                            [class.__tone-hard]=\"ir.view.iconTone === 'hard'\"\n                          >\n                            <ax-icon [icon]=\"ir.view.icon\"></ax-icon>\n                          </div>\n                        </div>\n                        <div class=\"__item-info\">\n                          <div class=\"__item-info-body\">\n                            <div class=\"__title-row\">\n                              @let itemTitle =\n                                itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async;\n                              @let itemName = itemMultilingualField(ir.item, 'name', ir.view.name) | translate | async;\n                              <h4\n                                class=\"__item-title\"\n                                [title]=\"itemTitle + (itemName?.trim() ? ' (' + itemName + ')' : '')\"\n                              >\n                                {{ itemTitle }}\n                                @if (itemName?.trim()) {\n                                  <span class=\"__item-name-prefix\">({{ itemName }})</span>\n                                }\n                              </h4>\n                            </div>\n                            @let itemDesc =\n                              (itemMultilingualField(ir.item, 'description', ir.view.description)\n                                | translate\n                                | async) || '';\n                            @let itemDescTrimmed = itemDesc?.trim();\n                            @if (itemDescTrimmed) {\n                              @if (containsHtmlMarkup(itemDescTrimmed)) {\n                                <div\n                                  class=\"__item-description __item-description--rich\"\n                                  [title]=\"tooltipPlainTextForHtml(itemDesc)\"\n                                  [innerHTML]=\"itemDesc | safe: 'html'\"\n                                ></div>\n                              } @else {\n                                <p class=\"__item-description\" [title]=\"itemDescTrimmed\">{{ itemDescTrimmed }}</p>\n                              }\n                            }\n                          </div>\n                          <div class=\"__title-actions\">\n                            @for (b of ir.view.badges; track $index) {\n                              <span\n                                class=\"__item-badge\"\n                                [class.__badge-neutral]=\"!b.variant || b.variant === 'neutral'\"\n                                [class.__badge-accent]=\"b.variant === 'accent'\"\n                                [class.__badge-warning]=\"b.variant === 'warning'\"\n                                [class.__badge-danger]=\"b.variant === 'danger'\"\n                                [class.__badge-success]=\"b.variant === 'success'\"\n                              >\n                                @if (isTranslationKey(b.text)) {\n                                  {{ b.text | translate | async }}\n                                } @else {\n                                  {{ b.text }}\n                                }\n                              </span>\n                            }\n                            @if (!readonlyMode()) {\n                              <div class=\"__item-actions\">\n                                @if (definition().promptEditItem) {\n                                  <ax-button\n                                    class=\"ax-sm\"\n                                    [look]=\"'blank'\"\n                                    color=\"accent3\"\n                                    (onClick)=\"onEditItem(ir.item, row.section.id)\"\n                                  >\n                                    <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                                  </ax-button>\n                                }\n                                <ax-button\n                                  [look]=\"'blank'\"\n                                  class=\"ax-sm\"\n                                  color=\"danger\"\n                                  (onClick)=\"onRemoveItem(ir.item, row.section.id)\"\n                                >\n                                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                                </ax-button>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-section-items-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-section-items-builder .__content{flex:1 1 0%;overflow:auto}.axp-section-items-builder .__sections-container{display:flex;flex-direction:column;gap:1rem}.axp-section-items-builder .__section{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-section-items-builder .__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-section-items-builder .__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__section .__section-header .__section-drag-handle:active{cursor:grabbing}.axp-section-items-builder .__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.axp-section-items-builder .__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description,.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p{margin:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.axp-section-items-builder .__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__section .__items-container{padding:1rem}.axp-section-items-builder .__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.axp-section-items-builder .__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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));-webkit-user-select:none;user-select:none}.axp-section-items-builder .__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__item .__drag-handle:active{cursor:grabbing}.axp-section-items-builder .__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.axp-section-items-builder .__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-section-items-builder .__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.axp-section-items-builder .__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.axp-section-items-builder .__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__item .__item-content .__item-description,.axp-section-items-builder .__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-description--rich p{margin:0}.axp-section-items-builder .__item .__item-content .__item-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.axp-section-items-builder .__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__item{cursor:move}.axp-section-items-builder .__item:hover{--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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container{padding:1rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{--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);box-sizing:border-box;opacity:.98}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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));-webkit-user-select:none;user-select:none}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-sizing:border-box;cursor:grabbing;opacity:.98}.__section.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin-bottom:1rem;min-height:8rem}.__section.cdk-drag-dragging{opacity:.7}.__item.cdk-drag-placeholder{position:relative;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));min-height:5rem;margin-bottom:.75rem;opacity:.5}.__item.cdk-drag-placeholder>*{opacity:0}.__item.cdk-drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-section-items-builder .__items-list.cdk-drop-list-dragging .__item:not(.cdk-drag-placeholder){margin-bottom:.75rem}.axp-section-items-builder .__items-list.cdk-drop-list-dragging,.axp-section-items-builder .__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__items-list.cdk-drop-list-dragging axp-state-message,.axp-section-items-builder .__items-list.cdk-drop-list-receiving axp-state-message{display:none}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging .__section:not(.cdk-drag-placeholder){margin-bottom:1rem}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging:has(.__section.cdk-drag-placeholder),.axp-section-items-builder .__sections-container.cdk-drop-list-receiving:has(.__section.cdk-drag-placeholder){border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], definition: [{ type: i0.Input, args: [{ isSignal: true, alias: "definition", required: true }] }], readonlyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 const GROUP_IDENTITY = {