@acorex/platform 21.0.0-next.83 → 21.0.0-next.88

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

@@ -10,7 +10,7 @@ import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i4 from '@acorex/core/format';
 import { AXFormatModule, AXFormatService } from '@acorex/core/format';
-import { getSystemActions, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPKeyboardShortcutPriority, compareMultiLanguageStrings, AXPDeviceService, AXPImageUrlLogoConfig, AXPComponentLogoConfig, AXPIconLogoConfig, containsHtmlMarkup, isFormValueEqual, AXPDataGenerator, extractTextFromHtml } from '@acorex/platform/core';
+import { getSystemActions, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPKeyboardShortcutPriority, compareMultiLanguageStrings, AXPDeviceService, AXPImageUrlLogoConfig, AXPComponentLogoConfig, AXPIconLogoConfig, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml } from '@acorex/platform/core';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXPLayoutRendererComponent, AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import * as i1 from '@angular/common';
@@ -49,7 +49,7 @@ import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i1$5 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
 import * as i3$3 from '@acorex/platform/layout/widget-core';
-import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetsCatalog, createBooleanProperty, AXPWidgetGroupEnum } from '@acorex/platform/layout/widget-core';
+import { AXPWidgetCoreModule, AXPWidgetRegistryService, createBooleanProperty, AXPWidgetGroupEnum } from '@acorex/platform/layout/widget-core';
 import * as i4$1 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
 import * as i3$4 from '@acorex/components/dropdown-button';
@@ -67,6 +67,7 @@ import * as i5$1 from '@acorex/components/tag-box';
 import { AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXCalendarService } from '@acorex/core/date-time';
 import { AXPFilterOperatorMiddlewareService, AXPSettingsService, ALL_DEFAULT_OPERATORS, AXPFileStorageService, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, AXP_PLATFORM_CONFIG_TOKEN } from '@acorex/platform/common';
+import { resolveEntityListFilterQueryField, resolveEntityListFilterContextField } from '@acorex/platform/layout/entity-contracts';
 import { Subject, filter, BehaviorSubject, timer, takeUntil } from 'rxjs';
 import * as i1$7 from '@acorex/components/image-editor';
 import { AXImageEditorContainerComponent, AXImageEditorModule } from '@acorex/components/image-editor';
@@ -89,8 +90,8 @@ import * as i1$8 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
 import { AXSchedulerComponent } from '@acorex/components/scheduler';
 import { AXSafePipe } from '@acorex/core/pipes';
+import { AXPDataGenerator, AXPWidgetsCatalog, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex/platform/contracts';
 import { tap } from 'rxjs/operators';
-import { AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex/platform/contracts';
 
 //#endregion
 //#region ----   Component Definition   ----
@@ -1769,6 +1770,8 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         }
     }
     async handleRowActionClick(event) {
+        event.nativeEvent.preventDefault();
+        event.nativeEvent.stopPropagation();
         const handler = this.config().rowActions;
         if (!handler || this.grid()?.dataSource.isLoading) {
             return;
@@ -2891,7 +2894,8 @@ class AXPQueryFiltersComponent {
                 !this.filterOperatorMiddleware
                     .transformFilters(this.selectedFilters())
                     .some((sf) => sf.field === f.field &&
-                    sf.operator?.type === (this.context()[sf.field]?.operation?.type || f.operator?.type)));
+                    sf.operator?.type ===
+                        (this.context()[this.resolveFilterContextField(sf)]?.operation?.type || f.operator?.type)));
         };
         this.getDisplayValue = async (filter, val) => {
             if (filter.widget?.type === 'document-file-type-filter') {
@@ -2972,12 +2976,14 @@ class AXPQueryFiltersComponent {
                 let convertedFilters = [];
                 // 2. Convert regular filters
                 otherFilters.forEach((f) => {
+                    const contextField = this.resolveFilterContextField(f);
+                    const operator = context[contextField]?.operation ?? f.operator;
                     convertedFilters.push({
-                        field: f.field,
-                        value: context[f.field]?.value ?? f.value, // Prefer context, fallback to filter value
+                        field: this.resolveFilterQueryField(f, operator),
+                        value: context[contextField]?.value ?? f.value,
                         hidden: f.hidden,
-                        operator: context[f.field]?.operation ?? f.operator,
-                        displayText: context[f.field]?.displayText,
+                        operator,
+                        displayText: context[contextField]?.displayText,
                     });
                 });
                 // 3. If "all" filter exists, create a nested filter with OR logic
@@ -2986,7 +2992,7 @@ class AXPQueryFiltersComponent {
                     const inlineFieldsFilters = this.filtersDefinitions()
                         .filter((f) => f.filterType.inline)
                         .map((f) => ({
-                        field: f.field,
+                        field: this.resolveFilterQueryField(f, { type: 'contains' }),
                         operator: { type: 'contains' },
                         value: allValue,
                     }));
@@ -3007,10 +3013,11 @@ class AXPQueryFiltersComponent {
                 const newContext = {};
                 // Add context for regular filters
                 otherFilters.forEach((f) => {
-                    newContext[f.field] = {
-                        value: context[f.field]?.value ?? f.value ?? context[f.field]?.value, // Prefer context, fallback to filter value
-                        operation: context[f.field]?.operation || f.operator,
-                        displayText: context[f.field]?.displayText ?? context[f.field]?.displayText,
+                    const contextField = this.resolveFilterContextField(f);
+                    newContext[contextField] = {
+                        value: context[contextField]?.value ?? f.value,
+                        operation: context[contextField]?.operation || f.operator,
+                        displayText: context[contextField]?.displayText,
                     };
                 });
                 // Add context for "all" filter
@@ -3053,8 +3060,9 @@ class AXPQueryFiltersComponent {
             const filters = this.selectedFilters();
             const context = this.context();
             Promise.all(filters.map(async (filter) => {
-                const val = context[filter.field]?.value;
-                const displayText = context[filter.field]?.displayText;
+                const contextField = this.resolveFilterContextField(filter);
+                const val = context[contextField]?.value;
+                const displayText = context[contextField]?.displayText;
                 const rawDisplay = displayText != null && displayText !== '' ? displayText : await this.getDisplayValue(filter, val);
                 const displayValue = this.formatFilterDisplayValue(rawDisplay);
                 return {
@@ -3196,6 +3204,17 @@ class AXPQueryFiltersComponent {
     convertQueriesToDefinitions(queries) {
         const definitions = this.filtersDefinitions();
         return queries.map((q) => {
+            if (q.field === 'all') {
+                return {
+                    field: 'all',
+                    title: 'All',
+                    operator: q.operator ?? { type: 'contains' },
+                    value: q.value,
+                    widget: { type: 'text-box' },
+                    filterType: { inline: true, advance: false },
+                    hidden: q.hidden,
+                };
+            }
             const definition = definitions.find((p) => p.field === q.field);
             const readOnly = q.readOnly === true;
             return {
@@ -3212,7 +3231,9 @@ class AXPQueryFiltersComponent {
     }
     convertQueriesToContext(queries) {
         return queries.reduce((acc, q) => {
-            acc[q.field] = { value: q.value, operation: q.operator, displayText: q.displayText };
+            const definition = this.filtersDefinitions().find((p) => p.field === q.field);
+            const contextField = this.resolveFilterContextField(definition ?? { field: q.field });
+            acc[contextField] = { value: q.value, operation: q.operator, displayText: q.displayText };
             return acc;
         }, {});
     }
@@ -3237,10 +3258,11 @@ class AXPQueryFiltersComponent {
         if (e.key === 'Enter') {
             this.handleSelectField(field);
             if (this.tagBoxInput && (field.widget.type === 'string-filter' || field.widget.type === 'number-filter')) {
+                const contextField = this.resolveFilterContextField(field);
                 this.context.update((prev) => {
                     return {
                         ...prev,
-                        [field.field]: {
+                        [contextField]: {
                             value: this.tagBoxInput?.value,
                             operation: { type: 'contains' },
                         },
@@ -3256,13 +3278,15 @@ class AXPQueryFiltersComponent {
         const reservedFitler = this.activeFilter();
         if (reservedFitler) {
             const { field } = reservedFitler;
+            const contextField = this.resolveFilterContextField(reservedFitler);
             const selectedFiltersFields = this.selectedFilters().map((f) => f.field);
             const context = this.context();
+            const appliedValue = context[contextField]?.value ?? context[contextField];
             if (selectedFiltersFields.includes(field)) {
-                this.selectedFilters.update((prev) => prev.map((f) => (f.field === field ? { ...f, value: context[field] } : f)));
+                this.selectedFilters.update((prev) => prev.map((f) => (f.field === field ? { ...f, value: appliedValue } : f)));
             }
             else {
-                this.selectedFilters.update((prev) => [...prev, reservedFitler]);
+                this.selectedFilters.update((prev) => [...prev, { ...reservedFitler, value: appliedValue }]);
             }
             this.activeFilter.set(null);
             this.popover()?.close();
@@ -3321,6 +3345,19 @@ class AXPQueryFiltersComponent {
      * When filter context entries change, notify `events.context` subscribers (same semantics as `widget-renderer`).
      */
     #emitFilterContextPathEffect;
+    /**
+     * Maps filter definition to the storage query field.
+     * Inline `contains` filters on lookup/select use `inlineQueryField` (display text path).
+     */
+    resolveFilterQueryField(filter, operator) {
+        return resolveEntityListFilterQueryField(filter, operator);
+    }
+    /**
+     * Flat context key for widget binding (avoids lodash nested paths when `field` contains dots).
+     */
+    resolveFilterContextField(filter) {
+        return resolveEntityListFilterContextField(filter);
+    }
     handleSelectFilters(e) {
         if (e.value?.length < this.selectedFilters().length) {
             const hiddenFilters = this.selectedFilters().filter((f) => f.hidden);
@@ -3357,7 +3394,7 @@ class AXPQueryFiltersComponent {
         if (!filter) {
             return undefined;
         }
-        const contextOperation = this.context()?.[filter.field]?.operation?.type;
+        const contextOperation = this.context()?.[this.resolveFilterContextField(filter)]?.operation?.type;
         const operatorType = contextOperation || filter.operator?.type;
         return ALL_DEFAULT_OPERATORS.find((o) => o.name === operatorType)?.title;
     }
@@ -3503,13 +3540,14 @@ class AXPQueryFiltersComponent {
     }
     getFilterWidgetScopeForDefinition(def) {
         const field = def.field;
+        const contextField = this.resolveFilterContextField(def);
         return {
             call: () => undefined,
             setValue: (...args) => {
                 const value = args[0];
                 this.context.update((prev) => ({
                     ...prev,
-                    [field]: { ...prev[field], value },
+                    [contextField]: { ...prev[contextField], value },
                 }));
             },
             clear: () => {
@@ -3537,7 +3575,7 @@ class AXPQueryFiltersComponent {
      */
     #focusEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\" (keydown.control.space)=\"popover.open()\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \" #tagBox>\n    <ax-suffix class=\"ax-hidden ax-shrink-0 ax-whitespace-nowrap md:ax-block ax-text-gray-500\">\n      <ax-kbd class=\"look-text\">\n        <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n      </ax-kbd>\n    </ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\">\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 lg:ax-w-[450px] md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n          }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n          </div>\n          <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\" [mode]=\"'edit'\">\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n            (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      } @else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n        <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n        @for (field of filterFields(); track field.field) {\n        <div axListNavigationItem #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\" (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\">\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.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: "21.2.9", 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 } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\" (keydown.control.space)=\"popover.open()\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \" #tagBox>\n    <ax-suffix class=\"ax-hidden ax-shrink-0 ax-whitespace-nowrap md:ax-block ax-text-gray-500\">\n      <ax-kbd class=\"look-text\">\n        <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n      </ax-kbd>\n    </ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\">\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 lg:ax-w-[450px] md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n          }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n          </div>\n          <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: resolveFilterContextField(activeFilter()!),\n                options: activeFilter()?.widget?.options,\n              }\" [mode]=\"'edit'\">\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n            (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      } @else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n        <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n        @for (field of filterFields(); track field.field) {\n        <div axListNavigationItem #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\" (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\">\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.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: "21.2.9", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
@@ -3555,7 +3593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPWidgetCoreModule,
                         AXListNavigationModule,
                         AXBadgeModule,
-                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\" (keydown.control.space)=\"popover.open()\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \" #tagBox>\n    <ax-suffix class=\"ax-hidden ax-shrink-0 ax-whitespace-nowrap md:ax-block ax-text-gray-500\">\n      <ax-kbd class=\"look-text\">\n        <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n      </ax-kbd>\n    </ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\">\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 lg:ax-w-[450px] md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n          }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n          </div>\n          <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\" [mode]=\"'edit'\">\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n            (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      } @else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n        <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n        @for (field of filterFields(); track field.field) {\n        <div axListNavigationItem #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\" (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\">\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.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}\n"] }]
+                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\" (keydown.control.space)=\"popover.open()\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \" #tagBox>\n    <ax-suffix class=\"ax-hidden ax-shrink-0 ax-whitespace-nowrap md:ax-block ax-text-gray-500\">\n      <ax-kbd class=\"look-text\">\n        <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n      </ax-kbd>\n    </ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\">\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 lg:ax-w-[450px] md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n          }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n          </div>\n          <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: resolveFilterContextField(activeFilter()!),\n                options: activeFilter()?.widget?.options,\n              }\" [mode]=\"'edit'\">\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n            (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      } @else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n        <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n        @for (field of filterFields(); track field.field) {\n        <div axListNavigationItem #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\" (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\">\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], widgetRenderer: [{ type: i0.ViewChild, args: ['widgetRenderer', { isSignal: true }] }], listItems: [{
                 type: ViewChildren,
                 args: ['caseItem']