@acorex-platform/framework-client 0.0.30 → 0.0.33

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

@@ -1,12 +1,12 @@
-import { getSystemActions, AXPFileStorageStatus, AXP_QUERY_QUICK_SEARCH_FIELD, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsCatalog, AXPRegionalSetting, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
+import { getSystemActions, resolveToSurfaceClass, AXPFileStorageStatus, AXP_QUERY_QUICK_SEARCH_FIELD, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsCatalog, AXPRegionalSetting, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
 import * as i1$2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i1$6 from '@acorex/cdk/common';
+import * as i1$5 from '@acorex/cdk/common';
 import { AXCommonModule } from '@acorex/cdk/common';
 import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i3 from '@acorex/core/translation';
-import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i4 from '@acorex/core/format';
@@ -15,9 +15,11 @@ import { AXPLayoutRendererComponent, AXPLayoutBuilderService } from '@acorex-pla
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, AsyncPipe, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, output, signal, effect, linkedSignal, computed, InjectionToken, Injector, Injectable, Directive, viewChild, contentChild, ElementRef, afterNextRender, model, EventEmitter, forwardRef, ViewChild, Output, Input, untracked, DestroyRef, PLATFORM_ID, createComponent, runInInjectionContext, EnvironmentInjector, ApplicationRef, makeEnvironmentProviders, ViewChildren, TemplateRef, contentChildren } from '@angular/core';
+import { inject, input, output, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, linkedSignal, computed, InjectionToken, Injector, Injectable, Directive, viewChild, contentChild, ElementRef, afterNextRender, model, EventEmitter, forwardRef, ViewChild, Output, Input, untracked, DestroyRef, PLATFORM_ID, createComponent, runInInjectionContext, EnvironmentInjector, ApplicationRef, makeEnvironmentProviders, ViewChildren, TemplateRef, contentChildren } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
+import { AXPStateMessageComponent, AXPSettingsService, AXPFileChooserSettings, normalizeStoredImageRef, extractFileExtension, AXPFileStorageService, AXPFileTypeProviderService, resolveFileTypeDisplay, AXPFilterOperatorMiddlewareService, AXPCommonSettings, ALL_DEFAULT_OPERATORS, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, resolveSearchableText, isStoredImageFileId, resolveStoredImageDisplayUrl } from '@acorex-platform/framework-client/common';
+export { AXPFileChooserSettings, AXPStateMessageComponent } from '@acorex-platform/framework-client/common';
 import * as i1$1 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
 import * as i3$1 from '@acorex/components/image';
@@ -27,43 +29,40 @@ import * as i1$3 from '@acorex/components/badge';
 import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
 import { AXPLayoutThemeService } from '@acorex-platform/framework-client/themes/shared';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
-import * as i5$1 from '@acorex/components/dropdown';
+import * as i5 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i5 from '@acorex/components/search-box';
+import * as i3$2 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
+import { ensureRuntimeSurfaceClasses, setupPopupFooterKeyboardShortcuts, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPDataGenerator, AXPHookService, AXP_DISTRIBUTED_EVENT_LISTENER_PROVIDER, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPDeviceService } from '@acorex-platform/framework-client/core';
+export { AXPLogoComponent } from '@acorex-platform/framework-client/core';
 import * as i2$2 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
-import * as i3$2 from '@acorex/components/switch';
+import * as i3$3 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, transferArrayItem } from '@angular/cdk/drag-drop';
 import * as i1$4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4$1 from '@acorex/components/data-table';
 import { AXDataTableColumnComponent, AXDataTableModule } from '@acorex/components/data-table';
-import * as i2$5 from '@acorex/components/form';
+import * as i2$4 from '@acorex/components/form';
 import { AXFormModule, AXFormComponent } from '@acorex/components/form';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i2$3 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
-import * as i1$5 from '@acorex/components/label';
+import * as i3$4 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
-import * as i3$3 from '@acorex-platform/framework-client/layout/widget-core';
+import * as i3$5 from '@acorex-platform/framework-client/layout/widget-core';
 import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetContainerComponent } from '@acorex-platform/framework-client/layout/widget-core';
-import * as i3$4 from '@acorex/components/dropdown-button';
+import * as i3$6 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXBasePageComponent } from '@acorex/components/page';
-import { setupPopupFooterKeyboardShortcuts, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPDataGenerator, AXPHookService, AXP_DISTRIBUTED_EVENT_LISTENER_PROVIDER, AXPKeyboardShortcutRegistry, chordToKbdItemKeys } from '@acorex-platform/framework-client/core';
-export { AXPLogoComponent } from '@acorex-platform/framework-client/core';
 import * as i7 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPopupService } from '@acorex/components/popup';
 import { moveItemInArray as moveItemInArray$1, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
-import * as i2$4 from '@acorex/components/select-box';
-import { AXSelectBoxModule } from '@acorex/components/select-box';
+import { AXLookupComponent } from '@acorex/components/lookup';
 import { AXToastService } from '@acorex/components/toast';
-import { AXPSettingsService, AXPFileChooserSettings, normalizeStoredImageRef, extractFileExtension, AXPFileStorageService, AXPFileTypeProviderService, resolveFileTypeDisplay, AXPFilterOperatorMiddlewareService, AXPCommonSettings, ALL_DEFAULT_OPERATORS, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, resolveSearchableText, isStoredImageFileId, resolveStoredImageDisplayUrl } from '@acorex-platform/framework-client/common';
-export { AXPFileChooserSettings } from '@acorex-platform/framework-client/common';
 import { getFileExtension, AXFileService } from '@acorex/core/file';
 import { AXDialogService } from '@acorex/components/dialog';
 import { resolveFileViewerFileType, AXFileViewerContainerComponent, AXFileViewerService, AXFileViewerGalleryService } from '@acorex/components/file-viewer';
@@ -74,22 +73,22 @@ import * as i7$1 from '@acorex/cdk/list-navigation';
 import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
 import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
-import * as i5$2 from '@acorex/components/tag-box';
+import * as i5$1 from '@acorex/components/tag-box';
 import { AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXCalendarService } from '@acorex/core/date-time';
 import { AXPQueryService, AXPCommandExecutor, AXPCommandService } from '@acorex-platform/framework-client/runtime';
 import { resolveEntityListFilterQueryField, resolveEntityListFilterContextField } from '@acorex-platform/framework-shared/entity';
-import * as i1$7 from '@acorex/components/image-editor';
+import * as i1$6 from '@acorex/components/image-editor';
 import { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorModule } from '@acorex/components/image-editor';
 import { AXToolBarModule } from '@acorex/components/toolbar';
-import * as i2$6 from '@acorex/components/accordion';
+import * as i2$5 from '@acorex/components/accordion';
 import { AXAccordionModule } from '@acorex/components/accordion';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i4$2 from '@acorex/components/code-editor';
 import { AXCodeEditorModule } from '@acorex/components/code-editor';
 import * as i8 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import * as i1$8 from '@acorex/components/menu';
+import * as i1$7 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
 import { AXSchedulerComponent } from '@acorex/components/scheduler';
 import { AXSafePipe } from '@acorex/core/pipes';
@@ -101,39 +100,15 @@ import { AXOverlayService } from '@acorex/cdk/overlay';
 import { AXLocaleService } from '@acorex/core/locale';
 import { AXPlatform } from '@acorex/core/platform';
 import { Router, NavigationStart } from '@angular/router';
-import * as i5$3 from '@acorex/components/tooltip';
+import * as i6 from '@acorex/components/tooltip';
 import { AXTooltipModule } from '@acorex/components/tooltip';
 
+//#region ----- Re-export -----
+/**
+ * Implementation lives in `framework-client/common` so `common` can render empty
+ * states without importing this entry (ng-packagr secondary-entry cycle).
+ */
 //#endregion
-//#region ----   Component Definition   ----
-//#endregion
-//#region ----   Component Class   ----
-class AXPStateMessageComponent {
-    constructor() {
-        // Core properties
-        this.mode = input('empty', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-        this.icon = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-        this.title = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.description = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-        this.titleParams = input({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "titleParams" }] : /* istanbul ignore next */ []));
-        this.descriptionParams = input({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "descriptionParams" }] : /* istanbul ignore next */ []));
-        // Optional styling
-        this.look = input('default', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStateMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPStateMessageComponent, isStandalone: true, selector: "axp-state-message", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, titleParams: { classPropertyName: "titleParams", publicName: "titleParams", isSignal: true, isRequired: false, transformFunction: null }, descriptionParams: { classPropertyName: "descriptionParams", publicName: "descriptionParams", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-look]=\"look()\">\n  @if (icon()) {\n  <div class=\"__icon\">\n    <i [class]=\"icon()\"></i>\n  </div>\n  }\n  <div class=\"__content\">\n    @if (title()) {\n    <h3 class=\"__title\">{{ title() | translate: { params: titleParams() } | async }}</h3>\n    }\n    @if (description()) {\n    <p class=\"__description\">{{ description() | translate: { params: descriptionParams() } | async }}</p>\n    }\n    <div class=\"__actions\">\n      <ng-content select=\"[slot=actions]\"></ng-content>\n    </div>\n  </div>\n</div>", styles: ["@layer properties;.axp-state-message{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center}.axp-state-message .__icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-state-message .__icon i{opacity:74%;display:block;font-size:1rem;font-weight:400;line-height:1.625rem;font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))}.axp-state-message .__content{max-width:var(--container-md, 28rem)}.axp-state-message .__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-state-message .__description{margin-bottom:calc(var(--spacing, .25rem) * 4);opacity:74%;display:block;font-size:1rem;font-weight:400;line-height:1.625rem;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.axp-state-message .__actions{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-state-message[data-mode=empty] .__icon i{color:var(--color-gray-400, oklch(70.7% .022 261.325))}.axp-state-message[data-mode=error] .__icon i{color:var(--color-red-500, oklch(63.7% .237 25.331))}.axp-state-message[data-mode=error] .__title{color:var(--color-red-600, oklch(57.7% .245 27.325))}.axp-state-message[data-mode=loading] .__icon i{color:var(--color-blue-500, oklch(62.3% .214 259.815))}.axp-state-message[data-mode=loading] .__title{color:var(--color-blue-600, oklch(54.6% .245 262.881))}.axp-state-message[data-mode=warning] .__icon i{color:var(--color-orange-500, oklch(70.5% .213 47.604))}.axp-state-message[data-mode=warning] .__title{color:var(--color-orange-600, oklch(64.6% .222 41.116))}.axp-state-message[data-mode=info] .__icon i{color:var(--color-blue-500, oklch(62.3% .214 259.815))}.axp-state-message[data-mode=info] .__title{color:var(--color-blue-600, oklch(54.6% .245 262.881))}.axp-state-message[data-mode=success] .__icon i{color:var(--color-green-500, oklch(72.3% .219 149.579))}.axp-state-message[data-mode=success] .__title{color:var(--color-green-600, oklch(62.7% .194 149.214))}.axp-state-message[data-look=compact]{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 6)}.axp-state-message[data-look=compact] .__icon{margin-bottom:calc(var(--spacing, .25rem) * 2)}.axp-state-message[data-look=compact] .__icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)))}.axp-state-message[data-look=compact] .__title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}.axp-state-message[data-look=compact] .__description{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}.axp-state-message[data-look=minimal]{padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 4)}.axp-state-message[data-look=minimal] .__icon{margin-bottom:var(--spacing, .25rem)}.axp-state-message[data-look=minimal] .__icon i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}.axp-state-message[data-look=minimal] .__title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.axp-state-message[data-look=minimal] .__description{margin-bottom:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "22.0.8", ngImport: i0, type: AXPStateMessageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-state-message', standalone: true, imports: [CommonModule, AXTranslationModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-look]=\"look()\">\n  @if (icon()) {\n  <div class=\"__icon\">\n    <i [class]=\"icon()\"></i>\n  </div>\n  }\n  <div class=\"__content\">\n    @if (title()) {\n    <h3 class=\"__title\">{{ title() | translate: { params: titleParams() } | async }}</h3>\n    }\n    @if (description()) {\n    <p class=\"__description\">{{ description() | translate: { params: descriptionParams() } | async }}</p>\n    }\n    <div class=\"__actions\">\n      <ng-content select=\"[slot=actions]\"></ng-content>\n    </div>\n  </div>\n</div>", styles: ["@layer properties;.axp-state-message{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center}.axp-state-message .__icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-state-message .__icon i{opacity:74%;display:block;font-size:1rem;font-weight:400;line-height:1.625rem;font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))}.axp-state-message .__content{max-width:var(--container-md, 28rem)}.axp-state-message .__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-state-message .__description{margin-bottom:calc(var(--spacing, .25rem) * 4);opacity:74%;display:block;font-size:1rem;font-weight:400;line-height:1.625rem;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.axp-state-message .__actions{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-state-message[data-mode=empty] .__icon i{color:var(--color-gray-400, oklch(70.7% .022 261.325))}.axp-state-message[data-mode=error] .__icon i{color:var(--color-red-500, oklch(63.7% .237 25.331))}.axp-state-message[data-mode=error] .__title{color:var(--color-red-600, oklch(57.7% .245 27.325))}.axp-state-message[data-mode=loading] .__icon i{color:var(--color-blue-500, oklch(62.3% .214 259.815))}.axp-state-message[data-mode=loading] .__title{color:var(--color-blue-600, oklch(54.6% .245 262.881))}.axp-state-message[data-mode=warning] .__icon i{color:var(--color-orange-500, oklch(70.5% .213 47.604))}.axp-state-message[data-mode=warning] .__title{color:var(--color-orange-600, oklch(64.6% .222 41.116))}.axp-state-message[data-mode=info] .__icon i{color:var(--color-blue-500, oklch(62.3% .214 259.815))}.axp-state-message[data-mode=info] .__title{color:var(--color-blue-600, oklch(54.6% .245 262.881))}.axp-state-message[data-mode=success] .__icon i{color:var(--color-green-500, oklch(72.3% .219 149.579))}.axp-state-message[data-mode=success] .__title{color:var(--color-green-600, oklch(62.7% .194 149.214))}.axp-state-message[data-look=compact]{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 6)}.axp-state-message[data-look=compact] .__icon{margin-bottom:calc(var(--spacing, .25rem) * 2)}.axp-state-message[data-look=compact] .__icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)))}.axp-state-message[data-look=compact] .__title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}.axp-state-message[data-look=compact] .__description{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}.axp-state-message[data-look=minimal]{padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 4)}.axp-state-message[data-look=minimal] .__icon{margin-bottom:var(--spacing, .25rem)}.axp-state-message[data-look=minimal] .__icon i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}.axp-state-message[data-look=minimal] .__title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.axp-state-message[data-look=minimal] .__description{margin-bottom:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], titleParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleParams", required: false }] }], descriptionParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionParams", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }] } });
 
 //#region ----   Component Definition   ----
 class AXPActivityLogComponent {
@@ -317,6 +292,9 @@ class AXPAvatarComponent {
         /** Display name used for title and initials fallback. */
         this.fullName = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fullName" }] : /* istanbul ignore next */ []));
+        /** Native browser tooltip. Off when a user card or nearby label already shows the name. */
+        this.showTitle = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTitle" }] : /* istanbul ignore next */ []));
         /** Optional override for fallback text shown when image is not available. */
         this.fallbackText = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fallbackText" }] : /* istanbul ignore next */ []));
@@ -345,7 +323,10 @@ class AXPAvatarComponent {
             return this.computeInitials(this.normalizedName());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "avatarText" }] : /* istanbul ignore next */ []));
-        this.avatarColor = computed(() => this.pickColor(this.avatarText()), /* @ts-ignore */
+        this.avatarColor = computed(() => {
+            const colorKey = this.normalizedName() || this.avatarText();
+            return this.pickColor(colorKey);
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "avatarColor" }] : /* istanbul ignore next */ []));
         this.title = computed(() => this.normalizedName(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -360,13 +341,11 @@ class AXPAvatarComponent {
         if (!name) {
             return '?';
         }
-        const parts = name
-            .split(/\s+/)
-            .filter(Boolean);
-        if (parts.length === 1) {
-            return parts[0].slice(0, 2).toUpperCase();
+        const firstWord = name.split(/\s+/).find(Boolean);
+        if (!firstWord) {
+            return '?';
         }
-        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+        return firstWord.charAt(0).toUpperCase();
     }
     hashString(value) {
         let hash = 0;
@@ -382,12 +361,12 @@ class AXPAvatarComponent {
         return colors[index];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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\n  [size]=\"size()\"\n  class=\"cursor-pointer relative border\"\n  [color]=\"avatarColor()\"\n  [look]=\"'twotone'\"\n  [attr.data-avatar-color]=\"avatarColor()\"\n  [title]=\"title()\"\n>\n  @if (hasAvatar()) {\n    <ax-image\n      (onError)=\"onImageError($event)\"\n      (onLoad)=\"onImageLoad($event)\"\n      [src]=\"resolvedSrc()\"\n    />\n  } @else {\n    <ax-text class=\"axp-avatar__initials-wrap\">\n      <span class=\"axp-avatar__initials\" [style.font-size]=\"size() * 0.35 + 'px'\">{{\n        avatarText()\n      }}</span>\n    </ax-text>\n  }\n</ax-avatar>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ax-avatar{display:inline-flex!important;align-items:center;justify-content:center;line-height:0}:host ax-avatar[data-avatar-color=primary]{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest)}:host ax-avatar[data-avatar-color=secondary]{background-color:var(--color-secondary-lightest);color:var(--color-on-secondary-lightest);border-color:var(--color-border-secondary-lightest)}:host ax-avatar[data-avatar-color=danger]{background-color:var(--color-danger-lightest);color:var(--color-on-danger-lightest);border-color:var(--color-border-danger-lightest)}:host ax-avatar[data-avatar-color=warning]{background-color:var(--color-warning-lightest);color:var(--color-on-warning-lightest);border-color:var(--color-border-warning-lightest)}:host ax-avatar[data-avatar-color=success]{background-color:var(--color-success-lightest);color:var(--color-on-success-lightest);border-color:var(--color-border-success-lightest)}:host ax-avatar[data-avatar-color=accent1]{background-color:var(--color-accent1-lightest);color:var(--color-on-accent1-lightest);border-color:var(--color-border-accent1-lightest)}:host ax-avatar[data-avatar-color=accent2]{background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest)}:host ax-avatar[data-avatar-color=accent3]{background-color:var(--color-accent3-lightest);color:var(--color-on-accent3-lightest);border-color:var(--color-border-accent3-lightest)}:host ax-avatar ax-text,:host .axp-avatar__initials-wrap{display:flex;align-items:center;justify-content:center;--tw-border-style: none;border-style:none;background-color:transparent;color:inherit!important;width:100%;height:100%;line-height:1}:host .axp-avatar__initials{display:flex;align-items:center;justify-content:center;font-weight:600;line-height:1}:host ax-image{position:absolute!important;inset:0;width:100%!important;height:100%!important}:host ax-image img{display:block!important}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: i3$1.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: "22.0.8", 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 }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", 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\n  [size]=\"size()\"\n  class=\"cursor-pointer relative border\"\n  [color]=\"avatarColor()\"\n  [look]=\"'twotone'\"\n  [attr.data-avatar-color]=\"avatarColor()\"\n  [attr.title]=\"showTitle() && title() ? title() : null\"\n>\n  @if (hasAvatar()) {\n    <ax-image\n      (onError)=\"onImageError($event)\"\n      (onLoad)=\"onImageLoad($event)\"\n      [src]=\"resolvedSrc()\"\n    />\n  } @else {\n    <ax-text class=\"axp-avatar__initials-wrap\">\n      <span class=\"axp-avatar__initials\" [style.font-size]=\"size() * 0.35 + 'px'\">{{\n        avatarText()\n      }}</span>\n    </ax-text>\n  }\n</ax-avatar>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ax-avatar{display:inline-flex!important;align-items:center;justify-content:center;line-height:0}:host ax-avatar[data-avatar-color=primary]{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest)}:host ax-avatar[data-avatar-color=secondary]{background-color:var(--color-secondary-lightest);color:var(--color-on-secondary-lightest);border-color:var(--color-border-secondary-lightest)}:host ax-avatar[data-avatar-color=danger]{background-color:var(--color-danger-lightest);color:var(--color-on-danger-lightest);border-color:var(--color-border-danger-lightest)}:host ax-avatar[data-avatar-color=warning]{background-color:var(--color-warning-lightest);color:var(--color-on-warning-lightest);border-color:var(--color-border-warning-lightest)}:host ax-avatar[data-avatar-color=success]{background-color:var(--color-success-lightest);color:var(--color-on-success-lightest);border-color:var(--color-border-success-lightest)}:host ax-avatar[data-avatar-color=accent1]{background-color:var(--color-accent1-lightest);color:var(--color-on-accent1-lightest);border-color:var(--color-border-accent1-lightest)}:host ax-avatar[data-avatar-color=accent2]{background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest)}:host ax-avatar[data-avatar-color=accent3]{background-color:var(--color-accent3-lightest);color:var(--color-on-accent3-lightest);border-color:var(--color-border-accent3-lightest)}:host ax-avatar ax-text,:host .axp-avatar__initials-wrap{display:flex;align-items:center;justify-content:center;--tw-border-style: none;border-style:none;background-color:transparent;color:inherit!important;width:100%;height:100%;line-height:1}:host .axp-avatar__initials{display:flex;align-items:center;justify-content:center;font-weight:600;line-height:1}:host ax-image{position:absolute!important;inset:0;width:100%!important;height:100%!important}:host ax-image img{display:block!important}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: i3$1.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: "22.0.8", ngImport: i0, type: AXPAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-avatar\n  [size]=\"size()\"\n  class=\"cursor-pointer relative border\"\n  [color]=\"avatarColor()\"\n  [look]=\"'twotone'\"\n  [attr.data-avatar-color]=\"avatarColor()\"\n  [title]=\"title()\"\n>\n  @if (hasAvatar()) {\n    <ax-image\n      (onError)=\"onImageError($event)\"\n      (onLoad)=\"onImageLoad($event)\"\n      [src]=\"resolvedSrc()\"\n    />\n  } @else {\n    <ax-text class=\"axp-avatar__initials-wrap\">\n      <span class=\"axp-avatar__initials\" [style.font-size]=\"size() * 0.35 + 'px'\">{{\n        avatarText()\n      }}</span>\n    </ax-text>\n  }\n</ax-avatar>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ax-avatar{display:inline-flex!important;align-items:center;justify-content:center;line-height:0}:host ax-avatar[data-avatar-color=primary]{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest)}:host ax-avatar[data-avatar-color=secondary]{background-color:var(--color-secondary-lightest);color:var(--color-on-secondary-lightest);border-color:var(--color-border-secondary-lightest)}:host ax-avatar[data-avatar-color=danger]{background-color:var(--color-danger-lightest);color:var(--color-on-danger-lightest);border-color:var(--color-border-danger-lightest)}:host ax-avatar[data-avatar-color=warning]{background-color:var(--color-warning-lightest);color:var(--color-on-warning-lightest);border-color:var(--color-border-warning-lightest)}:host ax-avatar[data-avatar-color=success]{background-color:var(--color-success-lightest);color:var(--color-on-success-lightest);border-color:var(--color-border-success-lightest)}:host ax-avatar[data-avatar-color=accent1]{background-color:var(--color-accent1-lightest);color:var(--color-on-accent1-lightest);border-color:var(--color-border-accent1-lightest)}:host ax-avatar[data-avatar-color=accent2]{background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest)}:host ax-avatar[data-avatar-color=accent3]{background-color:var(--color-accent3-lightest);color:var(--color-on-accent3-lightest);border-color:var(--color-border-accent3-lightest)}:host ax-avatar ax-text,:host .axp-avatar__initials-wrap{display:flex;align-items:center;justify-content:center;--tw-border-style: none;border-style:none;background-color:transparent;color:inherit!important;width:100%;height:100%;line-height:1}:host .axp-avatar__initials{display:flex;align-items:center;justify-content:center;font-weight:600;line-height:1}:host ax-image{position:absolute!important;inset:0;width:100%!important;height:100%!important}:host ax-image img{display:block!important}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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 }] }] } });
+            args: [{ selector: 'axp-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-avatar\n  [size]=\"size()\"\n  class=\"cursor-pointer relative border\"\n  [color]=\"avatarColor()\"\n  [look]=\"'twotone'\"\n  [attr.data-avatar-color]=\"avatarColor()\"\n  [attr.title]=\"showTitle() && title() ? title() : null\"\n>\n  @if (hasAvatar()) {\n    <ax-image\n      (onError)=\"onImageError($event)\"\n      (onLoad)=\"onImageLoad($event)\"\n      [src]=\"resolvedSrc()\"\n    />\n  } @else {\n    <ax-text class=\"axp-avatar__initials-wrap\">\n      <span class=\"axp-avatar__initials\" [style.font-size]=\"size() * 0.35 + 'px'\">{{\n        avatarText()\n      }}</span>\n    </ax-text>\n  }\n</ax-avatar>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ax-avatar{display:inline-flex!important;align-items:center;justify-content:center;line-height:0}:host ax-avatar[data-avatar-color=primary]{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest)}:host ax-avatar[data-avatar-color=secondary]{background-color:var(--color-secondary-lightest);color:var(--color-on-secondary-lightest);border-color:var(--color-border-secondary-lightest)}:host ax-avatar[data-avatar-color=danger]{background-color:var(--color-danger-lightest);color:var(--color-on-danger-lightest);border-color:var(--color-border-danger-lightest)}:host ax-avatar[data-avatar-color=warning]{background-color:var(--color-warning-lightest);color:var(--color-on-warning-lightest);border-color:var(--color-border-warning-lightest)}:host ax-avatar[data-avatar-color=success]{background-color:var(--color-success-lightest);color:var(--color-on-success-lightest);border-color:var(--color-border-success-lightest)}:host ax-avatar[data-avatar-color=accent1]{background-color:var(--color-accent1-lightest);color:var(--color-on-accent1-lightest);border-color:var(--color-border-accent1-lightest)}:host ax-avatar[data-avatar-color=accent2]{background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest)}:host ax-avatar[data-avatar-color=accent3]{background-color:var(--color-accent3-lightest);color:var(--color-on-accent3-lightest);border-color:var(--color-border-accent3-lightest)}:host ax-avatar ax-text,:host .axp-avatar__initials-wrap{display:flex;align-items:center;justify-content:center;--tw-border-style: none;border-style:none;background-color:transparent;color:inherit!important;width:100%;height:100%;line-height:1}:host .axp-avatar__initials{display:flex;align-items:center;justify-content:center;font-weight:600;line-height:1}:host ax-image{position:absolute!important;inset:0;width:100%!important;height:100%!important}:host ax-image img{display:block!important}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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 }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", 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_TASK_BADGE_PROVIDERS = new InjectionToken('AXP_TASK_BADGE_PROVIDERS');
 class AXPTaskBadgeProvider {
@@ -1277,7 +1256,7 @@ class AXPCategoryTreeComponent {
         this.isLoading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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=\"p-4 flex flex-col gap-3\" [class.pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div\n      class=\"px-4 flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\"\n      [class.pt-2]=\"config().searchable\"\n    >\n      <ax-tree-view\n        [datasource]=\"datasource\"\n        [selectMode]=\"config().showCheckbox ? 'multiple' : 'none'\"\n        [dragBehavior]=\"'none'\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onNodeToggle)=\"handleNodeToggle($event)\"\n        [nodeTemplate]=\"itemTemplate\"\n        [titleField]=\"config().textField || 'title'\"\n        [idField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [titleParams]=\"emptyStateTitleParams()\"\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]=\"\n            (actions().createLabel || '@general:actions.add-new.title'\n              | translate\n              | async)!\n          \"\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-node=\"node\">\n    @let item = node;\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\n    <div class=\"flex items-center justify-between w-full gap-2 overflow-hidden\">\n      <div class=\"flex items-center gap-2 min-w-0\">\n        <ax-icon class=\"fas text-warning fa-folder\"></ax-icon>\n        <span class=\"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 (\n          actions().canCreateChild || actions().canUpdate || actions().canDelete\n        ) {\n          <div class=\"flex items-center gap-1\">\n            <ax-button\n              class=\"ax-xs\"\n              color=\"default\"\n              look=\"none\"\n              (onClick)=\"$event.nativeEvent.stopPropagation()\"\n            >\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 ||\n                          '@general:actions.add-new-child.title'\n                          | translate\n                          | 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]=\"\n                        (actions().updateLabel || '@general:actions.edit.title'\n                          | translate\n                          | async)!\n                      \"\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]=\"\n                        (actions().deleteLabel ||\n                          '@general:actions.delete.title'\n                          | translate\n                          | async)!\n                      \"\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=\"flex items-center gap-1\">\n          <ax-button\n            class=\"ax-sm\"\n            (onClick)=\"handleCreateRootClick($event)\"\n            look=\"blank\"\n            color=\"default\"\n          >\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: [":host{display:block;height:100%;width:100%}:host axp-layout-content{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { 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$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$1.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", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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=\"p-4 flex flex-col gap-3\" [class.pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div\n      class=\"px-4 flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\"\n      [class.pt-2]=\"config().searchable\"\n    >\n      <ax-tree-view\n        [datasource]=\"datasource\"\n        [selectMode]=\"config().showCheckbox ? 'multiple' : 'none'\"\n        [dragBehavior]=\"'none'\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onNodeToggle)=\"handleNodeToggle($event)\"\n        [nodeTemplate]=\"itemTemplate\"\n        [titleField]=\"config().textField || 'title'\"\n        [idField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [titleParams]=\"emptyStateTitleParams()\"\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]=\"\n            (actions().createLabel || '@general:actions.add-new.title'\n              | translate\n              | async)!\n          \"\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-node=\"node\">\n    @let item = node;\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\n    <div class=\"flex items-center justify-between w-full gap-2 overflow-hidden\">\n      <div class=\"flex items-center gap-2 min-w-0\">\n        <ax-icon class=\"fas text-warning fa-folder\"></ax-icon>\n        <span class=\"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 (\n          actions().canCreateChild || actions().canUpdate || actions().canDelete\n        ) {\n          <div class=\"flex items-center gap-1\">\n            <ax-button\n              class=\"ax-xs\"\n              color=\"default\"\n              look=\"none\"\n              (onClick)=\"$event.nativeEvent.stopPropagation()\"\n            >\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 ||\n                          '@general:actions.add-new-child.title'\n                          | translate\n                          | 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]=\"\n                        (actions().updateLabel || '@general:actions.edit.title'\n                          | translate\n                          | async)!\n                      \"\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]=\"\n                        (actions().deleteLabel ||\n                          '@general:actions.delete.title'\n                          | translate\n                          | async)!\n                      \"\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=\"flex items-center gap-1\">\n          <ax-button\n            class=\"ax-sm\"\n            (onClick)=\"handleCreateRootClick($event)\"\n            look=\"blank\"\n            color=\"default\"\n          >\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: [":host{display:block;height:100%;width:100%}:host axp-layout-content{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { 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: i3$2.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$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
             type: Component,
@@ -1300,6 +1279,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 //#region ----   Tree Node Interface   ----
 //#endregion
 
+//#region ----- Imports -----
+//#endregion
+//#region ----- Constants -----
+const POPOVER_MIN_WIDTH_PX = 288;
+//#endregion
+//#region ----- Component -----
+class AXPColorChooserComponent {
+    //#endregion
+    //#region ----- Lifecycle -----
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.host = inject((ElementRef));
+        this.paletteDropdown = viewChild('paletteDropdown', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paletteDropdown" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Inputs -----
+        this.groups = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.selectedClass = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectedClass" }] : /* istanbul ignore next */ []));
+        this.look = input('strip', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.allowClear = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowClear" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Outputs -----
+        this.classSelected = output();
+        //#endregion
+        //#region ----- Computed Properties -----
+        this.isInteractive = computed(() => !this.disabled() && !this.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
+        this.resolvedGroups = computed(() => this.groups().filter((group) => group.swatches.length > 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedGroups" }] : /* istanbul ignore next */ []));
+        this.usePopover = computed(() => this.resolvedGroups().length > 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "usePopover" }] : /* istanbul ignore next */ []));
+        this.pendingSelected = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pendingSelected" }] : /* istanbul ignore next */ []));
+        this.effectiveSelected = computed(() => {
+            const pending = this.pendingSelected();
+            return pending !== undefined ? pending : this.selectedClass();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveSelected" }] : /* istanbul ignore next */ []));
+        this.selectedSwatch = computed(() => {
+            const selected = resolveToSurfaceClass(this.effectiveSelected() ?? undefined);
+            if (!selected) {
+                return undefined;
+            }
+            for (const group of this.resolvedGroups()) {
+                const swatch = group.swatches.find((item) => resolveToSurfaceClass(item.className) === selected);
+                if (swatch) {
+                    return swatch;
+                }
+            }
+            return undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedSwatch" }] : /* istanbul ignore next */ []));
+        this.selectedGroup = computed(() => {
+            const swatch = this.selectedSwatch();
+            if (!swatch) {
+                return undefined;
+            }
+            return this.resolvedGroups().find((group) => group.swatches.some((item) => item.className === swatch.className));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedGroup" }] : /* istanbul ignore next */ []));
+        this.hasSelection = computed(() => Boolean(this.selectedSwatch() || this.effectiveSelected()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
+        this.dropdownWidth = signal(`${POPOVER_MIN_WIDTH_PX}px`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
+        this.dropdownOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const classNames = this.groups().flatMap((group) => group.swatches.map((swatch) => swatch.className));
+            ensureRuntimeSurfaceClasses(classNames);
+            ensureRuntimeSurfaceClasses([this.selectedClass(), this.pendingSelected()]);
+        });
+        effect(() => {
+            this.selectedClass();
+            this.pendingSelected.set(undefined);
+        });
+        afterNextRender(() => this.syncDropdownWidth());
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
+    handleSelect(swatch) {
+        if (!this.isInteractive()) {
+            return;
+        }
+        this.pendingSelected.set(swatch.className);
+        this.classSelected.emit(swatch.className);
+        this.paletteDropdown()?.close();
+    }
+    handleClear(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        if (!this.isInteractive()) {
+            return;
+        }
+        this.pendingSelected.set(null);
+        this.classSelected.emit(null);
+        this.paletteDropdown()?.close();
+    }
+    hostClickListener() {
+        if (!this.usePopover() || !this.isInteractive()) {
+            return;
+        }
+        this.syncDropdownWidth();
+        this.paletteDropdown()?.toggle();
+    }
+    handleDropdownOpened() {
+        this.syncDropdownWidth();
+        this.dropdownOpen.set(true);
+    }
+    handleDropdownClosed() {
+        this.dropdownOpen.set(false);
+    }
+    isSelected(className) {
+        const selected = resolveToSurfaceClass(this.effectiveSelected() ?? undefined);
+        const candidate = resolveToSurfaceClass(className ?? undefined);
+        return Boolean(selected) && selected === candidate;
+    }
+    displayLabel(label) {
+        return label.startsWith('#') ? label.slice(1).toUpperCase() : label;
+    }
+    syncDropdownWidth() {
+        const hostWidth = Math.round(this.host.nativeElement.getBoundingClientRect().width);
+        this.dropdownWidth.set(`${Math.max(hostWidth, POPOVER_MIN_WIDTH_PX)}px`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPColorChooserComponent, isStandalone: true, selector: "axp-color-chooser", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, selectedClass: { classPropertyName: "selectedClass", publicName: "selectedClass", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { classSelected: "classSelected" }, host: { listeners: { "click": "hostClickListener()" }, classAttribute: "axp-color-chooser" }, viewQueries: [{ propertyName: "paletteDropdown", first: true, predicate: ["paletteDropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"__root\" [class.__disabled]=\"disabled()\" [class.__readonly]=\"readonly()\">\n  @if (usePopover()) {\n    <!-- ----- Same shell as ax-select-box: dropdown-box + input slot + panel ----- -->\n    <ax-dropdown-box\n      #paletteDropdown\n      [disabled]=\"disabled()\"\n      [popoverWidth]=\"dropdownWidth()\"\n      (onOpened)=\"handleDropdownOpened()\"\n      (onClosed)=\"handleDropdownClosed()\"\n    >\n      <ng-container input>\n        <div class=\"ax-editor ax-content ax-input\">\n          <ng-container *ngTemplateOutlet=\"selectedItem\"></ng-container>\n        </div>\n        @if (allowClear() && hasSelection() && isInteractive()) {\n          <button\n            type=\"button\"\n            class=\"ax-general-button-icon\"\n            tabindex=\"-1\"\n            (click)=\"handleClear($event)\"\n          >\n            <span class=\"ax-icon ax-icon-close\"></span>\n          </button>\n        }\n        <button type=\"button\" class=\"ax-general-button-icon\" [disabled]=\"!isInteractive()\" tabindex=\"-1\">\n          <span\n            class=\"ax-icon\"\n            [class.ax-icon-chevron-down]=\"!dropdownOpen()\"\n            [class.ax-icon-chevron-up]=\"dropdownOpen()\"\n          ></span>\n        </button>\n      </ng-container>\n      <ng-container panel>\n        <div class=\"__popover\" [style.min-width]=\"dropdownWidth()\">\n          <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: true }\"></ng-container>\n        </div>\n      </ng-container>\n    </ax-dropdown-box>\n  }\n  <!-- ----- Single named row stays inline at select height ----- -->\n  @else {\n    <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: false }\"></ng-container>\n    <!-- ----- Clear under the single inline strip ----- -->\n    @if (allowClear()) {\n      <button\n        type=\"button\"\n        class=\"__clear\"\n        [class.__selected]=\"selectedClass() == null\"\n        [disabled]=\"!isInteractive()\"\n        (click)=\"handleClear($event)\"\n      >\n        <span class=\"ax-icon ax-icon-close\"></span>\n      </button>\n    }\n  }\n</div>\n\n<ng-template #selectedItem>\n  @if (selectedSwatch(); as swatch) {\n    <!-- ----- Selected value as a surface-colored pill ----- -->\n    <div class=\"__selected-item {{ swatch.className }}\">\n      <span class=\"__selected-text\">\n        <!-- ----- Group title before the selected variant ----- -->\n        @if (selectedGroup()?.title; as groupTitle) {\n          {{ groupTitle | translate | async }}\n          <span class=\"__trigger-sep\">\u00B7</span>\n        }\n        {{ displayLabel(swatch.label) | translate | async }}\n      </span>\n    </div>\n  }\n  <!-- ----- Empty state uses the same control height as a select ----- -->\n  @else {\n    <div class=\"ax-placeholder\">\n      {{ '@platform-layout-widgets:widgets.color-chooser.placeholder' | translate | async }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #paletteGroups let-showTitles=\"showTitles\">\n  <div class=\"__groups\" [class.__look-strip]=\"look() === 'strip'\" [class.__look-swatches]=\"look() === 'swatches'\">\n    @for (group of resolvedGroups(); track group.id) {\n      <div class=\"__group\">\n        <!-- ----- Named row title inside the dropdown list ----- -->\n        @if (showTitles && group.title) {\n          <div class=\"__group-title\">{{ group.title | translate | async }}</div>\n        }\n        <!-- ----- Coolors bar: thin columns, hover expands and shows the label ----- -->\n        <div class=\"__strip\" role=\"listbox\">\n          @for (swatch of group.swatches; track swatch.className) {\n            <button\n              type=\"button\"\n              class=\"__column {{ swatch.className }}\"\n              [class.__selected]=\"isSelected(swatch.className)\"\n              [disabled]=\"!isInteractive()\"\n              [attr.aria-label]=\"displayLabel(swatch.label)\"\n              [attr.aria-selected]=\"isSelected(swatch.className)\"\n              (click)=\"handleSelect(swatch)\"\n            >\n              <span class=\"__label\">{{ displayLabel(swatch.label) | translate | async }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-height:var(--ax-sys-size-base, 2.5rem);width:100%}:host ax-dropdown-box{width:100%}:host .ax-editor-container{padding-block:0}:host .ax-content{display:flex;min-height:var(--ax-sys-size-base, 2.5rem);min-width:0;flex:1;cursor:pointer;align-items:center;outline:none;-webkit-user-select:none;user-select:none}.__root{display:flex;flex-direction:column;gap:.5rem}.__selected-item{display:inline-flex;align-items:center;max-width:100%;min-height:1.5rem;padding-inline:.5rem;border-radius:.375rem}.__selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__placeholder{opacity:.65}.__trigger-sep{margin-inline:.25rem}.__popover{box-sizing:border-box;width:100%;max-height:min(24rem,70vh);overflow:auto;padding:.75rem}.__groups{display:flex;flex-direction:column;gap:.75rem;min-width:0}.__group-title{font-size:.75rem;font-weight:500;color:rgb(var(--ax-sys-color-on-lighter-surface))}.__strip{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%;height:var(--ax-sys-size-base, 2.5rem);overflow:hidden;border-radius:.5rem}.__column{position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;border:0;border-radius:0;appearance:none;cursor:pointer;transition:flex .22s ease}.__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ax-sys-text-xs-base, .75rem);font-weight:600;letter-spacing:.04em;white-space:nowrap;opacity:0;transition:opacity .16s ease}.__look-strip .__column.__selected,.__look-strip .__column:hover:not(:disabled),.__look-strip .__column:focus-visible:not(:disabled){flex:4 1 0}.__look-strip .__column.__selected .__label,.__look-strip .__column:hover:not(:disabled) .__label,.__look-strip .__column:focus-visible:not(:disabled) .__label{opacity:1}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover),.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible){flex:1 1 0}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover) .__label,.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible) .__label{opacity:0}.__column.__selected{box-shadow:inset 0 0 0 2px rgb(var(--ax-sys-color-on-lighter-surface) / .4)}.__column:disabled{cursor:not-allowed}.__clear{align-self:flex-start;display:inline-flex;height:1.75rem;width:1.75rem;align-items:center;justify-content:center;border-radius:999px;border:1px dashed rgb(var(--ax-sys-color-border-lighter-surface));background:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));font-size:.75rem}.__clear.__selected,.__clear:focus-visible:not(:disabled){outline:2px solid rgb(var(--ax-sys-color-primary));outline-offset:2px}.__clear:disabled{cursor:not-allowed;opacity:.5}.__look-swatches .__strip{height:auto;flex-wrap:wrap;gap:.25rem;overflow:visible;border-radius:0}.__look-swatches .__column{flex:0 0 2rem;width:2rem;height:2rem;min-width:2rem;border-radius:.375rem;transition:transform .16s ease}.__look-swatches .__label{display:none}.__look-swatches .__column:hover:not(:disabled),.__look-swatches .__column:focus-visible:not(:disabled){flex:0 0 2rem;transform:scale(1.08)}.__disabled .__column,.__readonly .__column,.__disabled .__clear,.__readonly .__clear,.__disabled .ax-content,.__readonly .ax-content{cursor:default}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-color-chooser', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXTranslationModule, AXDropdownModule], host: {
+                        class: 'axp-color-chooser',
+                        '(click)': 'hostClickListener()',
+                    }, template: "<div class=\"__root\" [class.__disabled]=\"disabled()\" [class.__readonly]=\"readonly()\">\n  @if (usePopover()) {\n    <!-- ----- Same shell as ax-select-box: dropdown-box + input slot + panel ----- -->\n    <ax-dropdown-box\n      #paletteDropdown\n      [disabled]=\"disabled()\"\n      [popoverWidth]=\"dropdownWidth()\"\n      (onOpened)=\"handleDropdownOpened()\"\n      (onClosed)=\"handleDropdownClosed()\"\n    >\n      <ng-container input>\n        <div class=\"ax-editor ax-content ax-input\">\n          <ng-container *ngTemplateOutlet=\"selectedItem\"></ng-container>\n        </div>\n        @if (allowClear() && hasSelection() && isInteractive()) {\n          <button\n            type=\"button\"\n            class=\"ax-general-button-icon\"\n            tabindex=\"-1\"\n            (click)=\"handleClear($event)\"\n          >\n            <span class=\"ax-icon ax-icon-close\"></span>\n          </button>\n        }\n        <button type=\"button\" class=\"ax-general-button-icon\" [disabled]=\"!isInteractive()\" tabindex=\"-1\">\n          <span\n            class=\"ax-icon\"\n            [class.ax-icon-chevron-down]=\"!dropdownOpen()\"\n            [class.ax-icon-chevron-up]=\"dropdownOpen()\"\n          ></span>\n        </button>\n      </ng-container>\n      <ng-container panel>\n        <div class=\"__popover\" [style.min-width]=\"dropdownWidth()\">\n          <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: true }\"></ng-container>\n        </div>\n      </ng-container>\n    </ax-dropdown-box>\n  }\n  <!-- ----- Single named row stays inline at select height ----- -->\n  @else {\n    <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: false }\"></ng-container>\n    <!-- ----- Clear under the single inline strip ----- -->\n    @if (allowClear()) {\n      <button\n        type=\"button\"\n        class=\"__clear\"\n        [class.__selected]=\"selectedClass() == null\"\n        [disabled]=\"!isInteractive()\"\n        (click)=\"handleClear($event)\"\n      >\n        <span class=\"ax-icon ax-icon-close\"></span>\n      </button>\n    }\n  }\n</div>\n\n<ng-template #selectedItem>\n  @if (selectedSwatch(); as swatch) {\n    <!-- ----- Selected value as a surface-colored pill ----- -->\n    <div class=\"__selected-item {{ swatch.className }}\">\n      <span class=\"__selected-text\">\n        <!-- ----- Group title before the selected variant ----- -->\n        @if (selectedGroup()?.title; as groupTitle) {\n          {{ groupTitle | translate | async }}\n          <span class=\"__trigger-sep\">\u00B7</span>\n        }\n        {{ displayLabel(swatch.label) | translate | async }}\n      </span>\n    </div>\n  }\n  <!-- ----- Empty state uses the same control height as a select ----- -->\n  @else {\n    <div class=\"ax-placeholder\">\n      {{ '@platform-layout-widgets:widgets.color-chooser.placeholder' | translate | async }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #paletteGroups let-showTitles=\"showTitles\">\n  <div class=\"__groups\" [class.__look-strip]=\"look() === 'strip'\" [class.__look-swatches]=\"look() === 'swatches'\">\n    @for (group of resolvedGroups(); track group.id) {\n      <div class=\"__group\">\n        <!-- ----- Named row title inside the dropdown list ----- -->\n        @if (showTitles && group.title) {\n          <div class=\"__group-title\">{{ group.title | translate | async }}</div>\n        }\n        <!-- ----- Coolors bar: thin columns, hover expands and shows the label ----- -->\n        <div class=\"__strip\" role=\"listbox\">\n          @for (swatch of group.swatches; track swatch.className) {\n            <button\n              type=\"button\"\n              class=\"__column {{ swatch.className }}\"\n              [class.__selected]=\"isSelected(swatch.className)\"\n              [disabled]=\"!isInteractive()\"\n              [attr.aria-label]=\"displayLabel(swatch.label)\"\n              [attr.aria-selected]=\"isSelected(swatch.className)\"\n              (click)=\"handleSelect(swatch)\"\n            >\n              <span class=\"__label\">{{ displayLabel(swatch.label) | translate | async }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-height:var(--ax-sys-size-base, 2.5rem);width:100%}:host ax-dropdown-box{width:100%}:host .ax-editor-container{padding-block:0}:host .ax-content{display:flex;min-height:var(--ax-sys-size-base, 2.5rem);min-width:0;flex:1;cursor:pointer;align-items:center;outline:none;-webkit-user-select:none;user-select:none}.__root{display:flex;flex-direction:column;gap:.5rem}.__selected-item{display:inline-flex;align-items:center;max-width:100%;min-height:1.5rem;padding-inline:.5rem;border-radius:.375rem}.__selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__placeholder{opacity:.65}.__trigger-sep{margin-inline:.25rem}.__popover{box-sizing:border-box;width:100%;max-height:min(24rem,70vh);overflow:auto;padding:.75rem}.__groups{display:flex;flex-direction:column;gap:.75rem;min-width:0}.__group-title{font-size:.75rem;font-weight:500;color:rgb(var(--ax-sys-color-on-lighter-surface))}.__strip{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%;height:var(--ax-sys-size-base, 2.5rem);overflow:hidden;border-radius:.5rem}.__column{position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;border:0;border-radius:0;appearance:none;cursor:pointer;transition:flex .22s ease}.__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ax-sys-text-xs-base, .75rem);font-weight:600;letter-spacing:.04em;white-space:nowrap;opacity:0;transition:opacity .16s ease}.__look-strip .__column.__selected,.__look-strip .__column:hover:not(:disabled),.__look-strip .__column:focus-visible:not(:disabled){flex:4 1 0}.__look-strip .__column.__selected .__label,.__look-strip .__column:hover:not(:disabled) .__label,.__look-strip .__column:focus-visible:not(:disabled) .__label{opacity:1}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover),.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible){flex:1 1 0}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover) .__label,.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible) .__label{opacity:0}.__column.__selected{box-shadow:inset 0 0 0 2px rgb(var(--ax-sys-color-on-lighter-surface) / .4)}.__column:disabled{cursor:not-allowed}.__clear{align-self:flex-start;display:inline-flex;height:1.75rem;width:1.75rem;align-items:center;justify-content:center;border-radius:999px;border:1px dashed rgb(var(--ax-sys-color-border-lighter-surface));background:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));font-size:.75rem}.__clear.__selected,.__clear:focus-visible:not(:disabled){outline:2px solid rgb(var(--ax-sys-color-primary));outline-offset:2px}.__clear:disabled{cursor:not-allowed;opacity:.5}.__look-swatches .__strip{height:auto;flex-wrap:wrap;gap:.25rem;overflow:visible;border-radius:0}.__look-swatches .__column{flex:0 0 2rem;width:2rem;height:2rem;min-width:2rem;border-radius:.375rem;transition:transform .16s ease}.__look-swatches .__label{display:none}.__look-swatches .__column:hover:not(:disabled),.__look-swatches .__column:focus-visible:not(:disabled){flex:0 0 2rem;transform:scale(1.08)}.__disabled .__column,.__readonly .__column,.__disabled .__clear,.__readonly .__clear,.__disabled .ax-content,.__readonly .ax-content{cursor:default}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { paletteDropdown: [{ type: i0.ViewChild, args: ['paletteDropdown', { isSignal: true }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], selectedClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedClass", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], classSelected: [{ type: i0.Output, args: ["classSelected"] }] } });
+
+//#region ----- Types -----
+//#endregion
+
 //#region ----   Component   ----
 /**
  * Color Palette Picker Component
@@ -1576,7 +1700,7 @@ class AXPQueryColumnsComponent {
         this.columns.set(columns);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryColumnsComponent, isStandalone: true, selector: "axp-query-columns", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-4 select-none\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <div\n    class=\"flex flex-col gap-3 w-full ax-sorted-list max-h-[calc(100vh-280px)] overflow-x-hidden overflow-y-auto\"\n  >\n    @for (item of columns(); track item.name) {\n      <div\n        class=\"flex py-1 items-center justify-between\"\n        cdkDrag\n        cdkDragBoundary=\".ax-sorted-list\"\n      >\n        <div class=\"flex items-center gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move\"></ax-icon>\n          <p class=\"font-medium text-sm\">\n            {{ item.title | translate | async }}\n          </p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3$2.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryColumnsComponent, isStandalone: true, selector: "axp-query-columns", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-4 select-none\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <div\n    class=\"flex flex-col gap-3 w-full ax-sorted-list max-h-[calc(100vh-280px)] overflow-x-hidden overflow-y-auto\"\n  >\n    @for (item of columns(); track item.name) {\n      <div\n        class=\"flex py-1 items-center justify-between\"\n        cdkDrag\n        cdkDragBoundary=\".ax-sorted-list\"\n      >\n        <div class=\"flex items-center gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move\"></ax-icon>\n          <p class=\"font-medium text-sm\">\n            {{ item.title | translate | async }}\n          </p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3$3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryColumnsComponent, decorators: [{
             type: Component,
@@ -1945,9 +2069,9 @@ class AXPCompareViewComponent {
                 // Angular
                 CommonModule }, { kind: "ngmodule", type: 
                 // ACoreX
-                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i1$5.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: 
+                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: 
                 // Platform
-                AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+                AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
             type: Component,
@@ -2547,7 +2671,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n    <!-- Category Filter Side Panel -->\n    @if (categoryEnabled()) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"w-full mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <ax-data-table #grid [showFooter]=\"false\" class=\"flex-1 min-h-0\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\">\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n        @for (col of config().grid.columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n        @if (hasRowActionPrimary()) {\n        <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-command-column>\n        }\n        @if (hasRowActionDropdown()) {\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if (config().footerPrefixAction; as prefixAction) {\n      <!-- ----- Optional footer prefix action (e.g. sync from remote provider) ----- -->\n      <ax-button\n        look=\"twotone\"\n        color=\"primary\"\n        type=\"button\"\n        [disabled]=\"footerPrefixActionInProgress()\"\n        [text]=\"prefixAction.text\"\n        (onClick)=\"handleFooterPrefixActionClick()\"\n      >\n        <ax-prefix>\n          @if (footerPrefixActionInProgress()) {\n            <ax-loading></ax-loading>\n          }\n          <!-- ----- Footer prefix action icon when idle ----- -->\n          @else if (prefixAction.icon) {\n            <ax-icon [icon]=\"prefixAction.icon\"></ax-icon>\n          }\n        </ax-prefix>\n      </ax-button>\n    }\n    @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"absolute end-[2px] top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.expand-handler{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.expand-handler:hover{opacity:.8}.axp-data-selector{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-data-selector-content{display:flex;min-height:0px;flex:1;overflow:hidden}.axp-data-selector .axp-data-selector-content.with-category-filter .axp-main-data-area{min-height:0px;min-width:0px;flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;min-height:0px;min-width:0px;flex-shrink:0;flex-direction:column;overflow:hidden;padding:calc(var(--spacing, .25rem) * 4);border-right:1px solid var(--border-color);background:var(--surface-color)}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.axp-data-selector .axp-main-data-area ax-data-table{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;overflow:hidden;height:90vh;max-height:90vh}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n    <!-- Category Filter Side Panel -->\n    @if (categoryEnabled()) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"w-full mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <ax-data-table #grid [showFooter]=\"false\" class=\"flex-1 min-h-0\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\">\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n        @for (col of config().grid.columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n        @if (hasRowActionPrimary()) {\n        <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-command-column>\n        }\n        @if (hasRowActionDropdown()) {\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if (config().footerPrefixAction; as prefixAction) {\n      <!-- ----- Optional footer prefix action (e.g. sync from remote provider) ----- -->\n      <ax-button\n        look=\"twotone\"\n        color=\"primary\"\n        type=\"button\"\n        [disabled]=\"footerPrefixActionInProgress()\"\n        [text]=\"prefixAction.text\"\n        (onClick)=\"handleFooterPrefixActionClick()\"\n      >\n        <ax-prefix>\n          @if (footerPrefixActionInProgress()) {\n            <ax-loading></ax-loading>\n          }\n          <!-- ----- Footer prefix action icon when idle ----- -->\n          @else if (prefixAction.icon) {\n            <ax-icon [icon]=\"prefixAction.icon\"></ax-icon>\n          }\n        </ax-prefix>\n      </ax-button>\n    }\n    @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"absolute end-[2px] top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.expand-handler{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.expand-handler:hover{opacity:.8}.axp-data-selector{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-data-selector-content{display:flex;min-height:0px;flex:1;overflow:hidden}.axp-data-selector .axp-data-selector-content.with-category-filter .axp-main-data-area{min-height:0px;min-width:0px;flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;min-height:0px;min-width:0px;flex-shrink:0;flex-direction:column;overflow:hidden;padding:calc(var(--spacing, .25rem) * 4);border-right:1px solid var(--border-color);background:var(--surface-color)}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.axp-data-selector .axp-main-data-area ax-data-table{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;overflow:hidden;height:90vh;max-height:90vh}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$5.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
             type: Component,
@@ -2927,20 +3051,20 @@ class AXPConditionBuilderConditionComponent {
         this.removeItem.emit(this.item().id ?? '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderConditionComponent, isStandalone: true, selector: "axp-condition-builder-condition", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, onResolveWidget: { classPropertyName: "onResolveWidget", publicName: "onResolveWidget", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\">\n  <div class=\"__item-content\">\n    <!-- Field Selector -->\n    <div class=\"__field-selector\">\n      <ax-select-box\n        class=\"ax-sm\"\n        [dataSource]=\"availableFields()\"\n        [ngModel]=\"selectedFieldValue()\"\n        (onValueChanged)=\"onFieldChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n        [look]=\"'outline'\">\n      </ax-select-box>\n    </div>\n\n    <!-- Filter Widget (Operator + Value) -->\n    <div class=\"__operator-selector\">\n      @if (selectedField()?.field && filterNode().type) {\n        <axp-widgets-container\n          class=\"__filter-widget-container\"\n          [context]=\"context()\"\n          (onContextChanged)=\"onContextChange($event)\">\n          <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n          </ng-container>\n        </axp-widgets-container>\n      } @else {\n        <div class=\"__filter-placeholder\">\n          <span class=\"__placeholder-text\">{{\n            ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n          }}</span>\n        </div>\n      }\n    </div>\n\n    <!-- Fill By User (optional) -->\n    @if (showFillByUser()) {\n      <div class=\"__fill-by-user\">\n        <ax-check-box\n          class=\"text-xs\"\n          [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n          (ngModelChange)=\"onFillByUserChange($event)\">\n          <ax-label>\n            {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n          </ax-label>\n        </ax-check-box>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-select-box{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-select-box{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$4.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: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i1$5.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderConditionComponent, isStandalone: true, selector: "axp-condition-builder-condition", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, onResolveWidget: { classPropertyName: "onResolveWidget", publicName: "onResolveWidget", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\">\n  <div class=\"__item-content\">\n    <!-- Field Selector -->\n    <div class=\"__field-selector\">\n      <ax-lookup\n        mode=\"drop-down-list\"\n        class=\"ax-sm\"\n        [dataSource]=\"availableFields()\"\n        [ngModel]=\"selectedFieldValue()\"\n        (onValueChanged)=\"onFieldChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"false\"\n        [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n        [look]=\"'outline'\">\n      </ax-lookup>\n    </div>\n\n    <!-- Filter Widget (Operator + Value) -->\n    <div class=\"__operator-selector\">\n      @if (selectedField()?.field && filterNode().type) {\n        <axp-widgets-container\n          class=\"__filter-widget-container\"\n          [context]=\"context()\"\n          (onContextChanged)=\"onContextChange($event)\">\n          <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n          </ng-container>\n        </axp-widgets-container>\n      } @else {\n        <div class=\"__filter-placeholder\">\n          <span class=\"__placeholder-text\">{{\n            ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n          }}</span>\n        </div>\n      }\n    </div>\n\n    <!-- Fill By User (optional) -->\n    @if (showFillByUser()) {\n      <div class=\"__fill-by-user\">\n        <ax-check-box\n          class=\"text-xs\"\n          [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n          (ngModelChange)=\"onFillByUserChange($event)\">\n          <ax-label>\n            {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n          </ax-label>\n        </ax-check-box>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-lookup{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-lookup{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderConditionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-condition-builder-condition', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
-                        AXSelectBoxModule,
+                        AXLookupComponent,
                         AXDecoratorModule,
                         AXCheckBoxModule,
                         AXLabelModule,
                         AXPWidgetCoreModule,
                         AXTranslationModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"__condition-row\">\n  <div class=\"__item-content\">\n    <!-- Field Selector -->\n    <div class=\"__field-selector\">\n      <ax-select-box\n        class=\"ax-sm\"\n        [dataSource]=\"availableFields()\"\n        [ngModel]=\"selectedFieldValue()\"\n        (onValueChanged)=\"onFieldChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n        [look]=\"'outline'\">\n      </ax-select-box>\n    </div>\n\n    <!-- Filter Widget (Operator + Value) -->\n    <div class=\"__operator-selector\">\n      @if (selectedField()?.field && filterNode().type) {\n        <axp-widgets-container\n          class=\"__filter-widget-container\"\n          [context]=\"context()\"\n          (onContextChanged)=\"onContextChange($event)\">\n          <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n          </ng-container>\n        </axp-widgets-container>\n      } @else {\n        <div class=\"__filter-placeholder\">\n          <span class=\"__placeholder-text\">{{\n            ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n          }}</span>\n        </div>\n      }\n    </div>\n\n    <!-- Fill By User (optional) -->\n    @if (showFillByUser()) {\n      <div class=\"__fill-by-user\">\n        <ax-check-box\n          class=\"text-xs\"\n          [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n          (ngModelChange)=\"onFillByUserChange($event)\">\n          <ax-label>\n            {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n          </ax-label>\n        </ax-check-box>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-select-box{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-select-box{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"__condition-row\">\n  <div class=\"__item-content\">\n    <!-- Field Selector -->\n    <div class=\"__field-selector\">\n      <ax-lookup\n        mode=\"drop-down-list\"\n        class=\"ax-sm\"\n        [dataSource]=\"availableFields()\"\n        [ngModel]=\"selectedFieldValue()\"\n        (onValueChanged)=\"onFieldChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"false\"\n        [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n        [look]=\"'outline'\">\n      </ax-lookup>\n    </div>\n\n    <!-- Filter Widget (Operator + Value) -->\n    <div class=\"__operator-selector\">\n      @if (selectedField()?.field && filterNode().type) {\n        <axp-widgets-container\n          class=\"__filter-widget-container\"\n          [context]=\"context()\"\n          (onContextChanged)=\"onContextChange($event)\">\n          <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n          </ng-container>\n        </axp-widgets-container>\n      } @else {\n        <div class=\"__filter-placeholder\">\n          <span class=\"__placeholder-text\">{{\n            ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n          }}</span>\n        </div>\n      }\n    </div>\n\n    <!-- Fill By User (optional) -->\n    @if (showFillByUser()) {\n      <div class=\"__fill-by-user\">\n        <ax-check-box\n          class=\"text-xs\"\n          [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n          (ngModelChange)=\"onFillByUserChange($event)\">\n          <ax-label>\n            {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n          </ax-label>\n        </ax-check-box>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-lookup{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-lookup{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], filterDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDefinitions", required: false }] }], onResolveWidget: [{ type: i0.Input, args: [{ isSignal: true, alias: "onResolveWidget", required: false }] }], showFillByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFillByUser", required: false }] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }] } });
 
 //#endregion
@@ -3291,7 +3415,7 @@ class AXPConditionBuilderComponent {
         this.updateValue();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderComponent, isStandalone: true, selector: "axp-condition-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"axp-condition-builder\">\n  <div class=\"__content\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupTemplate\"\n      [ngTemplateOutletContext]=\"{ group: queryData(), isRoot: true }\"\n    ></ng-container>\n  </div>\n</div>\n\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\">\n  <div\n    class=\"__group\"\n    [class.__root-group]=\"isRoot\"\n    [class.__connectors-enabled]=\"(group.filters?.length ?? 0) > 1\"\n  >\n    <div class=\"__group-wrapper\">\n      @if ((group.filters?.length ?? 0) > 1) {\n        <div class=\"__group-connector\">\n          <div class=\"__operator-selector\">\n            <ax-dropdown-button\n              class=\"ax-sm __operator-chip\"\n              [text]=\"getLogicDisplayText(group.logic)\"\n              [mode]=\"'dropdown'\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n            >\n              <ax-button-item-list>\n                @for (op of logicalOperatorsItems; track op.value) {\n                  <ax-button-item\n                    [text]=\"op.text\"\n                    [selected]=\"group.logic === op.value\"\n                    (onClick)=\"updateGroupLogicalOperator(group.id!, op.value)\"\n                  >\n                  </ax-button-item>\n                }\n              </ax-button-item-list>\n            </ax-dropdown-button>\n          </div>\n        </div>\n      }\n\n      <div\n        class=\"__conditions-container\"\n        axDropList\n        (dropListDropped)=\"reorderGroupItemsEvent(group.id!, $event)\"\n      >\n        @if ((group.filters?.length ?? 0) === 0) {\n          <div class=\"__group-empty\">\n            <ax-button\n              class=\"ax-sm __add-rule-btn\"\n              [look]=\"'twotone'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addConditionToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button\n              class=\"ax-sm __add-inner-group-btn\"\n              [look]=\"'outline'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addGroupToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        } @else {\n          @for (\n            item of getSortedFilters(group.filters || []);\n            track item.id;\n            let first = $first;\n            let last = $last\n          ) {\n            <div\n              class=\"__condition-item\"\n              axDrag\n              [class.__is-first]=\"first && (group.filters?.length ?? 0) > 1\"\n              [class.__is-last]=\"last && (group.filters?.length ?? 0) > 1\"\n            >\n              <div class=\"__drag-handle\" axDragHandle>\n                <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n              </div>\n\n              <div class=\"__item-content\">\n                @if (item.filters === undefined) {\n                  <axp-condition-builder-condition\n                    [item]=\"item\"\n                    [filterDefinitions]=\"filterDefinitions()\"\n                    [onResolveWidget]=\"resolveDefaultFilterWidget.bind(this)\"\n                    [showFillByUser]=\"showFillByUser()\"\n                    (itemChange)=\"updateCondition($event)\"\n                    (removeItem)=\"removeItem($event)\"\n                  >\n                  </axp-condition-builder-condition>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"groupTemplate\"\n                    [ngTemplateOutletContext]=\"{ group: item }\"\n                  >\n                  </ng-container>\n                }\n              </div>\n\n              <div class=\"__item-controls\">\n                <ax-button\n                  class=\"ax-sm __icon-btn\"\n                  [look]=\"'blank'\"\n                  [color]=\"'danger'\"\n                  [title]=\"\n                    '@data-management:metadata-definitions.components.query-builder.actions.remove.title'\n                      | translate\n                      | async\n                  \"\n                  (onClick)=\"removeItem(item.id!)\"\n                >\n                  <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n    <!-- <div class=\"__add-condition-link ps-16\">\n      <ax-button class=\"ax-sm __add-condition-btn\" [look]=\"'link'\" [color]=\"'primary'\"\n        [text]=\"'@data-management:metadata-definitions.components.query-builder.actions.add-condition.title' | translate | async\"\n        (onClick)=\"addConditionToGroup(group.id!)\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div> -->\n\n    @if ((group.filters?.length ?? 0) > 0) {\n      <div class=\"__group-actions\">\n        <ax-button\n          class=\"ax-sm __add-rule-btn\"\n          [look]=\"'twotone'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addConditionToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n        <ax-button\n          class=\"ax-sm __add-inner-group-btn\"\n          [look]=\"'outline'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addGroupToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axp-condition-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-condition-builder .__content{flex:1;overflow:auto;padding:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group{position:relative}.axp-condition-builder .__group.__root-group{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-condition-builder .__group:not(.__root-group){margin-top:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__group .__group-wrapper{--qb-connector-col: 4.25rem;--qb-conditions-gap: 1rem;display:grid;grid-template-columns:var(--qb-connector-col) 1fr;gap:0 var(--qb-conditions-gap);align-items:stretch;width:100%;min-height:2rem;min-width:0}.axp-condition-builder .__group:not(.__connectors-enabled)>.__group-wrapper{grid-template-columns:1fr}.axp-condition-builder .__group .__group-connector{--qb-operator-gap: .45rem;position:relative;width:var(--qb-connector-col);display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:0}.axp-condition-builder .__group .__group-connector:before,.axp-condition-builder .__group .__group-connector:after{content:\"\";position:absolute;left:50%;transform:translate(-50%);top:var(--qb-connector-top, 1.5rem);bottom:var(--qb-connector-bottom, 1.5rem);width:0;border-left:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__group .__group-connector:before{bottom:calc(50% - var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector:after{top:calc(50% + var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector .__operator-selector{position:absolute;top:0;left:50%;z-index:10;margin:0;display:flex;max-width:100%;flex-shrink:0;align-items:center;justify-content:center;transform:translate(-50%);box-sizing:border-box;height:100%}.axp-condition-builder .__group .__group-connector .__operator-selector .__operator-chip{position:relative;z-index:1;max-width:100%;flex-shrink:0;border-radius:var(--radius-md, .375rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));min-width:3.25rem}.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:before,.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:after{content:none}.axp-condition-builder .__group .__conditions-container{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 8);min-width:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-left:0;padding-right:0}.axp-condition-builder .__group .__conditions-container .__group-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving{position:relative;min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);padding:var(--spacing, .25rem);border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}:is(.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving):has(.__group-empty):after{content:\"Drop conditions here\";position:absolute;inset:0;z-index:-1;display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-primary-surface));pointer-events:none}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder){margin-bottom:.375rem}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder):last-child{margin-bottom:0}.axp-condition-builder .__group .__group-actions{margin-top:calc(var(--spacing, .25rem) * 2);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-block:calc(var(--spacing, .25rem) * 2.5);border-top:1px solid rgba(var(--ax-sys-color-border-lighter-surface),1);grid-column:1 / -1}.axp-condition-builder .__group .__add-condition-link{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-condition-builder .__condition-item{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 12);cursor:move;align-items:center;gap:calc(var(--spacing, .25rem) * 3);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);-webkit-user-select:none;user-select:none;border-radius:.375rem;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__condition-item:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1)}.axp-condition-builder .__condition-item.__is-first:before,.axp-condition-builder .__condition-item.__is-last:before{content:\"\";position:absolute;left:calc(-1 * (var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem)));top:50%;transform:translateY(-50%);width:calc(var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem));height:0;border-top:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__condition-item .__drag-handle{position:relative;z-index:1;display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none));transition:color .15s ease-in-out}.axp-condition-builder .__condition-item .__drag-handle:active{cursor:grabbing}.axp-condition-builder .__condition-item .__drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-condition-builder .__condition-item .__item-content{position:relative;z-index:1;min-width:0px;flex:1}.axp-condition-builder .__condition-item .__item-controls{position:relative;z-index:1;display:flex;width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing, .25rem)}.axp-condition-builder .__condition-item .__icon-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;width:1.75rem;height:1.75rem}.axp-condition-builder .__condition-item.drag-preview{display:flex;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);opacity:.9;border-radius:.375rem;border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder{position:relative;margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 12);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-radius:.375rem;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder>*{opacity:0%}.axp-condition-builder .__condition-item.drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-condition-builder .__group:not(.__root-group).drag-preview{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-placeholder{margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 16);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-dragging{opacity:70%}.axp-condition-builder .__group:not(.__root-group):hover:not(.drag-dragging) .__drag-handle{color:rgba(var(--ax-sys-color-primary-surface))}.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:before,.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:after{content:none}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$4.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { 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: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "component", type: AXPConditionBuilderConditionComponent, selector: "axp-condition-builder-condition", inputs: ["item", "filterDefinitions", "onResolveWidget", "showFillByUser"], outputs: ["itemChange", "removeItem"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderComponent, isStandalone: true, selector: "axp-condition-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"axp-condition-builder\">\n  <div class=\"__content\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupTemplate\"\n      [ngTemplateOutletContext]=\"{ group: queryData(), isRoot: true }\"\n    ></ng-container>\n  </div>\n</div>\n\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\">\n  <div\n    class=\"__group\"\n    [class.__root-group]=\"isRoot\"\n    [class.__connectors-enabled]=\"(group.filters?.length ?? 0) > 1\"\n  >\n    <div class=\"__group-wrapper\">\n      @if ((group.filters?.length ?? 0) > 1) {\n        <div class=\"__group-connector\">\n          <div class=\"__operator-selector\">\n            <ax-dropdown-button\n              class=\"ax-sm __operator-chip\"\n              [text]=\"getLogicDisplayText(group.logic)\"\n              [mode]=\"'dropdown'\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n            >\n              <ax-button-item-list>\n                @for (op of logicalOperatorsItems; track op.value) {\n                  <ax-button-item\n                    [text]=\"op.text\"\n                    [selected]=\"group.logic === op.value\"\n                    (onClick)=\"updateGroupLogicalOperator(group.id!, op.value)\"\n                  >\n                  </ax-button-item>\n                }\n              </ax-button-item-list>\n            </ax-dropdown-button>\n          </div>\n        </div>\n      }\n\n      <div\n        class=\"__conditions-container\"\n        axDropList\n        (dropListDropped)=\"reorderGroupItemsEvent(group.id!, $event)\"\n      >\n        @if ((group.filters?.length ?? 0) === 0) {\n          <div class=\"__group-empty\">\n            <ax-button\n              class=\"ax-sm __add-rule-btn\"\n              [look]=\"'twotone'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addConditionToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button\n              class=\"ax-sm __add-inner-group-btn\"\n              [look]=\"'outline'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addGroupToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        } @else {\n          @for (\n            item of getSortedFilters(group.filters || []);\n            track item.id;\n            let first = $first;\n            let last = $last\n          ) {\n            <div\n              class=\"__condition-item\"\n              axDrag\n              [class.__is-first]=\"first && (group.filters?.length ?? 0) > 1\"\n              [class.__is-last]=\"last && (group.filters?.length ?? 0) > 1\"\n            >\n              <div class=\"__drag-handle\" axDragHandle>\n                <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n              </div>\n\n              <div class=\"__item-content\">\n                @if (item.filters === undefined) {\n                  <axp-condition-builder-condition\n                    [item]=\"item\"\n                    [filterDefinitions]=\"filterDefinitions()\"\n                    [onResolveWidget]=\"resolveDefaultFilterWidget.bind(this)\"\n                    [showFillByUser]=\"showFillByUser()\"\n                    (itemChange)=\"updateCondition($event)\"\n                    (removeItem)=\"removeItem($event)\"\n                  >\n                  </axp-condition-builder-condition>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"groupTemplate\"\n                    [ngTemplateOutletContext]=\"{ group: item }\"\n                  >\n                  </ng-container>\n                }\n              </div>\n\n              <div class=\"__item-controls\">\n                <ax-button\n                  class=\"ax-sm __icon-btn\"\n                  [look]=\"'blank'\"\n                  [color]=\"'danger'\"\n                  [title]=\"\n                    '@data-management:metadata-definitions.components.query-builder.actions.remove.title'\n                      | translate\n                      | async\n                  \"\n                  (onClick)=\"removeItem(item.id!)\"\n                >\n                  <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n    <!-- <div class=\"__add-condition-link ps-16\">\n      <ax-button class=\"ax-sm __add-condition-btn\" [look]=\"'link'\" [color]=\"'primary'\"\n        [text]=\"'@data-management:metadata-definitions.components.query-builder.actions.add-condition.title' | translate | async\"\n        (onClick)=\"addConditionToGroup(group.id!)\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div> -->\n\n    @if ((group.filters?.length ?? 0) > 0) {\n      <div class=\"__group-actions\">\n        <ax-button\n          class=\"ax-sm __add-rule-btn\"\n          [look]=\"'twotone'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addConditionToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n        <ax-button\n          class=\"ax-sm __add-inner-group-btn\"\n          [look]=\"'outline'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addGroupToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axp-condition-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-condition-builder .__content{flex:1;overflow:auto;padding:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group{position:relative}.axp-condition-builder .__group.__root-group{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-condition-builder .__group:not(.__root-group){margin-top:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__group .__group-wrapper{--qb-connector-col: 4.25rem;--qb-conditions-gap: 1rem;display:grid;grid-template-columns:var(--qb-connector-col) 1fr;gap:0 var(--qb-conditions-gap);align-items:stretch;width:100%;min-height:2rem;min-width:0}.axp-condition-builder .__group:not(.__connectors-enabled)>.__group-wrapper{grid-template-columns:1fr}.axp-condition-builder .__group .__group-connector{--qb-operator-gap: .45rem;position:relative;width:var(--qb-connector-col);display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:0}.axp-condition-builder .__group .__group-connector:before,.axp-condition-builder .__group .__group-connector:after{content:\"\";position:absolute;left:50%;transform:translate(-50%);top:var(--qb-connector-top, 1.5rem);bottom:var(--qb-connector-bottom, 1.5rem);width:0;border-left:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__group .__group-connector:before{bottom:calc(50% - var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector:after{top:calc(50% + var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector .__operator-selector{position:absolute;top:0;left:50%;z-index:10;margin:0;display:flex;max-width:100%;flex-shrink:0;align-items:center;justify-content:center;transform:translate(-50%);box-sizing:border-box;height:100%}.axp-condition-builder .__group .__group-connector .__operator-selector .__operator-chip{position:relative;z-index:1;max-width:100%;flex-shrink:0;border-radius:var(--radius-md, .375rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));min-width:3.25rem}.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:before,.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:after{content:none}.axp-condition-builder .__group .__conditions-container{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 8);min-width:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-left:0;padding-right:0}.axp-condition-builder .__group .__conditions-container .__group-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving{position:relative;min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);padding:var(--spacing, .25rem);border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}:is(.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving):has(.__group-empty):after{content:\"Drop conditions here\";position:absolute;inset:0;z-index:-1;display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-primary-surface));pointer-events:none}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder){margin-bottom:.375rem}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder):last-child{margin-bottom:0}.axp-condition-builder .__group .__group-actions{margin-top:calc(var(--spacing, .25rem) * 2);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-block:calc(var(--spacing, .25rem) * 2.5);border-top:1px solid rgba(var(--ax-sys-color-border-lighter-surface),1);grid-column:1 / -1}.axp-condition-builder .__group .__add-condition-link{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-condition-builder .__condition-item{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 12);cursor:move;align-items:center;gap:calc(var(--spacing, .25rem) * 3);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);-webkit-user-select:none;user-select:none;border-radius:.375rem;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__condition-item:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1)}.axp-condition-builder .__condition-item.__is-first:before,.axp-condition-builder .__condition-item.__is-last:before{content:\"\";position:absolute;left:calc(-1 * (var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem)));top:50%;transform:translateY(-50%);width:calc(var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem));height:0;border-top:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__condition-item .__drag-handle{position:relative;z-index:1;display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none));transition:color .15s ease-in-out}.axp-condition-builder .__condition-item .__drag-handle:active{cursor:grabbing}.axp-condition-builder .__condition-item .__drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-condition-builder .__condition-item .__item-content{position:relative;z-index:1;min-width:0px;flex:1}.axp-condition-builder .__condition-item .__item-controls{position:relative;z-index:1;display:flex;width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing, .25rem)}.axp-condition-builder .__condition-item .__icon-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;width:1.75rem;height:1.75rem}.axp-condition-builder .__condition-item.drag-preview{display:flex;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);opacity:.9;border-radius:.375rem;border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder{position:relative;margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 12);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-radius:.375rem;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder>*{opacity:0%}.axp-condition-builder .__condition-item.drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-condition-builder .__group:not(.__root-group).drag-preview{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-placeholder{margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 16);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-dragging{opacity:70%}.axp-condition-builder .__group:not(.__root-group):hover:not(.drag-dragging) .__drag-handle{color:rgba(var(--ax-sys-color-primary-surface))}.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:before,.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:after{content:none}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { 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: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "component", type: AXPConditionBuilderConditionComponent, selector: "axp-condition-builder-condition", inputs: ["item", "filterDefinitions", "onResolveWidget", "showFillByUser"], outputs: ["itemChange", "removeItem"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderComponent, decorators: [{
             type: Component,
@@ -5826,7 +5950,7 @@ class AXPQueryFiltersComponent {
      */
     #focusEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"flex w-full min-w-0 items-center gap-2 p-2\"\n  (keydown.control.space)=\"openFilterPopover()\"\n>\n  <ax-button\n    (keydown)=\"handleButtonKeyDown($event)\"\n    (onClick)=\"openFilterPopover()\"\n    #filterButton\n    [look]=\"'blank'\"\n  >\n    <ax-icon class=\"far fa-bars-filter cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <div class=\"min-w-0 flex-1\" (click)=\"handleTagBoxClick($event)\">\n    <ax-tag-box\n      #tagBoxComponent\n      [ngModel]=\"asyncTags()\"\n      (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n    >\n      <ax-suffix class=\"hidden shrink-0 whitespace-nowrap md:flex text-gray-500\">\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-tag-box>\n  </div>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"inline-flex items-center gap-1.5 hover:bg-darkest cursor-pointer rounded-md px-3 py-1 text-sm surface\"\n      [class.!bg-primary]=\"item.field === 'all'\"\n      [class.!text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item, $event)\"\n    >\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n        <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n        </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:min-w-72 w-full rounded-md md:max-h-96 lg:w-[450px] md:overflow-auto\"\n  >\n    <axp-widgets-container\n      #widgetsContainer\n      [context]=\"context()\"\n      (onContextChanged)=\"onContextChanged($event)\"\n    >\n      @if (activeFilter()) {\n        <div\n          class=\"flex flex-col lightest-surface shadow-md\"\n          (keydown.enter)=\"onEnterKeyPressed($event)\"\n        >\n          <ax-header class=\"border-b border-border-light px-4 py-2 font-semibold\">{{\n            $safeNavigationMigration(activeFilter()?.title)! | translate | async\n          }}</ax-header>\n          <ax-content class=\"p-4\">\n            <div class=\"mb-2\">\n              <ax-badge\n                [text]=\"\n                  (getActiveOperator(activeFilter())! | translate | async) || ''\n                \"\n              ></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: resolveFilterContextField(activeFilter()!),\n                options: $safeNavigationMigration(activeFilter()?.widget?.options),\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer\n            class=\"border-t flex justify-end border-border-light w-full px-4 py-2\"\n          >\n            <ax-button\n              class=\"ax-sm\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div\n          axListNavigation\n          #list=\"axListNavigation\"\n          class=\"axp-list-items border-none\"\n        >\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"w-full border-t border-light my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"\n                caseItem.isActive() && !isFilterDisabled(field)\n              \"\n              [class.axp-query-filters__advance-item--disabled]=\"\n                isFilterDisabled(field)\n              \"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"flex items-end gap-2\">\n                <ax-icon class=\"w-5\" [class]=\"'fa-light ' + field.icon\">\n                </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{width:100%;min-width:0px}axp-query-filters>.flex>.min-w-0.flex-1{min-width:0px}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: 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: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$2.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7$1.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7$1.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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: "22.0.8", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"flex w-full min-w-0 items-center gap-2 p-2\"\n  (keydown.control.space)=\"openFilterPopover()\"\n>\n  <ax-button\n    (keydown)=\"handleButtonKeyDown($event)\"\n    (onClick)=\"openFilterPopover()\"\n    #filterButton\n    [look]=\"'blank'\"\n  >\n    <ax-icon class=\"far fa-bars-filter cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <div class=\"min-w-0 flex-1\" (click)=\"handleTagBoxClick($event)\">\n    <ax-tag-box\n      #tagBoxComponent\n      [ngModel]=\"asyncTags()\"\n      (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n    >\n      <ax-suffix class=\"hidden shrink-0 whitespace-nowrap md:flex text-gray-500\">\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-tag-box>\n  </div>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"inline-flex items-center gap-1.5 hover:bg-darkest cursor-pointer rounded-md px-3 py-1 text-sm surface\"\n      [class.!bg-primary]=\"item.field === 'all'\"\n      [class.!text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item, $event)\"\n    >\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n        <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n        </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:min-w-72 w-full rounded-md md:max-h-96 lg:w-[450px] md:overflow-auto\"\n  >\n    <axp-widgets-container\n      #widgetsContainer\n      [context]=\"context()\"\n      (onContextChanged)=\"onContextChanged($event)\"\n    >\n      @if (activeFilter()) {\n        <div\n          class=\"flex flex-col lightest-surface shadow-md\"\n          (keydown.enter)=\"onEnterKeyPressed($event)\"\n        >\n          <ax-header class=\"border-b border-border-light px-4 py-2 font-semibold\">{{\n            $safeNavigationMigration(activeFilter()?.title)! | translate | async\n          }}</ax-header>\n          <ax-content class=\"p-4\">\n            <div class=\"mb-2\">\n              <ax-badge\n                [text]=\"\n                  (getActiveOperator(activeFilter())! | translate | async) || ''\n                \"\n              ></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: resolveFilterContextField(activeFilter()!),\n                options: $safeNavigationMigration(activeFilter()?.widget?.options),\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer\n            class=\"border-t flex justify-end border-border-light w-full px-4 py-2\"\n          >\n            <ax-button\n              class=\"ax-sm\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div\n          axListNavigation\n          #list=\"axListNavigation\"\n          class=\"axp-list-items border-none\"\n        >\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"w-full border-t border-light my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"\n                caseItem.isActive() && !isFilterDisabled(field)\n              \"\n              [class.axp-query-filters__advance-item--disabled]=\"\n                isFilterDisabled(field)\n              \"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"flex items-end gap-2\">\n                <ax-icon class=\"w-5\" [class]=\"'fa-light ' + field.icon\">\n                </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{width:100%;min-width:0px}axp-query-filters>.flex>.min-w-0.flex-1{min-width:0px}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: 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: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7$1.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7$1.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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: "22.0.8", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
@@ -5916,7 +6040,7 @@ class AXPPreloadFiltersComponent {
         return Array.isArray(validations) && validations.some((v) => v['rule'] === 'required');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPreloadFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPPreloadFiltersComponent, isStandalone: true, selector: "axp-preload-filters", inputs: { filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: true, transformFunction: null }, showAllButton: { classPropertyName: "showAllButton", publicName: "showAllButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", showAll: "showAll" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 items-center justify-center h-full\">\n  <div class=\"card min-w-96 flex flex-col items-center gap-2 p-6\">\n    <div class=\"header\">\n      <img\n        width=\"180\"\n        src=\"/assets/images/ui/filter.svg\"\n        [attr.alt]=\"('@general:messages.preload-filters.filter-icon-alt' | translate | async) ?? ''\"\n      />\n    </div>\n    <div class=\"py-6\">\n      <div class=\"mb-6\">\n        <h4 class=\"text-lg font-medium\">\n          {{ '@general:messages.preload-filters.title' | translate | async }}\n        </h4>\n        <span class=\"text-sm text-gray-400\">\n          {{ '@general:messages.preload-filters.description' | translate | async }}\n        </span>\n      </div>\n      <axp-widgets-container [context]=\"context\" (onContextChanged)=\"onContextChanged($event)\">\n        <ax-form #form (keydown)=\"onFormKeyDown($event, form)\">\n          @for (filterDef of filterDefinitions(); track $index) {\n            <ax-form-field class=\"mt-2\">\n              <ax-label [required]=\"isFieldRequired(filterDef)\">\n                {{ filterDef?.title ?? '' | translate | async }}\n              </ax-label>\n              <ng-container\n                #widgetRenderer=\"widgetRenderer\"\n                axp-widget-renderer\n                [node]=\"{\n                  type: filterDef?.widget?.type || 'text-editor',\n                  path: $safeNavigationMigration(filterDef?.field),\n                  options: $safeNavigationMigration(filterDef?.widget?.options),\n                }\"\n                [mode]=\"'edit'\"\n              >\n              </ng-container>\n            </ax-form-field>\n          }\n          <div class=\"mt-6\">\n            <ax-button\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApply(form)\"\n              [color]=\"'primary'\"\n              class=\"w-full\"\n            ></ax-button>\n            @if (showAllButton()) {\n              <ax-button\n                class=\"w-full mt-4 text-primary\"\n                [look]=\"'blank'\"\n                [text]=\"'@general:actions.show.all.title' | translate | async\"\n                (onClick)=\"handleShowAll($event)\"\n              ></ax-button>\n            }\n          </div>\n        </ax-form>\n      </axp-widgets-container>\n    </div>\n  </div>\n</div>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i1$5.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPPreloadFiltersComponent, isStandalone: true, selector: "axp-preload-filters", inputs: { filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: true, transformFunction: null }, showAllButton: { classPropertyName: "showAllButton", publicName: "showAllButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", showAll: "showAll" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 items-center justify-center h-full\">\n  <div class=\"card min-w-96 flex flex-col items-center gap-2 p-6\">\n    <div class=\"header\">\n      <img\n        width=\"180\"\n        src=\"/assets/images/ui/filter.svg\"\n        [attr.alt]=\"('@general:messages.preload-filters.filter-icon-alt' | translate | async) ?? ''\"\n      />\n    </div>\n    <div class=\"py-6\">\n      <div class=\"mb-6\">\n        <h4 class=\"text-lg font-medium\">\n          {{ '@general:messages.preload-filters.title' | translate | async }}\n        </h4>\n        <span class=\"text-sm text-gray-400\">\n          {{ '@general:messages.preload-filters.description' | translate | async }}\n        </span>\n      </div>\n      <axp-widgets-container [context]=\"context\" (onContextChanged)=\"onContextChanged($event)\">\n        <ax-form #form (keydown)=\"onFormKeyDown($event, form)\">\n          @for (filterDef of filterDefinitions(); track $index) {\n            <ax-form-field class=\"mt-2\">\n              <ax-label [required]=\"isFieldRequired(filterDef)\">\n                {{ filterDef?.title ?? '' | translate | async }}\n              </ax-label>\n              <ng-container\n                #widgetRenderer=\"widgetRenderer\"\n                axp-widget-renderer\n                [node]=\"{\n                  type: filterDef?.widget?.type || 'text-editor',\n                  path: $safeNavigationMigration(filterDef?.field),\n                  options: $safeNavigationMigration(filterDef?.widget?.options),\n                }\"\n                [mode]=\"'edit'\"\n              >\n              </ng-container>\n            </ax-form-field>\n          }\n          <div class=\"mt-6\">\n            <ax-button\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApply(form)\"\n              [color]=\"'primary'\"\n              class=\"w-full\"\n            ></ax-button>\n            @if (showAllButton()) {\n              <ax-button\n                class=\"w-full mt-4 text-primary\"\n                [look]=\"'blank'\"\n                [text]=\"'@general:actions.show.all.title' | translate | async\"\n                (onClick)=\"handleShowAll($event)\"\n              ></ax-button>\n            }\n          </div>\n        </ax-form>\n      </axp-widgets-container>\n    </div>\n  </div>\n</div>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPreloadFiltersComponent, decorators: [{
             type: Component,
@@ -6055,7 +6179,7 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
         </ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, styles: ["ax-image-editor-view>canvas{max-height:65vh;width:auto!important;height:auto!important}axp-image-editor-popup ax-image-editor-container{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$7.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "cropperSize", "src"] }, { kind: "component", type: i1$7.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$7.AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio", "size"] }, { kind: "component", type: i1$7.AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active", "hidden"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["ax-image-editor-view>canvas{max-height:65vh;width:auto!important;height:auto!important}axp-image-editor-popup ax-image-editor-container{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$6.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "cropperSize", "src"] }, { kind: "component", type: i1$6.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$6.AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio", "size"] }, { kind: "component", type: i1$6.AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active", "hidden"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPImageEditorPopupComponent, decorators: [{
             type: Component,
@@ -6138,6 +6262,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+//#region ----- Types -----
+//#endregion
+//#region ----- Constants -----
+const AXP_PAGE_LAYOUT_ELEMENT_ID = 'axp-page-layout';
+const AXP_INFINITE_SCROLL_DEFAULT_ROOT_MARGIN = '160px';
+//#endregion
+
+//#region ----- Root resolution -----
+function resolveInfiniteScrollRoot(root) {
+    if (root === null) {
+        return null;
+    }
+    if (typeof Element !== 'undefined' && root instanceof Element) {
+        return root;
+    }
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    if (typeof root === 'string' && root.trim()) {
+        const selector = root.trim();
+        const id = selector.startsWith('#') ? selector.slice(1) : selector;
+        return document.getElementById(id) ?? document.querySelector(selector);
+    }
+    return document.getElementById(AXP_PAGE_LAYOUT_ELEMENT_ID);
+}
+//#endregion
+//#region ----- Observer -----
+/** Observes a sentinel and calls `onReached` when it intersects the scroll root. Returns a disconnect function. */
+function observeInfiniteScroll(options) {
+    const observer = new IntersectionObserver((entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+            options.onReached();
+        }
+    }, {
+        root: resolveInfiniteScrollRoot(options.root),
+        rootMargin: options.rootMargin ?? AXP_INFINITE_SCROLL_DEFAULT_ROOT_MARGIN,
+        threshold: options.threshold ?? 0,
+    });
+    observer.observe(options.sentinel);
+    return () => observer.disconnect();
+}
+//#endregion
+//#region ----- Page merge -----
+/** Appends or replaces a paged result and computes the next skip / hasMore flags. */
+function mergeInfiniteScrollPage(current, page, options) {
+    if (!page) {
+        return {
+            items: options.reset ? [] : [...current],
+            skip: options.reset ? 0 : options.skip,
+            hasMore: false,
+        };
+    }
+    const nextItems = [...(page.items ?? [])];
+    const items = options.reset ? nextItems : [...current, ...nextItems];
+    const skip = (options.reset ? 0 : Math.max(0, options.skip)) + nextItems.length;
+    const hasMore = nextItems.length > 0 && skip < (page.total ?? 0);
+    return { items, skip, hasMore };
+}
+//#endregion
+
+//#region ----- Directive -----
+class AXPInfiniteScrollDirective {
+    //#endregion
+    //#region ----- Lifecycle -----
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.host = inject(ElementRef);
+        //#endregion
+        //#region ----- Inputs & Outputs -----
+        this.enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'axpInfiniteScrollEnabled' });
+        this.root = input(undefined, { ...(ngDevMode ? { debugName: "root" } : /* istanbul ignore next */ {}), alias: 'axpInfiniteScrollRoot' });
+        this.rootMargin = input(AXP_INFINITE_SCROLL_DEFAULT_ROOT_MARGIN, { ...(ngDevMode ? { debugName: "rootMargin" } : /* istanbul ignore next */ {}), alias: 'axpInfiniteScrollRootMargin' });
+        this.threshold = input(0, { ...(ngDevMode ? { debugName: "threshold" } : /* istanbul ignore next */ {}), alias: 'axpInfiniteScrollThreshold' });
+        this.reached = output({ alias: 'axpInfiniteScrollReached' });
+        effect((onCleanup) => {
+            if (!this.enabled()) {
+                return;
+            }
+            const disconnect = observeInfiniteScroll({
+                sentinel: this.host.nativeElement,
+                root: this.root(),
+                rootMargin: this.rootMargin(),
+                threshold: this.threshold(),
+                onReached: () => this.reached.emit(),
+            });
+            onCleanup(disconnect);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPInfiniteScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXPInfiniteScrollDirective, isStandalone: true, selector: "[axpInfiniteScroll]", inputs: { enabled: { classPropertyName: "enabled", publicName: "axpInfiniteScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "axpInfiniteScrollRoot", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "axpInfiniteScrollRootMargin", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "axpInfiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reached: "axpInfiniteScrollReached" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPInfiniteScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axpInfiniteScroll]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpInfiniteScrollEnabled", required: false }] }], root: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpInfiniteScrollRoot", required: false }] }], rootMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpInfiniteScrollRootMargin", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpInfiniteScrollThreshold", required: false }] }], reached: [{ type: i0.Output, args: ["axpInfiniteScrollReached"] }] } });
+
 //#region ---- Signature editor types ----
 //#endregion
 
@@ -6694,7 +6917,7 @@ class AXPPropertyViewerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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\n    [context]=\"context()\"\n    (onContextChanged)=\"handleContextChange($event)\"\n  >\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template\n      #propertyRow\n      let-prop=\"prop\"\n      let-translateTitle=\"translateTitle\"\n    >\n      <div class=\"flex flex-col gap-2 py-2\">\n        <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n        <div class=\"flex items-center gap-2 w-full\">\n          @if (prop.showLabel !== false) {\n            @if (translateTitle) {\n              <span class=\"font-semibold flex-1 min-w-0\">{{\n                prop.title | translate | async\n              }}</span>\n            } @else {\n              <span class=\"font-semibold flex-1 min-w-0\">{{ prop.title }}</span>\n            }\n          }\n          @if (prop.binding?.enabled) {\n            <div class=\"flex gap-1 shrink-0 ax-sm\">\n              <ax-button\n                [toggleable]=\"true\"\n                [selected]=\"isExpressionMode(prop)\"\n                look=\"twotone\"\n                [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\"\n                class=\"shrink-0\"\n                [title]=\"\n                  (isExpressionMode(prop)\n                    ? '@general:terms.common.expression'\n                    : '@general:terms.common.value'\n                  )\n                    | translate\n                    | async\n                \"\n                (selectedChange)=\"setExpressionMode(prop, $event)\"\n              >\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=\"w-full overflow-hidden\" style=\"direction: ltr\">\n              <ax-code-editor\n                [ngModel]=\"getBindingExpressionValue(prop)\"\n                (ngModelChange)=\"setBindingExpressionValue(prop, $event)\"\n                language=\"javascript\"\n                [lineNumbers]=\"true\"\n                class=\"w-full\"\n              >\n              </ax-code-editor>\n            </div>\n          } @else {\n            <ax-button\n              look=\"twotone\"\n              color=\"primary\"\n              size=\"sm\"\n              class=\"w-full\"\n              [text]=\"\n                '@general:widgets.triggers.open-editor' | translate | async\n              \"\n              (onClick)=\"openBindingEditor(prop)\"\n              [title]=\"\n                '@general:widgets.triggers.edit-binding-expression'\n                  | translate\n                  | async\n              \"\n            >\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\n            axp-widget-renderer\n            [node]=\"prop.schema.interface\"\n            [mode]=\"'edit'\"\n          >\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=\"flex flex-col\">\n        @if (tabs().length > 1) {\n          <div class=\"pb-2\">\n            <ax-tabs\n              look=\"default\"\n              (onActiveTabChanged)=\"handleTabChange($event)\"\n              [look]=\"'with-line'\"\n            >\n              @for (tab of tabs(); track $index) {\n                <ax-tab-item\n                  [text]=\"(tab.title | translate | async) ?? ''\"\n                  [key]=\"$index.toString()\"\n                  [active]=\"currentTabIndex() === $index\"\n                >\n                </ax-tab-item>\n              }\n            </ax-tabs>\n          </div>\n        }\n        <div class=\"flex-1 overflow-auto\">\n          <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n            @for (group of groups(); track $index) {\n              <ax-accordion-item\n                class=\"mb-0!\"\n                [caption]=\"(group.title | translate | async) ?? ''\"\n                [isCollapsed]=\"group.isCollapsed\"\n                (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n              >\n                <div class=\"flex flex-col\">\n                  @for (p of group.props; track $index) {\n                    @if (isPropertyVisible(p)) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          propertyRow;\n                          context: { prop: p, translateTitle: true }\n                        \"\n                      >\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=\"flex flex-col p-4 gap-4\">\n        @for (group of groups(); track $index) {\n          @for (p of group.props; track $index) {\n            @if (isPropertyVisible(p)) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  propertyRow;\n                  context: { prop: p, translateTitle: true }\n                \"\n              >\n              </ng-container>\n            }\n          }\n        }\n      </div>\n    }\n    <!-- #endregion -->\n  </axp-widgets-container>\n</ax-form>\n", styles: ["@layer properties;axp-property-viewer ax-accordion-item .ax-accordion-header{border-top-style:var(--tw-border-style);border-top-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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$6.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$6.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: 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$5.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.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: "22.0.8", 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\n    [context]=\"context()\"\n    (onContextChanged)=\"handleContextChange($event)\"\n  >\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template\n      #propertyRow\n      let-prop=\"prop\"\n      let-translateTitle=\"translateTitle\"\n    >\n      <div class=\"flex flex-col gap-2 py-2\">\n        <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n        <div class=\"flex items-center gap-2 w-full\">\n          @if (prop.showLabel !== false) {\n            @if (translateTitle) {\n              <span class=\"font-semibold flex-1 min-w-0\">{{\n                prop.title | translate | async\n              }}</span>\n            } @else {\n              <span class=\"font-semibold flex-1 min-w-0\">{{ prop.title }}</span>\n            }\n          }\n          @if (prop.binding?.enabled) {\n            <div class=\"flex gap-1 shrink-0 ax-sm\">\n              <ax-button\n                [toggleable]=\"true\"\n                [selected]=\"isExpressionMode(prop)\"\n                look=\"twotone\"\n                [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\"\n                class=\"shrink-0\"\n                [title]=\"\n                  (isExpressionMode(prop)\n                    ? '@general:terms.common.expression'\n                    : '@general:terms.common.value'\n                  )\n                    | translate\n                    | async\n                \"\n                (selectedChange)=\"setExpressionMode(prop, $event)\"\n              >\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=\"w-full overflow-hidden\" style=\"direction: ltr\">\n              <ax-code-editor\n                [ngModel]=\"getBindingExpressionValue(prop)\"\n                (ngModelChange)=\"setBindingExpressionValue(prop, $event)\"\n                language=\"javascript\"\n                [lineNumbers]=\"true\"\n                class=\"w-full\"\n              >\n              </ax-code-editor>\n            </div>\n          } @else {\n            <ax-button\n              look=\"twotone\"\n              color=\"primary\"\n              size=\"sm\"\n              class=\"w-full\"\n              [text]=\"\n                '@general:widgets.triggers.open-editor' | translate | async\n              \"\n              (onClick)=\"openBindingEditor(prop)\"\n              [title]=\"\n                '@general:widgets.triggers.edit-binding-expression'\n                  | translate\n                  | async\n              \"\n            >\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\n            axp-widget-renderer\n            [node]=\"prop.schema.interface\"\n            [mode]=\"'edit'\"\n          >\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=\"flex flex-col\">\n        @if (tabs().length > 1) {\n          <div class=\"pb-2\">\n            <ax-tabs\n              look=\"default\"\n              (onActiveTabChanged)=\"handleTabChange($event)\"\n              [look]=\"'with-line'\"\n            >\n              @for (tab of tabs(); track $index) {\n                <ax-tab-item\n                  [text]=\"(tab.title | translate | async) ?? ''\"\n                  [key]=\"$index.toString()\"\n                  [active]=\"currentTabIndex() === $index\"\n                >\n                </ax-tab-item>\n              }\n            </ax-tabs>\n          </div>\n        }\n        <div class=\"flex-1 overflow-auto\">\n          <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n            @for (group of groups(); track $index) {\n              <ax-accordion-item\n                class=\"mb-0!\"\n                [caption]=\"(group.title | translate | async) ?? ''\"\n                [isCollapsed]=\"group.isCollapsed\"\n                (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n              >\n                <div class=\"flex flex-col\">\n                  @for (p of group.props; track $index) {\n                    @if (isPropertyVisible(p)) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          propertyRow;\n                          context: { prop: p, translateTitle: true }\n                        \"\n                      >\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=\"flex flex-col p-4 gap-4\">\n        @for (group of groups(); track $index) {\n          @for (p of group.props; track $index) {\n            @if (isPropertyVisible(p)) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  propertyRow;\n                  context: { prop: p, translateTitle: true }\n                \"\n              >\n              </ng-container>\n            }\n          }\n        }\n      </div>\n    }\n    <!-- #endregion -->\n  </axp-widgets-container>\n</ax-form>\n", styles: ["@layer properties;axp-property-viewer ax-accordion-item .ax-accordion-header{border-top-style:var(--tw-border-style);border-top-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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$5.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$5.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: 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$4.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.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: "22.0.8", ngImport: i0, type: AXPPropertyViewerComponent, decorators: [{
             type: Component,
@@ -7130,16 +7353,16 @@ class AXPItemConfiguratorComponent {
         ...(ngDevMode ? [{ debugName: "isConfigured" }] : /* istanbul ignore next */ []));
         this.visibleHeaderActions = computed(() => (this.headerActions() ?? []).filter((a) => a != null && a.visible !== false && !a.items?.length), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visibleHeaderActions" }] : /* istanbul ignore next */ []));
-        this.itemSelectBox = viewChild('itemSelectBox', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "itemSelectBox" }] : /* istanbul ignore next */ []));
+        this.itemLookup = viewChild(AXLookupComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemLookup" }] : /* istanbul ignore next */ []));
         effect(() => {
             if (!this.isEditMode()) {
                 return;
             }
             const scheduleFocus = () => {
                 setTimeout(() => {
-                    this.itemSelectBox()?.focus();
-                    this.itemSelectBox()?.open();
+                    this.itemLookup()?.focus();
+                    this.itemLookup()?.open();
                 }, 0);
             };
             scheduleFocus();
@@ -7237,7 +7460,7 @@ class AXPItemConfiguratorComponent {
         return action.disabled === true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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]=\"\n          ('@general:actions.select.title' | translate | async) ?? ''\n        \"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [itemTemplate]=\"itemTemplate\"\n        [itemHeight]=\"72\"\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\n          class=\"__item-header\"\n          [class.__editable]=\"!readonly()\"\n          (click)=\"enterEditMode()\"\n        >\n          <div>\n            @if (config.icon) {\n              <i [class]=\"config.icon\"></i>\n            }\n            <div>\n              <span>\n                {{ config.title | translate | async }}\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]=\"\n                  ('@general:actions.configure.title' | translate | async) ?? ''\n                \"\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 (\n              action of visibleHeaderActions();\n              track action.name ?? $index\n            ) {\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.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      </div>\n    } @else {\n      <div\n        class=\"__item-empty\"\n        [class.__editable]=\"!readonly()\"\n        (click)=\"enterEditMode()\"\n      >\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{\n            ('@general:widgets.widget-configurator.select-widget-type'\n              | translate\n              | async) ?? 'Select an item type'\n          }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n      @if (item.icon) {\n        <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n      }\n      <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n        <div class=\"text-sm font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n          <div class=\"text-xs text-neutral-600\">\n            {{ item.description | translate | async }}\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        {{ $safeNavigationMigration(item?.data?.text) | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@layer properties;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:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}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;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 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:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}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:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$4.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: "itemLookup", first: true, predicate: AXLookupComponent, 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-lookup\n        #itemLookup\n        mode=\"drop-down-list\"\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"availableItems()\"\n        [placeholder]=\"\n          ('@general:actions.select.title' | translate | async) ?? ''\n        \"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"true\"\n        [itemTemplate]=\"itemTemplate\"\n        [itemHeight]=\"72\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n    </div>\n  }\n\n  @if (!isEditMode()) {\n    @if (selectedItemId() && currentItemConfig(); as config) {\n      <div class=\"__item-info\">\n        <div\n          class=\"__item-header\"\n          [class.__editable]=\"!readonly()\"\n          (click)=\"enterEditMode()\"\n        >\n          <div>\n            @if (config.icon) {\n              <i [class]=\"config.icon\"></i>\n            }\n            <div>\n              <span>\n                {{ config.title | translate | async }}\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]=\"\n                  ('@general:actions.configure.title' | translate | async) ?? ''\n                \"\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 (\n              action of visibleHeaderActions();\n              track action.name ?? $index\n            ) {\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.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      </div>\n    } @else {\n      <div\n        class=\"__item-empty\"\n        [class.__editable]=\"!readonly()\"\n        (click)=\"enterEditMode()\"\n      >\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{\n            ('@general:widgets.widget-configurator.select-widget-type'\n              | translate\n              | async) ?? 'Select an item type'\n          }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n      @if (item.icon) {\n        <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n      }\n      <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n        <div class=\"text-sm font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n          <div class=\"text-xs text-neutral-600\">\n            {{ item.description | translate | async }}\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?.icon) {\n        <i [class]=\"item.icon\"></i>\n      }\n      <span>\n        {{ $safeNavigationMigration(item?.text) | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}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;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 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:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}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:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { 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: "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: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, decorators: [{
             type: Component,
@@ -7246,12 +7469,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         FormsModule,
                         AXFormModule,
                         AXButtonModule,
-                        AXSelectBoxModule,
+                        AXLookupComponent,
                         AXDecoratorModule,
                         AXTranslationModule,
-                        AXSearchBoxModule,
-                    ], 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]=\"\n          ('@general:actions.select.title' | translate | async) ?? ''\n        \"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [itemTemplate]=\"itemTemplate\"\n        [itemHeight]=\"72\"\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\n          class=\"__item-header\"\n          [class.__editable]=\"!readonly()\"\n          (click)=\"enterEditMode()\"\n        >\n          <div>\n            @if (config.icon) {\n              <i [class]=\"config.icon\"></i>\n            }\n            <div>\n              <span>\n                {{ config.title | translate | async }}\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]=\"\n                  ('@general:actions.configure.title' | translate | async) ?? ''\n                \"\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 (\n              action of visibleHeaderActions();\n              track action.name ?? $index\n            ) {\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.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      </div>\n    } @else {\n      <div\n        class=\"__item-empty\"\n        [class.__editable]=\"!readonly()\"\n        (click)=\"enterEditMode()\"\n      >\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{\n            ('@general:widgets.widget-configurator.select-widget-type'\n              | translate\n              | async) ?? 'Select an item type'\n          }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n      @if (item.icon) {\n        <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n      }\n      <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n        <div class=\"text-sm font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n          <div class=\"text-xs text-neutral-600\">\n            {{ item.description | translate | async }}\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        {{ $safeNavigationMigration(item?.data?.text) | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@layer properties;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:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}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;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 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:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}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:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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 }] }] } });
+                    ], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n    <div class=\"__item-selector\">\n      <ax-lookup\n        #itemLookup\n        mode=\"drop-down-list\"\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"availableItems()\"\n        [placeholder]=\"\n          ('@general:actions.select.title' | translate | async) ?? ''\n        \"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"true\"\n        [itemTemplate]=\"itemTemplate\"\n        [itemHeight]=\"72\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n    </div>\n  }\n\n  @if (!isEditMode()) {\n    @if (selectedItemId() && currentItemConfig(); as config) {\n      <div class=\"__item-info\">\n        <div\n          class=\"__item-header\"\n          [class.__editable]=\"!readonly()\"\n          (click)=\"enterEditMode()\"\n        >\n          <div>\n            @if (config.icon) {\n              <i [class]=\"config.icon\"></i>\n            }\n            <div>\n              <span>\n                {{ config.title | translate | async }}\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]=\"\n                  ('@general:actions.configure.title' | translate | async) ?? ''\n                \"\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 (\n              action of visibleHeaderActions();\n              track action.name ?? $index\n            ) {\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.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      </div>\n    } @else {\n      <div\n        class=\"__item-empty\"\n        [class.__editable]=\"!readonly()\"\n        (click)=\"enterEditMode()\"\n      >\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{\n            ('@general:widgets.widget-configurator.select-widget-type'\n              | translate\n              | async) ?? 'Select an item type'\n          }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n      @if (item.icon) {\n        <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n      }\n      <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n        <div class=\"text-sm font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n          <div class=\"text-xs text-neutral-600\">\n            {{ item.description | translate | async }}\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?.icon) {\n        <i [class]=\"item.icon\"></i>\n      }\n      <span>\n        {{ $safeNavigationMigration(item?.text) | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}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;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 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:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}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:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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 }] }], itemLookup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupComponent), { isSignal: true }] }] } });
 //#region ----   Helpers   ----
 function isPropertyDefinitionArray(value) {
     if (!Array.isArray(value) || value.length === 0) {
@@ -8192,7 +8414,7 @@ class AXPMenuCustomizerComponent {
         this.toastService.warning(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuCustomizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPMenuCustomizerComponent, isStandalone: true, selector: "axp-menu-customizer", inputs: { scopeKey: { classPropertyName: "scopeKey", publicName: "scopeKey", isSignal: true, isRequired: true, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, allowAddItems: { classPropertyName: "allowAddItems", publicName: "allowAddItems", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "axp-menu-customizer" }, viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- i18n path constants -->\n@let i18nBase = '@platform-management:menu-management';\n@let i18nEmptyStates = i18nBase + '.components.menu-list.empty-states';\n@let i18nActions = i18nBase + '.actions';\n\n<!-- Loading State -->\n@if (isLoading()) {\n  <axp-state-message\n    mode=\"loading\"\n    icon=\"fa-light fa-spinner-third fa-spin\"\n    [title]=\"(i18nEmptyStates + '.loading.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.loading.description' | translate | async)!\"\n  />\n}\n\n<!-- Error State -->\n@else if (hasError()) {\n  <axp-state-message\n    mode=\"error\"\n    icon=\"fa-light fa-circle-exclamation\"\n    [title]=\"(i18nEmptyStates + '.error.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.error.description' | translate | async)!\"\n  >\n    <ax-button\n      slot=\"actions\"\n      [text]=\"'@general:actions.retry.title' | translate | async\"\n      look=\"outline\"\n      color=\"primary\"\n      (onClick)=\"loadMenuItems()\"\n    >\n      <i class=\"fa-light fa-rotate-left\"></i>\n    </ax-button>\n  </axp-state-message>\n}\n\n<!-- Empty State -->\n@else if (showEmptyState()) {\n  <axp-state-message\n    mode=\"empty\"\n    icon=\"fa-light fa-bars\"\n    [title]=\"(i18nEmptyStates + '.no-data.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.no-data.description' | translate | async)!\"\n  >\n    @if (allowAddItems()) {\n      <ax-button\n        slot=\"actions\"\n        [text]=\"i18nActions + '.add-root.title' | translate | async\"\n        look=\"solid\"\n        color=\"primary\"\n        (onClick)=\"addRootMenuItem()\"\n      >\n        <i class=\"fa-light fa-plus\"></i>\n      </ax-button>\n    }\n  </axp-state-message>\n}\n\n<!-- Main Content -->\n@else if (showContent()) {\n  <!-- Toolbar -->\n  @if (showToolbar()) {\n    <div class=\"axp-menu-customizer__toolbar\">\n      @if (allowAddItems()) {\n        <ax-button\n          [text]=\"i18nActions + '.add-root.title' | translate | async\"\n          look=\"solid\"\n          color=\"primary\"\n          (onClick)=\"addRootMenuItem()\"\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-plus\"></i>\n          </ax-prefix>\n        </ax-button>\n      }\n\n      <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n      <!-- \n      <ax-button\n        [text]=\"i18nActions + '.collapse.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"collapseAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-minus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"i18nActions + '.expand.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"expandAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-plus-square\"></i>\n        </ax-prefix>\n      </ax-button> -->\n\n      <ax-button\n        [text]=\"i18nActions + '.reset.title' | translate | async\"\n        look=\"outline\"\n        color=\"danger\"\n        (onClick)=\"resetCustomizations()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-rotate-left\"></i>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <!-- Menu Tree -->\n  <div class=\"axp-menu-customizer__container\">\n    <div class=\"axp-menu-customizer__tree\">\n      <ax-tree-view\n        [(datasource)]=\"treeNodes\"\n        look=\"default\"\n        [nodeTemplate]=\"itemTemplate\"\n        selectMode=\"none\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        [dragBehavior]=\"dragBehavior()\"\n        [dragArea]=\"dragArea()\"\n        (onBeforeDrop)=\"handleBeforeDrop($event)\"\n        (onOrderChange)=\"handleOrderChange($event)\"\n        (onMoveChange)=\"handleMoveChange($event)\"\n      />\n    </div>\n  </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n  @let nodeData = node['data'];\n  @let item = nodeData.menuItem;\n  @let metadata = nodeData.metadata;\n  @let isGroup = item.type === 'group';\n  @let isBreak = item.type === 'break';\n  @let isMenu = item.type === 'menu' || !item.type;\n  @let canAddChild = !item.path && isMenu && allowAddItems();\n  @let canToggleVisibility = item.name && metadata.isBuiltIn;\n  @let canDelete = item.name && metadata.isCustom;\n  @let i18nStates = '@platform-management:menu-management.states';\n\n  <div\n    class=\"axp-menu-customizer__item\"\n    [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n    [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n    [class.axp-menu-customizer__item--group]=\"isGroup\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && !isGroup) {\n      <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Content based on item type -->\n    @if (isGroup) {\n      <span class=\"axp-menu-customizer__item-group\">\n        <i class=\"fa-light fa-layer-group\"></i>\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (isBreak) {\n      <span class=\"axp-menu-customizer__item-divider\">\n        <i class=\"fa-light fa-minus\"></i>\n        {{ i18nStates + '.divider' | translate | async }}\n      </span>\n    } @else if (item.text) {\n      <span class=\"axp-menu-customizer__item-text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <span class=\"axp-menu-customizer__item-path\">\n        <i class=\"fa-light fa-link\"></i>\n        {{ item.path }}\n      </span>\n    }\n\n    <!-- Menu Name/Key -->\n    @if (item.name) {\n      <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n    }\n\n    <!-- Status Badges -->\n    @if (metadata.isHidden) {\n      <ax-badge [text]=\"(i18nStates + '.hidden' | translate | async)!\" color=\"danger\" />\n    } @else if (metadata.isCustom) {\n      <ax-badge [text]=\"(i18nStates + '.custom' | translate | async)!\" color=\"success\" />\n    } @else if (metadata.isBuiltIn) {\n      <ax-badge [text]=\"(i18nStates + '.built-in' | translate | async)!\" color=\"primary\" />\n    }\n\n    <!-- Actions Dropdown -->\n    <ax-button class=\"axp-menu-customizer__item-actions\" look=\"blank\" size=\"sm\" [iconOnly]=\"true\">\n      <ax-prefix>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-prefix>\n\n      <ax-dropdown-panel #panel>\n        <ax-button-item-list>\n          <!-- Edit (only for items with names) -->\n          @if (item.name) {\n            <ax-button-item\n              [text]=\"('@general:actions.edit.title' | translate | async)!\"\n              (onClick)=\"onAction('edit', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-edit\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Show/Hide (only for built-in items with names) -->\n          @if (canToggleVisibility) {\n            @if (metadata.isHidden) {\n              <ax-button-item\n                [text]=\"(i18nActions + '.show.title' | translate | async)!\"\n                (onClick)=\"onAction('show', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            } @else {\n              <ax-button-item\n                [text]=\"(i18nActions + '.hide.title' | translate | async)!\"\n                (onClick)=\"onAction('hide', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye-slash\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            }\n          }\n\n          <!-- Add Child -->\n          @if (canAddChild) {\n            <ax-button-item\n              [text]=\"(i18nActions + '.add-child.title' | translate | async)!\"\n              (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-plus\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Delete (only for custom items with names) -->\n          @if (canDelete) {\n            <ax-divider />\n            <ax-button-item\n              color=\"danger\"\n              [text]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"onAction('delete', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-trash\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Info message for items without names -->\n          @if (!item.name) {\n            <ax-divider />\n            <div class=\"p-2 text-xs text-neutral-500 italic\">\n              {{ i18nBase + '.messages.info.no-name' | translate | async }}\n            </div>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer .axp-menu-customizer__toolbar{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__toolbar-spacer{min-width:calc(var(--spacing, .25rem) * 4);flex:1}.axp-menu-customizer .axp-menu-customizer__container{display:flex;min-height:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:auto;padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__tree{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-menu-customizer .axp-menu-customizer__tree ax-tree-view{flex:1}.axp-menu-customizer .axp-menu-customizer__item{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-white, #fff);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.axp-menu-customizer .axp-menu-customizer__item:hover{background-color:var(--color-neutral-50, oklch(98.5% 0 none))}.axp-menu-customizer .axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:100%}.axp-menu-customizer .axp-menu-customizer__item--hidden{opacity:50%}.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer .axp-menu-customizer__item--custom{border-color:rgba(var(--ax-sys-color-primary-200));background-color:rgba(var(--ax-sys-color-primary-50))}@supports (color: color-mix(in lab,red,red)){.axp-menu-customizer .axp-menu-customizer__item--custom{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-50)) 30%,transparent)}}.axp-menu-customizer .axp-menu-customizer__item--group{background-color:var(--color-neutral-50, oklch(98.5% 0 none));padding-block:calc(var(--spacing, .25rem) * 3)}.axp-menu-customizer .axp-menu-customizer__item-icon{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-primary-600))}.axp-menu-customizer .axp-menu-customizer__item-text{min-width:0px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-menu-customizer .axp-menu-customizer__item-group{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--color-neutral-500, oklch(55.6% 0 none));text-transform:uppercase;font-style:italic}.axp-menu-customizer .axp-menu-customizer__item-group i{color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path{display:flex;min-width:0px;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}:is(.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path) i{flex-shrink:0;color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-name{display:inline-flex;max-width:calc(var(--spacing, .25rem) * 48);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;border-radius:.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-neutral-100, oklch(97% 0 none));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));-webkit-user-select:all;user-select:all}.axp-menu-customizer .axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:60%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPMenuCustomizerComponent, isStandalone: true, selector: "axp-menu-customizer", inputs: { scopeKey: { classPropertyName: "scopeKey", publicName: "scopeKey", isSignal: true, isRequired: true, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, allowAddItems: { classPropertyName: "allowAddItems", publicName: "allowAddItems", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "axp-menu-customizer" }, viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- i18n path constants -->\n@let i18nBase = '@platform-management:menu-management';\n@let i18nEmptyStates = i18nBase + '.components.menu-list.empty-states';\n@let i18nActions = i18nBase + '.actions';\n\n<!-- Loading State -->\n@if (isLoading()) {\n  <axp-state-message\n    mode=\"loading\"\n    icon=\"fa-light fa-spinner-third fa-spin\"\n    [title]=\"(i18nEmptyStates + '.loading.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.loading.description' | translate | async)!\"\n  />\n}\n\n<!-- Error State -->\n@else if (hasError()) {\n  <axp-state-message\n    mode=\"error\"\n    icon=\"fa-light fa-circle-exclamation\"\n    [title]=\"(i18nEmptyStates + '.error.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.error.description' | translate | async)!\"\n  >\n    <ax-button\n      slot=\"actions\"\n      [text]=\"'@general:actions.retry.title' | translate | async\"\n      look=\"outline\"\n      color=\"primary\"\n      (onClick)=\"loadMenuItems()\"\n    >\n      <i class=\"fa-light fa-rotate-left\"></i>\n    </ax-button>\n  </axp-state-message>\n}\n\n<!-- Empty State -->\n@else if (showEmptyState()) {\n  <axp-state-message\n    mode=\"empty\"\n    icon=\"fa-light fa-bars\"\n    [title]=\"(i18nEmptyStates + '.no-data.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.no-data.description' | translate | async)!\"\n  >\n    @if (allowAddItems()) {\n      <ax-button\n        slot=\"actions\"\n        [text]=\"i18nActions + '.add-root.title' | translate | async\"\n        look=\"solid\"\n        color=\"primary\"\n        (onClick)=\"addRootMenuItem()\"\n      >\n        <i class=\"fa-light fa-plus\"></i>\n      </ax-button>\n    }\n  </axp-state-message>\n}\n\n<!-- Main Content -->\n@else if (showContent()) {\n  <!-- Toolbar -->\n  @if (showToolbar()) {\n    <div class=\"axp-menu-customizer__toolbar\">\n      @if (allowAddItems()) {\n        <ax-button\n          [text]=\"i18nActions + '.add-root.title' | translate | async\"\n          look=\"solid\"\n          color=\"primary\"\n          (onClick)=\"addRootMenuItem()\"\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-plus\"></i>\n          </ax-prefix>\n        </ax-button>\n      }\n\n      <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n      <!-- \n      <ax-button\n        [text]=\"i18nActions + '.collapse.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"collapseAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-minus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"i18nActions + '.expand.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"expandAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-plus-square\"></i>\n        </ax-prefix>\n      </ax-button> -->\n\n      <ax-button\n        [text]=\"i18nActions + '.reset.title' | translate | async\"\n        look=\"outline\"\n        color=\"danger\"\n        (onClick)=\"resetCustomizations()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-rotate-left\"></i>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <!-- Menu Tree -->\n  <div class=\"axp-menu-customizer__container\">\n    <div class=\"axp-menu-customizer__tree\">\n      <ax-tree-view\n        [(datasource)]=\"treeNodes\"\n        look=\"default\"\n        [nodeTemplate]=\"itemTemplate\"\n        selectMode=\"none\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        [dragBehavior]=\"dragBehavior()\"\n        [dragArea]=\"dragArea()\"\n        (onBeforeDrop)=\"handleBeforeDrop($event)\"\n        (onOrderChange)=\"handleOrderChange($event)\"\n        (onMoveChange)=\"handleMoveChange($event)\"\n      />\n    </div>\n  </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n  @let nodeData = node['data'];\n  @let item = nodeData.menuItem;\n  @let metadata = nodeData.metadata;\n  @let isGroup = item.type === 'group';\n  @let isBreak = item.type === 'break';\n  @let isMenu = item.type === 'menu' || !item.type;\n  @let canAddChild = !item.path && isMenu && allowAddItems();\n  @let canToggleVisibility = item.name && metadata.isBuiltIn;\n  @let canDelete = item.name && metadata.isCustom;\n  @let i18nStates = '@platform-management:menu-management.states';\n\n  <div\n    class=\"axp-menu-customizer__item\"\n    [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n    [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n    [class.axp-menu-customizer__item--group]=\"isGroup\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && !isGroup) {\n      <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Content based on item type -->\n    @if (isGroup) {\n      <span class=\"axp-menu-customizer__item-group\">\n        <i class=\"fa-light fa-layer-group\"></i>\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (isBreak) {\n      <span class=\"axp-menu-customizer__item-divider\">\n        <i class=\"fa-light fa-minus\"></i>\n        {{ i18nStates + '.divider' | translate | async }}\n      </span>\n    } @else if (item.text) {\n      <span class=\"axp-menu-customizer__item-text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <span class=\"axp-menu-customizer__item-path\">\n        <i class=\"fa-light fa-link\"></i>\n        {{ item.path }}\n      </span>\n    }\n\n    <!-- Menu Name/Key -->\n    @if (item.name) {\n      <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n    }\n\n    <!-- Status Badges -->\n    @if (metadata.isHidden) {\n      <ax-badge [text]=\"(i18nStates + '.hidden' | translate | async)!\" color=\"danger\" />\n    } @else if (metadata.isCustom) {\n      <ax-badge [text]=\"(i18nStates + '.custom' | translate | async)!\" color=\"success\" />\n    } @else if (metadata.isBuiltIn) {\n      <ax-badge [text]=\"(i18nStates + '.built-in' | translate | async)!\" color=\"primary\" />\n    }\n\n    <!-- Actions Dropdown -->\n    <ax-button class=\"axp-menu-customizer__item-actions\" look=\"blank\" size=\"sm\" [iconOnly]=\"true\">\n      <ax-prefix>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-prefix>\n\n      <ax-dropdown-panel #panel>\n        <ax-button-item-list>\n          <!-- Edit (only for items with names) -->\n          @if (item.name) {\n            <ax-button-item\n              [text]=\"('@general:actions.edit.title' | translate | async)!\"\n              (onClick)=\"onAction('edit', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-edit\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Show/Hide (only for built-in items with names) -->\n          @if (canToggleVisibility) {\n            @if (metadata.isHidden) {\n              <ax-button-item\n                [text]=\"(i18nActions + '.show.title' | translate | async)!\"\n                (onClick)=\"onAction('show', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            } @else {\n              <ax-button-item\n                [text]=\"(i18nActions + '.hide.title' | translate | async)!\"\n                (onClick)=\"onAction('hide', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye-slash\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            }\n          }\n\n          <!-- Add Child -->\n          @if (canAddChild) {\n            <ax-button-item\n              [text]=\"(i18nActions + '.add-child.title' | translate | async)!\"\n              (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-plus\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Delete (only for custom items with names) -->\n          @if (canDelete) {\n            <ax-divider />\n            <ax-button-item\n              color=\"danger\"\n              [text]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"onAction('delete', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-trash\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Info message for items without names -->\n          @if (!item.name) {\n            <ax-divider />\n            <div class=\"p-2 text-xs text-neutral-500 italic\">\n              {{ i18nBase + '.messages.info.no-name' | translate | async }}\n            </div>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer .axp-menu-customizer__toolbar{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__toolbar-spacer{min-width:calc(var(--spacing, .25rem) * 4);flex:1}.axp-menu-customizer .axp-menu-customizer__container{display:flex;min-height:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:auto;padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__tree{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-menu-customizer .axp-menu-customizer__tree ax-tree-view{flex:1}.axp-menu-customizer .axp-menu-customizer__item{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-white, #fff);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.axp-menu-customizer .axp-menu-customizer__item:hover{background-color:var(--color-neutral-50, oklch(98.5% 0 none))}.axp-menu-customizer .axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:100%}.axp-menu-customizer .axp-menu-customizer__item--hidden{opacity:50%}.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer .axp-menu-customizer__item--custom{border-color:rgba(var(--ax-sys-color-primary-200));background-color:rgba(var(--ax-sys-color-primary-50))}@supports (color: color-mix(in lab,red,red)){.axp-menu-customizer .axp-menu-customizer__item--custom{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-50)) 30%,transparent)}}.axp-menu-customizer .axp-menu-customizer__item--group{background-color:var(--color-neutral-50, oklch(98.5% 0 none));padding-block:calc(var(--spacing, .25rem) * 3)}.axp-menu-customizer .axp-menu-customizer__item-icon{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-primary-600))}.axp-menu-customizer .axp-menu-customizer__item-text{min-width:0px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-menu-customizer .axp-menu-customizer__item-group{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--color-neutral-500, oklch(55.6% 0 none));text-transform:uppercase;font-style:italic}.axp-menu-customizer .axp-menu-customizer__item-group i{color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path{display:flex;min-width:0px;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}:is(.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path) i{flex-shrink:0;color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-name{display:inline-flex;max-width:calc(var(--spacing, .25rem) * 48);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;border-radius:.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-neutral-100, oklch(97% 0 none));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));-webkit-user-select:all;user-select:all}.axp-menu-customizer .axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:60%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuCustomizerComponent, decorators: [{
             type: Component,
@@ -8854,7 +9076,7 @@ class AXPResourceAppointmentComponent {
         this.resourceAppointmentService.executeCommand(event.item.data?.command, providerName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPResourceAppointmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPResourceAppointmentComponent, isStandalone: true, selector: "axp-resource-appointment", inputs: { showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, providerName: { classPropertyName: "providerName", publicName: "providerName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AXPResourceAppointmentService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "schedulerRef", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-resource-appointment__container flex flex-col min-h-0 h-full\">\n  @if (isReady()) {\n    <!-- TODO: Add weekly view 'timeline-weekly' -->\n    <ax-scheduler\n      #scheduler\n      [views]=\"['timeline-day', 'timeline-month']\"\n      [dataSource]=\"schedulerAppointments()\"\n      [resources]=\"schedulerResources()\"\n      [startingDate]=\"currentDate()\"\n      [selectedView]=\"currentView()\"\n      [draggable]=\"false\"\n      (onRangeChanged)=\"handleRangeChanged($event)\"\n      class=\"axp-resource-appointment__scheduler bg-lightest dark:bg-darkest flex-1\"\n    ></ax-scheduler>\n\n    <ax-context-menu\n      #contextMenu\n      [closeOn]=\"'leave'\"\n      [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOpening($event)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    ></ax-context-menu>\n  } @else {\n    <div class=\"axp-resource-appointment__loading flex items-center justify-center w-full h-full\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;width:100%}:host .axp-resource-appointment__scheduler{--ax-comp-scheduler-width: 100%;height:100%;width:100%;min-height:400px}:host .axp-resource-appointment__loading{min-height:300px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i1$8.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "showUnassignedAppointments", "resources", "resourceTemplate", "firstDayOfWeek", "tooltipTemplate", "dataSource", "holidays", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }, { kind: "ngmodule", type: AXButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPResourceAppointmentComponent, isStandalone: true, selector: "axp-resource-appointment", inputs: { showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, providerName: { classPropertyName: "providerName", publicName: "providerName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AXPResourceAppointmentService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "schedulerRef", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-resource-appointment__container flex flex-col min-h-0 h-full\">\n  @if (isReady()) {\n    <!-- TODO: Add weekly view 'timeline-weekly' -->\n    <ax-scheduler\n      #scheduler\n      [views]=\"['timeline-day', 'timeline-month']\"\n      [dataSource]=\"schedulerAppointments()\"\n      [resources]=\"schedulerResources()\"\n      [startingDate]=\"currentDate()\"\n      [selectedView]=\"currentView()\"\n      [draggable]=\"false\"\n      (onRangeChanged)=\"handleRangeChanged($event)\"\n      class=\"axp-resource-appointment__scheduler bg-lightest dark:bg-darkest flex-1\"\n    ></ax-scheduler>\n\n    <ax-context-menu\n      #contextMenu\n      [closeOn]=\"'leave'\"\n      [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOpening($event)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    ></ax-context-menu>\n  } @else {\n    <div class=\"axp-resource-appointment__loading flex items-center justify-center w-full h-full\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;width:100%}:host .axp-resource-appointment__scheduler{--ax-comp-scheduler-width: 100%;height:100%;width:100%;min-height:400px}:host .axp-resource-appointment__loading{min-height:300px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i1$7.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "showUnassignedAppointments", "resources", "resourceTemplate", "firstDayOfWeek", "tooltipTemplate", "dataSource", "holidays", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }, { kind: "ngmodule", type: AXButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPResourceAppointmentComponent, decorators: [{
             type: Component,
@@ -9935,7 +10157,7 @@ class AXPSpreadsheetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpreadsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSpreadsheetComponent, isStandalone: true, selector: "axp-spreadsheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowMode: { classPropertyName: "rowMode", publicName: "rowMode", isSignal: true, isRequired: false, transformFunction: null }, rowsInput: { classPropertyName: "rowsInput", publicName: "rowsInput", isSignal: true, isRequired: false, transformFunction: null }, rowsModel: { classPropertyName: "rowsModel", publicName: "rowsModel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyCellPlaceholder: { classPropertyName: "emptyCellPlaceholder", publicName: "emptyCellPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, rowTitlePath: { classPropertyName: "rowTitlePath", publicName: "rowTitlePath", isSignal: true, isRequired: false, transformFunction: null }, rowDescriptionPath: { classPropertyName: "rowDescriptionPath", publicName: "rowDescriptionPath", isSignal: true, isRequired: false, transformFunction: null }, allowAddRows: { classPropertyName: "allowAddRows", publicName: "allowAddRows", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveRows: { classPropertyName: "allowRemoveRows", publicName: "allowRemoveRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", spreadsheetChange: "spreadsheetChange" }, host: { classAttribute: "axp-spreadsheet" }, ngImport: i0, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n  @if (isColumnsEmpty()) {\n    <!-- Empty State: Columns are empty (regardless of rows) -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty-columns.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{\n          '@general:state-message.empty-columns.description' | translate | async\n        }}\n      </div>\n    </div>\n  } @else if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{ '@general:state-message.empty.description' | translate | async }}\n      </div>\n    </div>\n  } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n      <table class=\"__table\">\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th class=\"__corner-cell\">\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"'Add Row'\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of columns(); track column.name) {\n              <th class=\"__column-header\" [style.width]=\"column.width\">\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Empty State Row -->\n        <tbody class=\"__tbody\">\n          <tr class=\"__row __row--empty\">\n            <td class=\"__row-header\" [attr.colspan]=\"columns().length + 1\">\n              <div class=\"__empty-state-inline\">\n                <div class=\"__empty-icon\">\n                  <i class=\"fa-light fa-list\"></i>\n                </div>\n                <div class=\"__empty-title\">\n                  {{\n                    '@general:state-message.empty-rows.title'\n                      | translate\n                      | async\n                  }}\n                </div>\n                <div class=\"__empty-description\">\n                  {{\n                    '@general:state-message.empty-rows.description'\n                      | translate\n                      | async\n                  }}\n                </div>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n      <table class=\"__table\">\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th class=\"__corner-cell\">\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"'Add Row'\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of columns(); track column.name) {\n              <th class=\"__column-header\" [style.width]=\"column.width\">\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Body Rows -->\n        <tbody class=\"__tbody\">\n          <axp-widgets-container\n            [context]=\"spreadsheetContext()\"\n            (onContextChanged)=\"handleSpreadsheetContextChange($event)\"\n          >\n            @for (\n              rowItem of rowsWithIds();\n              track rowItem.rowId;\n              let rowIndex = $index\n            ) {\n              <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                <!-- Row header -->\n                <td class=\"__row-header\">\n                  <div class=\"__header-content\">\n                    @if (rowTitlePath()) {\n                      <div class=\"__header-title\">\n                        {{ getRowTitle(rowItem.row, rowTitlePath()!) }}\n                      </div>\n                    }\n                    @if (rowDescriptionPath()) {\n                      <div class=\"__header-description\">\n                        {{\n                          getRowDescription(rowItem.row, rowDescriptionPath()!)\n                        }}\n                      </div>\n                    }\n                  </div>\n                  @if (allowRemoveRows() && !readonly()) {\n                    <div\n                      class=\"__header-actions ax-sm opacity-30 hover:opacity-100\"\n                    >\n                      <ax-button\n                        look=\"blank\"\n                        color=\"danger\"\n                        (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\"\n                        [attr.aria-label]=\"'Remove Row'\"\n                      >\n                        <ax-icon icon=\"far fa-times\"></ax-icon>\n                      </ax-button>\n                    </div>\n                  }\n                </td>\n\n                <!-- Spreadsheet cells -->\n                @for (column of columns(); track column.name) {\n                  <td\n                    class=\"__cell\"\n                    [class.__cell--editing]=\"\n                      isCellEditing(rowItem.rowId, column.name)\n                    \"\n                    [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                    (click)=\"\n                      $event.stopPropagation();\n                      handleCellClick(rowItem.rowId, column.name, $event)\n                    \"\n                  >\n                    @if (\n                      isCellEditing(rowItem.rowId, column.name) &&\n                      !isColumnReadonly(column)\n                    ) {\n                      <!-- Edit mode: Show widget in edit mode -->\n                      <div\n                        class=\"__cell-editor\"\n                        (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                        tabindex=\"-1\"\n                      >\n                        <ng-container\n                          axp-widget-renderer\n                          [node]=\"getCellWidgetNode(column, rowIndex)\"\n                          [mode]=\"'edit'\"\n                        ></ng-container>\n                      </div>\n                      <!-- Floating toolbar for commit/cancel -->\n                      <div\n                        class=\"__cell-toolbar ax-sm\"\n                        (click)=\"$event.stopPropagation()\"\n                        (mousedown)=\"\n                          $event.preventDefault(); $event.stopPropagation()\n                        \"\n                        (mouseup)=\"$event.stopPropagation()\"\n                        (focusin)=\"$event.stopPropagation()\"\n                      >\n                        <ax-button\n                          look=\"blank\"\n                          color=\"success\"\n                          (onClick)=\"commitCellEdit()\"\n                          [attr.aria-label]=\"'Commit'\"\n                        >\n                          <ax-icon icon=\"far fa-check\"></ax-icon>\n                        </ax-button>\n                        <ax-button\n                          look=\"blank\"\n                          color=\"danger\"\n                          (onClick)=\"cancelCellEdit()\"\n                          [attr.aria-label]=\"'Cancel'\"\n                        >\n                          <ax-icon icon=\"far fa-times\"></ax-icon>\n                        </ax-button>\n                      </div>\n                    } @else {\n                      <!-- View mode: Show widget in view mode or placeholder -->\n                      <div class=\"__cell-value\">\n                        @if (\n                          getCellValue(rowIndex, column.name) !== null &&\n                          getCellValue(rowIndex, column.name) !== undefined\n                        ) {\n                          <ng-container\n                            axp-widget-renderer\n                            [node]=\"getCellWidgetNode(column, rowIndex)\"\n                            [mode]=\"'view'\"\n                          ></ng-container>\n                        } @else {\n                          <span class=\"__cell-placeholder\">{{\n                            emptyCellPlaceholder()\n                          }}</span>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </axp-widgets-container>\n        </tbody>\n      </table>\n    </div>\n  }\n</div>\n<!--\n  #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state .__empty-description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);overflow-wrap:break-word;white-space:normal;opacity:75%}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:color-mix(in srgb,#000 5%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell:before{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:100%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface));padding:1px}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:-35px;display:flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:var(--spacing, .25rem);white-space:nowrap;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));overflow-wrap:break-word}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{display:flex;width:100%;align-items:center;justify-content:center}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-duration: initial;--tw-ease: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { 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: "22.0.8", type: AXPSpreadsheetComponent, isStandalone: true, selector: "axp-spreadsheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowMode: { classPropertyName: "rowMode", publicName: "rowMode", isSignal: true, isRequired: false, transformFunction: null }, rowsInput: { classPropertyName: "rowsInput", publicName: "rowsInput", isSignal: true, isRequired: false, transformFunction: null }, rowsModel: { classPropertyName: "rowsModel", publicName: "rowsModel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyCellPlaceholder: { classPropertyName: "emptyCellPlaceholder", publicName: "emptyCellPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, rowTitlePath: { classPropertyName: "rowTitlePath", publicName: "rowTitlePath", isSignal: true, isRequired: false, transformFunction: null }, rowDescriptionPath: { classPropertyName: "rowDescriptionPath", publicName: "rowDescriptionPath", isSignal: true, isRequired: false, transformFunction: null }, allowAddRows: { classPropertyName: "allowAddRows", publicName: "allowAddRows", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveRows: { classPropertyName: "allowRemoveRows", publicName: "allowRemoveRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", spreadsheetChange: "spreadsheetChange" }, host: { classAttribute: "axp-spreadsheet" }, ngImport: i0, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n  @if (isColumnsEmpty()) {\n    <!-- Empty State: Columns are empty (regardless of rows) -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty-columns.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{\n          '@general:state-message.empty-columns.description' | translate | async\n        }}\n      </div>\n    </div>\n  } @else if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{ '@general:state-message.empty.description' | translate | async }}\n      </div>\n    </div>\n  } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n      <table class=\"__table\">\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th class=\"__corner-cell\">\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"'Add Row'\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of columns(); track column.name) {\n              <th class=\"__column-header\" [style.width]=\"column.width\">\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Empty State Row -->\n        <tbody class=\"__tbody\">\n          <tr class=\"__row __row--empty\">\n            <td class=\"__row-header\" [attr.colspan]=\"columns().length + 1\">\n              <div class=\"__empty-state-inline\">\n                <div class=\"__empty-icon\">\n                  <i class=\"fa-light fa-list\"></i>\n                </div>\n                <div class=\"__empty-title\">\n                  {{\n                    '@general:state-message.empty-rows.title'\n                      | translate\n                      | async\n                  }}\n                </div>\n                <div class=\"__empty-description\">\n                  {{\n                    '@general:state-message.empty-rows.description'\n                      | translate\n                      | async\n                  }}\n                </div>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n      <table class=\"__table\">\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th class=\"__corner-cell\">\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"'Add Row'\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of columns(); track column.name) {\n              <th class=\"__column-header\" [style.width]=\"column.width\">\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Body Rows -->\n        <tbody class=\"__tbody\">\n          <axp-widgets-container\n            [context]=\"spreadsheetContext()\"\n            (onContextChanged)=\"handleSpreadsheetContextChange($event)\"\n          >\n            @for (\n              rowItem of rowsWithIds();\n              track rowItem.rowId;\n              let rowIndex = $index\n            ) {\n              <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                <!-- Row header -->\n                <td class=\"__row-header\">\n                  <div class=\"__header-content\">\n                    @if (rowTitlePath()) {\n                      <div class=\"__header-title\">\n                        {{ getRowTitle(rowItem.row, rowTitlePath()!) }}\n                      </div>\n                    }\n                    @if (rowDescriptionPath()) {\n                      <div class=\"__header-description\">\n                        {{\n                          getRowDescription(rowItem.row, rowDescriptionPath()!)\n                        }}\n                      </div>\n                    }\n                  </div>\n                  @if (allowRemoveRows() && !readonly()) {\n                    <div\n                      class=\"__header-actions ax-sm opacity-30 hover:opacity-100\"\n                    >\n                      <ax-button\n                        look=\"blank\"\n                        color=\"danger\"\n                        (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\"\n                        [attr.aria-label]=\"'Remove Row'\"\n                      >\n                        <ax-icon icon=\"far fa-times\"></ax-icon>\n                      </ax-button>\n                    </div>\n                  }\n                </td>\n\n                <!-- Spreadsheet cells -->\n                @for (column of columns(); track column.name) {\n                  <td\n                    class=\"__cell\"\n                    [class.__cell--editing]=\"\n                      isCellEditing(rowItem.rowId, column.name)\n                    \"\n                    [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                    (click)=\"\n                      $event.stopPropagation();\n                      handleCellClick(rowItem.rowId, column.name, $event)\n                    \"\n                  >\n                    @if (\n                      isCellEditing(rowItem.rowId, column.name) &&\n                      !isColumnReadonly(column)\n                    ) {\n                      <!-- Edit mode: Show widget in edit mode -->\n                      <div\n                        class=\"__cell-editor\"\n                        (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                        tabindex=\"-1\"\n                      >\n                        <ng-container\n                          axp-widget-renderer\n                          [node]=\"getCellWidgetNode(column, rowIndex)\"\n                          [mode]=\"'edit'\"\n                        ></ng-container>\n                      </div>\n                      <!-- Floating toolbar for commit/cancel -->\n                      <div\n                        class=\"__cell-toolbar ax-sm\"\n                        (click)=\"$event.stopPropagation()\"\n                        (mousedown)=\"\n                          $event.preventDefault(); $event.stopPropagation()\n                        \"\n                        (mouseup)=\"$event.stopPropagation()\"\n                        (focusin)=\"$event.stopPropagation()\"\n                      >\n                        <ax-button\n                          look=\"blank\"\n                          color=\"success\"\n                          (onClick)=\"commitCellEdit()\"\n                          [attr.aria-label]=\"'Commit'\"\n                        >\n                          <ax-icon icon=\"far fa-check\"></ax-icon>\n                        </ax-button>\n                        <ax-button\n                          look=\"blank\"\n                          color=\"danger\"\n                          (onClick)=\"cancelCellEdit()\"\n                          [attr.aria-label]=\"'Cancel'\"\n                        >\n                          <ax-icon icon=\"far fa-times\"></ax-icon>\n                        </ax-button>\n                      </div>\n                    } @else {\n                      <!-- View mode: Show widget in view mode or placeholder -->\n                      <div class=\"__cell-value\">\n                        @if (\n                          getCellValue(rowIndex, column.name) !== null &&\n                          getCellValue(rowIndex, column.name) !== undefined\n                        ) {\n                          <ng-container\n                            axp-widget-renderer\n                            [node]=\"getCellWidgetNode(column, rowIndex)\"\n                            [mode]=\"'view'\"\n                          ></ng-container>\n                        } @else {\n                          <span class=\"__cell-placeholder\">{{\n                            emptyCellPlaceholder()\n                          }}</span>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </axp-widgets-container>\n        </tbody>\n      </table>\n    </div>\n  }\n</div>\n<!--\n  #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state .__empty-description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);overflow-wrap:break-word;white-space:normal;opacity:75%}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:color-mix(in srgb,#000 5%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell:before{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:100%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface));padding:1px}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:-35px;display:flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:var(--spacing, .25rem);white-space:nowrap;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));overflow-wrap:break-word}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{display:flex;width:100%;align-items:center;justify-content:center}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-duration: initial;--tw-ease: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { 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: "22.0.8", ngImport: i0, type: AXPSpreadsheetComponent, decorators: [{
             type: Component,
@@ -11053,7 +11275,7 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
         </ax-suffix>
       </ax-footer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTemplateViewerComponent, decorators: [{
             type: Component,
@@ -11489,12 +11711,27 @@ class AXPUserAvatarComponent {
         effect((onCleanup) => {
             const id = String(this.userId() ?? '').trim();
             const showPresence = this.showPresence();
+            void this.displayName();
             void this.displayAvatar();
             if (!id) {
-                this.userInfo.set(null);
-                this.src.set('');
-                this.lastResolvedRef = null;
+                const fallbackName = this.displayName()?.trim() ?? '';
+                const fallbackAvatar = this.displayAvatar()?.trim();
                 this.presenceStatus.set(null);
+                if (!fallbackName && !fallbackAvatar) {
+                    this.userInfo.set(null);
+                    this.src.set('');
+                    this.lastResolvedRef = null;
+                    return;
+                }
+                const fallback = {
+                    id: '',
+                    status: 'offline',
+                    username: fallbackName,
+                    firstName: fallbackName,
+                    avatarUrl: fallbackAvatar,
+                };
+                this.userInfo.set(fallback);
+                void this.resolveAvatarSrc(fallback, '');
                 return;
             }
             const subscriptions = [
@@ -11612,16 +11849,20 @@ class AXPUserAvatarComponent {
         return info.username.trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, showPresence: { classPropertyName: "showPresence", publicName: "showPresence", isSignal: true, isRequired: false, transformFunction: null }, displayName: { classPropertyName: "displayName", publicName: "displayName", isSignal: true, isRequired: false, transformFunction: null }, displayAvatar: { classPropertyName: "displayAvatar", publicName: "displayAvatar", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<div\n  class=\"axp-user-avatar-wrap\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n>\n  <div\n    class=\"axp-user-avatar\"\n    [class.axp-user-avatar--has-image]=\"!!src()\"\n    [style.width.px]=\"size()\"\n    [style.height.px]=\"size()\"\n  >\n    @if (src()) {\n      <img\n        class=\"axp-user-avatar__image\"\n        [src]=\"src()\"\n        [attr.alt]=\"title()\"\n        [attr.title]=\"title()\"\n      />\n    } @else {\n      <axp-avatar [size]=\"size()\" [fullName]=\"title()\" />\n    }\n  </div>\n  <!-- ----- Live presence indicator from the platform presence store ----- -->\n  @if (showPresenceDot()) {\n    <span\n      class=\"axp-user-avatar__presence\"\n      [class.axp-user-avatar__presence--online]=\"isOnline()\"\n      [class.axp-user-avatar__presence--away]=\"isAway()\"\n      [class.axp-user-avatar__presence--busy]=\"isBusy()\"\n      [attr.aria-hidden]=\"true\"\n    ></span>\n  }\n</div>\n", styles: ["@layer properties;.axp-user-avatar-wrap{position:relative;display:inline-flex;flex-shrink:0}.axp-user-avatar{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:calc(infinity * 1px);line-height:0}.axp-user-avatar axp-avatar{display:inline-flex;align-items:center;justify-content:center}.axp-user-avatar .axp-user-avatar__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.axp-user-avatar--has-image{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.axp-user-avatar__presence{pointer-events:none;position:absolute;width:calc(var(--spacing, .25rem) * 2.5);height:calc(var(--spacing, .25rem) * 2.5);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;background-color:var(--color-neutral-400, oklch(70.8% 0 none));border-color:rgba(var(--ax-sys-color-border-lightest-surface),1);inset-block-end:0;inset-inline-end:0}.axp-user-avatar__presence--online{background-color:rgba(var(--ax-sys-color-success-surface))}.axp-user-avatar__presence--away{background-color:rgba(var(--ax-sys-color-warning-surface))}.axp-user-avatar__presence--busy{background-color:rgba(var(--ax-sys-color-danger-surface))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, showPresence: { classPropertyName: "showPresence", publicName: "showPresence", isSignal: true, isRequired: false, transformFunction: null }, displayName: { classPropertyName: "displayName", publicName: "displayName", isSignal: true, isRequired: false, transformFunction: null }, displayAvatar: { classPropertyName: "displayAvatar", publicName: "displayAvatar", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<div\n  class=\"axp-user-avatar-wrap\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n>\n  <div\n    class=\"axp-user-avatar\"\n    [class.axp-user-avatar--has-image]=\"!!src()\"\n    [style.width.px]=\"size()\"\n    [style.height.px]=\"size()\"\n  >\n    @if (src()) {\n      <img\n        class=\"axp-user-avatar__image\"\n        [src]=\"src()\"\n        [attr.alt]=\"title()\"\n      />\n    } @else {\n      <axp-avatar [size]=\"size()\" [fullName]=\"title()\" [showTitle]=\"false\" />\n    }\n  </div>\n  <!-- ----- Live presence indicator from the platform presence store ----- -->\n  @if (showPresenceDot()) {\n    <span\n      class=\"axp-user-avatar__presence\"\n      [class.axp-user-avatar__presence--online]=\"isOnline()\"\n      [class.axp-user-avatar__presence--away]=\"isAway()\"\n      [class.axp-user-avatar__presence--busy]=\"isBusy()\"\n      [attr.aria-hidden]=\"true\"\n    ></span>\n  }\n</div>\n", styles: ["@layer properties;.axp-user-avatar-wrap{position:relative;display:inline-flex;flex-shrink:0}.axp-user-avatar{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:calc(infinity * 1px);line-height:0}.axp-user-avatar axp-avatar{display:inline-flex;align-items:center;justify-content:center}.axp-user-avatar .axp-user-avatar__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.axp-user-avatar--has-image{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.axp-user-avatar__presence{pointer-events:none;position:absolute;width:calc(var(--spacing, .25rem) * 2.5);height:calc(var(--spacing, .25rem) * 2.5);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;background-color:var(--color-neutral-400, oklch(70.8% 0 none));border-color:rgba(var(--ax-sys-color-border-lightest-surface),1);inset-block-end:0;inset-inline-end:0}.axp-user-avatar__presence--online{background-color:rgba(var(--ax-sys-color-success-surface))}.axp-user-avatar__presence--away{background-color:rgba(var(--ax-sys-color-warning-surface))}.axp-user-avatar__presence--busy{background-color:rgba(var(--ax-sys-color-danger-surface))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "showTitle", "fallbackText", "placeholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-user-avatar', imports: [AXPAvatarComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [], template: "<div\n  class=\"axp-user-avatar-wrap\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n>\n  <div\n    class=\"axp-user-avatar\"\n    [class.axp-user-avatar--has-image]=\"!!src()\"\n    [style.width.px]=\"size()\"\n    [style.height.px]=\"size()\"\n  >\n    @if (src()) {\n      <img\n        class=\"axp-user-avatar__image\"\n        [src]=\"src()\"\n        [attr.alt]=\"title()\"\n        [attr.title]=\"title()\"\n      />\n    } @else {\n      <axp-avatar [size]=\"size()\" [fullName]=\"title()\" />\n    }\n  </div>\n  <!-- ----- Live presence indicator from the platform presence store ----- -->\n  @if (showPresenceDot()) {\n    <span\n      class=\"axp-user-avatar__presence\"\n      [class.axp-user-avatar__presence--online]=\"isOnline()\"\n      [class.axp-user-avatar__presence--away]=\"isAway()\"\n      [class.axp-user-avatar__presence--busy]=\"isBusy()\"\n      [attr.aria-hidden]=\"true\"\n    ></span>\n  }\n</div>\n", styles: ["@layer properties;.axp-user-avatar-wrap{position:relative;display:inline-flex;flex-shrink:0}.axp-user-avatar{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:calc(infinity * 1px);line-height:0}.axp-user-avatar axp-avatar{display:inline-flex;align-items:center;justify-content:center}.axp-user-avatar .axp-user-avatar__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.axp-user-avatar--has-image{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.axp-user-avatar__presence{pointer-events:none;position:absolute;width:calc(var(--spacing, .25rem) * 2.5);height:calc(var(--spacing, .25rem) * 2.5);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;background-color:var(--color-neutral-400, oklch(70.8% 0 none));border-color:rgba(var(--ax-sys-color-border-lightest-surface),1);inset-block-end:0;inset-inline-end:0}.axp-user-avatar__presence--online{background-color:rgba(var(--ax-sys-color-success-surface))}.axp-user-avatar__presence--away{background-color:rgba(var(--ax-sys-color-warning-surface))}.axp-user-avatar__presence--busy{background-color:rgba(var(--ax-sys-color-danger-surface))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'axp-user-avatar', imports: [AXPAvatarComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [], template: "<div\n  class=\"axp-user-avatar-wrap\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n>\n  <div\n    class=\"axp-user-avatar\"\n    [class.axp-user-avatar--has-image]=\"!!src()\"\n    [style.width.px]=\"size()\"\n    [style.height.px]=\"size()\"\n  >\n    @if (src()) {\n      <img\n        class=\"axp-user-avatar__image\"\n        [src]=\"src()\"\n        [attr.alt]=\"title()\"\n      />\n    } @else {\n      <axp-avatar [size]=\"size()\" [fullName]=\"title()\" [showTitle]=\"false\" />\n    }\n  </div>\n  <!-- ----- Live presence indicator from the platform presence store ----- -->\n  @if (showPresenceDot()) {\n    <span\n      class=\"axp-user-avatar__presence\"\n      [class.axp-user-avatar__presence--online]=\"isOnline()\"\n      [class.axp-user-avatar__presence--away]=\"isAway()\"\n      [class.axp-user-avatar__presence--busy]=\"isBusy()\"\n      [attr.aria-hidden]=\"true\"\n    ></span>\n  }\n</div>\n", styles: ["@layer properties;.axp-user-avatar-wrap{position:relative;display:inline-flex;flex-shrink:0}.axp-user-avatar{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:calc(infinity * 1px);line-height:0}.axp-user-avatar axp-avatar{display:inline-flex;align-items:center;justify-content:center}.axp-user-avatar .axp-user-avatar__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.axp-user-avatar--has-image{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.axp-user-avatar__presence{pointer-events:none;position:absolute;width:calc(var(--spacing, .25rem) * 2.5);height:calc(var(--spacing, .25rem) * 2.5);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;background-color:var(--color-neutral-400, oklch(70.8% 0 none));border-color:rgba(var(--ax-sys-color-border-lightest-surface),1);inset-block-end:0;inset-inline-end:0}.axp-user-avatar__presence--online{background-color:rgba(var(--ax-sys-color-success-surface))}.axp-user-avatar__presence--away{background-color:rgba(var(--ax-sys-color-warning-surface))}.axp-user-avatar__presence--busy{background-color:rgba(var(--ax-sys-color-danger-surface))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }], showPresence: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresence", required: false }] }], displayName: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayName", required: false }] }], displayAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayAvatar", required: false }] }] } });
 
 //#region ----- Hook keys -----
 /** Waterfall hook: modules append identity chips and CTAs for a user card. */
 const USER_CARD_ITEMS_HOOK = 'user-card.items';
+/** Hover must stay on the host this long before the overlay opens. */
+const USER_CARD_HOVER_OPEN_DELAY_MS = 400;
+/** Show badge/action skeletons only if extras are still loading after this delay. */
+const USER_CARD_ITEMS_SKELETON_DELAY_MS = 150;
 //#endregion
 //#region ----- Helpers -----
 /** Visible card CTAs (`visible === false` hides the item). */
@@ -11735,6 +11976,8 @@ class AXPUserCardComponent {
         ...(ngDevMode ? [{ debugName: "extraRows" }] : /* istanbul ignore next */ []));
         this.extraActions = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "extraActions" }] : /* istanbul ignore next */ []));
+        this.itemsLoading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemsLoading" }] : /* istanbul ignore next */ []));
         this.displayName = computed(() => this.resolveDisplayName(this.identity()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
         this.username = computed(() => this.identity()?.username?.trim() || '', /* @ts-ignore */
@@ -11808,18 +12051,25 @@ class AXPUserCardComponent {
         if (cached) {
             this.extraRows.set(cached.rows);
             this.extraActions.set(cached.actions);
+            this.itemsLoading.set(false);
             return;
         }
-        const payload = await this.hooks.runAsync(USER_CARD_ITEMS_HOOK, {
-            userId,
-            rows: [],
-            actions: [],
-        });
-        const rows = sortUserCardRows(payload.rows ?? []);
-        const actions = sortUserCardActions(visibleUserCardActions(payload.actions ?? []));
-        this.itemsCache.set(userId, { rows, actions });
-        this.extraRows.set(rows);
-        this.extraActions.set(actions);
+        this.itemsLoading.set(true);
+        try {
+            const payload = await this.hooks.runAsync(USER_CARD_ITEMS_HOOK, {
+                userId,
+                rows: [],
+                actions: [],
+            });
+            const rows = sortUserCardRows(payload.rows ?? []);
+            const actions = sortUserCardActions(visibleUserCardActions(payload.actions ?? []));
+            this.itemsCache.set(userId, { rows, actions });
+            this.extraRows.set(rows);
+            this.extraActions.set(actions);
+        }
+        finally {
+            this.itemsLoading.set(false);
+        }
     }
     async refreshTooltip(presence) {
         this.clearTooltipTimer();
@@ -11907,7 +12157,7 @@ class AXPUserCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPUserCardComponent, isStandalone: true, selector: "axp-user-card", inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-user-card lightest-surface dark:dark-surface\">\n  <!-- ----- Presence badge in the top-right of the card ----- -->\n  @if (showPresence()) {\n    <span\n      class=\"axp-user-card__presence\"\n      [axTooltip]=\"tooltipText()\"\n      [axTooltipDisabled]=\"tooltipDisabled()\"\n      axTooltipPlacement=\"bottom\"\n    >\n      <ax-badge\n        size=\"sm\"\n        look=\"twotone\"\n        [color]=\"presenceBadgeColor()\"\n        [text]=\"(presenceLabelKey() | translate | async) ?? ''\"\n      ></ax-badge>\n    </span>\n  }\n\n  <div class=\"axp-user-card__identity\">\n    <axp-user-avatar [size]=\"56\" [userId]=\"userId()\" [showPresence]=\"false\"></axp-user-avatar>\n    <div class=\"axp-user-card__names\">\n      <div class=\"axp-user-card__name\">{{ displayName() }}</div>\n      <!-- ----- Username when the identity cache has one ----- -->\n      @if (username()) {\n        <div class=\"axp-user-card__username\">@{{ username() }}</div>\n      }\n    </div>\n  </div>\n\n  <!-- ----- Contributed identity chips (position, business unit, \u2026) ----- -->\n  @if (extraRows().length > 0) {\n    <div class=\"axp-user-card__badges\">\n      @for (row of extraRows(); track row.id) {\n        <span\n          class=\"axp-user-card__badge\"\n          [axTooltip]=\"(row.label | translate | async) ?? ''\"\n          axTooltipPlacement=\"bottom\"\n        >\n          <ax-badge\n            size=\"sm\"\n            look=\"twotone\"\n            color=\"primary\"\n            [text]=\"(row.value | translate | async) ?? ''\"\n          ></ax-badge>\n        </span>\n      }\n    </div>\n  }\n\n  <!-- ----- Contributed CTAs: button, or dropdown when the action has nested items ----- -->\n  @if (extraActions().length > 0) {\n    <div class=\"axp-user-card__actions ax-xs\">\n      @for (action of extraActions(); track action.name || action.title) {\n        <ax-button\n          class=\"axp-user-card__action\"\n          look=\"outline\"\n          [text]=\"(actionTitle(action) | translate | async) ?? ''\"\n          [disabled]=\"action.disabled\"\n          [color]=\"action.color\"\n          (onClick)=\"onActionClick(action)\"\n        >\n          <!-- ----- Action icon when the contributor provided one ----- -->\n          @if (action.icon) {\n            <ax-prefix>\n              <ax-icon [icon]=\"action.icon\"></ax-icon>\n            </ax-prefix>\n          }\n          <!-- ----- Nested items turn the CTA into a dropdown ----- -->\n          @if (nestedActions(action).length > 0) {\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                @for (sub of nestedActions(action); track sub.name || sub.title) {\n                  <!-- ----- Visible nested action ----- -->\n                  @if (sub.visible != false) {\n                    <ax-button-item\n                      [text]=\"(actionTitle(sub) | translate | async) ?? ''\"\n                      [color]=\"sub.color\"\n                      [disabled]=\"sub.disabled\"\n                      (onClick)=\"onNestedActionClick(sub)\"\n                    >\n                      <!-- ----- Nested action icon ----- -->\n                      @if (sub.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"sub.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                    <!-- ----- Divider after a nested item marked as a break ----- -->\n                    @if (sub.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;.axp-user-card{position:relative;display:flex;max-width:20rem;min-width:16rem;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-user-card__presence{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 3);top:calc(var(--spacing, .25rem) * 3);z-index:10;display:inline-flex;flex-shrink:0}.axp-user-card__identity{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 16)}.axp-user-card__names{min-width:0px;flex:1}.axp-user-card__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-user-card__username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-user-card__badges{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 1.5);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__badge{max-width:100%}.axp-user-card__actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__action{min-width:0px}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { 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: AXDropdownModule }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i5$3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPUserCardComponent, isStandalone: true, selector: "axp-user-card", inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-user-card lightest-surface dark:dark-surface\">\n  <!-- ----- Presence badge in the top-right of the card ----- -->\n  @if (showPresence()) {\n    <span\n      class=\"axp-user-card__presence\"\n      [axTooltip]=\"tooltipText()\"\n      [axTooltipDisabled]=\"tooltipDisabled()\"\n      axTooltipPlacement=\"bottom\"\n    >\n      <ax-badge\n        size=\"sm\"\n        look=\"twotone\"\n        [color]=\"presenceBadgeColor()\"\n        [text]=\"(presenceLabelKey() | translate | async) ?? ''\"\n      ></ax-badge>\n    </span>\n  }\n\n  <div class=\"axp-user-card__identity\">\n    <axp-user-avatar [size]=\"56\" [userId]=\"userId()\" [showPresence]=\"false\"></axp-user-avatar>\n    <div class=\"axp-user-card__names\">\n      <div class=\"axp-user-card__name\">{{ displayName() }}</div>\n      <!-- ----- Username when the identity cache has one ----- -->\n      @if (username()) {\n        <div class=\"axp-user-card__username\">@{{ username() }}</div>\n      }\n    </div>\n  </div>\n\n  <!-- ----- Placeholder extras while contributed items are still loading ----- -->\n  @if (itemsLoading()) {\n    <div class=\"axp-user-card__badges\" aria-hidden=\"true\">\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge\"></ax-skeleton>\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge axp-user-card__skeleton-badge--wide\"></ax-skeleton>\n    </div>\n    <div class=\"axp-user-card__actions\" aria-hidden=\"true\">\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-action\"></ax-skeleton>\n    </div>\n  }\n\n  <!-- ----- Contributed identity chips (position, business unit, \u2026) ----- -->\n  @if (!itemsLoading() && extraRows().length > 0) {\n    <div class=\"axp-user-card__badges\">\n      @for (row of extraRows(); track row.id) {\n        <span\n          class=\"axp-user-card__badge\"\n          [axTooltip]=\"(row.label | translate | async) ?? ''\"\n          axTooltipPlacement=\"bottom\"\n        >\n          <ax-badge\n            size=\"sm\"\n            look=\"twotone\"\n            color=\"primary\"\n            [text]=\"(row.value | translate | async) ?? ''\"\n          ></ax-badge>\n        </span>\n      }\n    </div>\n  }\n\n  <!-- ----- Contributed CTAs: button, or dropdown when the action has nested items ----- -->\n  @if (!itemsLoading() && extraActions().length > 0) {\n    <div class=\"axp-user-card__actions\">\n      @for (action of extraActions(); track action.name || action.title) {\n        <ax-button\n          class=\"axp-user-card__action ax-xs\"\n          look=\"outline\"\n          [text]=\"(actionTitle(action) | translate | async) ?? ''\"\n          [disabled]=\"action.disabled\"\n          [color]=\"action.color\"\n          (onClick)=\"onActionClick(action)\"\n        >\n          <!-- ----- Action icon when the contributor provided one ----- -->\n          @if (action.icon) {\n            <ax-prefix>\n              <ax-icon [icon]=\"action.icon\"></ax-icon>\n            </ax-prefix>\n          }\n          <!-- ----- Nested items turn the CTA into a dropdown ----- -->\n          @if (nestedActions(action).length > 0) {\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                @for (sub of nestedActions(action); track sub.name || sub.title) {\n                  <!-- ----- Visible nested action ----- -->\n                  @if (sub.visible != false) {\n                    <ax-button-item\n                      [text]=\"(actionTitle(sub) | translate | async) ?? ''\"\n                      [color]=\"sub.color\"\n                      [disabled]=\"sub.disabled\"\n                      (onClick)=\"onNestedActionClick(sub)\"\n                    >\n                      <!-- ----- Nested action icon ----- -->\n                      @if (sub.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"sub.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                    <!-- ----- Divider after a nested item marked as a break ----- -->\n                    @if (sub.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;:host{display:block;min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card{position:relative;display:flex;width:100%;max-width:24rem;min-width:20rem;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-user-card-overlay,.axp-user-card-overlay.ax-overlay-container,.axp-user-card-overlay.ax-overlay-pane,.axp-user-card-overlay .ax-overlay-pane,.axp-user-card-overlay .overlay-pane{min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card-overlay--pending,.axp-user-card-overlay--pending.ax-overlay-container,.axp-user-card-overlay--pending.ax-overlay-pane,.axp-user-card-overlay--pending .ax-overlay-pane,.axp-user-card-overlay--pending .overlay-pane{visibility:hidden;pointer-events:none}.axp-user-card__presence{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 3);top:calc(var(--spacing, .25rem) * 3);z-index:10;display:inline-flex;flex-shrink:0}.axp-user-card__identity{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 16)}.axp-user-card__names{min-width:0px;flex:1}.axp-user-card__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-user-card__username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-user-card__badges{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 1.5);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__badge{max-width:100%}.axp-user-card__actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__action{min-width:0px}.axp-user-card__skeleton-badge{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 20);border-radius:calc(infinity * 1px)}.axp-user-card__skeleton-badge--wide{width:calc(var(--spacing, .25rem) * 36)}.axp-user-card__skeleton-action{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 24);border-radius:var(--radius-md, .375rem)}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { 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: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i6.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserCardComponent, decorators: [{
             type: Component,
@@ -11919,8 +12169,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXButtonModule,
                         AXDecoratorModule,
                         AXDropdownModule,
+                        AXSkeletonModule,
                         AXTooltipModule,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-user-card lightest-surface dark:dark-surface\">\n  <!-- ----- Presence badge in the top-right of the card ----- -->\n  @if (showPresence()) {\n    <span\n      class=\"axp-user-card__presence\"\n      [axTooltip]=\"tooltipText()\"\n      [axTooltipDisabled]=\"tooltipDisabled()\"\n      axTooltipPlacement=\"bottom\"\n    >\n      <ax-badge\n        size=\"sm\"\n        look=\"twotone\"\n        [color]=\"presenceBadgeColor()\"\n        [text]=\"(presenceLabelKey() | translate | async) ?? ''\"\n      ></ax-badge>\n    </span>\n  }\n\n  <div class=\"axp-user-card__identity\">\n    <axp-user-avatar [size]=\"56\" [userId]=\"userId()\" [showPresence]=\"false\"></axp-user-avatar>\n    <div class=\"axp-user-card__names\">\n      <div class=\"axp-user-card__name\">{{ displayName() }}</div>\n      <!-- ----- Username when the identity cache has one ----- -->\n      @if (username()) {\n        <div class=\"axp-user-card__username\">@{{ username() }}</div>\n      }\n    </div>\n  </div>\n\n  <!-- ----- Contributed identity chips (position, business unit, \u2026) ----- -->\n  @if (extraRows().length > 0) {\n    <div class=\"axp-user-card__badges\">\n      @for (row of extraRows(); track row.id) {\n        <span\n          class=\"axp-user-card__badge\"\n          [axTooltip]=\"(row.label | translate | async) ?? ''\"\n          axTooltipPlacement=\"bottom\"\n        >\n          <ax-badge\n            size=\"sm\"\n            look=\"twotone\"\n            color=\"primary\"\n            [text]=\"(row.value | translate | async) ?? ''\"\n          ></ax-badge>\n        </span>\n      }\n    </div>\n  }\n\n  <!-- ----- Contributed CTAs: button, or dropdown when the action has nested items ----- -->\n  @if (extraActions().length > 0) {\n    <div class=\"axp-user-card__actions ax-xs\">\n      @for (action of extraActions(); track action.name || action.title) {\n        <ax-button\n          class=\"axp-user-card__action\"\n          look=\"outline\"\n          [text]=\"(actionTitle(action) | translate | async) ?? ''\"\n          [disabled]=\"action.disabled\"\n          [color]=\"action.color\"\n          (onClick)=\"onActionClick(action)\"\n        >\n          <!-- ----- Action icon when the contributor provided one ----- -->\n          @if (action.icon) {\n            <ax-prefix>\n              <ax-icon [icon]=\"action.icon\"></ax-icon>\n            </ax-prefix>\n          }\n          <!-- ----- Nested items turn the CTA into a dropdown ----- -->\n          @if (nestedActions(action).length > 0) {\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                @for (sub of nestedActions(action); track sub.name || sub.title) {\n                  <!-- ----- Visible nested action ----- -->\n                  @if (sub.visible != false) {\n                    <ax-button-item\n                      [text]=\"(actionTitle(sub) | translate | async) ?? ''\"\n                      [color]=\"sub.color\"\n                      [disabled]=\"sub.disabled\"\n                      (onClick)=\"onNestedActionClick(sub)\"\n                    >\n                      <!-- ----- Nested action icon ----- -->\n                      @if (sub.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"sub.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                    <!-- ----- Divider after a nested item marked as a break ----- -->\n                    @if (sub.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;.axp-user-card{position:relative;display:flex;max-width:20rem;min-width:16rem;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-user-card__presence{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 3);top:calc(var(--spacing, .25rem) * 3);z-index:10;display:inline-flex;flex-shrink:0}.axp-user-card__identity{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 16)}.axp-user-card__names{min-width:0px;flex:1}.axp-user-card__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-user-card__username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-user-card__badges{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 1.5);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__badge{max-width:100%}.axp-user-card__actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__action{min-width:0px}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-user-card lightest-surface dark:dark-surface\">\n  <!-- ----- Presence badge in the top-right of the card ----- -->\n  @if (showPresence()) {\n    <span\n      class=\"axp-user-card__presence\"\n      [axTooltip]=\"tooltipText()\"\n      [axTooltipDisabled]=\"tooltipDisabled()\"\n      axTooltipPlacement=\"bottom\"\n    >\n      <ax-badge\n        size=\"sm\"\n        look=\"twotone\"\n        [color]=\"presenceBadgeColor()\"\n        [text]=\"(presenceLabelKey() | translate | async) ?? ''\"\n      ></ax-badge>\n    </span>\n  }\n\n  <div class=\"axp-user-card__identity\">\n    <axp-user-avatar [size]=\"56\" [userId]=\"userId()\" [showPresence]=\"false\"></axp-user-avatar>\n    <div class=\"axp-user-card__names\">\n      <div class=\"axp-user-card__name\">{{ displayName() }}</div>\n      <!-- ----- Username when the identity cache has one ----- -->\n      @if (username()) {\n        <div class=\"axp-user-card__username\">@{{ username() }}</div>\n      }\n    </div>\n  </div>\n\n  <!-- ----- Placeholder extras while contributed items are still loading ----- -->\n  @if (itemsLoading()) {\n    <div class=\"axp-user-card__badges\" aria-hidden=\"true\">\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge\"></ax-skeleton>\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge axp-user-card__skeleton-badge--wide\"></ax-skeleton>\n    </div>\n    <div class=\"axp-user-card__actions\" aria-hidden=\"true\">\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-action\"></ax-skeleton>\n    </div>\n  }\n\n  <!-- ----- Contributed identity chips (position, business unit, \u2026) ----- -->\n  @if (!itemsLoading() && extraRows().length > 0) {\n    <div class=\"axp-user-card__badges\">\n      @for (row of extraRows(); track row.id) {\n        <span\n          class=\"axp-user-card__badge\"\n          [axTooltip]=\"(row.label | translate | async) ?? ''\"\n          axTooltipPlacement=\"bottom\"\n        >\n          <ax-badge\n            size=\"sm\"\n            look=\"twotone\"\n            color=\"primary\"\n            [text]=\"(row.value | translate | async) ?? ''\"\n          ></ax-badge>\n        </span>\n      }\n    </div>\n  }\n\n  <!-- ----- Contributed CTAs: button, or dropdown when the action has nested items ----- -->\n  @if (!itemsLoading() && extraActions().length > 0) {\n    <div class=\"axp-user-card__actions\">\n      @for (action of extraActions(); track action.name || action.title) {\n        <ax-button\n          class=\"axp-user-card__action ax-xs\"\n          look=\"outline\"\n          [text]=\"(actionTitle(action) | translate | async) ?? ''\"\n          [disabled]=\"action.disabled\"\n          [color]=\"action.color\"\n          (onClick)=\"onActionClick(action)\"\n        >\n          <!-- ----- Action icon when the contributor provided one ----- -->\n          @if (action.icon) {\n            <ax-prefix>\n              <ax-icon [icon]=\"action.icon\"></ax-icon>\n            </ax-prefix>\n          }\n          <!-- ----- Nested items turn the CTA into a dropdown ----- -->\n          @if (nestedActions(action).length > 0) {\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                @for (sub of nestedActions(action); track sub.name || sub.title) {\n                  <!-- ----- Visible nested action ----- -->\n                  @if (sub.visible != false) {\n                    <ax-button-item\n                      [text]=\"(actionTitle(sub) | translate | async) ?? ''\"\n                      [color]=\"sub.color\"\n                      [disabled]=\"sub.disabled\"\n                      (onClick)=\"onNestedActionClick(sub)\"\n                    >\n                      <!-- ----- Nested action icon ----- -->\n                      @if (sub.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"sub.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                    <!-- ----- Divider after a nested item marked as a break ----- -->\n                    @if (sub.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;:host{display:block;min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card{position:relative;display:flex;width:100%;max-width:24rem;min-width:20rem;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-user-card-overlay,.axp-user-card-overlay.ax-overlay-container,.axp-user-card-overlay.ax-overlay-pane,.axp-user-card-overlay .ax-overlay-pane,.axp-user-card-overlay .overlay-pane{min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card-overlay--pending,.axp-user-card-overlay--pending.ax-overlay-container,.axp-user-card-overlay--pending.ax-overlay-pane,.axp-user-card-overlay--pending .ax-overlay-pane,.axp-user-card-overlay--pending .overlay-pane{visibility:hidden;pointer-events:none}.axp-user-card__presence{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 3);top:calc(var(--spacing, .25rem) * 3);z-index:10;display:inline-flex;flex-shrink:0}.axp-user-card__identity{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 16)}.axp-user-card__names{min-width:0px;flex:1}.axp-user-card__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-user-card__username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-user-card__badges{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 1.5);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__badge{max-width:100%}.axp-user-card__actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__action{min-width:0px}.axp-user-card__skeleton-badge{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 20);border-radius:calc(infinity * 1px)}.axp-user-card__skeleton-badge--wide{width:calc(var(--spacing, .25rem) * 36)}.axp-user-card__skeleton-action{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 24);border-radius:var(--radius-md, .375rem)}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: true }] }] } });
 
 //#region ----- User card overlay -----
@@ -11936,32 +12187,40 @@ class AXPUserCardService {
         //#region ----- Private Properties -----
         this.overlayRef = null;
         this.componentRef = null;
+        this.overlayElement = null;
         this.anchorElement = null;
         this.activeUserId = null;
+        this.dismissOnPointerLeave = false;
+        this.hideTimer = null;
         this.outsideClickHandler = null;
         this.keydownHandler = null;
+        this.overlayPointerEnterHandler = null;
+        this.overlayPointerLeaveHandler = null;
         this.routerSubscription = null;
     }
     //#endregion
     //#region ----- Public Methods -----
-    async show(target, userId) {
+    async show(target, userId, options) {
         const id = userId?.trim();
         const anchorElement = this.resolveAnchorElement(target);
         if (!id || !anchorElement) {
             return;
         }
+        this.cancelScheduledHide();
         if (this.overlayRef && this.activeUserId === id && this.anchorElement === anchorElement) {
+            this.dismissOnPointerLeave = options?.dismissOnPointerLeave === true;
             return;
         }
         this.hide();
-        const panelClasses = ['animate-fadeIn', 'animate-faster', 'axp-user-card-overlay'];
+        this.dismissOnPointerLeave = options?.dismissOnPointerLeave === true;
+        const panelClasses = ['animate-fadeIn', 'animate-faster', 'axp-user-card-overlay', 'axp-user-card-overlay--pending'];
         if (this.platform.isDark()) {
             panelClasses.push('ax-dark');
         }
         try {
             const ref = await this.overlayService.create(AXPUserCardComponent, {
                 centered: false,
-                width: 'fit-content',
+                width: '20rem',
                 actionSheetStyle: false,
                 panelClass: panelClasses,
                 backdrop: {
@@ -11985,16 +12244,27 @@ class AXPUserCardService {
             });
             this.overlayRef = ref;
             this.componentRef = ref.instance;
+            this.overlayElement = ref.overlayElement ?? null;
             this.componentRef.instance.hideHost = () => {
                 this.hide();
             };
             this.anchorElement = anchorElement;
             this.activeUserId = id;
             setTimeout(() => {
+                if (this.overlayRef !== ref) {
+                    return;
+                }
                 ref.updatePosition();
+                this.overlayElement = ref.overlayElement ?? this.overlayElement;
                 this.bindDismissHandlers(ref.overlayElement, anchorElement);
             }, 0);
-            await this.componentRef.instance.loadCard();
+            const loadPromise = this.componentRef.instance.loadCard();
+            await this.revealWhenReady(ref, loadPromise);
+            await loadPromise;
+            if (this.overlayRef !== ref) {
+                return;
+            }
+            ref.updatePosition();
         }
         catch (error) {
             console.error('[UserCard] Failed to open overlay:', error);
@@ -12002,11 +12272,28 @@ class AXPUserCardService {
         }
     }
     hide() {
+        this.cancelScheduledHide();
         this.removeDismissHandlers();
         if (this.overlayRef) {
             this.overlayRef.dispose();
         }
     }
+    scheduleHide(delayMs = 180) {
+        if (!this.dismissOnPointerLeave) {
+            return;
+        }
+        this.cancelScheduledHide();
+        this.hideTimer = setTimeout(() => {
+            this.hideTimer = null;
+            this.hide();
+        }, delayMs);
+    }
+    cancelScheduledHide() {
+        if (this.hideTimer) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
     isShowing(userId, anchor) {
         if (!this.overlayRef) {
             return false;
@@ -12021,6 +12308,30 @@ class AXPUserCardService {
     }
     //#endregion
     //#region ----- Utility Methods -----
+    async revealWhenReady(ref, loadPromise) {
+        await Promise.race([
+            loadPromise,
+            new Promise((resolve) => {
+                setTimeout(resolve, USER_CARD_ITEMS_SKELETON_DELAY_MS);
+            }),
+        ]);
+        if (this.overlayRef !== ref) {
+            return;
+        }
+        this.overlayElement = ref.overlayElement ?? this.overlayElement;
+        this.clearPendingOverlayClass(this.overlayElement);
+        ref.updatePosition();
+    }
+    clearPendingOverlayClass(root) {
+        let current = root;
+        for (let depth = 0; current && depth < 4; depth += 1) {
+            current.classList.remove('axp-user-card-overlay--pending');
+            current = current.parentElement;
+        }
+        root?.querySelectorAll('.axp-user-card-overlay--pending').forEach((node) => {
+            node.classList.remove('axp-user-card-overlay--pending');
+        });
+    }
     resolveAnchorElement(target) {
         if (target instanceof ElementRef) {
             return target.nativeElement;
@@ -12065,6 +12376,16 @@ class AXPUserCardService {
             this.hide();
         };
         this.document.addEventListener('mousedown', this.outsideClickHandler);
+        if (this.dismissOnPointerLeave && overlayElement) {
+            this.overlayPointerEnterHandler = () => {
+                this.cancelScheduledHide();
+            };
+            this.overlayPointerLeaveHandler = () => {
+                this.scheduleHide();
+            };
+            overlayElement.addEventListener('pointerenter', this.overlayPointerEnterHandler);
+            overlayElement.addEventListener('pointerleave', this.overlayPointerLeaveHandler);
+        }
         this.routerSubscription = this.router.events
             .pipe(filter((event) => event instanceof NavigationStart))
             .subscribe(() => {
@@ -12080,17 +12401,28 @@ class AXPUserCardService {
             this.document.removeEventListener('mousedown', this.outsideClickHandler);
             this.outsideClickHandler = null;
         }
+        if (this.overlayPointerEnterHandler) {
+            this.overlayElement?.removeEventListener('pointerenter', this.overlayPointerEnterHandler);
+            this.overlayPointerEnterHandler = null;
+        }
+        if (this.overlayPointerLeaveHandler) {
+            this.overlayElement?.removeEventListener('pointerleave', this.overlayPointerLeaveHandler);
+            this.overlayPointerLeaveHandler = null;
+        }
         if (this.routerSubscription) {
             this.routerSubscription.unsubscribe();
             this.routerSubscription = null;
         }
     }
     handleOverlayDisposed() {
+        this.cancelScheduledHide();
         this.removeDismissHandlers();
         this.overlayRef = null;
         this.componentRef = null;
+        this.overlayElement = null;
         this.anchorElement = null;
         this.activeUserId = null;
+        this.dismissOnPointerLeave = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserCardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserCardService, providedIn: 'root' }); }
@@ -12107,17 +12439,22 @@ class AXPUserCardDirective {
     constructor() {
         //#region ----- Services & Dependencies -----
         this.cardService = inject(AXPUserCardService);
+        this.deviceService = inject(AXPDeviceService);
         this.host = inject(ElementRef);
+        this.showTimer = null;
         //#endregion
         //#region ----- Inputs -----
         this.axpUserCard = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "axpUserCard" }] : /* istanbul ignore next */ []));
         this.axpUserCardDisabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "axpUserCardDisabled" }] : /* istanbul ignore next */ []));
+        this.axpUserCardTrigger = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axpUserCardTrigger" }] : /* istanbul ignore next */ []));
     }
     //#endregion
     //#region ----- Lifecycle -----
     ngOnDestroy() {
+        this.cancelScheduledShow();
         if (this.cardService.isShowing(this.resolvedUserId(), this.host.nativeElement)) {
             this.cardService.hide();
         }
@@ -12134,14 +12471,69 @@ class AXPUserCardDirective {
         }
         event.preventDefault();
         event.stopPropagation();
+        if (this.shouldUseHover(this.pointerTypeOf(event))) {
+            return;
+        }
         if (this.cardService.isShowing(userId, this.host.nativeElement)) {
             this.cardService.hide();
             return;
         }
         void this.cardService.show(this.host, userId);
     }
+    onPointerEnter(event) {
+        if (!this.shouldUseHover(event.pointerType) || !this.canOpen()) {
+            return;
+        }
+        this.cardService.cancelScheduledHide();
+        const userId = this.resolvedUserId();
+        if (this.cardService.isShowing(userId, this.host.nativeElement)) {
+            return;
+        }
+        this.cancelScheduledShow();
+        this.showTimer = setTimeout(() => {
+            this.showTimer = null;
+            if (!this.canOpen()) {
+                return;
+            }
+            void this.cardService.show(this.host, userId, { dismissOnPointerLeave: true });
+        }, USER_CARD_HOVER_OPEN_DELAY_MS);
+    }
+    onPointerLeave(event) {
+        if (!this.shouldUseHover(event.pointerType) || this.axpUserCardDisabled()) {
+            return;
+        }
+        this.cancelScheduledShow();
+        this.cardService.scheduleHide();
+    }
+    //#endregion
+    //#region ----- Private Helpers -----
+    canOpen() {
+        return !!this.resolvedUserId() && !this.axpUserCardDisabled();
+    }
+    shouldUseHover(pointerType) {
+        const trigger = this.axpUserCardTrigger();
+        if (trigger === 'hover') {
+            return true;
+        }
+        if (trigger === 'click') {
+            return false;
+        }
+        if (pointerType === 'touch') {
+            return false;
+        }
+        return this.deviceService.isDesktopDevice();
+    }
+    pointerTypeOf(event) {
+        return event instanceof PointerEvent ? event.pointerType : undefined;
+    }
+    cancelScheduledShow() {
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserCardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXPUserCardDirective, isStandalone: true, selector: "[axpUserCard]", inputs: { axpUserCard: { classPropertyName: "axpUserCard", publicName: "axpUserCard", isSignal: true, isRequired: false, transformFunction: null }, axpUserCardDisabled: { classPropertyName: "axpUserCardDisabled", publicName: "axpUserCardDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "style.cursor": "!axpUserCardDisabled() && resolvedUserId() ? \"pointer\" : null" }, classAttribute: "axp-user-card-host" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXPUserCardDirective, isStandalone: true, selector: "[axpUserCard]", inputs: { axpUserCard: { classPropertyName: "axpUserCard", publicName: "axpUserCard", isSignal: true, isRequired: false, transformFunction: null }, axpUserCardDisabled: { classPropertyName: "axpUserCardDisabled", publicName: "axpUserCardDisabled", isSignal: true, isRequired: false, transformFunction: null }, axpUserCardTrigger: { classPropertyName: "axpUserCardTrigger", publicName: "axpUserCardTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)" }, properties: { "style.cursor": "!axpUserCardDisabled() && resolvedUserId() ? \"pointer\" : null" }, classAttribute: "axp-user-card-host" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserCardDirective, decorators: [{
             type: Directive,
@@ -12152,9 +12544,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         class: 'axp-user-card-host',
                         '[style.cursor]': '!axpUserCardDisabled() && resolvedUserId() ? "pointer" : null',
                         '(click)': 'onClick($event)',
+                        '(pointerenter)': 'onPointerEnter($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
                     },
                 }]
-        }], propDecorators: { axpUserCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpUserCard", required: false }] }], axpUserCardDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpUserCardDisabled", required: false }] }] } });
+        }], propDecorators: { axpUserCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpUserCard", required: false }] }], axpUserCardDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpUserCardDisabled", required: false }] }], axpUserCardTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpUserCardTrigger", required: false }] }] } });
 
 //#region ---- Imports ----
 //#endregion
@@ -12941,5 +13335,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPFileChooserCompressImagesHook, AXPFileChooserDirective, AXPFileChooserHookKeys, AXPFileChooserService, AXPFileChooserZipFilesHook, AXPFileUploaderDirective, AXPFileUploaderHookKeys, AXPFileUploaderService, AXPFileViewerComponent, AXPFileViewerFallbackContentComponent, AXPFileViewerService, AXPImageEditorPopupComponent, AXPImageEditorService, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSignatureEditorService, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPTextCommandColumnComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPUserCardComponent, AXPUserCardDirective, AXPUserCardService, AXPVirtualKeypadComponent, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_FILE_CHOOSER_DEFAULT_ZIP_ARCHIVE_NAME, AXP_FILE_CHOOSER_HOOK_PROVIDERS, AXP_FILE_CHOOSER_OPTION_KEYS, AXP_FILE_CHOOSER_PROVIDERS, AXP_FILE_UPLOADER_PROVIDERS, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_SYSTEM_FILE_CHOOSER_PROVIDER, AXP_SYSTEM_FILE_UPLOADER_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, USER_CARD_ITEMS_HOOK, buildFileChooserOptions, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, compressImageFile, createZipArchive, fileListItemToFileViewerItem, fileMatchesAccept, filterFileProvidersByContext, filterFilesByAcceptAndMaxSize, formatAcceptForDisplay, formatMaxFileSizeForDisplay, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, isUnrestrictedFileAccept, mapFileListToViewerItems, normalizeFileViewerBoundValue, notifyFileAcceptRejections, preparePropertyForViewer, preparePropertyViewerTabs, provideFileChooserHooks, registerFieldDefinitions, resolveExcludedFileProviderKeys, resolveFileChooserAccept, resolveFileChooserExtension, resolveFileListItemUrl, resolveFileUploaderEmptyStateDescription, sortUserCardActions, sortUserCardRows, validateFileChooserItems, visibleUserCardActions, withValidationsOnEditorNode };
+export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorChooserComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPFileChooserCompressImagesHook, AXPFileChooserDirective, AXPFileChooserHookKeys, AXPFileChooserService, AXPFileChooserZipFilesHook, AXPFileUploaderDirective, AXPFileUploaderHookKeys, AXPFileUploaderService, AXPFileViewerComponent, AXPFileViewerFallbackContentComponent, AXPFileViewerService, AXPImageEditorPopupComponent, AXPImageEditorService, AXPInfiniteScrollDirective, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSignatureEditorService, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPTextCommandColumnComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPUserCardComponent, AXPUserCardDirective, AXPUserCardService, AXPVirtualKeypadComponent, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_FILE_CHOOSER_DEFAULT_ZIP_ARCHIVE_NAME, AXP_FILE_CHOOSER_HOOK_PROVIDERS, AXP_FILE_CHOOSER_OPTION_KEYS, AXP_FILE_CHOOSER_PROVIDERS, AXP_FILE_UPLOADER_PROVIDERS, AXP_INFINITE_SCROLL_DEFAULT_ROOT_MARGIN, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_PAGE_LAYOUT_ELEMENT_ID, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_SYSTEM_FILE_CHOOSER_PROVIDER, AXP_SYSTEM_FILE_UPLOADER_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, USER_CARD_HOVER_OPEN_DELAY_MS, USER_CARD_ITEMS_HOOK, USER_CARD_ITEMS_SKELETON_DELAY_MS, buildFileChooserOptions, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, compressImageFile, createZipArchive, fileListItemToFileViewerItem, fileMatchesAccept, filterFileProvidersByContext, filterFilesByAcceptAndMaxSize, formatAcceptForDisplay, formatMaxFileSizeForDisplay, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, isUnrestrictedFileAccept, mapFileListToViewerItems, mergeInfiniteScrollPage, normalizeFileViewerBoundValue, notifyFileAcceptRejections, observeInfiniteScroll, preparePropertyForViewer, preparePropertyViewerTabs, provideFileChooserHooks, registerFieldDefinitions, resolveExcludedFileProviderKeys, resolveFileChooserAccept, resolveFileChooserExtension, resolveFileListItemUrl, resolveFileUploaderEmptyStateDescription, resolveInfiniteScrollRoot, sortUserCardActions, sortUserCardRows, validateFileChooserItems, visibleUserCardActions, withValidationsOnEditorNode };
 //# sourceMappingURL=acorex-platform-framework-client-layout-components.mjs.map