@acorex-platform/framework-client 2.0.0-next.3 → 2.0.0-next.30

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

@@ -1,9 +1,9 @@
-import { AXPRegionalSetting, resolveActionLook, resolveToSurfaceClass, AXPWidgetsCatalog, createRandomUuid, omitFilterClauseIdentity, AXPPlatformScope, AXPFileStorageStatus, flattenQueryFilterUserGroups, hasQueryFilterGroupId, isCompleteFilterCondition, coerceFilterDisplayText, AXP_QUERY_QUICK_SEARCH_FIELD, wrapQueryFilterRoot, QUERY_FILTER_CHIP_EXPAND_MAX_CONDITIONS, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, isQueryFilterAllNode, resolveQueryFilterGroupId, createQueryFilterGroupId, resolveQueryFilterConditionContextField, createQueryFilterConditionId, QUERY_FILTER_CONDITION_KEY_INFIX, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsList, coerceUnknownToTrimmedString, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
+import { AXPRegionalSetting, resolveActionLook, resolveToSurfaceClass, AXPWidgetsCatalog, createRandomUuid, omitFilterClauseIdentity, coerceFilterDisplayText, AXPPlatformScope, AXPFileStorageStatus, flattenQueryFilterUserGroups, hasQueryFilterGroupId, isCompleteFilterCondition, AXP_QUERY_QUICK_SEARCH_FIELD, wrapQueryFilterRoot, QUERY_FILTER_CHIP_EXPAND_MAX_CONDITIONS, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, isQueryFilterAllNode, resolveQueryFilterGroupId, createQueryFilterGroupId, resolveQueryFilterConditionContextField, createQueryFilterConditionId, QUERY_FILTER_CONDITION_KEY_INFIX, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsList, coerceUnknownToTrimmedString, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
 import { AXLocaleService } from '@acorex/core/locale';
 import * as i1$2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i1$6 from '@acorex/cdk/common';
-import { AXCommonModule } from '@acorex/cdk/common';
+import { AXCommonModule, AXDataSource } 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';
@@ -14,12 +14,12 @@ import * as i4$3 from '@acorex/core/format';
 import { AXFormatService, AXFormatModule } from '@acorex/core/format';
 import { AXPLayoutRendererComponent, AXPDialogOpener, AXPLayoutBuilderService, resolveLayoutBuilderDialogResult } from '@acorex-platform/framework-client/layout/builder';
 import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, AsyncPipe, isPlatformBrowser, NgComponentOutlet, DOCUMENT } from '@angular/common';
+import { CommonModule, NgTemplateOutlet, AsyncPipe, isPlatformBrowser, DOCUMENT, NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, input, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, output, computed, linkedSignal, InjectionToken, Injector, Injectable, Directive, viewChild, contentChild, ElementRef, afterNextRender, model, EventEmitter, forwardRef, ViewChild, Output, Input, untracked, DestroyRef, PLATFORM_ID, createComponent, EnvironmentInjector, runInInjectionContext, ApplicationRef, makeEnvironmentProviders, viewChildren, ViewChildren, TemplateRef, contentChildren } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
-import { AXPSettingsService, AXPStateMessageComponent, AXPFileChooserSettings, normalizeStoredImageRef, extractFileExtension, AXPFileStorageService, AXPFileTypeProviderService, resolveFileTypeDisplay, AXPCommonSettings, coerceAXPSettingRawValueByKind, AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, resolveSearchableText, isStoredImageFileId, resolveStoredImageDisplayUrl } from '@acorex-platform/framework-client/common';
+import { AXPSettingsService, AXPStateMessageComponent, openSystemFileDialog, AXPFileChooserSettings, normalizeStoredImageRef, extractFileExtension, AXPFileStorageService, AXPFileTypeProviderService, resolveFileTypeDisplay, AXPCommonSettings, coerceAXPSettingRawValueByKind, AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, resolveSearchableText, isStoredImageFileId, resolveStoredImageDisplayUrl, AXPUserStatusFeatureService } 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';
@@ -65,8 +65,8 @@ import { AXPopupService } from '@acorex/components/popup';
 import { moveItemInArray as moveItemInArray$1, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
 import { normalizeEntityListUserStylingRules, AXP_ENTITY_LIST_RECORD_STYLING_TARGET, createEntityListStylingCondition, isEntityListRecordStylingTarget, resolveEntityListFilterQueryField, resolveEntityListFilterContextField, isCustomQueryView } from '@acorex-platform/framework-shared/entity';
 import { AXLookupComponent } from '@acorex/components/lookup';
-import { DomSanitizer } from '@angular/platform-browser';
 import { AXToastService } from '@acorex/components/toast';
+import { DomSanitizer } from '@angular/platform-browser';
 import { getFileExtension, AXFileService } from '@acorex/core/file';
 import { AXDialogService } from '@acorex/components/dialog';
 import { resolveFileViewerFileType, AXFileViewerContainerComponent, AXFileViewerService, AXFileViewerGalleryService } from '@acorex/components/file-viewer';
@@ -1490,7 +1490,7 @@ class AXPColorChooserComponent {
         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 }); }
+    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", "popoverAnchor"], 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,
@@ -1696,7 +1696,7 @@ class AXPColumnItemListComponent {
         </div>
       </div>
     </ax-popover>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColumnItemListComponent, decorators: [{
             type: Component,
@@ -3324,6 +3324,7 @@ class AXPConditionBuilderConditionComponent {
             operator: it?.operator?.type ?? 'equal',
             value: it?.value ?? undefined,
             isParametric: it?.isParametric ?? false,
+            displayText: coerceFilterDisplayText(it?.displayText),
         });
         this.updateFilterWidgetNode();
         this.updateContext();
@@ -3395,10 +3396,18 @@ class AXPConditionBuilderConditionComponent {
             const it = this.item();
             untracked(() => {
                 const prev = this.selectedField();
-                if (!it ||
-                    (it.field === prev?.field &&
-                        it.value === prev?.value &&
-                        (it.operator?.type ?? 'equal') === (prev?.operator ?? 'equal'))) {
+                if (!it) {
+                    return;
+                }
+                const displayText = coerceFilterDisplayText(it.displayText);
+                const sameLeaf = it.field === prev?.field &&
+                    sameStoredFilterValue(it.value, prev?.value) &&
+                    (it.operator?.type ?? 'equal') === (prev?.operator ?? 'equal');
+                if (sameLeaf && displayText === prev?.displayText) {
+                    return;
+                }
+                if (sameLeaf && prev) {
+                    this.selectedField.set({ ...prev, displayText });
                     return;
                 }
                 this.selectedField.set({
@@ -3407,6 +3416,7 @@ class AXPConditionBuilderConditionComponent {
                     operator: it.operator?.type ?? 'equal',
                     value: it.value ?? undefined,
                     isParametric: it?.isParametric ?? false,
+                    displayText,
                 });
                 this.updateFilterWidgetNode();
                 this.updateContext();
@@ -3476,6 +3486,7 @@ class AXPConditionBuilderConditionComponent {
             field: fieldId,
             operator: filterDef?.operator?.type ?? 'equal',
             value: undefined,
+            displayText: undefined,
             isParametric: prev?.isParametric ?? false,
         }));
         this.updateFilterWidgetNode();
@@ -3486,17 +3497,30 @@ class AXPConditionBuilderConditionComponent {
         }
     }
     onContextChange(event) {
-        if (event.state !== 'changed' || event.origin === 'system') {
+        if (event.state !== 'changed' || event.origin === 'system' || event.origin === 'hydrate') {
             return;
         }
-        const filterData = event.data?.filter;
-        if (!filterData)
+        const payload = readFilterWidgetPayload(event.data?.['filter']);
+        if (!payload) {
             return;
-        this.selectedField.update((prev) => ({
-            ...prev,
-            operator: filterData.operation?.type ?? prev?.operator ?? 'equal',
-            value: filterData.value,
-        }));
+        }
+        this.selectedField.update((prev) => {
+            const sameValue = sameStoredFilterValue(payload.value, prev?.value);
+            const displayText = payload.hasDisplayText
+                ? (payload.displayText ?? (sameValue ? prev?.displayText : undefined))
+                : sameValue
+                    ? prev?.displayText
+                    : undefined;
+            return {
+                ...prev,
+                id: prev?.id ?? '',
+                field: prev?.field ?? '',
+                operator: payload.operationType ?? prev?.operator ?? 'equal',
+                value: payload.value,
+                isParametric: prev?.isParametric ?? false,
+                displayText,
+            };
+        });
         this.updateContext();
         this.itemChange.emit(this.selectedField());
     }
@@ -3511,7 +3535,7 @@ 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 }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, operationsLook: { classPropertyName: "operationsLook", publicName: "operationsLook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\" [class.__condition-row--comfortable]=\"!compact()\">\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]=\"compact()\"\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 (filterHostKeys().length) {\n        <!-- ----- Operator and value for the selected field ----- -->\n        @for (hostKey of filterHostKeys(); track hostKey) {\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        }\n      }\n      <!-- ----- Prompt until a field is chosen ----- -->\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 axp-filter-operations.axp-filter-operations--select{min-width:9rem}.__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}.__condition-row.__condition-row--comfortable .__field-selector ax-lookup,.__condition-row.__condition-row--comfortable .__filter-placeholder{min-height:var(--ax-sys-size-base, 2.5rem)}.__condition-row.__condition-row--comfortable .__filter-placeholder{justify-content:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:0px}.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-text-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-number-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-date-time-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-lookup,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep .ax-editor-container{min-height:var(--ax-sys-size-base, 2.5rem)}@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", "highlightSearch", "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: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$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 }); }
+    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 }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, operationsLook: { classPropertyName: "operationsLook", publicName: "operationsLook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\" [class.__condition-row--comfortable]=\"!compact()\">\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]=\"compact()\"\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 (filterHostKeys().length) {\n        <!-- ----- Operator and value for the selected field ----- -->\n        @for (hostKey of filterHostKeys(); track hostKey) {\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        }\n      }\n      <!-- ----- Prompt until a field is chosen ----- -->\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 axp-filter-operations.axp-filter-operations--select{min-width:9rem}.__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}.__condition-row.__condition-row--comfortable .__field-selector ax-lookup,.__condition-row.__condition-row--comfortable .__filter-placeholder{min-height:var(--ax-sys-size-base, 2.5rem)}.__condition-row.__condition-row--comfortable .__filter-placeholder{justify-content:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:0px}.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-text-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-number-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-date-time-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-lookup,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep .ax-editor-container{min-height:var(--ax-sys-size-base, 2.5rem)}@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", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], 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: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$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,
@@ -3526,8 +3550,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXTranslationModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"__condition-row\" [class.__condition-row--comfortable]=\"!compact()\">\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]=\"compact()\"\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 (filterHostKeys().length) {\n        <!-- ----- Operator and value for the selected field ----- -->\n        @for (hostKey of filterHostKeys(); track hostKey) {\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        }\n      }\n      <!-- ----- Prompt until a field is chosen ----- -->\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 axp-filter-operations.axp-filter-operations--select{min-width:9rem}.__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}.__condition-row.__condition-row--comfortable .__field-selector ax-lookup,.__condition-row.__condition-row--comfortable .__filter-placeholder{min-height:var(--ax-sys-size-base, 2.5rem)}.__condition-row.__condition-row--comfortable .__filter-placeholder{justify-content:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:0px}.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-text-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-number-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-date-time-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-lookup,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep .ax-editor-container{min-height:var(--ax-sys-size-base, 2.5rem)}@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 }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], operationsLook: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationsLook", required: false }] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }] } });
-//#endregion
-//#region ----   Helpers   ----
+function readFilterWidgetPayload(raw) {
+    if (raw == null) {
+        return undefined;
+    }
+    if (typeof raw !== 'object' || Array.isArray(raw)) {
+        return { value: raw, hasDisplayText: false };
+    }
+    const record = raw;
+    if (!('value' in record) && !('operation' in record) && !('displayText' in record)) {
+        return { value: raw, hasDisplayText: false };
+    }
+    const operation = record['operation'];
+    const operationType = operation && typeof operation === 'object' && !Array.isArray(operation)
+        ? readPayloadText(operation['type'])
+        : undefined;
+    return {
+        value: record['value'],
+        operationType,
+        displayText: coerceFilterDisplayText(record['displayText']),
+        hasDisplayText: 'displayText' in record,
+    };
+}
+function readPayloadText(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    return trimmed || undefined;
+}
+function sameStoredFilterValue(left, right) {
+    if (Object.is(left, right)) {
+        return true;
+    }
+    if (left == null || right == null || typeof left !== 'object' || typeof right !== 'object') {
+        return false;
+    }
+    try {
+        return JSON.stringify(left) === JSON.stringify(right);
+    }
+    catch {
+        return false;
+    }
+}
 function readConditionFieldId(value) {
     if (typeof value === 'string') {
         const trimmed = value.trim();
@@ -3825,13 +3890,18 @@ class AXPConditionBuilderComponent {
         this.queryData.update((data) => {
             const updateFilters = (filters) => filters.map((f) => {
                 if (f.id === condition.id) {
-                    return {
+                    const next = {
                         ...f,
                         field: condition.field,
                         operator: { type: condition.operator },
                         value: condition.value,
                         isParametric: condition.isParametric,
+                        displayText: condition.displayText,
                     };
+                    if (!next.displayText) {
+                        delete next.displayText;
+                    }
+                    return next;
                 }
                 if (f.filters)
                     return { ...f, filters: updateFilters(f.filters) };
@@ -4066,7 +4136,7 @@ class AXPFileProviderMenuComponent {
         </ax-button-item-list>
       </div>
     </ax-popover>
-  `, isInline: true, dependencies: [{ 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", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { 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: AXTranslationModule }, { kind: "component", type: AXPFileProviderIconComponent, selector: "axp-file-provider-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ 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", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { 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: AXTranslationModule }, { kind: "component", type: AXPFileProviderIconComponent, selector: "axp-file-provider-icon", inputs: ["icon"] }, { 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: AXPFileProviderMenuComponent, decorators: [{
             type: Component,
@@ -4264,36 +4334,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-//#region ---- Rejection notifications ----
-async function notifyFileAcceptRejections(rejected, deps) {
-    if (rejected.length === 0) {
-        return;
-    }
-    const { translateService, toastService, maxFileSize } = deps;
-    const errorTitle = await translateService.translateAsync('@general:messages.error.title');
-    const typeRejections = rejected.filter((entry) => entry.reason === 'type');
-    const sizeRejections = rejected.filter((entry) => entry.reason === 'size');
-    if (typeRejections.length === 1) {
-        const content = await translateService.translateAsync('@general:widgets.file-uploader.validation.file-type-not-allowed', { params: { fileName: typeRejections[0].file.name } });
-        toastService.show({ color: 'danger', title: errorTitle, content });
-        return;
-    }
-    if (typeRejections.length > 1) {
-        const content = await translateService.translateAsync('@general:widgets.file-uploader.validation.file-type-not-allowed-summary', { params: { count: typeRejections.length } });
-        toastService.show({ color: 'danger', title: errorTitle, content });
-        return;
-    }
-    if (sizeRejections.length === 1) {
-        const maxMb = Math.round((maxFileSize / (1024 * 1024)) * 10) / 10;
-        const content = await translateService.translateAsync('@general:widgets.file-uploader.validation.file-size-exceeds-limit', { params: { fileName: sizeRejections[0].file.name, maxSizeMb: maxMb } });
-        toastService.show({ color: 'danger', title: errorTitle, content });
-        return;
-    }
-    const content = await translateService.translateAsync('@general:widgets.file-uploader.validation.files-rejected-summary', { params: { count: rejected.length } });
-    toastService.show({ color: 'danger', title: errorTitle, content });
-}
-//#endregion
-
 //#endregion
 //#region ---- Validation ----
 function isUnrestrictedFileAccept(accept) {
@@ -4478,6 +4518,36 @@ function matchesCategoryByExtension(fileName, category) {
 }
 //#endregion
 
+//#region ---- Rejection notifications ----
+async function notifyFileAcceptRejections(rejected, deps) {
+    if (rejected.length === 0) {
+        return;
+    }
+    const { translateService, toastService, maxFileSize } = deps;
+    const errorTitle = await translateService.translateAsync('@general:messages.generic.error.title');
+    const typeRejections = rejected.filter((entry) => entry.reason === 'type');
+    const sizeRejections = rejected.filter((entry) => entry.reason === 'size');
+    if (typeRejections.length === 1) {
+        const content = await translateService.translateAsync('@general:widgets.file-uploader.validation.file-type-not-allowed', { params: { fileName: typeRejections[0].file.name } });
+        toastService.show({ color: 'danger', title: errorTitle, content });
+    }
+    else if (typeRejections.length > 1) {
+        const content = await translateService.translateAsync('@general:widgets.file-uploader.validation.file-type-not-allowed-summary', { params: { count: typeRejections.length } });
+        toastService.show({ color: 'danger', title: errorTitle, content });
+    }
+    if (sizeRejections.length === 1) {
+        const maxSize = formatMaxFileSizeForDisplay(maxFileSize);
+        const content = await translateService.translateAsync('@general:widgets.file-uploader.validation.file-size-exceeds-limit', { params: { fileName: sizeRejections[0].file.name, maxSize } });
+        toastService.show({ color: 'danger', title: errorTitle, content });
+        return;
+    }
+    if (sizeRejections.length > 1) {
+        const content = await translateService.translateAsync('@general:widgets.file-uploader.validation.files-rejected-summary', { params: { count: sizeRejections.length } });
+        toastService.show({ color: 'danger', title: errorTitle, content });
+    }
+}
+//#endregion
+
 //#region ---- Accept resolution ----
 const ZIP_ACCEPT_TOKENS = '.zip,application/zip';
 /**
@@ -4503,7 +4573,8 @@ function resolveFileChooserAccept(accept, promptZipOnMultiple) {
 //#endregion
 
 //#region ---- Chooser result validation ----
-function fileFromListItem(item) {
+/** Blob-backed chooser item as a {@link File}. Drive and file-id items return undefined. */
+function resolveChooserItemFile(item) {
     const source = item.source;
     if (source?.kind !== 'blob' || source.value == null) {
         return undefined;
@@ -4512,7 +4583,8 @@ function fileFromListItem(item) {
         return source.value;
     }
     if (source.value instanceof Blob) {
-        return new File([source.value], item.name, {
+        const name = item.name?.trim() || 'file';
+        return new File([source.value], name, {
             type: source.value.type ?? '',
         });
     }
@@ -4525,30 +4597,38 @@ function validateFileChooserItems(items, options) {
     const accept = options['accept'];
     const maxFileSize = defaultTo(options['maxFileSize'], 0);
     const passthrough = [];
-    const blobItems = [];
-    const blobFiles = [];
+    const blobEntries = [];
     for (const item of items) {
-        const file = fileFromListItem(item);
+        const file = resolveChooserItemFile(item);
         if (file) {
-            blobItems.push(item);
-            blobFiles.push(file);
+            blobEntries.push({ item, file });
             continue;
         }
         passthrough.push(item);
     }
-    const namedAccepted = passthrough.filter((item) => isUnrestrictedFileAccept(accept) || fileNameMatchesAccept(item.name ?? '', accept));
-    const namedRejected = passthrough
-        .filter((item) => !namedAccepted.includes(item))
-        .map((item) => ({
-        file: new File([], item.name ?? 'file', { type: '' }),
-        reason: 'type',
-    }));
-    if (!blobFiles.length) {
+    const namedAccepted = [];
+    const namedRejected = [];
+    for (const item of passthrough) {
+        const placeholder = new File([], item.name ?? 'file', { type: '' });
+        const typeOk = isUnrestrictedFileAccept(accept) || fileNameMatchesAccept(item.name ?? '', accept);
+        if (!typeOk) {
+            namedRejected.push({ file: placeholder, reason: 'type' });
+            continue;
+        }
+        if (maxFileSize > 0 && (item.size ?? 0) > maxFileSize) {
+            namedRejected.push({ file: placeholder, reason: 'size' });
+            continue;
+        }
+        namedAccepted.push(item);
+    }
+    if (!blobEntries.length) {
         return { accepted: namedAccepted, rejected: namedRejected };
     }
-    const { accepted, rejected } = filterFilesByAcceptAndMaxSize(blobFiles, accept, maxFileSize);
+    const { accepted, rejected } = filterFilesByAcceptAndMaxSize(blobEntries.map((entry) => entry.file), accept, maxFileSize);
     const acceptedSet = new Set(accepted);
-    const acceptedItems = blobItems.filter((item) => acceptedSet.has(fileFromListItem(item)));
+    const acceptedItems = blobEntries
+        .filter((entry) => acceptedSet.has(entry.file))
+        .map((entry) => entry.item);
     return {
         accepted: [...namedAccepted, ...acceptedItems],
         rejected: [...namedRejected, ...rejected],
@@ -4564,9 +4644,7 @@ const AXPFileChooserHookKeys = {
 
 //#region ---- File chooser tokens ----
 /**
-
  * Multi token for file chooser providers (system disk, drive, external systems).
-
  */
 const AXP_FILE_CHOOSER_PROVIDERS = new InjectionToken('AXP_FILE_CHOOSER_PROVIDERS');
 //#endregion
@@ -4578,14 +4656,37 @@ const AXP_SYSTEM_FILE_CHOOSER_PROVIDER = {
     order: 1,
     choose: async (context) => {
         const fileService = inject(AXFileService);
+        const documentRef = inject(DOCUMENT);
+        const translateService = inject(AXTranslationService);
+        const toastService = inject(AXToastService);
         const multiple = Boolean(context.options['multiple']);
         const fileType = context.options['fileType'];
-        const accept = context.options['accept'];
-        const files = await fileService.choose({
-            fileType,
-            accept,
-            multiple,
-        });
+        const acceptOption = context.options['accept'];
+        const maxFileSizeOption = context.options['maxFileSize'];
+        const maxFileSize = typeof maxFileSizeOption === 'number' ? maxFileSizeOption : 0;
+        const accept = fileType
+            ? (acceptOption ?? (await fileService.getAcceptAttribute(fileType)))
+            : (acceptOption ?? '');
+        const picked = await openSystemFileDialog(documentRef, { accept, multiple });
+        if (!picked.length) {
+            return undefined;
+        }
+        let files = picked;
+        if (fileType) {
+            const validation = await fileService.validateMany(picked, fileType);
+            files = validation.accepted;
+            if (validation.rejected.length > 0) {
+                const rejected = validation.rejected.map((entry) => ({
+                    file: entry.file,
+                    reason: catalogRejectionReason(entry.errors, maxFileSize),
+                }));
+                await notifyFileAcceptRejections(rejected, {
+                    translateService,
+                    toastService,
+                    maxFileSize,
+                });
+            }
+        }
         if (!files.length) {
             return undefined;
         }
@@ -4602,9 +4703,13 @@ const AXP_SYSTEM_FILE_CHOOSER_PROVIDER = {
         if (!multiple) {
             return next.slice(0, 1);
         }
-        return [...context.items, ...next];
+        return [...(context.items ?? []), ...next];
     },
 };
+function catalogRejectionReason(errors, maxFileSize) {
+    const failedForSize = errors.some((error) => (error.rule ?? '').toLowerCase().includes('size'));
+    return failedForSize && maxFileSize > 0 ? 'size' : 'type';
+}
 //#endregion
 
 //#region ---- File chooser platform settings ----
@@ -4960,13 +5065,18 @@ class AXPFileChooserService {
         if (!items?.length) {
             return items;
         }
+        const previousItems = new Set(context.items ?? []);
+        const incoming = items.filter((item) => !previousItems.has(item));
+        if (incoming.length === 0) {
+            return items;
+        }
         const maxFileSize = defaultTo(context.options['maxFileSize'], 0);
         const promptZipOnMultiple = (await this.settingsService.get(AXPFileChooserSettings.PromptZipOnMultiple)) ?? false;
         const validationOptions = {
             ...context.options,
             accept: resolveFileChooserAccept(context.options['accept'], promptZipOnMultiple),
         };
-        const { accepted, rejected } = validateFileChooserItems(items, validationOptions);
+        const { accepted, rejected } = validateFileChooserItems(incoming, validationOptions);
         if (rejected.length > 0) {
             await notifyFileAcceptRejections(rejected, {
                 translateService: this.translateService,
@@ -4974,7 +5084,14 @@ class AXPFileChooserService {
                 maxFileSize,
             });
         }
-        return accepted.length > 0 ? accepted : undefined;
+        if (accepted.length === 0) {
+            return undefined;
+        }
+        if (previousItems.size === 0) {
+            return accepted;
+        }
+        const acceptedIncoming = new Set(accepted);
+        return items.filter((item) => previousItems.has(item) || acceptedIncoming.has(item));
     }
     async runAfterChosenHook(providerKey, context, items) {
         if (!items?.length) {
@@ -5004,6 +5121,8 @@ class AXPFileChooserDirective {
     constructor() {
         //#region ---- Services & Dependencies ----
         this.chooserService = inject(AXPFileChooserService);
+        this.toastService = inject(AXToastService);
+        this.translateService = inject(AXTranslationService);
         this.elementRef = inject(ElementRef);
         this.envInjector = inject(EnvironmentInjector);
         this.appRef = inject(ApplicationRef);
@@ -5064,10 +5183,16 @@ class AXPFileChooserDirective {
                 ...this.context(),
                 items: this.items(),
             });
-            if (result) {
+            if (result?.length) {
                 this.items.set(result);
             }
         }
+        catch (error) {
+            console.error('[AXPFileChooserDirective] choose failed', error);
+            const title = await this.translateService.translateAsync('@general:messages.generic.error.title');
+            const content = await this.translateService.translateAsync('@layout:components.file-chooser.messages.choose-failed');
+            this.toastService.show({ color: 'danger', title, content });
+        }
         finally {
             this.busy.set(false);
         }
@@ -5101,30 +5226,38 @@ async function compressImageFile(file, quality = 0.7, maxDimension = 1920) {
     if (!file.type.startsWith('image/') || file.type === 'image/svg+xml') {
         return file;
     }
-    const bitmap = await createImageBitmap(file);
-    const scale = Math.min(1, maxDimension / Math.max(bitmap.width, bitmap.height));
-    const width = Math.max(1, Math.round(bitmap.width * scale));
-    const height = Math.max(1, Math.round(bitmap.height * scale));
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-    const context = canvas.getContext('2d');
-    if (!context) {
-        bitmap.close();
-        return file;
+    let bitmap;
+    try {
+        bitmap = await createImageBitmap(file);
+        const longestSide = Math.max(bitmap.width, bitmap.height);
+        const scale = longestSide > 0 ? Math.min(1, maxDimension / longestSide) : 1;
+        const width = Math.max(1, Math.round(bitmap.width * scale));
+        const height = Math.max(1, Math.round(bitmap.height * scale));
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            return file;
+        }
+        context.drawImage(bitmap, 0, 0, width, height);
+        const mimeType = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
+        const blob = await new Promise((resolve) => {
+            canvas.toBlob(resolve, mimeType, quality);
+        });
+        if (!blob || blob.size >= file.size) {
+            return file;
+        }
+        const extension = mimeType === 'image/png' ? 'png' : 'jpg';
+        const baseName = file.name.includes('.') ? file.name.slice(0, file.name.lastIndexOf('.')) : file.name;
+        return new File([blob], `${baseName}.${extension}`, { type: mimeType, lastModified: Date.now() });
     }
-    context.drawImage(bitmap, 0, 0, width, height);
-    bitmap.close();
-    const mimeType = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
-    const blob = await new Promise((resolve) => {
-        canvas.toBlob(resolve, mimeType, quality);
-    });
-    if (!blob || blob.size >= file.size) {
+    catch {
         return file;
     }
-    const extension = mimeType === 'image/png' ? 'png' : 'jpg';
-    const baseName = file.name.includes('.') ? file.name.slice(0, file.name.lastIndexOf('.')) : file.name;
-    return new File([blob], `${baseName}.${extension}`, { type: mimeType, lastModified: Date.now() });
+    finally {
+        bitmap?.close();
+    }
 }
 /**
  * Builds a store-only ZIP archive (no compression) from the given files.
@@ -5136,9 +5269,10 @@ async function createZipArchive(files, archiveName = 'archive.zip') {
     })));
     const chunks = [];
     const centralDirectory = [];
+    const usedNames = new Set();
     let offset = 0;
     for (const entry of entries) {
-        const nameBytes = new TextEncoder().encode(entry.name);
+        const nameBytes = new TextEncoder().encode(uniqueZipEntryName(entry.name, usedNames));
         const crc = crc32(entry.data);
         const localHeader = buildLocalFileHeader(nameBytes, entry.data.length, crc);
         chunks.push(localHeader, nameBytes, entry.data);
@@ -5157,10 +5291,32 @@ async function createZipArchive(files, archiveName = 'archive.zip') {
     }
     return new File([archive], archiveName, { type: 'application/zip', lastModified: Date.now() });
 }
+const ZIP_VERSION_NEEDED = 20;
+const ZIP_UTF8_FLAG = 0x0800;
+function uniqueZipEntryName(name, used) {
+    const baseName = name || 'file';
+    if (!used.has(baseName)) {
+        used.add(baseName);
+        return baseName;
+    }
+    const dot = baseName.lastIndexOf('.');
+    const stem = dot > 0 ? baseName.slice(0, dot) : baseName;
+    const extension = dot > 0 ? baseName.slice(dot) : '';
+    let index = 2;
+    let candidate = `${stem} (${index})${extension}`;
+    while (used.has(candidate)) {
+        index += 1;
+        candidate = `${stem} (${index})${extension}`;
+    }
+    used.add(candidate);
+    return candidate;
+}
 function buildLocalFileHeader(nameBytes, size, crc) {
     const header = new Uint8Array(30);
     const view = new DataView(header.buffer);
     view.setUint32(0, 0x04034b50, true);
+    view.setUint16(4, ZIP_VERSION_NEEDED, true);
+    view.setUint16(6, ZIP_UTF8_FLAG, true);
     view.setUint16(8, 0, true);
     view.setUint16(10, 0, true);
     view.setUint32(14, crc, true);
@@ -5174,6 +5330,9 @@ function buildCentralDirectoryHeader(nameBytes, size, crc, offset) {
     const header = new Uint8Array(46);
     const view = new DataView(header.buffer);
     view.setUint32(0, 0x02014b50, true);
+    view.setUint16(4, ZIP_VERSION_NEEDED, true);
+    view.setUint16(6, ZIP_VERSION_NEEDED, true);
+    view.setUint16(8, ZIP_UTF8_FLAG, true);
     view.setUint16(10, 0, true);
     view.setUint16(12, 0, true);
     view.setUint32(16, crc, true);
@@ -5783,21 +5942,44 @@ const AXP_SYSTEM_FILE_UPLOADER_PROVIDER = {
     icon: 'fa-light fa-file-arrow-up',
     order: 1,
     upload: async (context) => {
+        const fileStorage = inject(AXPFileStorageService);
+        const translateService = inject(AXTranslationService);
+        const toastService = inject(AXToastService);
         const multiple = Boolean(context.options['multiple']);
-        const maxFileSize = defaultTo(context.options['maxFileSize'], 10 * 1024 * 1024);
+        const maxFileSizeOption = context.options['maxFileSize'];
+        // Omitted maxFileSize keeps the historical 10 MB cap. Zero or negative means no limit.
+        const maxFileSize = typeof maxFileSizeOption === 'number' ? maxFileSizeOption : 10 * 1024 * 1024;
         const refId = defaultTo(context.options['refId'], 'temp');
         const refType = defaultTo(context.options['refType'], 'file-uploader');
         const category = defaultTo(context.options['category'], 'attachment');
-        const chosen = context.chosen.filter((item) => (item.size ?? 0) <= maxFileSize &&
-            item.source?.kind === 'blob' &&
-            item.source.value instanceof File);
-        if (isEmpty(chosen)) {
+        const chosen = Array.isArray(context.chosen) ? context.chosen : [];
+        const rejected = [];
+        const uploadable = [];
+        for (const item of chosen) {
+            const file = resolveChooserItemFile(item);
+            if (!file) {
+                continue;
+            }
+            const comparableSize = Math.max(item.size ?? 0, file.size);
+            if (maxFileSize > 0 && comparableSize > maxFileSize) {
+                rejected.push({ file, reason: 'size' });
+                continue;
+            }
+            uploadable.push({ item, file });
+        }
+        if (rejected.length > 0) {
+            await notifyFileAcceptRejections(rejected, {
+                translateService,
+                toastService,
+                maxFileSize,
+            });
+        }
+        const queue = multiple ? uploadable : uploadable.slice(0, 1);
+        if (queue.length === 0) {
             return undefined;
         }
-        const fileStorage = inject(AXPFileStorageService);
         const uploaded = [];
-        for (const item of chosen) {
-            const file = item.source.value;
+        for (const { item, file } of queue) {
             const info = await fileStorage.save({
                 file,
                 name: item.name,
@@ -5820,7 +6002,7 @@ const AXP_SYSTEM_FILE_UPLOADER_PROVIDER = {
         if (!multiple) {
             return uploaded.slice(0, 1);
         }
-        return [...context.items, ...uploaded];
+        return [...(context.items ?? []), ...uploaded];
     },
 };
 //#endregion
@@ -5898,6 +6080,8 @@ class AXPFileUploaderDirective {
     constructor() {
         //#region ---- Services & Dependencies ----
         this.uploaderService = inject(AXPFileUploaderService);
+        this.toastService = inject(AXToastService);
+        this.translateService = inject(AXTranslationService);
         this.elementRef = inject(ElementRef);
         this.envInjector = inject(EnvironmentInjector);
         this.appRef = inject(ApplicationRef);
@@ -5962,6 +6146,12 @@ class AXPFileUploaderDirective {
                 this.uploaded.set(result);
             }
         }
+        catch (error) {
+            console.error('[AXPFileUploaderDirective] upload failed', error);
+            const title = await this.translateService.translateAsync('@general:messages.generic.error.title');
+            const content = await this.translateService.translateAsync('@general:widgets.file-uploader.messages.upload-failed');
+            this.toastService.show({ color: 'danger', title, content });
+        }
         finally {
             this.busy.set(false);
         }
@@ -7887,7 +8077,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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null }, sortPresets: { classPropertyName: "sortPresets", publicName: "sortPresets", isSignal: true, isRequired: false, transformFunction: null }, activeSortPresetName: { classPropertyName: "activeSortPresetName", publicName: "activeSortPresetName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged", onSortPresetSelected: "onSortPresetSelected" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "mobileFilterTrigger", first: true, predicate: ["mobileFilterTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderers", predicate: AXPWidgetRendererDirective, 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 px-1.5 py-1\"\n  [class.axp-query-filters__bar--toggle-collapsed]=\"deviceService.isSmall() && mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n  (keydown.control.space)=\"openFilterPopover()\"\n>\n  @if (deviceService.isSmall()) {\n    <!-- ----- Inline search replaces the chip row ----- -->\n    @if (mobileSearchOpen()) {\n      <div id=\"axp-query-filters-mobile-search\" class=\"axp-query-filters__mobile-search\">\n        <ax-search-box\n          class=\"ax-sm\"\n          [value]=\"mobileSearchText()\"\n          [delayTime]=\"300\"\n          [placeholder]=\"('@general:terms.interface.filter.search-placeholder' | translate | async) ?? ''\"\n          (onValueChanged)=\"handleMobileSearchChanged($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <!-- ----- Compact pill row instead of the desktop tag-box toolbar ----- -->\n    @else {\n      <div\n        #mobileFilterTrigger\n        class=\"axp-query-filters__mobile-row\"\n        [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n        (wheel)=\"handleChipsWheel($event)\"\n        (pointerdown)=\"handleChipsPointerDown($event)\"\n        (scroll)=\"handleMobileChipsScroll($event)\"\n      >\n      @for (chip of mobileFilterChips(); track chip.id) {\n        <!--->\n        <!-- ----- Applied filter chip keeps the field title, with a primary border ----- -->\n        @if (chip.kind === 'applied') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--applied\"\n            [class.axp-query-filters__mobile-chip--search]=\"chip.tag.field === 'all'\"\n            (click)=\"handleTagClick(chip.tag, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ mobileChipLabel(chip.tag) }}</span>\n            <!--->\n            <!-- ----- Remove this applied filter ----- -->\n            @if (!chip.tag.readOnly) {\n              <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, chip.tagIndex)\" type=\"button\">\n                <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n              </button>\n            }\n          </div>\n        }\n        <!-- ----- Unused filter field as an outline chip ----- -->\n        @else if (chip.kind === 'available') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--available\"\n            [class.axp-query-filters__mobile-chip--disabled]=\"isFilterDisabled(chip.definition)\"\n            [attr.aria-disabled]=\"isFilterDisabled(chip.definition) ? 'true' : null\"\n            (click)=\"openMobileAvailableFilter(chip.definition, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ chip.definition.title | translate | async }}</span>\n            <ax-icon class=\"fa-light fa-angle-down axp-query-filters__mobile-chip-caret\"></ax-icon>\n          </div>\n        }\n      }\n      @for (preset of sortPresets(); track preset.name) {\n        <!--------------------------------------------------------------->\n        <!-- ----- Sort preset pill in the same row as advance filters ----- -->\n        <div\n          class=\"axp-query-filters__mobile-chip\"\n          [class.axp-query-filters__mobile-chip--applied]=\"isMobileSortPresetActive(preset)\"\n          [class.axp-query-filters__mobile-chip--available]=\"!isMobileSortPresetActive(preset)\"\n          [attr.aria-pressed]=\"isMobileSortPresetActive(preset)\"\n          (click)=\"applyMobileSortPreset(preset, $event)\"\n        >\n          <span class=\"axp-query-filters__mobile-chip-text\">{{ preset.title | translate | async }}</span>\n          <!--------------------------------------------------------------->\n          <!-- ----- Custom icon when the recipe does not use a direction arrow ----- -->\n          @if (preset.icon) {\n            <ax-icon [class]=\"preset.icon + ' axp-query-filters__mobile-chip-caret'\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Descending hint when the first sort is descending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'desc') {\n            <ax-icon class=\"fa-solid fa-arrow-down-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Ascending hint when the first sort is ascending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'asc') {\n            <ax-icon class=\"fa-solid fa-arrow-up-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n        </div>\n      }\n    </div>\n    }\n    <div\n      class=\"axp-query-filters__mode-toggle\"\n      [class.axp-query-filters__mode-toggle--collapsed]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.aria-hidden]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.inert]=\"mobileModeToggleCollapsed() && !mobileSearchOpen() ? true : null\"\n      role=\"tablist\"\n      [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n    >\n      <div class=\"axp-query-filters__mode-toggle-inner\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"!mobileSearchOpen()\"\n          [disabled]=\"isMobileFilterModeLocked()\"\n          [attr.aria-selected]=\"!mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(false)\"\n        >\n          <ax-icon class=\"fa-light fa-filter\"></ax-icon>\n        </button>\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"mobileSearchOpen()\"\n          [disabled]=\"isMobileSearchModeLocked()\"\n          [attr.aria-selected]=\"mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:actions.search.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(true)\"\n        >\n          <ax-icon class=\"fa-light fa-magnifying-glass\"></ax-icon>\n        </button>\n      </div>\n    </div>\n  } @else {\n    <!-- ----- Root AND/OR when more than one visible chip, including All ----- -->\n    @if (isAdvanced() && hasMultipleFilterGroups()) {\n      <ax-button-group\n        class=\"axp-query-filters__logic-toggle ax-sm shrink-0\"\n        [selection]=\"'single'\"\n        [look]=\"'outline'\"\n        [color]=\"'primary'\"\n      >\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-and' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'and'\" (onClick)=\"setRootLogic('and')\"></ax-button-group-item>\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-or' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'or'\" (onClick)=\"setRootLogic('or')\"></ax-button-group-item>\n      </ax-button-group>\n    }\n    <!-- ----- Filter picker when root AND/OR is hidden ----- -->\n    @else {\n      <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"isAdvanced() ? openNewFilterGroup() : openFilterPopover()\" #filterButton [look]=\"'blank'\">\n        <ax-icon class=\"far fa-bars-filter cursor-pointer\"></ax-icon>\n      </ax-button>\n    }\n  }\n  <div\n    class=\"axp-query-filters__chips min-w-0\"\n    [class.flex-1]=\"!deviceService.isSmall()\"\n    [class.hidden]=\"deviceService.isSmall()\"\n    [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n    (click)=\"handleTagBoxClick($event)\"\n    (wheel)=\"handleChipsWheel($event)\"\n    (pointerdown)=\"handleChipsPointerDown($event)\"\n  >\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      [allowDuplicateValues]=\"true\"\n      [placeholder]=\"(filtersDefinitions().length === 0 ? '@general:terms.interface.filter.no-filter-definitions' : '@general:terms.interface.filter.placeholder') | translate | async\"\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 class=\"axp-query-filters__chip\" [class.axp-query-filters__chip--active]=\"item.id === activeChipId()\" [class.axp-query-filters__chip--search]=\"item.field === 'all'\" (click)=\"handleTagClick(item, $event)\">\n      <!-- ----- Quick search chip keeps a single text label ----- -->\n      @if (item.chipMode === 'search') {\n        <span class=\"axp-query-filters__chip-text\">{{ item.query }}</span>\n      } @else if (item.chipMode === 'summary') {\n        <!-- ----- Summary chip when more than two conditions ----- -->\n        @if (item.titleLabel) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}:</span>\n        }\n        <span class=\"axp-query-filters__chip-text\">{{ item.summaryText }}</span>\n      } @else {\n        <!-- ----- One or two conditions: field + operator + quoted value ----- -->\n        @if (item.titleLabel && !item.mixed) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}</span>\n        }\n        @for (cond of item.chipConditions; track $index) {\n          <!--->\n          <!-- ----- Logic connector between conditions ----- -->\n          @if ($index > 0) {\n            <span class=\"axp-query-filters__chip-logic\">{{ item.logicLabel }}</span>\n          }\n          <!--->\n          <!-- ----- Field title on mixed-field chips ----- -->\n          @if (item.mixed && cond.title) {\n            <span class=\"axp-query-filters__chip-title\">{{ cond.title }}</span>\n          }\n          <span class=\"axp-query-filters__chip-operator\">{{ cond.operator }}</span>\n          <!--->\n          <!-- ----- Quoted value badge when the operator has a display value ----- -->\n          @if (cond.value) {\n            <span class=\"axp-query-filters__chip-value\">'{{ cond.value }}'</span>\n          }\n        }\n      }\n      @if (!item.readOnly) {\n        <button class=\"axp-query-filters__chip-remove\" (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 [offsetY]=\"activeFilter() ? -30 : 0\" [openOn]=\"'toggle'\" (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\" [adaptivityEnabled]=\"true\" #popover>\n  <div class=\"axp-query-filters__popover md:min-w-72 w-full rounded-md md:max-h-[min(32rem,80vh)] lg:w-[520px] md:overflow-auto\">\n    <axp-widgets-container #widgetsContainer [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"axp-query-filters__editor-header border-b border-border-light px-4 py-2\">\n            <div class=\"flex min-w-0 items-center gap-2 font-semibold\">\n              <!--->\n              <!-- ----- Field icon when the group is a single field ----- -->\n              @if (!isMixedEditingGroup() && activeFilter()?.icon) {\n                <ax-icon class=\"w-5 shrink-0\" [class]=\"'fa-light ' + activeFilter()!.icon\"></ax-icon>\n              }\n              <span class=\"min-w-0 truncate\">\n                {{ isMixedEditingGroup() ? ('@general:terms.interface.filter.filter-group' | translate | async) : ('@general:terms.interface.filter.filter-on' | translate: { params: { title: activeFilterTitle() } } | async) }}\n              </span>\n            </div>\n            <!--->\n            <!-- ----- Condition logic AND/OR stays on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <ax-button-group class=\"axp-query-filters__logic-toggle ax-sm shrink-0\" [selection]=\"'single'\" [look]=\"'outline'\" [color]=\"'primary'\">\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-and-all' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'and'\" (onClick)=\"setEditingLogic('and')\"></ax-button-group-item>\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-or-any' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'or'\" (onClick)=\"setEditingLogic('or')\"></ax-button-group-item>\n              </ax-button-group>\n            }\n          </ax-header>\n          <ax-content class=\"p-4\">\n            @for (condition of editingConditions(); track condition.id; let i = $index) {\n              <!--->\n              <!-- ----- Numbered condition row with the field widget ----- -->\n              @if (i > 0 && !deviceService.isSmall()) {\n                <div class=\"axp-query-filters__logic-split\">\n                  <span class=\"axp-query-filters__logic-split-label\">{{ (editingLogic() === 'or' ? '@general:terms.interface.filter.chip-logic-or' : '@general:terms.interface.filter.chip-logic-and') | translate | async }}</span>\n                </div>\n              }\n              <div class=\"axp-query-filters__condition\">\n                <div class=\"axp-query-filters__condition-head\">\n                  <div class=\"axp-query-filters__condition-heading\">\n                    <!--->\n                    <!-- ----- Field picker for mixed-field groups in advanced mode ----- -->\n                    @if (isAdvanced()) {\n                      <ax-dropdown-button class=\"ax-sm\" [text]=\"(getConditionDefinition(condition.field)?.title | translate | async) ?? ''\" [mode]=\"'dropdown'\" [look]=\"'outline'\">\n                        <ax-button-item-list>\n                          @for (def of advancedFieldOptions(); track def.field) {\n                            <ax-button-item [text]=\"(def.title | translate | async) ?? ''\" [selected]=\"condition.field === def.field\" [disabled]=\"isFilterDisabled(def)\" (onClick)=\"setConditionField(condition.id, def.field ?? '')\"></ax-button-item>\n                          }\n                        </ax-button-item-list>\n                      </ax-dropdown-button>\n                    }\n                    <!--->\n                    <!-- ----- Active operator for this condition ----- -->\n                    @if (getConditionOperatorKey(condition.id); as operatorKey) {\n                      <ax-badge [text]=\"(operatorKey | translate | async) || ''\"></ax-badge>\n                    }\n                  </div>\n                  <button type=\"button\" class=\"axp-query-filters__condition-remove\" (click)=\"handleRemoveCondition(condition.id)\">\n                    <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n                  </button>\n                </div>\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"{\n                    type: getConditionWidget(condition)?.type || 'text-editor',\n                    path: resolveEditingConditionContextField(condition.id),\n                    options: $safeNavigationMigration(getConditionWidget(condition)?.options),\n                  }\"\n                  [mode]=\"'edit'\"\n                ></ng-container>\n              </div>\n            }\n            <!--->\n            <!-- ----- Extra conditions stay on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <button type=\"button\" class=\"axp-query-filters__add-condition\" (click)=\"handleAddCondition()\">\n                <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n                <span>{{ (isAdvanced() ? '@general:terms.interface.filter.add-condition-generic' : '@general:terms.interface.filter.add-condition') | translate: { params: { title: activeFilterTitle() } } | async }}</span>\n              </button>\n            }\n          </ax-content>\n          <ax-footer class=\"border-t flex justify-end gap-2 border-border-light w-full px-4 py-2\">\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" [text]=\"'@general:actions.cancel.title' | translate | async\" (onClick)=\"handleCancelFilter()\"></ax-button>\n            <ax-button class=\"ax-sm\" [color]=\"'primary'\" [disabled]=\"!canApplyFilter()\" [text]=\"'@general:terms.interface.filter.apply-filter' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <!-- ----- Field picker when no filter is being edited ----- -->\n        <div class=\"flex flex-col lightest-surface\">\n          <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items border-none\">\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\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-center gap-2\">\n                <ax-icon class=\"axp-query-filters__field-icon\" [ngClass]=\"'fa-light ' + field.icon\"></ax-icon>\n                <span class=\"leading-none\">{{ field.title | translate | async }}</span>\n              </div>\n            </div>\n          }\n        </div>\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{display:block;width:100%;min-width:0px;overflow:hidden}axp-query-filters>.flex{min-width:0px;flex-wrap:nowrap}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container,axp-query-filters ax-tag-box .ax-editor-container{display:flex;width:100%;min-width:0px;flex-wrap:nowrap;align-items:center;background-color:transparent;min-height:2.25rem}axp-query-filters ax-tag-box .ax-tags-container{display:flex;flex:1 1 0%;min-width:0;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}axp-query-filters>.flex>ax-button button{min-height:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding-block:0}.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container{scrollbar-width:none;-ms-overflow-style:none}:is(.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container)::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__chips{min-width:0px;cursor:grab;overflow-x:auto;overflow-y:hidden}.axp-query-filters__chips.axp-query-filters__chips--panning,.axp-query-filters__chips.axp-query-filters__chips--panning *{cursor:grabbing;-webkit-user-select:none;user-select:none}.axp-query-filters__chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block: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)));white-space:nowrap}.axp-query-filters__chip:hover{background-color:rgba(var(--ax-sys-color-darkest-surface))}.axp-query-filters__chip--search,.axp-query-filters__chip--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}:is(.axp-query-filters__chip--search,.axp-query-filters__chip--active):hover{background-color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__chip-title{flex-shrink:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip-text,.axp-query-filters__chip-operator{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__chip-logic{flex-shrink:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__chip--active .axp-query-filters__chip-logic,.axp-query-filters__chip--search .axp-query-filters__chip-logic{color:var(--color-white, #fff)}.axp-query-filters__chip-value{display:inline-flex;max-width:12rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:.25rem;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in srgb,#fff 20%,transparent);color:var(--color-white, #fff)}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in oklab,var(--color-white, #fff) 20%,transparent)}}.axp-query-filters__chip-remove{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;opacity:70%}.axp-query-filters__chip-remove:hover{opacity:100%}.axp-query-filters__mode-toggle{flex:0 0 auto;max-width:6rem;overflow:visible;transition:max-width .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed{max-width:0;pointer-events:none}.axp-query-filters__mode-toggle-inner{position:relative;z-index:10;margin-inline-start:var(--spacing, .25rem);display:inline-flex;border-radius:calc(infinity * 1px);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);border-color:rgba(var(--ax-sys-color-light-surface));--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);width:max-content;transform:translate(0);transition:transform .32s cubic-bezier(.32,.72,0,1),margin .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{margin-inline-start:0;transform:translate(5rem)}[dir=rtl] .axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{transform:translate(-5rem)}.axp-query-filters__mode-toggle-btn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));width:1.875rem;height:1.625rem}.axp-query-filters__mode-toggle-btn:first-child{border-start-start-radius:calc(infinity * 1px);border-end-start-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn:last-child{border-start-end-radius:calc(infinity * 1px);border-end-end-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__mode-toggle-btn:disabled:not(.axp-query-filters__mode-toggle-btn--active){cursor:not-allowed;opacity:40%}.axp-query-filters__mobile-search{min-width:0px;flex:1}.axp-query-filters__mobile-search ax-search-box,.axp-query-filters__mobile-search ax-search-box .ax-editor,.axp-query-filters__mobile-search ax-search-box .ax-editor-container,.axp-query-filters__mobile-search ax-search-box .editor-container{min-height:1.875rem;height:1.875rem}.axp-query-filters__mobile-search ax-search-box input{min-height:1.875rem;height:1.875rem;font-size:.8125rem;line-height:1.125rem}.axp-query-filters__mobile-row{display:flex;min-width:0px;flex:1;flex-wrap:nowrap;align-items:center;gap:var(--spacing, .25rem);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.axp-query-filters__mobile-row::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__mobile-chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);border-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block: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)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap}.axp-query-filters__mobile-chip--available{cursor:pointer;background-color:transparent}.axp-query-filters__mobile-chip--disabled{cursor:not-allowed;opacity:50%}.axp-query-filters__mobile-chip--applied{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:transparent;color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__mobile-chip-text{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__mobile-chip-caret{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}.axp-query-filters__editor-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-query-filters__logic-toggle ax-button-group-item.ax-state-selected ax-button button,.axp-query-filters__logic-toggle ax-button button.ax-state-selected{background-image:none;box-shadow:none;background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__logic-toggle ax-button>button{min-height:2rem;height:2rem;padding-inline:.5rem;padding-block:0;font-size:.8125rem;line-height:1.125rem;font-weight:600}@media(max-width:600px){axp-query-filters{overflow:hidden}axp-query-filters>.flex{gap:.5rem;padding-block:0;padding-inline:.125rem;overflow:hidden}axp-query-filters>.flex.axp-query-filters__bar--toggle-collapsed{gap:0}.axp-query-filters__logic-toggle{flex-wrap:nowrap}.axp-query-filters__chip{gap:.375rem;padding-inline:.625rem;padding-block:.25rem;font-size:.8125rem}.axp-query-filters__chip-value{max-width:none;font-size:.8125rem}}.axp-query-filters__condition{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-heading{display:flex;min-width:0px;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-title{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-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-text-default));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-title{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-remove{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove:hover{color:rgba(var(--ax-sys-color-danger-surface))}.axp-query-filters__logic-split{position:relative;margin-block:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:center}.axp-query-filters__logic-split:before,.axp-query-filters__logic-split:after{content:\"\";height:1px;flex:1;background-color:rgba(var(--ax-sys-color-border-light-surface))}.axp-query-filters__logic-split-label{margin-inline:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__add-condition{margin-top:calc(var(--spacing, .25rem) * 3);display:inline-flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);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);color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__add-condition:hover{text-decoration-line:underline}.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}.axp-query-filters__field-icon{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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;}@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-font-weight: initial;--tw-leading: initial;--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;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "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: AXButtonGroupModule }, { kind: "component", type: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i4$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { 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: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { 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", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i9.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: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i11.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i11.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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null }, sortPresets: { classPropertyName: "sortPresets", publicName: "sortPresets", isSignal: true, isRequired: false, transformFunction: null }, activeSortPresetName: { classPropertyName: "activeSortPresetName", publicName: "activeSortPresetName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged", onSortPresetSelected: "onSortPresetSelected" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "mobileFilterTrigger", first: true, predicate: ["mobileFilterTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderers", predicate: AXPWidgetRendererDirective, 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 px-1.5 py-1\"\n  [class.axp-query-filters__bar--toggle-collapsed]=\"deviceService.isSmall() && mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n  (keydown.control.space)=\"openFilterPopover()\"\n>\n  @if (deviceService.isSmall()) {\n    <!-- ----- Inline search replaces the chip row ----- -->\n    @if (mobileSearchOpen()) {\n      <div id=\"axp-query-filters-mobile-search\" class=\"axp-query-filters__mobile-search\">\n        <ax-search-box\n          class=\"ax-sm\"\n          [value]=\"mobileSearchText()\"\n          [delayTime]=\"300\"\n          [placeholder]=\"('@general:terms.interface.filter.search-placeholder' | translate | async) ?? ''\"\n          (onValueChanged)=\"handleMobileSearchChanged($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <!-- ----- Compact pill row instead of the desktop tag-box toolbar ----- -->\n    @else {\n      <div\n        #mobileFilterTrigger\n        class=\"axp-query-filters__mobile-row\"\n        [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n        (wheel)=\"handleChipsWheel($event)\"\n        (pointerdown)=\"handleChipsPointerDown($event)\"\n        (scroll)=\"handleMobileChipsScroll($event)\"\n      >\n      @for (chip of mobileFilterChips(); track chip.id) {\n        <!--->\n        <!-- ----- Applied filter chip keeps the field title, with a primary border ----- -->\n        @if (chip.kind === 'applied') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--applied\"\n            [class.axp-query-filters__mobile-chip--search]=\"chip.tag.field === 'all'\"\n            (click)=\"handleTagClick(chip.tag, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ mobileChipLabel(chip.tag) }}</span>\n            <!--->\n            <!-- ----- Remove this applied filter ----- -->\n            @if (!chip.tag.readOnly) {\n              <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, chip.tagIndex)\" type=\"button\">\n                <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n              </button>\n            }\n          </div>\n        }\n        <!-- ----- Unused filter field as an outline chip ----- -->\n        @else if (chip.kind === 'available') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--available\"\n            [class.axp-query-filters__mobile-chip--disabled]=\"isFilterDisabled(chip.definition)\"\n            [attr.aria-disabled]=\"isFilterDisabled(chip.definition) ? 'true' : null\"\n            (click)=\"openMobileAvailableFilter(chip.definition, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ chip.definition.title | translate | async }}</span>\n            <ax-icon class=\"fa-light fa-angle-down axp-query-filters__mobile-chip-caret\"></ax-icon>\n          </div>\n        }\n      }\n      @for (preset of sortPresets(); track preset.name) {\n        <!--------------------------------------------------------------->\n        <!-- ----- Sort preset pill in the same row as advance filters ----- -->\n        <div\n          class=\"axp-query-filters__mobile-chip\"\n          [class.axp-query-filters__mobile-chip--applied]=\"isMobileSortPresetActive(preset)\"\n          [class.axp-query-filters__mobile-chip--available]=\"!isMobileSortPresetActive(preset)\"\n          [attr.aria-pressed]=\"isMobileSortPresetActive(preset)\"\n          (click)=\"applyMobileSortPreset(preset, $event)\"\n        >\n          <span class=\"axp-query-filters__mobile-chip-text\">{{ preset.title | translate | async }}</span>\n          <!--------------------------------------------------------------->\n          <!-- ----- Custom icon when the recipe does not use a direction arrow ----- -->\n          @if (preset.icon) {\n            <ax-icon [class]=\"preset.icon + ' axp-query-filters__mobile-chip-caret'\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Descending hint when the first sort is descending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'desc') {\n            <ax-icon class=\"fa-solid fa-arrow-down-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Ascending hint when the first sort is ascending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'asc') {\n            <ax-icon class=\"fa-solid fa-arrow-up-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n        </div>\n      }\n    </div>\n    }\n    <div\n      class=\"axp-query-filters__mode-toggle\"\n      [class.axp-query-filters__mode-toggle--collapsed]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.aria-hidden]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.inert]=\"mobileModeToggleCollapsed() && !mobileSearchOpen() ? true : null\"\n      role=\"tablist\"\n      [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n    >\n      <div class=\"axp-query-filters__mode-toggle-inner\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"!mobileSearchOpen()\"\n          [disabled]=\"isMobileFilterModeLocked()\"\n          [attr.aria-selected]=\"!mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(false)\"\n        >\n          <ax-icon class=\"fa-light fa-filter\"></ax-icon>\n        </button>\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"mobileSearchOpen()\"\n          [disabled]=\"isMobileSearchModeLocked()\"\n          [attr.aria-selected]=\"mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:actions.search.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(true)\"\n        >\n          <ax-icon class=\"fa-light fa-magnifying-glass\"></ax-icon>\n        </button>\n      </div>\n    </div>\n  } @else {\n    <!-- ----- Root AND/OR when more than one visible chip, including All ----- -->\n    @if (isAdvanced() && hasMultipleFilterGroups()) {\n      <ax-button-group\n        class=\"axp-query-filters__logic-toggle ax-sm shrink-0\"\n        [selection]=\"'single'\"\n        [look]=\"'outline'\"\n        [color]=\"'primary'\"\n      >\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-and' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'and'\" (onClick)=\"setRootLogic('and')\"></ax-button-group-item>\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-or' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'or'\" (onClick)=\"setRootLogic('or')\"></ax-button-group-item>\n      </ax-button-group>\n    }\n    <!-- ----- Filter picker when root AND/OR is hidden ----- -->\n    @else {\n      <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"isAdvanced() ? openNewFilterGroup() : openFilterPopover()\" #filterButton [look]=\"'blank'\">\n        <ax-icon class=\"far fa-bars-filter cursor-pointer\"></ax-icon>\n      </ax-button>\n    }\n  }\n  <div\n    class=\"axp-query-filters__chips min-w-0\"\n    [class.flex-1]=\"!deviceService.isSmall()\"\n    [class.hidden]=\"deviceService.isSmall()\"\n    [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n    (click)=\"handleTagBoxClick($event)\"\n    (wheel)=\"handleChipsWheel($event)\"\n    (pointerdown)=\"handleChipsPointerDown($event)\"\n  >\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      [allowDuplicateValues]=\"true\"\n      [placeholder]=\"(filtersDefinitions().length === 0 ? '@general:terms.interface.filter.no-filter-definitions' : '@general:terms.interface.filter.placeholder') | translate | async\"\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 class=\"axp-query-filters__chip\" [class.axp-query-filters__chip--active]=\"item.id === activeChipId()\" [class.axp-query-filters__chip--search]=\"item.field === 'all'\" (click)=\"handleTagClick(item, $event)\">\n      <!-- ----- Quick search chip keeps a single text label ----- -->\n      @if (item.chipMode === 'search') {\n        <span class=\"axp-query-filters__chip-text\">{{ item.query }}</span>\n      } @else if (item.chipMode === 'summary') {\n        <!-- ----- Summary chip when more than two conditions ----- -->\n        @if (item.titleLabel) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}:</span>\n        }\n        <span class=\"axp-query-filters__chip-text\">{{ item.summaryText }}</span>\n      } @else {\n        <!-- ----- One or two conditions: field + operator + quoted value ----- -->\n        @if (item.titleLabel && !item.mixed) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}</span>\n        }\n        @for (cond of item.chipConditions; track $index) {\n          <!--->\n          <!-- ----- Logic connector between conditions ----- -->\n          @if ($index > 0) {\n            <span class=\"axp-query-filters__chip-logic\">{{ item.logicLabel }}</span>\n          }\n          <!--->\n          <!-- ----- Field title on mixed-field chips ----- -->\n          @if (item.mixed && cond.title) {\n            <span class=\"axp-query-filters__chip-title\">{{ cond.title }}</span>\n          }\n          <span class=\"axp-query-filters__chip-operator\">{{ cond.operator }}</span>\n          <!--->\n          <!-- ----- Quoted value badge when the operator has a display value ----- -->\n          @if (cond.value) {\n            <span class=\"axp-query-filters__chip-value\">'{{ cond.value }}'</span>\n          }\n        }\n      }\n      @if (!item.readOnly) {\n        <button class=\"axp-query-filters__chip-remove\" (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 [offsetY]=\"activeFilter() ? -30 : 0\" [openOn]=\"'toggle'\" (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\" [adaptivityEnabled]=\"true\" #popover>\n  <div class=\"axp-query-filters__popover md:min-w-72 w-full rounded-md md:max-h-[min(32rem,80vh)] lg:w-[520px] md:overflow-auto\">\n    <axp-widgets-container #widgetsContainer [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"axp-query-filters__editor-header border-b border-border-light px-4 py-2\">\n            <div class=\"flex min-w-0 items-center gap-2 font-semibold\">\n              <!--->\n              <!-- ----- Field icon when the group is a single field ----- -->\n              @if (!isMixedEditingGroup() && activeFilter()?.icon) {\n                <ax-icon class=\"w-5 shrink-0\" [class]=\"'fa-light ' + activeFilter()!.icon\"></ax-icon>\n              }\n              <span class=\"min-w-0 truncate\">\n                {{ isMixedEditingGroup() ? ('@general:terms.interface.filter.filter-group' | translate | async) : ('@general:terms.interface.filter.filter-on' | translate: { params: { title: activeFilterTitle() } } | async) }}\n              </span>\n            </div>\n            <!--->\n            <!-- ----- Condition logic AND/OR stays on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <ax-button-group class=\"axp-query-filters__logic-toggle ax-sm shrink-0\" [selection]=\"'single'\" [look]=\"'outline'\" [color]=\"'primary'\">\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-and-all' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'and'\" (onClick)=\"setEditingLogic('and')\"></ax-button-group-item>\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-or-any' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'or'\" (onClick)=\"setEditingLogic('or')\"></ax-button-group-item>\n              </ax-button-group>\n            }\n          </ax-header>\n          <ax-content class=\"p-4\">\n            @for (condition of editingConditions(); track condition.id; let i = $index) {\n              <!--->\n              <!-- ----- Numbered condition row with the field widget ----- -->\n              @if (i > 0 && !deviceService.isSmall()) {\n                <div class=\"axp-query-filters__logic-split\">\n                  <span class=\"axp-query-filters__logic-split-label\">{{ (editingLogic() === 'or' ? '@general:terms.interface.filter.chip-logic-or' : '@general:terms.interface.filter.chip-logic-and') | translate | async }}</span>\n                </div>\n              }\n              <div class=\"axp-query-filters__condition\">\n                <div class=\"axp-query-filters__condition-head\">\n                  <div class=\"axp-query-filters__condition-heading\">\n                    <!--->\n                    <!-- ----- Field picker for mixed-field groups in advanced mode ----- -->\n                    @if (isAdvanced()) {\n                      <ax-dropdown-button class=\"ax-sm\" [text]=\"(getConditionDefinition(condition.field)?.title | translate | async) ?? ''\" [mode]=\"'dropdown'\" [look]=\"'outline'\">\n                        <ax-button-item-list>\n                          @for (def of advancedFieldOptions(); track def.field) {\n                            <ax-button-item [text]=\"(def.title | translate | async) ?? ''\" [selected]=\"condition.field === def.field\" [disabled]=\"isFilterDisabled(def)\" (onClick)=\"setConditionField(condition.id, def.field ?? '')\"></ax-button-item>\n                          }\n                        </ax-button-item-list>\n                      </ax-dropdown-button>\n                    }\n                    <!--->\n                    <!-- ----- Active operator for this condition ----- -->\n                    @if (getConditionOperatorKey(condition.id); as operatorKey) {\n                      <ax-badge [text]=\"(operatorKey | translate | async) || ''\"></ax-badge>\n                    }\n                  </div>\n                  <button type=\"button\" class=\"axp-query-filters__condition-remove\" (click)=\"handleRemoveCondition(condition.id)\">\n                    <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n                  </button>\n                </div>\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"{\n                    type: getConditionWidget(condition)?.type || 'text-editor',\n                    path: resolveEditingConditionContextField(condition.id),\n                    options: $safeNavigationMigration(getConditionWidget(condition)?.options),\n                  }\"\n                  [mode]=\"'edit'\"\n                ></ng-container>\n              </div>\n            }\n            <!--->\n            <!-- ----- Extra conditions stay on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <button type=\"button\" class=\"axp-query-filters__add-condition\" (click)=\"handleAddCondition()\">\n                <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n                <span>{{ (isAdvanced() ? '@general:terms.interface.filter.add-condition-generic' : '@general:terms.interface.filter.add-condition') | translate: { params: { title: activeFilterTitle() } } | async }}</span>\n              </button>\n            }\n          </ax-content>\n          <ax-footer class=\"border-t flex justify-end gap-2 border-border-light w-full px-4 py-2\">\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" [text]=\"'@general:actions.cancel.title' | translate | async\" (onClick)=\"handleCancelFilter()\"></ax-button>\n            <ax-button class=\"ax-sm\" [color]=\"'primary'\" [disabled]=\"!canApplyFilter()\" [text]=\"'@general:terms.interface.filter.apply-filter' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <!-- ----- Field picker when no filter is being edited ----- -->\n        <div class=\"flex flex-col lightest-surface\">\n          <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items border-none\">\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\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-center gap-2\">\n                <ax-icon class=\"axp-query-filters__field-icon\" [ngClass]=\"'fa-light ' + field.icon\"></ax-icon>\n                <span class=\"leading-none\">{{ field.title | translate | async }}</span>\n              </div>\n            </div>\n          }\n        </div>\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{display:block;width:100%;min-width:0px;overflow:hidden}axp-query-filters>.flex{min-width:0px;flex-wrap:nowrap}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container,axp-query-filters ax-tag-box .ax-editor-container{display:flex;width:100%;min-width:0px;flex-wrap:nowrap;align-items:center;background-color:transparent;min-height:2.25rem}axp-query-filters ax-tag-box .ax-tags-container{display:flex;flex:1 1 0%;min-width:0;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}axp-query-filters>.flex>ax-button button{min-height:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding-block:0}.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container{scrollbar-width:none;-ms-overflow-style:none}:is(.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container)::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__chips{min-width:0px;cursor:grab;overflow-x:auto;overflow-y:hidden}.axp-query-filters__chips.axp-query-filters__chips--panning,.axp-query-filters__chips.axp-query-filters__chips--panning *{cursor:grabbing;-webkit-user-select:none;user-select:none}.axp-query-filters__chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block: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)));white-space:nowrap}.axp-query-filters__chip:hover{background-color:rgba(var(--ax-sys-color-darkest-surface))}.axp-query-filters__chip--search,.axp-query-filters__chip--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}:is(.axp-query-filters__chip--search,.axp-query-filters__chip--active):hover{background-color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__chip-title{flex-shrink:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip-text,.axp-query-filters__chip-operator{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__chip-logic{flex-shrink:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__chip--active .axp-query-filters__chip-logic,.axp-query-filters__chip--search .axp-query-filters__chip-logic{color:var(--color-white, #fff)}.axp-query-filters__chip-value{display:inline-flex;max-width:12rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:.25rem;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in srgb,#fff 20%,transparent);color:var(--color-white, #fff)}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in oklab,var(--color-white, #fff) 20%,transparent)}}.axp-query-filters__chip-remove{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;opacity:70%}.axp-query-filters__chip-remove:hover{opacity:100%}.axp-query-filters__mode-toggle{flex:0 0 auto;max-width:6rem;overflow:visible;transition:max-width .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed{max-width:0;pointer-events:none}.axp-query-filters__mode-toggle-inner{position:relative;z-index:10;margin-inline-start:var(--spacing, .25rem);display:inline-flex;border-radius:calc(infinity * 1px);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);border-color:rgba(var(--ax-sys-color-light-surface));--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);width:max-content;transform:translate(0);transition:transform .32s cubic-bezier(.32,.72,0,1),margin .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{margin-inline-start:0;transform:translate(5rem)}[dir=rtl] .axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{transform:translate(-5rem)}.axp-query-filters__mode-toggle-btn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));width:1.875rem;height:1.625rem}.axp-query-filters__mode-toggle-btn:first-child{border-start-start-radius:calc(infinity * 1px);border-end-start-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn:last-child{border-start-end-radius:calc(infinity * 1px);border-end-end-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__mode-toggle-btn:disabled:not(.axp-query-filters__mode-toggle-btn--active){cursor:not-allowed;opacity:40%}.axp-query-filters__mobile-search{min-width:0px;flex:1}.axp-query-filters__mobile-search ax-search-box,.axp-query-filters__mobile-search ax-search-box .ax-editor,.axp-query-filters__mobile-search ax-search-box .ax-editor-container,.axp-query-filters__mobile-search ax-search-box .editor-container{min-height:1.875rem;height:1.875rem}.axp-query-filters__mobile-search ax-search-box input{min-height:1.875rem;height:1.875rem;font-size:.8125rem;line-height:1.125rem}.axp-query-filters__mobile-row{display:flex;min-width:0px;flex:1;flex-wrap:nowrap;align-items:center;gap:var(--spacing, .25rem);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.axp-query-filters__mobile-row::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__mobile-chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);border-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block: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)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap}.axp-query-filters__mobile-chip--available{cursor:pointer;background-color:transparent}.axp-query-filters__mobile-chip--disabled{cursor:not-allowed;opacity:50%}.axp-query-filters__mobile-chip--applied{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:transparent;color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__mobile-chip-text{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__mobile-chip-caret{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}.axp-query-filters__editor-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-query-filters__logic-toggle ax-button-group-item.ax-state-selected ax-button button,.axp-query-filters__logic-toggle ax-button button.ax-state-selected{background-image:none;box-shadow:none;background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__logic-toggle ax-button>button{min-height:2rem;height:2rem;padding-inline:.5rem;padding-block:0;font-size:.8125rem;line-height:1.125rem;font-weight:600}@media(max-width:600px){axp-query-filters{overflow:hidden}axp-query-filters>.flex{gap:.5rem;padding-block:0;padding-inline:.125rem;overflow:hidden}axp-query-filters>.flex.axp-query-filters__bar--toggle-collapsed{gap:0}.axp-query-filters__logic-toggle{flex-wrap:nowrap}.axp-query-filters__chip{gap:.375rem;padding-inline:.625rem;padding-block:.25rem;font-size:.8125rem}.axp-query-filters__chip-value{max-width:none;font-size:.8125rem}}.axp-query-filters__condition{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-heading{display:flex;min-width:0px;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-title{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-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-text-default));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-title{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-remove{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove:hover{color:rgba(var(--ax-sys-color-danger-surface))}.axp-query-filters__logic-split{position:relative;margin-block:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:center}.axp-query-filters__logic-split:before,.axp-query-filters__logic-split:after{content:\"\";height:1px;flex:1;background-color:rgba(var(--ax-sys-color-border-light-surface))}.axp-query-filters__logic-split-label{margin-inline:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__add-condition{margin-top:calc(var(--spacing, .25rem) * 3);display:inline-flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);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);color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__add-condition:hover{text-decoration-line:underline}.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}.axp-query-filters__field-icon{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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;}@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-font-weight: initial;--tw-leading: initial;--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;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "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: AXButtonGroupModule }, { kind: "component", type: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i4$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { 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: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { 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", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i9.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: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i11.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i11.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,
@@ -8704,7 +8894,8 @@ class AXPPropertyViewerComponent {
             this.context.set(event.data);
             const isHydration = event.state === 'initiated' ||
                 event.state === 'restored' ||
-                event.origin === 'system';
+                event.origin === 'system' ||
+                event.origin === 'hydrate';
             this.onChanged.emit({
                 values: this.context(),
                 mode: isHydration ? 'init' : 'update',
@@ -9197,6 +9388,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
+/**
+ * Fixed virtual-scroll row. The lookup paints a "loading" placeholder for any
+ * index that is still a hole, so this must match the option template exactly.
+ */
+const ITEM_CONFIGURATOR_OPTION_HEIGHT = 56;
+/** One page covers the whole catalog so search/reopen never leaves unloaded holes. */
+const ITEM_CONFIGURATOR_PAGE_SIZE = 500;
+const ITEM_CONFIGURATOR_FALLBACK_ICON = 'fa-light fa-puzzle-piece';
 //#endregion
 //#region ----   Component   ----
 /**
@@ -9204,6 +9403,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Bound state: {@link selectedItemId} and {@link values} (context returned from the viewer). Not tied to {@link AXPWidgetNode}.
  */
 class AXPItemConfiguratorComponent {
+    /**
+     * Visible order follows the translated title. Sorting the raw `@scope:key`
+     * puts the list in key order (PPE, Test Sheet, Address, …).
+     */
+    async rowsInDisplayOrder() {
+        const locale = this.translationService.getActiveLang();
+        const labeled = await Promise.all(this.availableItems().map(async (row) => ({
+            row,
+            label: await this.displayLabel(row.title),
+        })));
+        labeled.sort((a, b) => a.label.localeCompare(b.label, locale, { sensitivity: 'base' }));
+        return labeled.map((entry) => entry.row);
+    }
+    async filterRows(rows, needle) {
+        const locale = this.translationService.getActiveLang();
+        const matched = [];
+        for (const row of rows) {
+            const title = (await this.displayLabel(row.title)).toLocaleLowerCase(locale);
+            const description = (await this.displayLabel(row.description)).toLocaleLowerCase(locale);
+            if (title.includes(needle) || description.includes(needle)) {
+                matched.push(row);
+            }
+        }
+        return matched;
+    }
+    async displayLabel(value) {
+        if (value == null || value === '') {
+            return '';
+        }
+        const translated = await this.translationService.translateAsync(value);
+        return translated.trim();
+    }
     enterEditMode() {
         if (this.readonly()) {
             return;
@@ -9226,6 +9457,12 @@ class AXPItemConfiguratorComponent {
         /** Values edited in the property viewer (merged from dialog result). */
         this.values = model({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+        /**
+         * Property-viewer fields whose path is the widget node root (`defaultValue`, `triggers`, …),
+         * not `options.*`. The options bag alone drops them on save.
+         */
+        this.nodeFields = model({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeFields" }] : /* istanbul ignore next */ []));
         this.label = input('@general:terms.widget', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.readonly = input(false, /* @ts-ignore */
@@ -9251,17 +9488,17 @@ class AXPItemConfiguratorComponent {
                 if (!id) {
                     continue;
                 }
-                const title = resolveSearchableText(row.title, locale, this.translationService).trim() || id;
+                const sortText = resolveSearchableText(row.title, locale, this.translationService).trim() || id;
                 list.push({
                     value: id,
-                    text: title,
+                    text: typeof row.title === 'string' ? row.title : sortText,
+                    title: row.title,
                     icon: row.icon,
-                    description: row.description != null
-                        ? resolveSearchableText(row.description, locale, this.translationService)
-                        : undefined,
+                    description: row.description,
+                    sortText,
                 });
             }
-            return list.sort((a, b) => compareMultiLanguageStrings(a.text, b.text, locale));
+            return list.sort((a, b) => compareMultiLanguageStrings(a.sortText, b.sortText, locale));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "availableItems" }] : /* istanbul ignore next */ []));
         this.selectedListItem = computed(() => {
@@ -9317,8 +9554,41 @@ 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.optionRowHeight = ITEM_CONFIGURATOR_OPTION_HEIGHT;
+        this.optionMaxVisibleRows = 8;
+        this.fallbackIcon = ITEM_CONFIGURATOR_FALLBACK_ICON;
+        /**
+         * Owned datasource (not a raw array). The lookup wraps arrays at page size 20;
+         * after a search the virtual list keeps a scroll offset into unloaded pages and
+         * stays on the loading placeholder. One page fills every row.
+         */
+        this.itemDataSource = new AXDataSource({
+            key: 'value',
+            pageSize: ITEM_CONFIGURATOR_PAGE_SIZE,
+            load: async (query) => {
+                const rows = await this.rowsInDisplayOrder();
+                const needle = readLookupFilterText(query.filter);
+                const matched = needle ? await this.filterRows(rows, needle) : rows;
+                const skip = query.skip ?? 0;
+                const take = query.take ?? matched.length;
+                return {
+                    items: matched.slice(skip, skip + take),
+                    total: matched.length,
+                };
+            },
+            byKey: (key) => this.availableItems().find((row) => row.value == key) ?? {
+                value: String(key ?? ''),
+                text: String(key ?? ''),
+                title: String(key ?? ''),
+                sortText: String(key ?? ''),
+            },
+        });
         this.itemLookup = viewChild(AXLookupComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemLookup" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.availableItems();
+            untracked(() => this.itemDataSource.refresh());
+        });
         effect(() => {
             if (!this.isEditMode()) {
                 return;
@@ -9369,9 +9639,11 @@ class AXPItemConfiguratorComponent {
         if (tabs.length === 0) {
             return;
         }
-        // Property definitions use paths like `options` / `options.*`; viewer context must nest the
-        // widget options bag under `options`, not at the root (same as widget-property-viewer).
+        // Property definitions use paths like `options` / `options.*` and also node-root paths
+        // (`defaultValue`, `triggers`). Viewer context must nest the options bag under `options`
+        // and keep those root fields beside it (same as widget-property-viewer).
         const context = buildPropertyViewerInitialContextFromProperties(defs, {
+            ...cloneDeep(this.nodeFields()),
             options: cloneDeep(this.values()),
         });
         const rawTitle = this.currentItemConfig()?.title?.trim() || this.selectedItemId().trim();
@@ -9383,6 +9655,7 @@ class AXPItemConfiguratorComponent {
             params: { name: nameForDialog || '—' },
         })) || `Configure ${nameForDialog || '—'}`;
         const valuesSnapshot = cloneDeep(this.values());
+        const nodeFieldsSnapshot = cloneDeep(this.nodeFields());
         const result = (await this.propertyViewerService
             .create()
             .dialog((d) => {
@@ -9396,17 +9669,16 @@ class AXPItemConfiguratorComponent {
                 if (event.mode !== 'update' || !event.values || typeof event.values !== 'object') {
                     return;
                 }
-                const optsPatch = extractOptionsPatchFromPropertyViewerValues(event.values);
-                this.values.set(mergeObjectsReplacingArrays(valuesSnapshot, optsPatch));
+                this.applyPropertyViewerValues(valuesSnapshot, event.values);
             });
         })
             .show());
         if (result?.values && typeof result.values === 'object') {
-            const optsPatch = extractOptionsPatchFromPropertyViewerValues(result.values);
-            this.values.set(mergeObjectsReplacingArrays(valuesSnapshot, optsPatch));
+            this.applyPropertyViewerValues(valuesSnapshot, result.values);
             return;
         }
         this.values.set(cloneDeep(valuesSnapshot));
+        this.nodeFields.set(cloneDeep(nodeFieldsSnapshot));
     }
     onHeaderActionClick(action) {
         if (this.readonly() || this.isHeaderActionDisabled(action)) {
@@ -9423,8 +9695,13 @@ class AXPItemConfiguratorComponent {
     isHeaderActionDisabled(action) {
         return action.disabled === true;
     }
+    applyPropertyViewerValues(optionsSnapshot, viewerValues) {
+        const optsPatch = extractOptionsPatchFromPropertyViewerValues(viewerValues);
+        this.values.set(mergeObjectsReplacingArrays(optionsSnapshot, optsPatch));
+        this.nodeFields.set(extractWidgetNodeFields(viewerValues));
+    }
     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: "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", "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", "highlightSearch", "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 }); }
+    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 }, nodeFields: { classPropertyName: "nodeFields", publicName: "nodeFields", 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", nodeFields: "nodeFieldsChange" }, 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]=\"itemDataSource\"\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        [loadingTemplate]=\"loadingTemplate\"\n        [itemHeight]=\"optionRowHeight\"\n        [maxVisibleItems]=\"optionMaxVisibleRows\"\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              <ax-icon [icon]=\"config.icon\"></ax-icon>\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    @let title = (item.title | translate | async) ?? '';\n    @let description = (item.description | translate | async) ?? '';\n    <div class=\"axp-item-configurator-option\">\n      <ax-icon [icon]=\"item.icon || fallbackIcon\"></ax-icon>\n      <div class=\"axp-item-configurator-option__text\">\n        <span class=\"axp-item-configurator-option__title\">\n          {{ title }}\n        </span>\n        <!-- ----- One-line description under the title ----- -->\n        @if (item.description) {\n          <span class=\"axp-item-configurator-option__description\">\n            {{ description }}\n          </span>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #loadingTemplate>\n    <div class=\"axp-item-configurator-option axp-item-configurator-option--loading\">\n      <span class=\"axp-item-configurator-option__icon-slot\"></span>\n      <span class=\"axp-item-configurator-option__bar\"></span>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.icon) {\n        <ax-icon [icon]=\"item.icon\"></ax-icon>\n      }\n      <span>\n        {{ (item?.title | 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 ax-icon{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;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)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);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 .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>ax-icon{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}.ax-lookup-viewport:has(.axp-item-configurator-option){min-height:224px;overflow-y:scroll;scrollbar-gutter:stable}.ax-lookup-option-host:has(.axp-item-configurator-option){overflow:hidden}.axp-item-configurator-option{box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;height:100%;min-width:0;overflow:hidden;padding-inline:.75rem}.axp-item-configurator-option>ax-icon{flex-shrink:0;width:1.125rem;font-size:1rem;line-height:1;text-align:center}.axp-item-configurator-option__text{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center;gap:.125rem;line-height:1.25}.axp-item-configurator-option__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500;line-height:1.25}.axp-item-configurator-option__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));font-size:.75rem;line-height:1.25}.axp-item-configurator-option--loading{gap:.5rem}.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{display:block;border-radius:.25rem;background:currentColor}@supports (color: color-mix(in lab,red,red)){.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{background:color-mix(in srgb,currentColor 12%,transparent)}}.axp-item-configurator-option__icon-slot{width:1rem;height:1rem;flex-shrink:0}.axp-item-configurator-option__bar{height:.5rem;width:40%}@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", "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", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], 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,
@@ -9436,8 +9713,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXLookupComponent,
                         AXDecoratorModule,
                         AXTranslationModule,
-                    ], 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 }] }] } });
+                    ], 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]=\"itemDataSource\"\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        [loadingTemplate]=\"loadingTemplate\"\n        [itemHeight]=\"optionRowHeight\"\n        [maxVisibleItems]=\"optionMaxVisibleRows\"\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              <ax-icon [icon]=\"config.icon\"></ax-icon>\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    @let title = (item.title | translate | async) ?? '';\n    @let description = (item.description | translate | async) ?? '';\n    <div class=\"axp-item-configurator-option\">\n      <ax-icon [icon]=\"item.icon || fallbackIcon\"></ax-icon>\n      <div class=\"axp-item-configurator-option__text\">\n        <span class=\"axp-item-configurator-option__title\">\n          {{ title }}\n        </span>\n        <!-- ----- One-line description under the title ----- -->\n        @if (item.description) {\n          <span class=\"axp-item-configurator-option__description\">\n            {{ description }}\n          </span>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #loadingTemplate>\n    <div class=\"axp-item-configurator-option axp-item-configurator-option--loading\">\n      <span class=\"axp-item-configurator-option__icon-slot\"></span>\n      <span class=\"axp-item-configurator-option__bar\"></span>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.icon) {\n        <ax-icon [icon]=\"item.icon\"></ax-icon>\n      }\n      <span>\n        {{ (item?.title | 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 ax-icon{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;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)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);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 .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>ax-icon{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}.ax-lookup-viewport:has(.axp-item-configurator-option){min-height:224px;overflow-y:scroll;scrollbar-gutter:stable}.ax-lookup-option-host:has(.axp-item-configurator-option){overflow:hidden}.axp-item-configurator-option{box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;height:100%;min-width:0;overflow:hidden;padding-inline:.75rem}.axp-item-configurator-option>ax-icon{flex-shrink:0;width:1.125rem;font-size:1rem;line-height:1;text-align:center}.axp-item-configurator-option__text{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center;gap:.125rem;line-height:1.25}.axp-item-configurator-option__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500;line-height:1.25}.axp-item-configurator-option__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));font-size:.75rem;line-height:1.25}.axp-item-configurator-option--loading{gap:.5rem}.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{display:block;border-radius:.25rem;background:currentColor}@supports (color: color-mix(in lab,red,red)){.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{background:color-mix(in srgb,currentColor 12%,transparent)}}.axp-item-configurator-option__icon-slot{width:1rem;height:1rem;flex-shrink:0}.axp-item-configurator-option__bar{height:.5rem;width:40%}@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"] }], nodeFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeFields", required: false }] }, { type: i0.Output, args: ["nodeFieldsChange"] }], 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) {
@@ -9457,6 +9734,35 @@ function extractOptionsPatchFromPropertyViewerValues(values) {
     }
     return values;
 }
+/** Widget-node fields configured beside `options` (path is the node root, not `options.*`). */
+const WIDGET_NODE_FIELD_KEYS$1 = ['defaultValue', 'triggers', 'name', 'path', 'visible', 'mode', 'meta', 'valueTransforms'];
+function extractWidgetNodeFields(values) {
+    const out = {};
+    for (const key of WIDGET_NODE_FIELD_KEYS$1) {
+        if (key in values) {
+            out[key] = values[key];
+        }
+    }
+    return out;
+}
+function readLookupFilterText(filter) {
+    if (!filter || typeof filter !== 'object') {
+        return '';
+    }
+    const candidate = filter;
+    if (candidate.operator?.type === 'contains' && candidate.value != null) {
+        return String(candidate.value).trim().toLocaleLowerCase();
+    }
+    if (Array.isArray(candidate.filters)) {
+        for (const nested of candidate.filters) {
+            const text = readLookupFilterText(nested);
+            if (text) {
+                return text;
+            }
+        }
+    }
+    return '';
+}
 
 //#region ----- Imports -----
 //#endregion
@@ -15142,6 +15448,7 @@ class AXPUserAvatarComponent {
         this.sessionService = inject(AXPSessionService);
         this.fileStorage = inject(AXPFileStorageService);
         this.presenceService = inject(AXPUserPresenceService, { optional: true });
+        this.userStatus = inject(AXPUserStatusFeatureService);
         this.resolveGeneration = 0;
         this.lastResolvedRef = null;
         this.userInfo = signal(null, /* @ts-ignore */
@@ -15189,13 +15496,14 @@ class AXPUserAvatarComponent {
         ...(ngDevMode ? [{ debugName: "isAway" }] : /* istanbul ignore next */ []));
         this.isBusy = computed(() => this.presenceStatus() === 'busy', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
-        this.showPresenceDot = computed(() => this.showPresence() &&
+        this.showPresenceDot = computed(() => this.userStatus.enabled() &&
+            this.showPresence() &&
             isWatchablePresenceUserId(String(this.userId() ?? '')) &&
             this.presenceStatus() !== null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showPresenceDot" }] : /* istanbul ignore next */ []));
         effect((onCleanup) => {
             const id = String(this.userId() ?? '').trim();
-            const showPresence = this.showPresence();
+            const showPresence = this.showPresence() && this.userStatus.enabled();
             void this.displayName();
             void this.displayAvatar();
             if (!id) {
@@ -15461,6 +15769,7 @@ class AXPUserCardComponent {
         //#region ----- Services & Dependencies -----
         this.avatarService = inject(AXPUserAvatarService);
         this.presenceService = inject(AXPUserPresenceService, { optional: true });
+        this.userStatus = inject(AXPUserStatusFeatureService);
         this.formatService = inject(AXFormatService);
         this.settingsService = inject(AXPSettingsService);
         this.translation = inject(AXTranslationService);
@@ -15517,7 +15826,7 @@ class AXPUserCardComponent {
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "presenceLabelKey" }] : /* istanbul ignore next */ []));
-        this.showPresence = computed(() => isWatchablePresenceUserId(this.userId()), /* @ts-ignore */
+        this.showPresence = computed(() => this.userStatus.enabled() && isWatchablePresenceUserId(this.userId()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showPresence" }] : /* istanbul ignore next */ []));
         this.tooltipDisabled = computed(() => !this.tooltipText(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tooltipDisabled" }] : /* istanbul ignore next */ []));
@@ -15545,7 +15854,7 @@ class AXPUserCardComponent {
         this.subscriptions.add(this.avatarService.getUserInfo$(userId).subscribe((data) => {
             this.identity.set(data);
         }));
-        if (this.presenceService && isWatchablePresenceUserId(userId)) {
+        if (this.userStatus.enabled() && this.presenceService && isWatchablePresenceUserId(userId)) {
             this.presenceService.watch(userId);
             this.watchedUserId = userId;
             this.presence.set(this.presenceService.get(userId) ?? { userId, status: 'offline' });
@@ -16432,6 +16741,9 @@ class AXPWidgetFieldConfiguratorComponent {
         ...(ngDevMode ? [{ debugName: "selectedItemIdModel" }] : /* istanbul ignore next */ []));
         this.valuesModel = model({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valuesModel" }] : /* istanbul ignore next */ []));
+        /** Node-root fields (`defaultValue`, `triggers`, …) kept beside `options`. */
+        this.nodeFieldsModel = model({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeFieldsModel" }] : /* istanbul ignore next */ []));
         /**
          * List entries from {@link AXPWidgetRegistryService} (form editors), with
          * {@link ItemConfiguratorListItem.propertyDefinitions} from each registered config.
@@ -16481,18 +16793,22 @@ class AXPWidgetFieldConfiguratorComponent {
             const w = this.widget();
             const sid = w?.type ?? '';
             const opts = (w?.options ?? {});
+            const nodeFields = readWidgetNodeFields(w);
             const curSid = untracked(() => this.selectedItemIdModel());
             const curVals = untracked(() => this.valuesModel());
-            if (sid !== curSid || !isEqual(opts, curVals)) {
+            const curNodeFields = untracked(() => this.nodeFieldsModel());
+            if (sid !== curSid || !isEqual(opts, curVals) || !isEqual(nodeFields, curNodeFields)) {
                 untracked(() => {
                     this.selectedItemIdModel.set(sid);
                     this.valuesModel.set(opts);
+                    this.nodeFieldsModel.set(nodeFields);
                 });
             }
         });
         effect(() => {
             const sid = this.selectedItemIdModel();
             const vals = this.valuesModel();
+            const nodeFields = this.nodeFieldsModel();
             const current = untracked(() => this.widget());
             const empty = { type: '', options: {} };
             if (!sid) {
@@ -16501,27 +16817,28 @@ class AXPWidgetFieldConfiguratorComponent {
                 }
                 return;
             }
-            const next = {
+            const next = applyWidgetNodeFields({
                 ...(current && typeof current === 'object' ? current : {}),
                 type: sid,
                 options: vals,
-            };
+            }, nodeFields);
             if (!isEqual(next, current)) {
                 untracked(() => this.widget.set(next));
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetFieldConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPWidgetFieldConfiguratorComponent, isStandalone: true, selector: "axp-widget-field-configurator", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, fieldTitle: { classPropertyName: "fieldTitle", publicName: "fieldTitle", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectedItemIdModel: { classPropertyName: "selectedItemIdModel", publicName: "selectedItemIdModel", isSignal: true, isRequired: false, transformFunction: null }, valuesModel: { classPropertyName: "valuesModel", publicName: "valuesModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { widget: "widgetChange", selectedItemIdModel: "selectedItemIdModelChange", valuesModel: "valuesModelChange" }, host: { properties: { "attr.readonly": "readonly() ? \"\" : null" }, classAttribute: "flex flex-col" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPWidgetFieldConfiguratorComponent, isStandalone: true, selector: "axp-widget-field-configurator", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, fieldTitle: { classPropertyName: "fieldTitle", publicName: "fieldTitle", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectedItemIdModel: { classPropertyName: "selectedItemIdModel", publicName: "selectedItemIdModel", isSignal: true, isRequired: false, transformFunction: null }, valuesModel: { classPropertyName: "valuesModel", publicName: "valuesModel", isSignal: true, isRequired: false, transformFunction: null }, nodeFieldsModel: { classPropertyName: "nodeFieldsModel", publicName: "nodeFieldsModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { widget: "widgetChange", selectedItemIdModel: "selectedItemIdModelChange", valuesModel: "valuesModelChange", nodeFieldsModel: "nodeFieldsModelChange" }, host: { properties: { "attr.readonly": "readonly() ? \"\" : null" }, classAttribute: "flex flex-col" }, ngImport: i0, template: `
         <axp-item-configurator
             [(selectedItemId)]="selectedItemIdModel"
             [(values)]="valuesModel"
+            [(nodeFields)]="nodeFieldsModel"
             [label]="label()"
             [readonly]="readonly()"
             [items]="configuratorItems()"
             [headerActions]="previewHeaderActions()"
         />
-    `, isInline: true, styles: [":host([readonly]){pointer-events:none;opacity:.7}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPItemConfiguratorComponent, selector: "axp-item-configurator", inputs: ["selectedItemId", "values", "label", "readonly", "items", "headerActions"], outputs: ["selectedItemIdChange", "valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [":host([readonly]){pointer-events:none;opacity:.7}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPItemConfiguratorComponent, selector: "axp-item-configurator", inputs: ["selectedItemId", "values", "nodeFields", "label", "readonly", "items", "headerActions"], outputs: ["selectedItemIdChange", "valuesChange", "nodeFieldsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetFieldConfiguratorComponent, decorators: [{
             type: Component,
@@ -16529,6 +16846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         <axp-item-configurator
             [(selectedItemId)]="selectedItemIdModel"
             [(values)]="valuesModel"
+            [(nodeFields)]="nodeFieldsModel"
             [label]="label()"
             [readonly]="readonly()"
             [items]="configuratorItems()"
@@ -16538,7 +16856,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         class: 'flex flex-col',
                         '[attr.readonly]': 'readonly() ? "" : null',
                     }, imports: [AXPItemConfiguratorComponent], styles: [":host([readonly]){pointer-events:none;opacity:.7}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: false }] }, { type: i0.Output, args: ["widgetChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], fieldTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldTitle", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectedItemIdModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemIdModel", required: false }] }, { type: i0.Output, args: ["selectedItemIdModelChange"] }], valuesModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuesModel", required: false }] }, { type: i0.Output, args: ["valuesModelChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: false }] }, { type: i0.Output, args: ["widgetChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], fieldTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldTitle", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectedItemIdModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemIdModel", required: false }] }, { type: i0.Output, args: ["selectedItemIdModelChange"] }], valuesModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuesModel", required: false }] }, { type: i0.Output, args: ["valuesModelChange"] }], nodeFieldsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeFieldsModel", required: false }] }, { type: i0.Output, args: ["nodeFieldsModelChange"] }] } });
+//#endregion
+//#region ----   Node-root fields   ----
+const WIDGET_NODE_FIELD_KEYS = ['defaultValue', 'triggers', 'name', 'path', 'visible', 'mode', 'meta', 'valueTransforms'];
+function readWidgetNodeFields(widget) {
+    const out = {};
+    if (!widget) {
+        return out;
+    }
+    for (const key of WIDGET_NODE_FIELD_KEYS) {
+        const value = widget[key];
+        if (value !== undefined) {
+            out[key] = value;
+        }
+    }
+    return out;
+}
+function applyWidgetNodeFields(widget, fields) {
+    const next = { ...widget };
+    for (const key of WIDGET_NODE_FIELD_KEYS) {
+        if (!(key in fields)) {
+            continue;
+        }
+        const value = fields[key];
+        const cleared = value === undefined || value === null || (key === 'defaultValue' && value === '');
+        if (cleared) {
+            delete next[key];
+            continue;
+        }
+        assignWidgetNodeField(next, key, value);
+    }
+    return next;
+}
+function assignWidgetNodeField(widget, key, value) {
+    switch (key) {
+        case 'defaultValue':
+            widget.defaultValue = value;
+            break;
+        case 'triggers':
+            widget.triggers = value;
+            break;
+        case 'name':
+            widget.name = value;
+            break;
+        case 'path':
+            widget.path = value;
+            break;
+        case 'visible':
+            widget.visible = value;
+            break;
+        case 'mode':
+            widget.mode = value;
+            break;
+        case 'meta':
+            widget.meta = value;
+            break;
+        case 'valueTransforms':
+            widget.valueTransforms = value;
+            break;
+    }
+}
 
 const WIDGET_ITEM_I18N = {
     pin: '@general:widgets.widget-item.pin',
@@ -16927,5 +17305,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorChooserComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPEntityListStylingDialogService, AXPEntityListStylingPopupComponent, AXPExpressionFieldDefinitions, AXPFileChooserCompressImagesHook, AXPFileChooserDirective, AXPFileChooserHookKeys, AXPFileChooserService, AXPFileChooserZipFilesHook, AXPFileUploaderDirective, AXPFileUploaderHookKeys, AXPFileUploaderService, AXPFileViewerComponent, AXPFileViewerFallbackContentComponent, AXPFileViewerService, AXPImageEditorPopupComponent, AXPImageEditorService, AXPInfiniteScrollDirective, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPLocalDataSourceEditorDialogService, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewSaveButtonComponent, AXPQueryViewSaveDialogService, AXPQueryViewTabsComponent, 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_IMAGE_FILE_CHOOSER_ACCEPT, AXP_INFINITE_SCROLL_DEFAULT_ROOT_MARGIN, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_PAGE_LAYOUT_ELEMENT_ID, AXP_PROFILE_PHOTO_GRAVATAR_SOURCE_KEY, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_SIGNATURE_PROVIDER, AXP_SPREADSHEET_COLUMN_WIDGET_TYPES, AXP_SYSTEM_FILE_CHOOSER_PROVIDER, AXP_SYSTEM_FILE_UPLOADER_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, PROPERTY_VIEWER_EXPRESSION_EDITOR_MIN_LINES, SPREADSHEET_COLUMN_NAME_PATH, SPREADSHEET_COLUMN_TITLE_PATH, STANDARD_SECTION_ITEMS_SECTION_TABS, USER_CARD_HOVER_OPEN_DELAY_MS, USER_CARD_ITEMS_HOOK, USER_CARD_ITEMS_SKELETON_DELAY_MS, asSpreadsheetColumnTitle, buildEntityListStylingRulesLayout, buildFileChooserOptions, buildGravatarAvatarUrl, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, compressImageFile, createAttachedFileProviderMenu, createZipArchive, fetchGravatarImageFile, fileListItemToFileViewerItem, fileListItemToImageFile, fileMatchesAccept, fileNameMatchesAccept, filterFileProvidersByContext, filterFilesByAcceptAndMaxSize, formatAcceptForDisplay, formatMaxFileSizeForDisplay, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, isUnrestrictedFileAccept, mapFileListToViewerItems, md5Hex, mergeInfiniteScrollPage, mergeObjectsReplacingArrays, normalizeFileViewerBoundValue, normalizeSpreadsheetColumnName, notifyFileAcceptRejections, observeInfiniteScroll, pickImageFileViaFileChooser, pickProfilePhotoImageFile, preparePropertyForViewer, preparePropertyViewerTabs, provideFileChooserHooks, readSpreadsheetColumnIdentity, readSpreadsheetColumnWidth, registerFieldDefinitions, resolveExcludedFileProviderKeys, resolveFileChooserAccept, resolveFileChooserExtension, resolveFileListItemUrl, resolveFileUploaderEmptyStateDescription, resolveInfiniteScrollRoot, sortUserCardActions, sortUserCardRows, spreadsheetColumnIdentityProperties, toSpreadsheetColumnWidget, validateFileChooserItems, visibleUserCardActions, withValidationsOnEditorNode };
+export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorChooserComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPEntityListStylingDialogService, AXPEntityListStylingPopupComponent, AXPExpressionFieldDefinitions, AXPFileChooserCompressImagesHook, AXPFileChooserDirective, AXPFileChooserHookKeys, AXPFileChooserService, AXPFileChooserZipFilesHook, AXPFileUploaderDirective, AXPFileUploaderHookKeys, AXPFileUploaderService, AXPFileViewerComponent, AXPFileViewerFallbackContentComponent, AXPFileViewerService, AXPImageEditorPopupComponent, AXPImageEditorService, AXPInfiniteScrollDirective, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPLocalDataSourceEditorDialogService, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewSaveButtonComponent, AXPQueryViewSaveDialogService, AXPQueryViewTabsComponent, 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_IMAGE_FILE_CHOOSER_ACCEPT, AXP_INFINITE_SCROLL_DEFAULT_ROOT_MARGIN, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_PAGE_LAYOUT_ELEMENT_ID, AXP_PROFILE_PHOTO_GRAVATAR_SOURCE_KEY, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_SIGNATURE_PROVIDER, AXP_SPREADSHEET_COLUMN_WIDGET_TYPES, AXP_SYSTEM_FILE_CHOOSER_PROVIDER, AXP_SYSTEM_FILE_UPLOADER_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, PROPERTY_VIEWER_EXPRESSION_EDITOR_MIN_LINES, SPREADSHEET_COLUMN_NAME_PATH, SPREADSHEET_COLUMN_TITLE_PATH, STANDARD_SECTION_ITEMS_SECTION_TABS, USER_CARD_HOVER_OPEN_DELAY_MS, USER_CARD_ITEMS_HOOK, USER_CARD_ITEMS_SKELETON_DELAY_MS, asSpreadsheetColumnTitle, buildEntityListStylingRulesLayout, buildFileChooserOptions, buildGravatarAvatarUrl, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, compressImageFile, createAttachedFileProviderMenu, createZipArchive, fetchGravatarImageFile, fileListItemToFileViewerItem, fileListItemToImageFile, fileMatchesAccept, fileNameMatchesAccept, filterFileProvidersByContext, filterFilesByAcceptAndMaxSize, formatAcceptForDisplay, formatMaxFileSizeForDisplay, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, isUnrestrictedFileAccept, mapFileListToViewerItems, md5Hex, mergeInfiniteScrollPage, mergeObjectsReplacingArrays, normalizeFileViewerBoundValue, normalizeSpreadsheetColumnName, notifyFileAcceptRejections, observeInfiniteScroll, pickImageFileViaFileChooser, pickProfilePhotoImageFile, preparePropertyForViewer, preparePropertyViewerTabs, provideFileChooserHooks, readSpreadsheetColumnIdentity, readSpreadsheetColumnWidth, registerFieldDefinitions, resolveChooserItemFile, resolveExcludedFileProviderKeys, resolveFileChooserAccept, resolveFileChooserExtension, resolveFileListItemUrl, resolveFileUploaderEmptyStateDescription, resolveInfiniteScrollRoot, sortUserCardActions, sortUserCardRows, spreadsheetColumnIdentityProperties, toSpreadsheetColumnWidget, validateFileChooserItems, visibleUserCardActions, withValidationsOnEditorNode };
 //# sourceMappingURL=acorex-platform-framework-client-layout-components.mjs.map