@acorex/platform 21.0.0-beta.0 → 21.0.0-beta.10

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

@@ -16,7 +16,7 @@ import { AXPLayoutRendererComponent, AXPLayoutBuilderService, AXP_PREVIEW_WIDGET
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, isPlatformBrowser, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, untracked, DestroyRef, PLATFORM_ID, linkedSignal, HostListener, ViewChildren, Input, EventEmitter, Output } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, untracked, DestroyRef, PLATFORM_ID, linkedSignal, HostListener, ViewChildren, Input, contentChildren, EventEmitter, Output } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
@@ -3408,7 +3408,7 @@ class AXPQueryFiltersComponent {
         }
     }
     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" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, 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=\"flex items-center gap-2 p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"hidden md:block\"><span class=\"text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"inline-flex items-center gap-1.5 hover:bg-darkest cursor-pointer rounded-md px-3 py-1 text-sm surface\"\n      [class.!bg-primary]=\"item.field === 'all'\"\n      [class.!text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n        <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"icon 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:min-w-72 w-full rounded-md md:max-h-96 max-w-80 md:overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"border-b border-light px-4 py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"p-4\">\n            <div class=\"mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"border-t flex justify-end border-light w-full px-4 py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></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=\"w-full border-t border-light my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"flex items-end gap-2\">\n                <ax-icon class=\"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>\n", styles: ["@layer properties;axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.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$2.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: 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$2.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" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, 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=\"flex items-center gap-2 p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"hidden md:block\"><span class=\"text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"inline-flex items-center gap-1.5 hover:bg-darkest cursor-pointer rounded-md px-3 py-1 text-sm surface\"\n      [class.!bg-primary]=\"item.field === 'all'\"\n      [class.!text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n        <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n        </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [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:min-w-72 w-full rounded-md md:max-h-96 max-w-80 md:overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"border-b border-light px-4 py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"p-4\">\n            <div class=\"mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"border-t flex justify-end border-light w-full px-4 py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></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=\"w-full border-t border-light my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"flex items-end gap-2\">\n                <ax-icon class=\"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>\n", styles: ["@layer properties;axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.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$2.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: 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$2.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,
@@ -3424,7 +3424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPWidgetCoreModule,
                         AXListNavigationModule,
                         AXBadgeModule,
-                    ], template: "<div class=\"flex items-center gap-2 p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"hidden md:block\"><span class=\"text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"inline-flex items-center gap-1.5 hover:bg-darkest cursor-pointer rounded-md px-3 py-1 text-sm surface\"\n      [class.!bg-primary]=\"item.field === 'all'\"\n      [class.!text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n        <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"icon 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:min-w-72 w-full rounded-md md:max-h-96 max-w-80 md:overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"border-b border-light px-4 py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"p-4\">\n            <div class=\"mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"border-t flex justify-end border-light w-full px-4 py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></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=\"w-full border-t border-light my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"flex items-end gap-2\">\n                <ax-icon class=\"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>\n", styles: ["@layer properties;axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"flex items-center gap-2 p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"hidden md:block\"><span class=\"text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"inline-flex items-center gap-1.5 hover:bg-darkest cursor-pointer rounded-md px-3 py-1 text-sm surface\"\n      [class.!bg-primary]=\"item.field === 'all'\"\n      [class.!text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n        <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n        </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [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:min-w-72 w-full rounded-md md:max-h-96 max-w-80 md:overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"border-b border-light px-4 py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"p-4\">\n            <div class=\"mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"border-t flex justify-end border-light w-full px-4 py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></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=\"w-full border-t border-light my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"flex items-end gap-2\">\n                <ax-icon class=\"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>\n", styles: ["@layer properties;axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], 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']
@@ -3734,6 +3734,224 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }] } });
 
+//#endregion
+//#region ---- Template Directives ----
+class AXPMarkdownTemplateDirective {
+    constructor(template) {
+        this.template = template;
+        /** Indicates which segment type this template customizes. */
+        this.type = input.required({ ...(ngDevMode ? { debugName: "type" } : /* istanbul ignore next */ {}), alias: 'axpMarkdownTemplate' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMarkdownTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: AXPMarkdownTemplateDirective, isStandalone: true, selector: "ng-template[axpMarkdownTemplate]", inputs: { type: { classPropertyName: "type", publicName: "axpMarkdownTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMarkdownTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[axpMarkdownTemplate]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpMarkdownTemplate", required: true }] }] } });
+//#endregion
+//#region ---- Component ----
+class AXPMarkdownViewerComponent {
+    //#endregion
+    //#region ---- Parsing ----
+    constructor() {
+        //#region ---- Inputs ----
+        /** Raw markdown content to render. */
+        this.markdown = input('', ...(ngDevMode ? [{ debugName: "markdown" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Template Slots ----
+        /** Optional templates for overriding markdown and code segments. */
+        this.templates = contentChildren(AXPMarkdownTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+        this.markdownTemplate = computed(() => this.templates().find((item) => item.type() === 'markdown')?.template, ...(ngDevMode ? [{ debugName: "markdownTemplate" }] : /* istanbul ignore next */ []));
+        this.codeTemplate = computed(() => this.templates().find((item) => item.type() === 'code')?.template, ...(ngDevMode ? [{ debugName: "codeTemplate" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- View Model ----
+        this.segments = computed(() => this.parseMarkdown(this.markdown() ?? ''), ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+        this.markdownCompiler = signal(null, ...(ngDevMode ? [{ debugName: "markdownCompiler" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const value = this.markdown();
+            if (value.trim() && !this.markdownCompiler()) {
+                void this.loadMicromarkCompiler();
+            }
+        });
+    }
+    /**
+     * Splits markdown into text/code segments, compiles markdown text to HTML with micromark,
+     * and keeps fenced code blocks available for custom Angular rendering.
+     */
+    parseMarkdown(markdown) {
+        if (!markdown.trim()) {
+            return [];
+        }
+        const lines = markdown.replaceAll('\r\n', '\n').split('\n');
+        const segments = [];
+        const markdownBuffer = [];
+        let fenceMarker = null;
+        let fenceLength = 0;
+        let fenceLanguage = '';
+        let fenceBody = [];
+        const flushMarkdownBuffer = () => {
+            if (!markdownBuffer.length) {
+                return;
+            }
+            this.addMarkdownSegment(segments, markdownBuffer.join('\n'));
+            markdownBuffer.length = 0;
+        };
+        for (const line of lines) {
+            if (!fenceMarker) {
+                const fenceStart = line.match(/^([`~]{3,})(.*)$/);
+                if (!fenceStart) {
+                    markdownBuffer.push(line);
+                    continue;
+                }
+                const marker = fenceStart[1][0];
+                if (marker !== '`' && marker !== '~') {
+                    markdownBuffer.push(line);
+                    continue;
+                }
+                flushMarkdownBuffer();
+                fenceMarker = marker;
+                fenceLength = fenceStart[1].length;
+                fenceLanguage = fenceStart[2].trim().split(/\s+/)[0] ?? '';
+                fenceBody = [];
+                continue;
+            }
+            const fenceEndPattern = new RegExp(`^${fenceMarker}{${fenceLength},}\\s*$`);
+            if (fenceEndPattern.test(line)) {
+                segments.push({
+                    type: 'code',
+                    language: fenceLanguage,
+                    code: fenceBody.join('\n'),
+                });
+                fenceMarker = null;
+                fenceLength = 0;
+                fenceLanguage = '';
+                fenceBody = [];
+                continue;
+            }
+            fenceBody.push(line);
+        }
+        if (fenceMarker) {
+            // Unclosed fence is treated as markdown to avoid content loss.
+            markdownBuffer.push(`${fenceMarker.repeat(fenceLength)}${fenceLanguage ? ` ${fenceLanguage}` : ''}`);
+            markdownBuffer.push(...fenceBody);
+        }
+        flushMarkdownBuffer();
+        return segments;
+    }
+    addMarkdownSegment(segments, value) {
+        if (!value.trim()) {
+            return;
+        }
+        const compiler = this.markdownCompiler();
+        segments.push({
+            type: 'markdown',
+            html: compiler ? compiler(value) : this.escapeHtml(value),
+        });
+    }
+    async loadMicromarkCompiler() {
+        if (this.markdownCompiler()) {
+            return;
+        }
+        const [micromarkModule, gfmModule] = await this.loadMicromarkModules();
+        const compiler = (value) => micromarkModule.micromark(value, {
+            extensions: [gfmModule.gfm()],
+            htmlExtensions: [gfmModule.gfmHtml()],
+        });
+        this.markdownCompiler.set(compiler);
+    }
+    async loadMicromarkModules() {
+        const localMicromarkPath = 'micromark';
+        const localGfmPath = 'micromark-extension-gfm';
+        try {
+            const [micromarkModule, gfmModule] = await Promise.all([
+                this.importModule(localMicromarkPath),
+                this.importModule(localGfmPath),
+            ]);
+            return [micromarkModule, gfmModule];
+        }
+        catch {
+            const [micromarkModule, gfmModule] = await Promise.all([
+                this.importModule('https://esm.sh/micromark@4'),
+                this.importModule('https://esm.sh/micromark-extension-gfm@3'),
+            ]);
+            return [micromarkModule, gfmModule];
+        }
+    }
+    async importModule(path) {
+        return (await import(/* @vite-ignore */ path));
+    }
+    escapeHtml(value) {
+        return value
+            .replaceAll('&', '&amp;')
+            .replaceAll('<', '&lt;')
+            .replaceAll('>', '&gt;')
+            .replaceAll('"', '&quot;')
+            .replaceAll("'", '&#39;')
+            .replaceAll('\n', '<br>');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMarkdownViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPMarkdownViewerComponent, isStandalone: true, selector: "axp-markdown-viewer", inputs: { markdown: { classPropertyName: "markdown", publicName: "markdown", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templates", predicate: AXPMarkdownTemplateDirective, isSignal: true }], ngImport: i0, template: `
+    <section class="axp-markdown-viewer">
+      @for (segment of segments(); track $index) {
+        @if (segment.type === 'code') {
+          @if (codeTemplate(); as template) {
+            <ng-container
+              [ngTemplateOutlet]="template"
+              [ngTemplateOutletContext]="{ $implicit: segment, segment: segment }"
+            >
+            </ng-container>
+          } @else {
+            <pre class="axp-markdown-viewer__code"><code>{{ segment.code }}</code></pre>
+          }
+        } @else {
+          @if (markdownTemplate(); as template) {
+            <ng-container
+              [ngTemplateOutlet]="template"
+              [ngTemplateOutletContext]="{ $implicit: segment, segment: segment }"
+            >
+            </ng-container>
+          } @else {
+            <div class="axp-markdown-viewer__content" [innerHTML]="segment.html"></div>
+          }
+        }
+      }
+    </section>
+  `, isInline: true, styles: [".axp-markdown-viewer{display:block}.axp-markdown-viewer__content{display:block;font-size:.95rem;line-height:1.75;color:var(--ax-color-text, inherit);word-break:break-word;white-space:nowrap;text-wrap:wrap}.axp-markdown-viewer__content h1,.axp-markdown-viewer__content h2,.axp-markdown-viewer__content h3,.axp-markdown-viewer__content h4,.axp-markdown-viewer__content h5,.axp-markdown-viewer__content h6{display:block;margin:0;line-height:1.35;font-weight:600;letter-spacing:.01em}.axp-markdown-viewer__content h1{font-size:1.7rem!important}.axp-markdown-viewer__content h2{font-size:1.45rem!important}.axp-markdown-viewer__content h3{font-size:1.25rem!important}.axp-markdown-viewer__content h4{font-size:1.1rem!important}.axp-markdown-viewer__content h5{font-size:1rem!important}.axp-markdown-viewer__content h6{font-size:.92rem!important;opacity:.9}.axp-markdown-viewer__content p{margin:0}.axp-markdown-viewer__content ul{margin:0;padding-inline-start:1.25rem}.axp-markdown-viewer__content ol{margin:0;padding-inline-start:1.35rem}.axp-markdown-viewer__content li{margin:0;line-height:1.75}.axp-markdown-viewer__content ul ul,.axp-markdown-viewer__content ul ol,.axp-markdown-viewer__content ol ul,.axp-markdown-viewer__content ol ol{margin:0}.axp-markdown-viewer__content blockquote{margin:0;padding:.45rem .65rem;border-inline-start:3px solid rgba(var(--ax-sys-color-primary),.35);background:rgba(var(--ax-sys-color-primary),.06);border-radius:.25rem}.axp-markdown-viewer__content hr{border:0;border-top:1px solid var(--ax-color-ghost, rgba(0, 0, 0, .16));margin:0}.axp-markdown-viewer__content code{font-family:var(--ax-font-mono, monospace);font-size:.9em;padding:.1rem .3rem;border-radius:.25rem;background:var(--ax-color-ghost, rgba(0, 0, 0, .06))}.axp-markdown-viewer__content pre{margin:0}.axp-markdown-viewer__content table{width:100%;border-collapse:collapse;margin:0}.axp-markdown-viewer__content th,.axp-markdown-viewer__content td{border:1px solid var(--ax-color-ghost, rgba(0, 0, 0, .12));padding:.35rem .5rem;text-align:start}.axp-markdown-viewer__content a{text-decoration:underline}.axp-markdown-viewer__content img{max-width:100%;height:auto;border-radius:.35rem}.axp-markdown-viewer__content details{margin:0;padding:.35rem .55rem;border:1px solid var(--ax-color-ghost, rgba(0, 0, 0, .12));border-radius:.35rem}.axp-markdown-viewer__content summary{cursor:pointer;font-weight:600}.axp-markdown-viewer__content sup{line-height:0;font-size:.75em}.axp-markdown-viewer__content .footnotes{margin:0;padding-top:.5rem;border-top:1px dashed var(--ax-color-ghost, rgba(0, 0, 0, .16))}.axp-markdown-viewer__content ul.contains-task-list{list-style:none;padding-inline-start:.2rem}.axp-markdown-viewer__content .task-list-item{list-style:none}.axp-markdown-viewer__content .task-list-item input[type=checkbox]{margin:0;transform:translateY(1px)}.axp-markdown-viewer__code{margin:0;padding:.75rem 1rem;border-radius:.5rem;background-color:var(--ax-surface-secondary, #111827);color:var(--ax-text-on-primary, #f9fafb);overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMarkdownViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-markdown-viewer', standalone: true, imports: [CommonModule], template: `
+    <section class="axp-markdown-viewer">
+      @for (segment of segments(); track $index) {
+        @if (segment.type === 'code') {
+          @if (codeTemplate(); as template) {
+            <ng-container
+              [ngTemplateOutlet]="template"
+              [ngTemplateOutletContext]="{ $implicit: segment, segment: segment }"
+            >
+            </ng-container>
+          } @else {
+            <pre class="axp-markdown-viewer__code"><code>{{ segment.code }}</code></pre>
+          }
+        } @else {
+          @if (markdownTemplate(); as template) {
+            <ng-container
+              [ngTemplateOutlet]="template"
+              [ngTemplateOutletContext]="{ $implicit: segment, segment: segment }"
+            >
+            </ng-container>
+          } @else {
+            <div class="axp-markdown-viewer__content" [innerHTML]="segment.html"></div>
+          }
+        }
+      }
+    </section>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".axp-markdown-viewer{display:block}.axp-markdown-viewer__content{display:block;font-size:.95rem;line-height:1.75;color:var(--ax-color-text, inherit);word-break:break-word;white-space:nowrap;text-wrap:wrap}.axp-markdown-viewer__content h1,.axp-markdown-viewer__content h2,.axp-markdown-viewer__content h3,.axp-markdown-viewer__content h4,.axp-markdown-viewer__content h5,.axp-markdown-viewer__content h6{display:block;margin:0;line-height:1.35;font-weight:600;letter-spacing:.01em}.axp-markdown-viewer__content h1{font-size:1.7rem!important}.axp-markdown-viewer__content h2{font-size:1.45rem!important}.axp-markdown-viewer__content h3{font-size:1.25rem!important}.axp-markdown-viewer__content h4{font-size:1.1rem!important}.axp-markdown-viewer__content h5{font-size:1rem!important}.axp-markdown-viewer__content h6{font-size:.92rem!important;opacity:.9}.axp-markdown-viewer__content p{margin:0}.axp-markdown-viewer__content ul{margin:0;padding-inline-start:1.25rem}.axp-markdown-viewer__content ol{margin:0;padding-inline-start:1.35rem}.axp-markdown-viewer__content li{margin:0;line-height:1.75}.axp-markdown-viewer__content ul ul,.axp-markdown-viewer__content ul ol,.axp-markdown-viewer__content ol ul,.axp-markdown-viewer__content ol ol{margin:0}.axp-markdown-viewer__content blockquote{margin:0;padding:.45rem .65rem;border-inline-start:3px solid rgba(var(--ax-sys-color-primary),.35);background:rgba(var(--ax-sys-color-primary),.06);border-radius:.25rem}.axp-markdown-viewer__content hr{border:0;border-top:1px solid var(--ax-color-ghost, rgba(0, 0, 0, .16));margin:0}.axp-markdown-viewer__content code{font-family:var(--ax-font-mono, monospace);font-size:.9em;padding:.1rem .3rem;border-radius:.25rem;background:var(--ax-color-ghost, rgba(0, 0, 0, .06))}.axp-markdown-viewer__content pre{margin:0}.axp-markdown-viewer__content table{width:100%;border-collapse:collapse;margin:0}.axp-markdown-viewer__content th,.axp-markdown-viewer__content td{border:1px solid var(--ax-color-ghost, rgba(0, 0, 0, .12));padding:.35rem .5rem;text-align:start}.axp-markdown-viewer__content a{text-decoration:underline}.axp-markdown-viewer__content img{max-width:100%;height:auto;border-radius:.35rem}.axp-markdown-viewer__content details{margin:0;padding:.35rem .55rem;border:1px solid var(--ax-color-ghost, rgba(0, 0, 0, .12));border-radius:.35rem}.axp-markdown-viewer__content summary{cursor:pointer;font-weight:600}.axp-markdown-viewer__content sup{line-height:0;font-size:.75em}.axp-markdown-viewer__content .footnotes{margin:0;padding-top:.5rem;border-top:1px dashed var(--ax-color-ghost, rgba(0, 0, 0, .16))}.axp-markdown-viewer__content ul.contains-task-list{list-style:none;padding-inline-start:.2rem}.axp-markdown-viewer__content .task-list-item{list-style:none}.axp-markdown-viewer__content .task-list-item input[type=checkbox]{margin:0;transform:translateY(1px)}.axp-markdown-viewer__code{margin:0;padding:.75rem 1rem;border-radius:.5rem;background-color:var(--ax-surface-secondary, #111827);color:var(--ax-text-on-primary, #f9fafb);overflow:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { markdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "markdown", required: false }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXPMarkdownTemplateDirective), { isSignal: true }] }] } });
+
 //#region ----   Imports   ----
 //#endregion
 //#region ----   Service Interface   ----
@@ -5139,7 +5357,7 @@ class AXPQuerySortsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"flex flex-col justify-center gap-4 select-none\">\n  <div class=\"flex flex-col gap-4 select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"flex flex-col gap-3 w-full sorted-list max-h-[calc(100vh-280px)] overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"flex py-1 items-center justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"flex items-center gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move\"></ax-icon>\n            <p class=\"font-medium text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"flex flex-col justify-center gap-4 select-none\">\n  <div class=\"flex flex-col gap-4 select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"flex flex-col gap-3 w-full sorted-list max-h-[calc(100vh-280px)] overflow-x-hidden overflow-y-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"flex py-1 items-center justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"flex items-center gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move\"></ax-icon>\n            <p class=\"font-medium text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [look]=\"'none'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
             type: Component,
@@ -5152,7 +5370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         CommonModule,
                         AXDecoratorModule,
                         AXButtonModule,
-                    ], template: "<div class=\"flex flex-col justify-center gap-4 select-none\">\n  <div class=\"flex flex-col gap-4 select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"flex flex-col gap-3 w-full sorted-list max-h-[calc(100vh-280px)] overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"flex py-1 items-center justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"flex items-center gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move\"></ax-icon>\n            <p class=\"font-medium text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"flex flex-col justify-center gap-4 select-none\">\n  <div class=\"flex flex-col gap-4 select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"flex flex-col gap-3 w-full sorted-list max-h-[calc(100vh-280px)] overflow-x-hidden overflow-y-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"flex py-1 items-center justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"flex items-center gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move\"></ax-icon>\n            <p class=\"font-medium text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [look]=\"'none'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { sortDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDefinitions", required: false }] }, { type: i0.Output, args: ["sortDefinitionsChange"] }], initialSortQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSortQueries", required: false }] }], sortQueriesChange: [{ type: i0.Output, args: ["sortQueriesChange"] }] } });
 
 //#region ----   Component Definition   ----
@@ -8639,5 +8857,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPImageEditorPopupComponent, AXPImageEditorService, AXPItemConfiguratorComponent, AXPLogoComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, preparePropertyForViewer, preparePropertyViewerTabs, registerFieldDefinitions, withValidationsOnEditorNode };
+export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPImageEditorPopupComponent, AXPImageEditorService, AXPItemConfiguratorComponent, AXPLogoComponent, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, preparePropertyForViewer, preparePropertyViewerTabs, registerFieldDefinitions, withValidationsOnEditorNode };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map