@acorex-platform/framework-client 2.0.0-next.10 → 2.0.0-next.11

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

@@ -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,
@@ -3511,7 +3511,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", "allowSelectAll", "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,
@@ -9498,7 +9498,7 @@ class AXPItemConfiguratorComponent {
         return action.disabled === true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "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"], 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 }, 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]=\"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,