@acorex-platform/framework-client 0.0.54 → 0.0.56

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

@@ -1,4 +1,5 @@
-import { getSystemActions, resolveToSurfaceClass, AXPWidgetsCatalog, createRandomUuid, omitFilterClauseIdentity, AXPPlatformScope, AXPFileStorageStatus, flattenQueryFilterUserGroups, hasQueryFilterGroupId, isCompleteFilterCondition, coerceFilterDisplayText, AXP_QUERY_QUICK_SEARCH_FIELD, wrapQueryFilterRoot, QUERY_FILTER_CHIP_EXPAND_MAX_CONDITIONS, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, isQueryFilterAllNode, resolveQueryFilterGroupId, createQueryFilterGroupId, resolveQueryFilterConditionContextField, createQueryFilterConditionId, QUERY_FILTER_CONDITION_KEY_INFIX, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsList, AXPRegionalSetting, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
+import { AXPRegionalSetting, resolveActionLook, resolveToSurfaceClass, AXPWidgetsCatalog, createRandomUuid, omitFilterClauseIdentity, AXPPlatformScope, AXPFileStorageStatus, flattenQueryFilterUserGroups, hasQueryFilterGroupId, isCompleteFilterCondition, coerceFilterDisplayText, AXP_QUERY_QUICK_SEARCH_FIELD, wrapQueryFilterRoot, QUERY_FILTER_CHIP_EXPAND_MAX_CONDITIONS, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, isQueryFilterAllNode, resolveQueryFilterGroupId, createQueryFilterGroupId, resolveQueryFilterConditionContextField, createQueryFilterConditionId, QUERY_FILTER_CONDITION_KEY_INFIX, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsList, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
+import { AXLocaleService } from '@acorex/core/locale';
 import * as i2$2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i1$5 from '@acorex/cdk/common';
@@ -9,22 +10,22 @@ import * as i3 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
-import * as i4 from '@acorex/core/format';
-import { AXFormatModule, AXFormatService } from '@acorex/core/format';
+import * as i4$3 from '@acorex/core/format';
+import { AXFormatService, AXFormatModule } from '@acorex/core/format';
 import { AXPLayoutRendererComponent, AXPLayoutBuilderService, resolveLayoutBuilderDialogResult } from '@acorex-platform/framework-client/layout/builder';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, AsyncPipe, isPlatformBrowser, NgComponentOutlet, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, input, output, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, linkedSignal, computed, InjectionToken, Injector, Injectable, Directive, viewChild, contentChild, ElementRef, afterNextRender, model, EventEmitter, forwardRef, ViewChild, Output, Input, untracked, DestroyRef, PLATFORM_ID, createComponent, EnvironmentInjector, runInInjectionContext, ApplicationRef, makeEnvironmentProviders, viewChildren, ViewChildren, TemplateRef, contentChildren } from '@angular/core';
+import { inject, input, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, output, computed, linkedSignal, InjectionToken, Injector, Injectable, Directive, viewChild, contentChild, ElementRef, afterNextRender, model, EventEmitter, forwardRef, ViewChild, Output, Input, untracked, DestroyRef, PLATFORM_ID, createComponent, EnvironmentInjector, runInInjectionContext, ApplicationRef, makeEnvironmentProviders, viewChildren, ViewChildren, TemplateRef, contentChildren } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
-import { AXPStateMessageComponent, AXPSettingsService, AXPFileChooserSettings, normalizeStoredImageRef, extractFileExtension, AXPFileStorageService, AXPFileTypeProviderService, resolveFileTypeDisplay, AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS, AXPCommonSettings, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, resolveSearchableText, isStoredImageFileId, resolveStoredImageDisplayUrl } from '@acorex-platform/framework-client/common';
+import { AXPSettingsService, AXPStateMessageComponent, AXPFileChooserSettings, normalizeStoredImageRef, extractFileExtension, AXPFileStorageService, AXPFileTypeProviderService, resolveFileTypeDisplay, AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS, AXPCommonSettings, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, resolveSearchableText, isStoredImageFileId, resolveStoredImageDisplayUrl } from '@acorex-platform/framework-client/common';
 export { AXPFileChooserSettings, AXPStateMessageComponent } from '@acorex-platform/framework-client/common';
 import * as i1$1 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
 import * as i3$1 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
-import * as i4$1 from '@acorex/components/loading';
+import * as i4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { isEmpty, isNil, cloneDeep, get, isEqual, defaultTo, orderBy, isString, mergeWith, unionBy, sortBy, isArray, set, capitalize } from 'lodash-es';
 import * as i1$2 from '@acorex/components/badge';
@@ -45,7 +46,7 @@ import { AXSwitchModule } from '@acorex/components/switch';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, transferArrayItem } from '@angular/cdk/drag-drop';
 import * as i1$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i4$2 from '@acorex/components/data-table';
+import * as i4$1 from '@acorex/components/data-table';
 import { AXDataTableColumnComponent, AXDataTableModule } from '@acorex/components/data-table';
 import * as i2$5 from '@acorex/components/form';
 import { AXFormModule, AXFormComponent } from '@acorex/components/form';
@@ -73,7 +74,7 @@ import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { from, Subject, filter, BehaviorSubject, timer, Subscription, map, distinctUntilChanged } from 'rxjs';
 import * as i11 from '@acorex/cdk/list-navigation';
 import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
-import * as i4$3 from '@acorex/components/button-group';
+import * as i4$2 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
@@ -94,7 +95,6 @@ import { AXPSessionService } from '@acorex-platform/framework-client/auth';
 import { filter as filter$1, take, tap } from 'rxjs/operators';
 import { AXPUserPresenceService, isWatchablePresenceUserId, presenceDurationBucket } from '@acorex-platform/framework-client/realtime';
 import { AXOverlayService } from '@acorex/cdk/overlay';
-import { AXLocaleService } from '@acorex/core/locale';
 import { AXPlatform } from '@acorex/core/platform';
 import { Router, NavigationStart } from '@angular/router';
 import * as i6$1 from '@acorex/components/tooltip';
@@ -108,6 +108,61 @@ import { AXContextMenuComponent } from '@acorex/components/menu';
  */
 //#endregion
 
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+/**
+ * Formats activity timestamps with regional ShortDate + ShortTime (same pipeline as date-time columns).
+ */
+class AXPActivityLogTimeComponent {
+    //#endregion
+    //#region ----- Lifecycle -----
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.formatService = inject(AXFormatService);
+        this.settingsService = inject(AXPSettingsService);
+        //#endregion
+        //#region ----- Inputs -----
+        this.date = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- State -----
+        this.display = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const value = this.date();
+            void this.refreshDisplay(value);
+        });
+    }
+    //#endregion
+    //#region ----- Private Methods -----
+    async refreshDisplay(value) {
+        if (!(value instanceof Date) || Number.isNaN(value.getTime())) {
+            this.display.set('');
+            return;
+        }
+        const [dateFormat, timeFormat] = await Promise.all([
+            this.settingsService.get(AXPRegionalSetting.ShortDate),
+            this.settingsService.get(AXPRegionalSetting.ShortTime),
+        ]);
+        const pattern = `${String(dateFormat ?? '').trim()} ${String(timeFormat ?? '').trim()}`.trim();
+        this.display.set(pattern
+            ? this.formatService.format(value, 'datetime', { format: pattern })
+            : this.formatService.format(value, 'datetime', { format: 'short' }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPActivityLogTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPActivityLogTimeComponent, isStandalone: true, selector: "axp-activity-log-time", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<span dir="ltr">{{ display() }}</span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPActivityLogTimeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-activity-log-time',
+                    template: `<span dir="ltr">{{ display() }}</span>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: () => [], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }] } });
+
 //#region ----   Component Definition   ----
 class AXPActivityLogComponent {
     //#endregion
@@ -116,6 +171,7 @@ class AXPActivityLogComponent {
         //#endregion
         //#region ----   Services & Dependencies   ----
         this.translateService = inject(AXTranslationService);
+        this.localeService = inject(AXLocaleService);
         //#endregion
         //#region ----   Input Properties   ----
         /**
@@ -147,6 +203,8 @@ class AXPActivityLogComponent {
         //#region ----   Component Properties   ----
         this.i18nScope = 'activity-log';
         this.Object = Object;
+        this.textDirection = computed(() => this.localeService.activeProfile()?.i18nMeta?.rtl === true ? 'rtl' : 'ltr', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textDirection" }] : /* istanbul ignore next */ []));
         /**
          * Set of expanded activity IDs
          */
@@ -183,11 +241,11 @@ class AXPActivityLogComponent {
      * Gets the appropriate CSS class for the change type
      */
     getChangeClasses(changeType) {
-        const action = getSystemActions(changeType);
+        const look = resolveActionLook(changeType);
+        const icon = (look.icon || 'fa-light fa-pen').replace(/\bfa-(light|regular)\b/, 'fa-solid');
         return {
-            surface: action?.color ? `bg-${action.color}` : 'bg-default',
-            text: action?.color ? `text-on-${action.color}` : 'text-default',
-            icon: action?.icon ? `${action.icon}` : 'fa-light fa-pen',
+            text: look.color ? `text-${look.color}` : 'text-default',
+            icon,
         };
     }
     /**
@@ -254,7 +312,7 @@ class AXPActivityLogComponent {
         return currentIndex > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPActivityLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPActivityLogComponent, isStandalone: true, selector: "axp-activity-log", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, enableCompare: { classPropertyName: "enableCompare", publicName: "enableCompare", isSignal: true, isRequired: false, transformFunction: null }, showActionType: { classPropertyName: "showActionType", publicName: "showActionType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { compareRequested: "compareRequested" }, ngImport: i0, template: "<div class=\"axp-activity-log accent2\" *translate=\"let t\">\n  <!-- Activity Log Content -->\n  <div class=\"__content\">\n    <!-- Loading State -->\n    @if (loading()) {\n    <div class=\"__loading\">\n      @for (item of [1, 2, 3, 4]; track $index) {\n      <div class=\"__item\">\n        <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n        <div class=\"__content\">\n          <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Activity Feed -->\n    @if (!loading() && activities().length > 0) {\n    <div class=\"__feed\">\n      @for (activity of activities(); track activity.id) {\n      @let changeClasses = getChangeClasses(activity.changeType);\n      @let isItemExpanded = isExpanded(activity.id);\n      @let hasExpandableContentItem = hasExpandableContent(activity);\n      <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n        <div class=\"size-10 rounded-full border flex items-center justify-center lightest-surface\">\n          <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }} fa-solid\"></i>\n        </div>\n\n        <!-- Activity Content -->\n        <div class=\"__content\">\n          <!-- Main Activity Info -->\n          <div class=\"__main-info\">\n            <!-- User and Action with Toggle Button -->\n            <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n              <span class=\"__user-name\">{{ activity.user.title }}</span>\n              @if (showActionType()) {\n              <span class=\"__action-type\">\n                {{ t(`@general:actions.${activity.changeType}.title`) | async }}\n              </span>\n              }\n              <span class=\"__action-text\">\n                {{ activity.title | translate | async }}\n              </span>\n\n              <!-- Compare Button -->\n              @if (canCompare(activity)) {\n              <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n                [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n                <i class=\"fa-solid fa-code-compare\"></i>\n              </button>\n              }\n\n              <!-- Toggle Button (only show if there's expandable content) -->\n              @if (hasExpandableContentItem) {\n              <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n                [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n                <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n                  [class.fa-chevron-up]=\"isItemExpanded\"></i>\n              </button>\n              }\n            </div>\n\n            <!-- Expandable Description/Changes -->\n            @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n            <div class=\"__action-lines __expandable-content\" [class.__animated]=\"shouldAnimate(activity.id)\">\n              @for (change of activity.changes; track $index) {\n              @let changeClasses = getChangeClasses(change.type);\n              <div class=\"__action-line\">\n                @if (change.layout) {\n                <axp-layout-renderer\n                  [layout]=\"$any(change.layout)\"\n                  [context]=\"{ change }\"\n                  mode=\"view\"\n                  class=\"__history-layout\"\n                />\n                } @else {\n                <div class=\"rounded-full size-7 grid place-items-center\">\n                  <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }}\"></i>\n                </div>\n                @if (change.fieldLabel && change.summary) {\n                <span class=\"__field-label\">{{ change.fieldLabel }}</span>\n                <span class=\"__action-text\">{{ change.summary }}</span>\n                } @else if (change.summary) {\n                <span class=\"__action-text\">{{ change.summary }}</span>\n                } @else if (change.fieldKey && change.actionKey) {\n                <span class=\"__action-text\">\n                  {{ change.fieldKey | translate:(change.fieldKeyParams ?? {}) | async }}: {{ change.actionKey | translate | async }}\n                </span>\n                } @else {\n                <span class=\"__action-text\">{{ change.description | translate | async }}</span>\n                }\n                }\n              </div>\n              }\n            </div>\n            }\n          </div>\n\n          <!-- Time -->\n          <div class=\"__time\">\n            {{ activity.date | format: 'datetime' : 'short' | async }}\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (!loading() && activities().length === 0) {\n    <axp-state-message icon=\"fa-light fa-history\" [title]=\"'@activity-log:components.activity-log.empty-states.no-history.title'\"\n      [description]=\"'@activity-log:components.activity-log.empty-states.no-history.description'\">\n    </axp-state-message>\n    }\n  </div>\n</div>\n\n<!-- \n\nsuccess-surface\nprimary-surface\ndanger-surface\nwarning-surface\ninfo-surface\nmuted-surface\ntext-success\n\n -->", styles: ["@layer properties;.axp-activity-log{height:100%;width:100%}:where(.axp-activity-log .__content .__loading>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 4)}.axp-activity-log .__content .__loading .__item .__avatar{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}.axp-activity-log .__content .__loading .__item .__content{flex:1}:where(.axp-activity-log .__content .__loading .__item .__content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 2) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__loading .__item .__content .__title{height:calc(var(--spacing, .25rem) * 4);width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:calc(var(--spacing, .25rem) * 3);width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:calc(var(--spacing, .25rem) * 3);width:calc(5 / 6 * 100%);border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:calc(var(--spacing, .25rem) * 3);width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}:where(.axp-activity-log .__content .__feed>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 6) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 5);top:calc(var(--spacing, .25rem) * 2);bottom:calc(var(--spacing, .25rem) * 2);width:0px;border-left:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 4)}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:var(--spacing, .25rem);display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:85%}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:calc(var(--spacing, .25rem) * 2);display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding:var(--spacing, .25rem);color:rgba(var(--ax-sys-color-primary-surface));transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-border-primary)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-color: rgba(var(--ax-sys-color-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-outline-style: none;outline-style:none}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding:var(--spacing, .25rem);transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-color: rgba(var(--ax-sys-color-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-outline-style: none;outline-style:none}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-block:calc(var(--spacing, .25rem) * 2);display:flex;flex-direction:column;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .3s;transition-duration:.3s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__field-label{max-width:calc(var(--spacing, .25rem) * 40);min-width:calc(var(--spacing, .25rem) * 28);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);opacity:90%}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:85%}.axp-activity-log .__content .__feed .__item .__content .__time{padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:75%}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}@media(min-width:640px){.axp-activity-log .__content .__feed .__item{gap:calc(var(--spacing, .25rem) * 2.5)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse: 0;--tw-leading: initial;--tw-font-weight: initial;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPActivityLogComponent, isStandalone: true, selector: "axp-activity-log", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, enableCompare: { classPropertyName: "enableCompare", publicName: "enableCompare", isSignal: true, isRequired: false, transformFunction: null }, showActionType: { classPropertyName: "showActionType", publicName: "showActionType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { compareRequested: "compareRequested" }, ngImport: i0, template: "<div class=\"axp-activity-log accent2\" *translate=\"let t\" [attr.dir]=\"textDirection()\">\n  <!-- Activity Log Content -->\n  <div class=\"__content\">\n    <!-- Loading State -->\n    @if (loading()) {\n    <div class=\"__loading\">\n      @for (item of [1, 2, 3, 4]; track $index) {\n      <div class=\"__item\">\n        <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n        <div class=\"__content\">\n          <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Activity Feed -->\n    @if (!loading() && activities().length > 0) {\n    <div class=\"__feed\">\n      @for (activity of activities(); track activity.id) {\n      @let changeClasses = getChangeClasses(activity.changeType);\n      @let isItemExpanded = isExpanded(activity.id);\n      @let hasExpandableContentItem = hasExpandableContent(activity);\n      <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n        <div class=\"size-10 rounded-full border flex items-center justify-center lightest-surface\">\n          <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }}\"></i>\n        </div>\n\n        <!-- Activity Content -->\n        <div class=\"__content\">\n          <!-- Main Activity Info -->\n          <div class=\"__main-info\">\n            <!-- User and Action with Toggle Button -->\n            <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n              <span class=\"__user-name\">{{ activity.user.title }}</span>\n              @if (showActionType()) {\n              <span class=\"__action-type\">\n                {{ t(`@general:actions.${activity.changeType}.title`) | async }}\n              </span>\n              }\n              <span class=\"__action-text\" dir=\"auto\">\n                {{ activity.title | translate | async }}\n              </span>\n\n              <!-- Compare Button -->\n              @if (canCompare(activity)) {\n              <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n                [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n                <i class=\"fa-solid fa-code-compare\"></i>\n              </button>\n              }\n\n              <!-- Toggle Button (only show if there's expandable content) -->\n              @if (hasExpandableContentItem) {\n              <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n                [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n                <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n                  [class.fa-chevron-up]=\"isItemExpanded\"></i>\n              </button>\n              }\n            </div>\n\n            <!-- Expandable Description/Changes -->\n            @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n            <div class=\"__action-lines __expandable-content\" [class.__animated]=\"shouldAnimate(activity.id)\">\n              @for (change of activity.changes; track $index) {\n              @let changeClasses = getChangeClasses(change.type);\n              <div class=\"__action-line\">\n                @if (change.layout) {\n                <axp-layout-renderer\n                  [layout]=\"$any(change.layout)\"\n                  [context]=\"{ change }\"\n                  mode=\"view\"\n                  class=\"__history-layout\"\n                />\n                } @else {\n                <div class=\"rounded-full size-7 grid place-items-center\">\n                  <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }}\"></i>\n                </div>\n                @if (change.fieldLabel && change.summary) {\n                <span class=\"__field-label\">{{ change.fieldLabel }}</span>\n                <span class=\"__action-text\" dir=\"auto\">{{ change.summary }}</span>\n                } @else if (change.summary) {\n                <span class=\"__action-text\" dir=\"auto\">{{ change.summary }}</span>\n                } @else if (change.fieldKey && change.actionKey) {\n                <span class=\"__action-text\">\n                  {{ change.fieldKey | translate:(change.fieldKeyParams ?? {}) | async }}: {{ change.actionKey | translate | async }}\n                </span>\n                } @else {\n                <span class=\"__action-text\">{{ change.description | translate | async }}</span>\n                }\n                }\n              </div>\n              }\n            </div>\n            }\n          </div>\n\n          <!-- Time -->\n          <div class=\"__time\">\n            <axp-activity-log-time [date]=\"activity.date\" />\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (!loading() && activities().length === 0) {\n    <axp-state-message icon=\"fa-light fa-history\" [title]=\"'@activity-log:components.activity-log.empty-states.no-history.title'\"\n      [description]=\"'@activity-log:components.activity-log.empty-states.no-history.description'\">\n    </axp-state-message>\n    }\n  </div>\n</div>\n\n<!-- \n\nsuccess-surface\nprimary-surface\ndanger-surface\nwarning-surface\ninfo-surface\nmuted-surface\ntext-success\n\n -->", styles: ["@layer properties;.axp-activity-log{height:100%;width:100%}:where(.axp-activity-log .__content .__loading>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 4)}.axp-activity-log .__content .__loading .__item .__avatar{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}.axp-activity-log .__content .__loading .__item .__content{flex:1}:where(.axp-activity-log .__content .__loading .__item .__content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 2) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__loading .__item .__content .__title{height:calc(var(--spacing, .25rem) * 4);width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:calc(var(--spacing, .25rem) * 3);width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:calc(var(--spacing, .25rem) * 3);width:calc(5 / 6 * 100%);border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:calc(var(--spacing, .25rem) * 3);width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}:where(.axp-activity-log .__content .__feed>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 6) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 5);top:calc(var(--spacing, .25rem) * 2);bottom:calc(var(--spacing, .25rem) * 2);width:0px;border-inline-start:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 4)}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:var(--spacing, .25rem);display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:85%}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-inline-start:calc(var(--spacing, .25rem) * 2);display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding:var(--spacing, .25rem);color:rgba(var(--ax-sys-color-primary-surface));transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-border-primary)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-color: rgba(var(--ax-sys-color-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-outline-style: none;outline-style:none}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-inline-start:auto;display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding:var(--spacing, .25rem);transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-color: rgba(var(--ax-sys-color-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-outline-style: none;outline-style:none}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-block:calc(var(--spacing, .25rem) * 2);display:flex;flex-direction:column;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .3s;transition-duration:.3s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__field-label{max-width:calc(var(--spacing, .25rem) * 40);min-width:calc(var(--spacing, .25rem) * 28);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);opacity:90%}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:85%}.axp-activity-log .__content .__feed .__item .__content .__time{padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:75%}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}@media(min-width:640px){.axp-activity-log .__content .__feed .__item{gap:calc(var(--spacing, .25rem) * 2.5)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse: 0;--tw-leading: initial;--tw-font-weight: initial;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "component", type: AXPActivityLogTimeComponent, selector: "axp-activity-log-time", inputs: ["date"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPActivityLogComponent, decorators: [{
             type: Component,
@@ -270,7 +328,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXAccordionCdkModule,
                         AXPStateMessageComponent,
                         AXPLayoutRendererComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"axp-activity-log accent2\" *translate=\"let t\">\n  <!-- Activity Log Content -->\n  <div class=\"__content\">\n    <!-- Loading State -->\n    @if (loading()) {\n    <div class=\"__loading\">\n      @for (item of [1, 2, 3, 4]; track $index) {\n      <div class=\"__item\">\n        <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n        <div class=\"__content\">\n          <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Activity Feed -->\n    @if (!loading() && activities().length > 0) {\n    <div class=\"__feed\">\n      @for (activity of activities(); track activity.id) {\n      @let changeClasses = getChangeClasses(activity.changeType);\n      @let isItemExpanded = isExpanded(activity.id);\n      @let hasExpandableContentItem = hasExpandableContent(activity);\n      <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n        <div class=\"size-10 rounded-full border flex items-center justify-center lightest-surface\">\n          <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }} fa-solid\"></i>\n        </div>\n\n        <!-- Activity Content -->\n        <div class=\"__content\">\n          <!-- Main Activity Info -->\n          <div class=\"__main-info\">\n            <!-- User and Action with Toggle Button -->\n            <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n              <span class=\"__user-name\">{{ activity.user.title }}</span>\n              @if (showActionType()) {\n              <span class=\"__action-type\">\n                {{ t(`@general:actions.${activity.changeType}.title`) | async }}\n              </span>\n              }\n              <span class=\"__action-text\">\n                {{ activity.title | translate | async }}\n              </span>\n\n              <!-- Compare Button -->\n              @if (canCompare(activity)) {\n              <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n                [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n                <i class=\"fa-solid fa-code-compare\"></i>\n              </button>\n              }\n\n              <!-- Toggle Button (only show if there's expandable content) -->\n              @if (hasExpandableContentItem) {\n              <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n                [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n                <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n                  [class.fa-chevron-up]=\"isItemExpanded\"></i>\n              </button>\n              }\n            </div>\n\n            <!-- Expandable Description/Changes -->\n            @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n            <div class=\"__action-lines __expandable-content\" [class.__animated]=\"shouldAnimate(activity.id)\">\n              @for (change of activity.changes; track $index) {\n              @let changeClasses = getChangeClasses(change.type);\n              <div class=\"__action-line\">\n                @if (change.layout) {\n                <axp-layout-renderer\n                  [layout]=\"$any(change.layout)\"\n                  [context]=\"{ change }\"\n                  mode=\"view\"\n                  class=\"__history-layout\"\n                />\n                } @else {\n                <div class=\"rounded-full size-7 grid place-items-center\">\n                  <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }}\"></i>\n                </div>\n                @if (change.fieldLabel && change.summary) {\n                <span class=\"__field-label\">{{ change.fieldLabel }}</span>\n                <span class=\"__action-text\">{{ change.summary }}</span>\n                } @else if (change.summary) {\n                <span class=\"__action-text\">{{ change.summary }}</span>\n                } @else if (change.fieldKey && change.actionKey) {\n                <span class=\"__action-text\">\n                  {{ change.fieldKey | translate:(change.fieldKeyParams ?? {}) | async }}: {{ change.actionKey | translate | async }}\n                </span>\n                } @else {\n                <span class=\"__action-text\">{{ change.description | translate | async }}</span>\n                }\n                }\n              </div>\n              }\n            </div>\n            }\n          </div>\n\n          <!-- Time -->\n          <div class=\"__time\">\n            {{ activity.date | format: 'datetime' : 'short' | async }}\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (!loading() && activities().length === 0) {\n    <axp-state-message icon=\"fa-light fa-history\" [title]=\"'@activity-log:components.activity-log.empty-states.no-history.title'\"\n      [description]=\"'@activity-log:components.activity-log.empty-states.no-history.description'\">\n    </axp-state-message>\n    }\n  </div>\n</div>\n\n<!-- \n\nsuccess-surface\nprimary-surface\ndanger-surface\nwarning-surface\ninfo-surface\nmuted-surface\ntext-success\n\n -->", styles: ["@layer properties;.axp-activity-log{height:100%;width:100%}:where(.axp-activity-log .__content .__loading>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 4)}.axp-activity-log .__content .__loading .__item .__avatar{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}.axp-activity-log .__content .__loading .__item .__content{flex:1}:where(.axp-activity-log .__content .__loading .__item .__content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 2) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__loading .__item .__content .__title{height:calc(var(--spacing, .25rem) * 4);width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:calc(var(--spacing, .25rem) * 3);width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:calc(var(--spacing, .25rem) * 3);width:calc(5 / 6 * 100%);border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:calc(var(--spacing, .25rem) * 3);width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}:where(.axp-activity-log .__content .__feed>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 6) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 5);top:calc(var(--spacing, .25rem) * 2);bottom:calc(var(--spacing, .25rem) * 2);width:0px;border-left:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 4)}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:var(--spacing, .25rem);display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:85%}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:calc(var(--spacing, .25rem) * 2);display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding:var(--spacing, .25rem);color:rgba(var(--ax-sys-color-primary-surface));transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-border-primary)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-color: rgba(var(--ax-sys-color-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-outline-style: none;outline-style:none}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding:var(--spacing, .25rem);transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-color: rgba(var(--ax-sys-color-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-outline-style: none;outline-style:none}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-block:calc(var(--spacing, .25rem) * 2);display:flex;flex-direction:column;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .3s;transition-duration:.3s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__field-label{max-width:calc(var(--spacing, .25rem) * 40);min-width:calc(var(--spacing, .25rem) * 28);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);opacity:90%}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:85%}.axp-activity-log .__content .__feed .__item .__content .__time{padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:75%}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}@media(min-width:640px){.axp-activity-log .__content .__feed .__item{gap:calc(var(--spacing, .25rem) * 2.5)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse: 0;--tw-leading: initial;--tw-font-weight: initial;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                        AXPActivityLogTimeComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"axp-activity-log accent2\" *translate=\"let t\" [attr.dir]=\"textDirection()\">\n  <!-- Activity Log Content -->\n  <div class=\"__content\">\n    <!-- Loading State -->\n    @if (loading()) {\n    <div class=\"__loading\">\n      @for (item of [1, 2, 3, 4]; track $index) {\n      <div class=\"__item\">\n        <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n        <div class=\"__content\">\n          <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Activity Feed -->\n    @if (!loading() && activities().length > 0) {\n    <div class=\"__feed\">\n      @for (activity of activities(); track activity.id) {\n      @let changeClasses = getChangeClasses(activity.changeType);\n      @let isItemExpanded = isExpanded(activity.id);\n      @let hasExpandableContentItem = hasExpandableContent(activity);\n      <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n        <div class=\"size-10 rounded-full border flex items-center justify-center lightest-surface\">\n          <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }}\"></i>\n        </div>\n\n        <!-- Activity Content -->\n        <div class=\"__content\">\n          <!-- Main Activity Info -->\n          <div class=\"__main-info\">\n            <!-- User and Action with Toggle Button -->\n            <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n              <span class=\"__user-name\">{{ activity.user.title }}</span>\n              @if (showActionType()) {\n              <span class=\"__action-type\">\n                {{ t(`@general:actions.${activity.changeType}.title`) | async }}\n              </span>\n              }\n              <span class=\"__action-text\" dir=\"auto\">\n                {{ activity.title | translate | async }}\n              </span>\n\n              <!-- Compare Button -->\n              @if (canCompare(activity)) {\n              <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n                [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n                <i class=\"fa-solid fa-code-compare\"></i>\n              </button>\n              }\n\n              <!-- Toggle Button (only show if there's expandable content) -->\n              @if (hasExpandableContentItem) {\n              <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n                [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n                <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n                  [class.fa-chevron-up]=\"isItemExpanded\"></i>\n              </button>\n              }\n            </div>\n\n            <!-- Expandable Description/Changes -->\n            @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n            <div class=\"__action-lines __expandable-content\" [class.__animated]=\"shouldAnimate(activity.id)\">\n              @for (change of activity.changes; track $index) {\n              @let changeClasses = getChangeClasses(change.type);\n              <div class=\"__action-line\">\n                @if (change.layout) {\n                <axp-layout-renderer\n                  [layout]=\"$any(change.layout)\"\n                  [context]=\"{ change }\"\n                  mode=\"view\"\n                  class=\"__history-layout\"\n                />\n                } @else {\n                <div class=\"rounded-full size-7 grid place-items-center\">\n                  <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }}\"></i>\n                </div>\n                @if (change.fieldLabel && change.summary) {\n                <span class=\"__field-label\">{{ change.fieldLabel }}</span>\n                <span class=\"__action-text\" dir=\"auto\">{{ change.summary }}</span>\n                } @else if (change.summary) {\n                <span class=\"__action-text\" dir=\"auto\">{{ change.summary }}</span>\n                } @else if (change.fieldKey && change.actionKey) {\n                <span class=\"__action-text\">\n                  {{ change.fieldKey | translate:(change.fieldKeyParams ?? {}) | async }}: {{ change.actionKey | translate | async }}\n                </span>\n                } @else {\n                <span class=\"__action-text\">{{ change.description | translate | async }}</span>\n                }\n                }\n              </div>\n              }\n            </div>\n            }\n          </div>\n\n          <!-- Time -->\n          <div class=\"__time\">\n            <axp-activity-log-time [date]=\"activity.date\" />\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (!loading() && activities().length === 0) {\n    <axp-state-message icon=\"fa-light fa-history\" [title]=\"'@activity-log:components.activity-log.empty-states.no-history.title'\"\n      [description]=\"'@activity-log:components.activity-log.empty-states.no-history.description'\">\n    </axp-state-message>\n    }\n  </div>\n</div>\n\n<!-- \n\nsuccess-surface\nprimary-surface\ndanger-surface\nwarning-surface\ninfo-surface\nmuted-surface\ntext-success\n\n -->", styles: ["@layer properties;.axp-activity-log{height:100%;width:100%}:where(.axp-activity-log .__content .__loading>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 4)}.axp-activity-log .__content .__loading .__item .__avatar{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}.axp-activity-log .__content .__loading .__item .__content{flex:1}:where(.axp-activity-log .__content .__loading .__item .__content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 2) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__loading .__item .__content .__title{height:calc(var(--spacing, .25rem) * 4);width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:calc(var(--spacing, .25rem) * 3);width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:calc(var(--spacing, .25rem) * 3);width:calc(5 / 6 * 100%);border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:calc(var(--spacing, .25rem) * 3);width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}:where(.axp-activity-log .__content .__feed>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 6) * calc(1 - var(--tw-space-y-reverse)))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 5);top:calc(var(--spacing, .25rem) * 2);bottom:calc(var(--spacing, .25rem) * 2);width:0px;border-inline-start:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 4)}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:var(--spacing, .25rem);display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:85%}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-inline-start:calc(var(--spacing, .25rem) * 2);display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding:var(--spacing, .25rem);color:rgba(var(--ax-sys-color-primary-surface));transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-border-primary)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-color: rgba(var(--ax-sys-color-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{--tw-outline-style: none;outline-style:none}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-inline-start:auto;display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding:var(--spacing, .25rem);transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-color: rgba(var(--ax-sys-color-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{--tw-outline-style: none;outline-style:none}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-block:calc(var(--spacing, .25rem) * 2);display:flex;flex-direction:column;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .3s;transition-duration:.3s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__field-label{max-width:calc(var(--spacing, .25rem) * 40);min-width:calc(var(--spacing, .25rem) * 28);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);opacity:90%}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:85%}.axp-activity-log .__content .__feed .__item .__content .__time{padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:75%}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}@media(min-width:640px){.axp-activity-log .__content .__feed .__item{gap:calc(var(--spacing, .25rem) * 2.5)}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse: 0;--tw-leading: initial;--tw-font-weight: initial;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { activities: [{ type: i0.Input, args: [{ isSignal: true, alias: "activities", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], enableCompare: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCompare", required: false }] }], showActionType: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionType", required: false }] }], compareRequested: [{ type: i0.Output, args: ["compareRequested"] }] } });
 
 //#region ---- Imports ----
@@ -379,7 +438,7 @@ class AXPAvatarComponent {
         return colors[index];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPAvatarComponent, isStandalone: true, selector: "axp-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, fallbackText: { classPropertyName: "fallbackText", publicName: "fallbackText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"axp-avatar-host\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n>\n  <ax-avatar\n    [size]=\"size()\"\n    class=\"cursor-pointer relative border\"\n    [color]=\"avatarColor()\"\n    [look]=\"'twotone'\"\n    [attr.data-avatar-color]=\"avatarColor()\"\n    [attr.title]=\"showTitle() && title() ? title() : null\"\n  >\n    @if (hasAvatar()) {\n      <ax-image\n        (onError)=\"onImageError($event)\"\n        (onLoad)=\"onImageLoad($event)\"\n        [src]=\"resolvedSrc()\"\n      />\n    } @else {\n      <ax-text class=\"axp-avatar__initials-wrap\">\n        <span class=\"axp-avatar__initials\" [style.font-size]=\"size() * 0.35 + 'px'\">{{\n          avatarText()\n        }}</span>\n      </ax-text>\n    }\n  </ax-avatar>\n  <!-- ----- Loading overlay while a new image URL is resolving or the img is decoding ----- -->\n  @if (showLoadingOverlay()) {\n    <div class=\"axp-avatar__loading\" [attr.aria-busy]=\"true\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host .axp-avatar-host{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}:host .axp-avatar__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-surface),1)}@supports (color: color-mix(in lab,red,red)){:host .axp-avatar__loading{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-surface),1) 72%,transparent)}}:host ax-avatar{display:inline-flex!important;align-items:center;justify-content:center;line-height:0}:host ax-avatar[data-avatar-color=primary]{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest)}:host ax-avatar[data-avatar-color=secondary]{background-color:var(--color-secondary-lightest);color:var(--color-on-secondary-lightest);border-color:var(--color-border-secondary-lightest)}:host ax-avatar[data-avatar-color=danger]{background-color:var(--color-danger-lightest);color:var(--color-on-danger-lightest);border-color:var(--color-border-danger-lightest)}:host ax-avatar[data-avatar-color=warning]{background-color:var(--color-warning-lightest);color:var(--color-on-warning-lightest);border-color:var(--color-border-warning-lightest)}:host ax-avatar[data-avatar-color=success]{background-color:var(--color-success-lightest);color:var(--color-on-success-lightest);border-color:var(--color-border-success-lightest)}:host ax-avatar[data-avatar-color=accent1]{background-color:var(--color-accent1-lightest);color:var(--color-on-accent1-lightest);border-color:var(--color-border-accent1-lightest)}:host ax-avatar[data-avatar-color=accent2]{background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest)}:host ax-avatar[data-avatar-color=accent3]{background-color:var(--color-accent3-lightest);color:var(--color-on-accent3-lightest);border-color:var(--color-border-accent3-lightest)}:host ax-avatar ax-text,:host .axp-avatar__initials-wrap{display:flex;align-items:center;justify-content:center;--tw-border-style: none;border-style:none;background-color:transparent;color:inherit!important;width:100%;height:100%;line-height:1}:host .axp-avatar__initials{display:flex;align-items:center;justify-content:center;font-weight:600;line-height:1}:host ax-image{position:absolute!important;inset:0;width:100%!important;height:100%!important}:host ax-image img{display:block!important}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPAvatarComponent, isStandalone: true, selector: "axp-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, fallbackText: { classPropertyName: "fallbackText", publicName: "fallbackText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"axp-avatar-host\"\n  [style.width.px]=\"size()\"\n  [style.height.px]=\"size()\"\n>\n  <ax-avatar\n    [size]=\"size()\"\n    class=\"cursor-pointer relative border\"\n    [color]=\"avatarColor()\"\n    [look]=\"'twotone'\"\n    [attr.data-avatar-color]=\"avatarColor()\"\n    [attr.title]=\"showTitle() && title() ? title() : null\"\n  >\n    @if (hasAvatar()) {\n      <ax-image\n        (onError)=\"onImageError($event)\"\n        (onLoad)=\"onImageLoad($event)\"\n        [src]=\"resolvedSrc()\"\n      />\n    } @else {\n      <ax-text class=\"axp-avatar__initials-wrap\">\n        <span class=\"axp-avatar__initials\" [style.font-size]=\"size() * 0.35 + 'px'\">{{\n          avatarText()\n        }}</span>\n      </ax-text>\n    }\n  </ax-avatar>\n  <!-- ----- Loading overlay while a new image URL is resolving or the img is decoding ----- -->\n  @if (showLoadingOverlay()) {\n    <div class=\"axp-avatar__loading\" [attr.aria-busy]=\"true\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host .axp-avatar-host{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}:host .axp-avatar__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-surface),1)}@supports (color: color-mix(in lab,red,red)){:host .axp-avatar__loading{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-surface),1) 72%,transparent)}}:host ax-avatar{display:inline-flex!important;align-items:center;justify-content:center;line-height:0}:host ax-avatar[data-avatar-color=primary]{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest)}:host ax-avatar[data-avatar-color=secondary]{background-color:var(--color-secondary-lightest);color:var(--color-on-secondary-lightest);border-color:var(--color-border-secondary-lightest)}:host ax-avatar[data-avatar-color=danger]{background-color:var(--color-danger-lightest);color:var(--color-on-danger-lightest);border-color:var(--color-border-danger-lightest)}:host ax-avatar[data-avatar-color=warning]{background-color:var(--color-warning-lightest);color:var(--color-on-warning-lightest);border-color:var(--color-border-warning-lightest)}:host ax-avatar[data-avatar-color=success]{background-color:var(--color-success-lightest);color:var(--color-on-success-lightest);border-color:var(--color-border-success-lightest)}:host ax-avatar[data-avatar-color=accent1]{background-color:var(--color-accent1-lightest);color:var(--color-on-accent1-lightest);border-color:var(--color-border-accent1-lightest)}:host ax-avatar[data-avatar-color=accent2]{background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest)}:host ax-avatar[data-avatar-color=accent3]{background-color:var(--color-accent3-lightest);color:var(--color-on-accent3-lightest);border-color:var(--color-border-accent3-lightest)}:host ax-avatar ax-text,:host .axp-avatar__initials-wrap{display:flex;align-items:center;justify-content:center;--tw-border-style: none;border-style:none;background-color:transparent;color:inherit!important;width:100%;height:100%;line-height:1}:host .axp-avatar__initials{display:flex;align-items:center;justify-content:center;font-weight:600;line-height:1}:host ax-image{position:absolute!important;inset:0;width:100%!important;height:100%!important}:host ax-image img{display:block!important}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAvatarComponent, decorators: [{
             type: Component,
@@ -2691,7 +2750,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n    <!-- Category Filter Side Panel -->\n    @if (categoryEnabled()) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"w-full mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <ax-data-table #grid [showFooter]=\"false\" class=\"flex-1 min-h-0\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\">\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n        @for (col of config().grid.columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n        @if (hasRowActionPrimary()) {\n        <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-command-column>\n        }\n        @if (hasRowActionDropdown()) {\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if (config().footerPrefixAction; as prefixAction) {\n      <!-- ----- Optional footer prefix action (e.g. sync from remote provider) ----- -->\n      <ax-button\n        look=\"twotone\"\n        color=\"primary\"\n        type=\"button\"\n        [disabled]=\"footerPrefixActionInProgress()\"\n        [text]=\"prefixAction.text\"\n        (onClick)=\"handleFooterPrefixActionClick()\"\n      >\n        <ax-prefix>\n          @if (footerPrefixActionInProgress()) {\n            <ax-loading></ax-loading>\n          }\n          <!-- ----- Footer prefix action icon when idle ----- -->\n          @else if (prefixAction.icon) {\n            <ax-icon [icon]=\"prefixAction.icon\"></ax-icon>\n          }\n        </ax-prefix>\n      </ax-button>\n    }\n    @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"absolute end-[2px] top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.expand-handler{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.expand-handler:hover{opacity:.8}.axp-data-selector{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-data-selector-content{display:flex;min-height:0px;flex:1;overflow:hidden}.axp-data-selector .axp-data-selector-content.with-category-filter .axp-main-data-area{min-height:0px;min-width:0px;flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;min-height:0px;min-width:0px;flex-shrink:0;flex-direction:column;overflow:hidden;padding:calc(var(--spacing, .25rem) * 4);border-right:1px solid var(--border-color);background:var(--surface-color)}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.axp-data-selector .axp-main-data-area ax-data-table{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;overflow:hidden;height:90vh;max-height:90vh}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$5.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$2.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed", "advanceSelect"] }, { kind: "component", type: i4$2.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$2.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "columnKey", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n    <!-- Category Filter Side Panel -->\n    @if (categoryEnabled()) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"w-full mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <ax-data-table #grid [showFooter]=\"false\" class=\"flex-1 min-h-0\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\">\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n        @for (col of config().grid.columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n        @if (hasRowActionPrimary()) {\n        <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-command-column>\n        }\n        @if (hasRowActionDropdown()) {\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if (config().footerPrefixAction; as prefixAction) {\n      <!-- ----- Optional footer prefix action (e.g. sync from remote provider) ----- -->\n      <ax-button\n        look=\"twotone\"\n        color=\"primary\"\n        type=\"button\"\n        [disabled]=\"footerPrefixActionInProgress()\"\n        [text]=\"prefixAction.text\"\n        (onClick)=\"handleFooterPrefixActionClick()\"\n      >\n        <ax-prefix>\n          @if (footerPrefixActionInProgress()) {\n            <ax-loading></ax-loading>\n          }\n          <!-- ----- Footer prefix action icon when idle ----- -->\n          @else if (prefixAction.icon) {\n            <ax-icon [icon]=\"prefixAction.icon\"></ax-icon>\n          }\n        </ax-prefix>\n      </ax-button>\n    }\n    @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"absolute end-[2px] top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.expand-handler{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.expand-handler:hover{opacity:.8}.axp-data-selector{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-data-selector-content{display:flex;min-height:0px;flex:1;overflow:hidden}.axp-data-selector .axp-data-selector-content.with-category-filter .axp-main-data-area{min-height:0px;min-width:0px;flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;min-height:0px;min-width:0px;flex-shrink:0;flex-direction:column;overflow:hidden;padding:calc(var(--spacing, .25rem) * 4);border-right:1px solid var(--border-color);background:var(--surface-color)}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.axp-data-selector .axp-main-data-area ax-data-table{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;overflow:hidden;height:90vh;max-height:90vh}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$5.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed", "advanceSelect"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "columnKey", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
             type: Component,
@@ -3797,7 +3856,7 @@ class AXPConditionBuilderComponent {
         this.updateValue();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderComponent, isStandalone: true, selector: "axp-condition-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null }, operationsLook: { classPropertyName: "operationsLook", publicName: "operationsLook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"axp-condition-builder\">\n  <div class=\"__content\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupTemplate\"\n      [ngTemplateOutletContext]=\"{ group: queryData(), isRoot: true }\"\n    ></ng-container>\n  </div>\n</div>\n\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\">\n  <div\n    class=\"__group\"\n    [class.__root-group]=\"isRoot\"\n    [class.__connectors-enabled]=\"(group.filters?.length ?? 0) > 1\"\n  >\n    <div class=\"__group-wrapper\">\n      @if ((group.filters?.length ?? 0) > 1) {\n        <div class=\"__group-connector\">\n          <div class=\"__operator-selector\">\n            <ax-dropdown-button\n              class=\"ax-sm __operator-chip\"\n              [text]=\"getLogicDisplayText(group.logic)\"\n              [mode]=\"'dropdown'\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n            >\n              <ax-button-item-list>\n                @for (op of logicalOperatorsItems; track op.value) {\n                  <ax-button-item\n                    [text]=\"op.text\"\n                    [selected]=\"group.logic === op.value\"\n                    (onClick)=\"updateGroupLogicalOperator(group.id!, op.value)\"\n                  >\n                  </ax-button-item>\n                }\n              </ax-button-item-list>\n            </ax-dropdown-button>\n          </div>\n        </div>\n      }\n\n      <div\n        class=\"__conditions-container\"\n        axDropList\n        (dropListDropped)=\"reorderGroupItemsEvent(group.id!, $event)\"\n      >\n        @if ((group.filters?.length ?? 0) === 0) {\n          <div class=\"__group-empty\">\n            <ax-button\n              class=\"ax-sm __add-rule-btn\"\n              [look]=\"'twotone'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addConditionToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button\n              class=\"ax-sm __add-inner-group-btn\"\n              [look]=\"'outline'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addGroupToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        } @else {\n          @for (\n            item of getSortedFilters(group.filters || []);\n            track item.id;\n            let first = $first;\n            let last = $last\n          ) {\n            <div\n              class=\"__condition-item\"\n              axDrag\n              [class.__is-first]=\"first && (group.filters?.length ?? 0) > 1\"\n              [class.__is-last]=\"last && (group.filters?.length ?? 0) > 1\"\n            >\n              <div class=\"__drag-handle\" axDragHandle>\n                <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n              </div>\n\n              <div class=\"__item-content\">\n                @if (item.filters === undefined) {\n                  <axp-condition-builder-condition\n                    [item]=\"item\"\n                    [filterDefinitions]=\"filterDefinitions()\"\n                    [onResolveWidget]=\"resolveDefaultFilterWidget.bind(this)\"\n                    [showFillByUser]=\"showFillByUser()\"\n                    [operationsLook]=\"operationsLook()\"\n                    (itemChange)=\"updateCondition($event)\"\n                    (removeItem)=\"removeItem($event)\"\n                  >\n                  </axp-condition-builder-condition>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"groupTemplate\"\n                    [ngTemplateOutletContext]=\"{ group: item }\"\n                  >\n                  </ng-container>\n                }\n              </div>\n\n              <div class=\"__item-controls\">\n                <ax-button\n                  class=\"ax-sm __icon-btn\"\n                  [look]=\"'blank'\"\n                  [color]=\"'danger'\"\n                  [title]=\"\n                    '@data-management:metadata-definitions.components.query-builder.actions.remove.title'\n                      | translate\n                      | async\n                  \"\n                  (onClick)=\"removeItem(item.id!)\"\n                >\n                  <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n    <!-- <div class=\"__add-condition-link ps-16\">\n      <ax-button class=\"ax-sm __add-condition-btn\" [look]=\"'link'\" [color]=\"'primary'\"\n        [text]=\"'@data-management:metadata-definitions.components.query-builder.actions.add-condition.title' | translate | async\"\n        (onClick)=\"addConditionToGroup(group.id!)\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div> -->\n\n    @if ((group.filters?.length ?? 0) > 0) {\n      <div class=\"__group-actions\">\n        <ax-button\n          class=\"ax-sm __add-rule-btn\"\n          [look]=\"'twotone'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addConditionToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n        <ax-button\n          class=\"ax-sm __add-inner-group-btn\"\n          [look]=\"'outline'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addGroupToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axp-condition-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-condition-builder .__content{flex:1;overflow:auto;padding:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group{position:relative}.axp-condition-builder .__group.__root-group{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-condition-builder .__group:not(.__root-group){margin-top:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__group .__group-wrapper{--qb-connector-col: 4.25rem;--qb-conditions-gap: 1rem;display:grid;grid-template-columns:var(--qb-connector-col) 1fr;gap:0 var(--qb-conditions-gap);align-items:stretch;width:100%;min-height:2rem;min-width:0}.axp-condition-builder .__group:not(.__connectors-enabled)>.__group-wrapper{grid-template-columns:1fr}.axp-condition-builder .__group .__group-connector{--qb-operator-gap: .45rem;position:relative;width:var(--qb-connector-col);display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:0}.axp-condition-builder .__group .__group-connector:before,.axp-condition-builder .__group .__group-connector:after{content:\"\";position:absolute;left:50%;transform:translate(-50%);top:var(--qb-connector-top, 1.5rem);bottom:var(--qb-connector-bottom, 1.5rem);width:0;border-left:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__group .__group-connector:before{bottom:calc(50% - var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector:after{top:calc(50% + var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector .__operator-selector{position:absolute;top:0;left:50%;z-index:10;margin:0;display:flex;max-width:100%;flex-shrink:0;align-items:center;justify-content:center;transform:translate(-50%);box-sizing:border-box;height:100%}.axp-condition-builder .__group .__group-connector .__operator-selector .__operator-chip{position:relative;z-index:1;max-width:100%;flex-shrink:0;border-radius:var(--radius-md, .375rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));min-width:3.25rem}.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:before,.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:after{content:none}.axp-condition-builder .__group .__conditions-container{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 8);min-width:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-left:0;padding-right:0}.axp-condition-builder .__group .__conditions-container .__group-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving{position:relative;min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);padding:var(--spacing, .25rem);border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}:is(.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving):has(.__group-empty):after{content:\"Drop conditions here\";position:absolute;inset:0;z-index:-1;display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-primary-surface));pointer-events:none}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder){margin-bottom:.375rem}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder):last-child{margin-bottom:0}.axp-condition-builder .__group .__group-actions{margin-top:calc(var(--spacing, .25rem) * 2);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-block:calc(var(--spacing, .25rem) * 2.5);border-top:1px solid rgba(var(--ax-sys-color-border-lighter-surface),1);grid-column:1 / -1}.axp-condition-builder .__group .__add-condition-link{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-condition-builder .__condition-item{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 12);cursor:move;align-items:center;gap:calc(var(--spacing, .25rem) * 3);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);-webkit-user-select:none;user-select:none;border-radius:.375rem;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__condition-item:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1)}.axp-condition-builder .__condition-item.__is-first:before,.axp-condition-builder .__condition-item.__is-last:before{content:\"\";position:absolute;left:calc(-1 * (var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem)));top:50%;transform:translateY(-50%);width:calc(var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem));height:0;border-top:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__condition-item .__drag-handle{position:relative;z-index:1;display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none));transition:color .15s ease-in-out}.axp-condition-builder .__condition-item .__drag-handle:active{cursor:grabbing}.axp-condition-builder .__condition-item .__drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-condition-builder .__condition-item .__item-content{position:relative;z-index:1;min-width:0px;flex:1}.axp-condition-builder .__condition-item .__item-controls{position:relative;z-index:1;display:flex;width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing, .25rem)}.axp-condition-builder .__condition-item .__icon-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;width:1.75rem;height:1.75rem}.axp-condition-builder .__condition-item.drag-preview{display:flex;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);opacity:.9;border-radius:.375rem;border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder{position:relative;margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 12);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-radius:.375rem;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder>*{opacity:0%}.axp-condition-builder .__condition-item.drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-condition-builder .__group:not(.__root-group).drag-preview{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-placeholder{margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 16);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-dragging{opacity:70%}.axp-condition-builder .__group:not(.__root-group):hover:not(.drag-dragging) .__drag-handle{color:rgba(var(--ax-sys-color-primary-surface))}.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:before,.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:after{content:none}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped", "sortPreviewChanged"], exportAs: ["axDropList"] }, { kind: "component", type: AXPConditionBuilderConditionComponent, selector: "axp-condition-builder-condition", inputs: ["item", "filterDefinitions", "onResolveWidget", "showFillByUser", "compact", "operationsLook"], outputs: ["itemChange", "removeItem"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderComponent, isStandalone: true, selector: "axp-condition-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null }, operationsLook: { classPropertyName: "operationsLook", publicName: "operationsLook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"axp-condition-builder\">\n  <div class=\"__content\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupTemplate\"\n      [ngTemplateOutletContext]=\"{ group: queryData(), isRoot: true }\"\n    ></ng-container>\n  </div>\n</div>\n\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\">\n  <div\n    class=\"__group\"\n    [class.__root-group]=\"isRoot\"\n    [class.__connectors-enabled]=\"(group.filters?.length ?? 0) > 1\"\n  >\n    <div class=\"__group-wrapper\">\n      @if ((group.filters?.length ?? 0) > 1) {\n        <div class=\"__group-connector\">\n          <div class=\"__operator-selector\">\n            <ax-dropdown-button\n              class=\"ax-sm __operator-chip\"\n              [text]=\"getLogicDisplayText(group.logic)\"\n              [mode]=\"'dropdown'\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n            >\n              <ax-button-item-list>\n                @for (op of logicalOperatorsItems; track op.value) {\n                  <ax-button-item\n                    [text]=\"op.text\"\n                    [selected]=\"group.logic === op.value\"\n                    (onClick)=\"updateGroupLogicalOperator(group.id!, op.value)\"\n                  >\n                  </ax-button-item>\n                }\n              </ax-button-item-list>\n            </ax-dropdown-button>\n          </div>\n        </div>\n      }\n\n      <div\n        class=\"__conditions-container\"\n        axDropList\n        (dropListDropped)=\"reorderGroupItemsEvent(group.id!, $event)\"\n      >\n        @if ((group.filters?.length ?? 0) === 0) {\n          <div class=\"__group-empty\">\n            <ax-button\n              class=\"ax-sm __add-rule-btn\"\n              [look]=\"'twotone'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addConditionToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button\n              class=\"ax-sm __add-inner-group-btn\"\n              [look]=\"'outline'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addGroupToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        } @else {\n          @for (\n            item of getSortedFilters(group.filters || []);\n            track item.id;\n            let first = $first;\n            let last = $last\n          ) {\n            <div\n              class=\"__condition-item\"\n              axDrag\n              [class.__is-first]=\"first && (group.filters?.length ?? 0) > 1\"\n              [class.__is-last]=\"last && (group.filters?.length ?? 0) > 1\"\n            >\n              <div class=\"__drag-handle\" axDragHandle>\n                <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n              </div>\n\n              <div class=\"__item-content\">\n                @if (item.filters === undefined) {\n                  <axp-condition-builder-condition\n                    [item]=\"item\"\n                    [filterDefinitions]=\"filterDefinitions()\"\n                    [onResolveWidget]=\"resolveDefaultFilterWidget.bind(this)\"\n                    [showFillByUser]=\"showFillByUser()\"\n                    [operationsLook]=\"operationsLook()\"\n                    (itemChange)=\"updateCondition($event)\"\n                    (removeItem)=\"removeItem($event)\"\n                  >\n                  </axp-condition-builder-condition>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"groupTemplate\"\n                    [ngTemplateOutletContext]=\"{ group: item }\"\n                  >\n                  </ng-container>\n                }\n              </div>\n\n              <div class=\"__item-controls\">\n                <ax-button\n                  class=\"ax-sm __icon-btn\"\n                  [look]=\"'blank'\"\n                  [color]=\"'danger'\"\n                  [title]=\"\n                    '@data-management:metadata-definitions.components.query-builder.actions.remove.title'\n                      | translate\n                      | async\n                  \"\n                  (onClick)=\"removeItem(item.id!)\"\n                >\n                  <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n    <!-- <div class=\"__add-condition-link ps-16\">\n      <ax-button class=\"ax-sm __add-condition-btn\" [look]=\"'link'\" [color]=\"'primary'\"\n        [text]=\"'@data-management:metadata-definitions.components.query-builder.actions.add-condition.title' | translate | async\"\n        (onClick)=\"addConditionToGroup(group.id!)\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div> -->\n\n    @if ((group.filters?.length ?? 0) > 0) {\n      <div class=\"__group-actions\">\n        <ax-button\n          class=\"ax-sm __add-rule-btn\"\n          [look]=\"'twotone'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addConditionToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n        <ax-button\n          class=\"ax-sm __add-inner-group-btn\"\n          [look]=\"'outline'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addGroupToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axp-condition-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-condition-builder .__content{flex:1;overflow:auto;padding:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group{position:relative}.axp-condition-builder .__group.__root-group{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-condition-builder .__group:not(.__root-group){margin-top:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__group .__group-wrapper{--qb-connector-col: 4.25rem;--qb-conditions-gap: 1rem;display:grid;grid-template-columns:var(--qb-connector-col) 1fr;gap:0 var(--qb-conditions-gap);align-items:stretch;width:100%;min-height:2rem;min-width:0}.axp-condition-builder .__group:not(.__connectors-enabled)>.__group-wrapper{grid-template-columns:1fr}.axp-condition-builder .__group .__group-connector{--qb-operator-gap: .45rem;position:relative;width:var(--qb-connector-col);display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:0}.axp-condition-builder .__group .__group-connector:before,.axp-condition-builder .__group .__group-connector:after{content:\"\";position:absolute;left:50%;transform:translate(-50%);top:var(--qb-connector-top, 1.5rem);bottom:var(--qb-connector-bottom, 1.5rem);width:0;border-left:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__group .__group-connector:before{bottom:calc(50% - var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector:after{top:calc(50% + var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector .__operator-selector{position:absolute;top:0;left:50%;z-index:10;margin:0;display:flex;max-width:100%;flex-shrink:0;align-items:center;justify-content:center;transform:translate(-50%);box-sizing:border-box;height:100%}.axp-condition-builder .__group .__group-connector .__operator-selector .__operator-chip{position:relative;z-index:1;max-width:100%;flex-shrink:0;border-radius:var(--radius-md, .375rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));min-width:3.25rem}.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:before,.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:after{content:none}.axp-condition-builder .__group .__conditions-container{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 8);min-width:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-left:0;padding-right:0}.axp-condition-builder .__group .__conditions-container .__group-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving{position:relative;min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);padding:var(--spacing, .25rem);border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}:is(.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving):has(.__group-empty):after{content:\"Drop conditions here\";position:absolute;inset:0;z-index:-1;display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-primary-surface));pointer-events:none}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder){margin-bottom:.375rem}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder):last-child{margin-bottom:0}.axp-condition-builder .__group .__group-actions{margin-top:calc(var(--spacing, .25rem) * 2);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-block:calc(var(--spacing, .25rem) * 2.5);border-top:1px solid rgba(var(--ax-sys-color-border-lighter-surface),1);grid-column:1 / -1}.axp-condition-builder .__group .__add-condition-link{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-condition-builder .__condition-item{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 12);cursor:move;align-items:center;gap:calc(var(--spacing, .25rem) * 3);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);-webkit-user-select:none;user-select:none;border-radius:.375rem;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__condition-item:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1)}.axp-condition-builder .__condition-item.__is-first:before,.axp-condition-builder .__condition-item.__is-last:before{content:\"\";position:absolute;left:calc(-1 * (var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem)));top:50%;transform:translateY(-50%);width:calc(var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem));height:0;border-top:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__condition-item .__drag-handle{position:relative;z-index:1;display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none));transition:color .15s ease-in-out}.axp-condition-builder .__condition-item .__drag-handle:active{cursor:grabbing}.axp-condition-builder .__condition-item .__drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-condition-builder .__condition-item .__item-content{position:relative;z-index:1;min-width:0px;flex:1}.axp-condition-builder .__condition-item .__item-controls{position:relative;z-index:1;display:flex;width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing, .25rem)}.axp-condition-builder .__condition-item .__icon-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;width:1.75rem;height:1.75rem}.axp-condition-builder .__condition-item.drag-preview{display:flex;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);opacity:.9;border-radius:.375rem;border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder{position:relative;margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 12);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-radius:.375rem;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder>*{opacity:0%}.axp-condition-builder .__condition-item.drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-condition-builder .__group:not(.__root-group).drag-preview{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-placeholder{margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 16);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-dragging{opacity:70%}.axp-condition-builder .__group:not(.__root-group):hover:not(.drag-dragging) .__drag-handle{color:rgba(var(--ax-sys-color-primary-surface))}.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:before,.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:after{content:none}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped", "sortPreviewChanged"], exportAs: ["axDropList"] }, { kind: "component", type: AXPConditionBuilderConditionComponent, selector: "axp-condition-builder-condition", inputs: ["item", "filterDefinitions", "onResolveWidget", "showFillByUser", "compact", "operationsLook"], outputs: ["itemChange", "removeItem"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderComponent, decorators: [{
             type: Component,
@@ -6826,7 +6885,7 @@ class AXPQueryFiltersComponent {
                         ...prev,
                         [contextField]: {
                             value: this.tagBoxInput?.value,
-                            operation: { type: 'contains' },
+                            operation: field.operator,
                         },
                     };
                 });
@@ -7346,7 +7405,7 @@ class AXPQueryFiltersComponent {
             const next = { ...prev };
             delete next[previousKey];
             next[nextKey] = {
-                operation: definition.operator ?? { type: 'contains' },
+                operation: definition.operator,
             };
             return next;
         });
@@ -7394,7 +7453,7 @@ class AXPQueryFiltersComponent {
         this.context.update((prev) => ({
             ...prev,
             [contextField]: {
-                operation: definition.operator ?? { type: 'contains' },
+                operation: definition.operator,
             },
         }));
         this.syncWidgetsContainerContext(this.context());
@@ -7721,7 +7780,7 @@ class AXPQueryFiltersComponent {
      */
     #focusEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null }, sortPresets: { classPropertyName: "sortPresets", publicName: "sortPresets", isSignal: true, isRequired: false, transformFunction: null }, activeSortPresetName: { classPropertyName: "activeSortPresetName", publicName: "activeSortPresetName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged", onSortPresetSelected: "onSortPresetSelected" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "mobileFilterTrigger", first: true, predicate: ["mobileFilterTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderers", predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"flex w-full min-w-0 items-center gap-2 px-1.5 py-1\"\n  [class.axp-query-filters__bar--toggle-collapsed]=\"deviceService.isSmall() && mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n  (keydown.control.space)=\"openFilterPopover()\"\n>\n  @if (deviceService.isSmall()) {\n    <!-- ----- Inline search replaces the chip row ----- -->\n    @if (mobileSearchOpen()) {\n      <div id=\"axp-query-filters-mobile-search\" class=\"axp-query-filters__mobile-search\">\n        <ax-search-box\n          class=\"ax-sm\"\n          [value]=\"mobileSearchText()\"\n          [delayTime]=\"300\"\n          [placeholder]=\"('@general:terms.interface.filter.search-placeholder' | translate | async) ?? ''\"\n          (onValueChanged)=\"handleMobileSearchChanged($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <!-- ----- Compact pill row instead of the desktop tag-box toolbar ----- -->\n    @else {\n      <div\n        #mobileFilterTrigger\n        class=\"axp-query-filters__mobile-row\"\n        [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n        (wheel)=\"handleChipsWheel($event)\"\n        (pointerdown)=\"handleChipsPointerDown($event)\"\n        (scroll)=\"handleMobileChipsScroll($event)\"\n      >\n      @for (chip of mobileFilterChips(); track chip.id) {\n        <!--->\n        <!-- ----- Applied filter chip keeps the field title, with a primary border ----- -->\n        @if (chip.kind === 'applied') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--applied\"\n            [class.axp-query-filters__mobile-chip--search]=\"chip.tag.field === 'all'\"\n            (click)=\"handleTagClick(chip.tag, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ mobileChipLabel(chip.tag) }}</span>\n            <!--->\n            <!-- ----- Remove this applied filter ----- -->\n            @if (!chip.tag.readOnly) {\n              <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, chip.tagIndex)\" type=\"button\">\n                <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n              </button>\n            }\n          </div>\n        }\n        <!-- ----- Unused filter field as an outline chip ----- -->\n        @else if (chip.kind === 'available') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--available\"\n            [class.axp-query-filters__mobile-chip--disabled]=\"isFilterDisabled(chip.definition)\"\n            [attr.aria-disabled]=\"isFilterDisabled(chip.definition) ? 'true' : null\"\n            (click)=\"openMobileAvailableFilter(chip.definition, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ chip.definition.title | translate | async }}</span>\n            <ax-icon class=\"fa-light fa-angle-down axp-query-filters__mobile-chip-caret\"></ax-icon>\n          </div>\n        }\n      }\n      @for (preset of sortPresets(); track preset.name) {\n        <!--------------------------------------------------------------->\n        <!-- ----- Sort preset pill in the same row as advance filters ----- -->\n        <div\n          class=\"axp-query-filters__mobile-chip\"\n          [class.axp-query-filters__mobile-chip--applied]=\"isMobileSortPresetActive(preset)\"\n          [class.axp-query-filters__mobile-chip--available]=\"!isMobileSortPresetActive(preset)\"\n          [attr.aria-pressed]=\"isMobileSortPresetActive(preset)\"\n          (click)=\"applyMobileSortPreset(preset, $event)\"\n        >\n          <span class=\"axp-query-filters__mobile-chip-text\">{{ preset.title | translate | async }}</span>\n          <!--------------------------------------------------------------->\n          <!-- ----- Custom icon when the recipe does not use a direction arrow ----- -->\n          @if (preset.icon) {\n            <ax-icon [class]=\"preset.icon + ' axp-query-filters__mobile-chip-caret'\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Descending hint when the first sort is descending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'desc') {\n            <ax-icon class=\"fa-solid fa-arrow-down-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Ascending hint when the first sort is ascending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'asc') {\n            <ax-icon class=\"fa-solid fa-arrow-up-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n        </div>\n      }\n    </div>\n    }\n    <div\n      class=\"axp-query-filters__mode-toggle\"\n      [class.axp-query-filters__mode-toggle--collapsed]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.aria-hidden]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.inert]=\"mobileModeToggleCollapsed() && !mobileSearchOpen() ? true : null\"\n      role=\"tablist\"\n      [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n    >\n      <div class=\"axp-query-filters__mode-toggle-inner\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"!mobileSearchOpen()\"\n          [disabled]=\"isMobileFilterModeLocked()\"\n          [attr.aria-selected]=\"!mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(false)\"\n        >\n          <ax-icon class=\"fa-light fa-filter\"></ax-icon>\n        </button>\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"mobileSearchOpen()\"\n          [disabled]=\"isMobileSearchModeLocked()\"\n          [attr.aria-selected]=\"mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:actions.search.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(true)\"\n        >\n          <ax-icon class=\"fa-light fa-magnifying-glass\"></ax-icon>\n        </button>\n      </div>\n    </div>\n  } @else {\n    <!-- ----- Root AND/OR when more than one visible chip, including All ----- -->\n    @if (isAdvanced() && hasMultipleFilterGroups()) {\n      <ax-button-group\n        class=\"axp-query-filters__logic-toggle ax-sm shrink-0\"\n        [selection]=\"'single'\"\n        [look]=\"'outline'\"\n        [color]=\"'primary'\"\n      >\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-and' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'and'\" (onClick)=\"setRootLogic('and')\"></ax-button-group-item>\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-or' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'or'\" (onClick)=\"setRootLogic('or')\"></ax-button-group-item>\n      </ax-button-group>\n    }\n    <!-- ----- Filter picker when root AND/OR is hidden ----- -->\n    @else {\n      <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"isAdvanced() ? openNewFilterGroup() : openFilterPopover()\" #filterButton [look]=\"'blank'\">\n        <ax-icon class=\"far fa-bars-filter cursor-pointer\"></ax-icon>\n      </ax-button>\n    }\n  }\n  <div\n    class=\"axp-query-filters__chips min-w-0\"\n    [class.flex-1]=\"!deviceService.isSmall()\"\n    [class.hidden]=\"deviceService.isSmall()\"\n    [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n    (click)=\"handleTagBoxClick($event)\"\n    (wheel)=\"handleChipsWheel($event)\"\n    (pointerdown)=\"handleChipsPointerDown($event)\"\n  >\n    <ax-tag-box\n      #tagBoxComponent\n      [ngModel]=\"asyncTags()\"\n      (onValueChanged)=\"handleSelectFilters($event)\"\n      [textField]=\"'query'\"\n      [valueField]=\"'id'\"\n      [readonly]=\"filtersDefinitions().length === 0\"\n      [look]=\"'none'\"\n      [readonlyField]=\"'readOnly'\"\n      [tagTemplate]=\"tagTemplate\"\n      (onKeyDown)=\"handleKeyDown($event)\"\n      [addOnEnter]=\"false\"\n      [allowDuplicateValues]=\"true\"\n      [placeholder]=\"(filtersDefinitions().length === 0 ? '@general:terms.interface.filter.no-filter-definitions' : '@general:terms.interface.filter.placeholder') | translate | async\"\n      #tagBox\n    >\n      <ax-suffix class=\"hidden shrink-0 whitespace-nowrap md:flex text-gray-500\">\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-tag-box>\n  </div>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div class=\"axp-query-filters__chip\" [class.axp-query-filters__chip--active]=\"item.id === activeChipId()\" [class.axp-query-filters__chip--search]=\"item.field === 'all'\" (click)=\"handleTagClick(item, $event)\">\n      <!-- ----- Quick search chip keeps a single text label ----- -->\n      @if (item.chipMode === 'search') {\n        <span class=\"axp-query-filters__chip-text\">{{ item.query }}</span>\n      } @else if (item.chipMode === 'summary') {\n        <!-- ----- Summary chip when more than two conditions ----- -->\n        @if (item.titleLabel) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}:</span>\n        }\n        <span class=\"axp-query-filters__chip-text\">{{ item.summaryText }}</span>\n      } @else {\n        <!-- ----- One or two conditions: field + operator + quoted value ----- -->\n        @if (item.titleLabel && !item.mixed) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}</span>\n        }\n        @for (cond of item.chipConditions; track $index) {\n          <!--->\n          <!-- ----- Logic connector between conditions ----- -->\n          @if ($index > 0) {\n            <span class=\"axp-query-filters__chip-logic\">{{ item.logicLabel }}</span>\n          }\n          <!--->\n          <!-- ----- Field title on mixed-field chips ----- -->\n          @if (item.mixed && cond.title) {\n            <span class=\"axp-query-filters__chip-title\">{{ cond.title }}</span>\n          }\n          <span class=\"axp-query-filters__chip-operator\">{{ cond.operator }}</span>\n          <!--->\n          <!-- ----- Quoted value badge when the operator has a display value ----- -->\n          @if (cond.value) {\n            <span class=\"axp-query-filters__chip-value\">'{{ cond.value }}'</span>\n          }\n        }\n      }\n      @if (!item.readOnly) {\n        <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n        </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover [offsetY]=\"activeFilter() ? -30 : 0\" [openOn]=\"'toggle'\" (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\" [adaptivityEnabled]=\"true\" #popover>\n  <div class=\"axp-query-filters__popover md:min-w-72 w-full rounded-md md:max-h-[min(32rem,80vh)] lg:w-[520px] md:overflow-auto\">\n    <axp-widgets-container #widgetsContainer [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"axp-query-filters__editor-header border-b border-border-light px-4 py-2\">\n            <div class=\"flex min-w-0 items-center gap-2 font-semibold\">\n              <!--->\n              <!-- ----- Field icon when the group is a single field ----- -->\n              @if (!isMixedEditingGroup() && activeFilter()?.icon) {\n                <ax-icon class=\"w-5 shrink-0\" [class]=\"'fa-light ' + activeFilter()!.icon\"></ax-icon>\n              }\n              <span class=\"min-w-0 truncate\">\n                {{ isMixedEditingGroup() ? ('@general:terms.interface.filter.filter-group' | translate | async) : ('@general:terms.interface.filter.filter-on' | translate: { params: { title: activeFilterTitle() } } | async) }}\n              </span>\n            </div>\n            <!--->\n            <!-- ----- Condition logic AND/OR stays on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <ax-button-group class=\"axp-query-filters__logic-toggle ax-sm shrink-0\" [selection]=\"'single'\" [look]=\"'outline'\" [color]=\"'primary'\">\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-and-all' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'and'\" (onClick)=\"setEditingLogic('and')\"></ax-button-group-item>\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-or-any' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'or'\" (onClick)=\"setEditingLogic('or')\"></ax-button-group-item>\n              </ax-button-group>\n            }\n          </ax-header>\n          <ax-content class=\"p-4\">\n            @for (condition of editingConditions(); track condition.id; let i = $index) {\n              <!--->\n              <!-- ----- Numbered condition row with the field widget ----- -->\n              @if (i > 0 && !deviceService.isSmall()) {\n                <div class=\"axp-query-filters__logic-split\">\n                  <span class=\"axp-query-filters__logic-split-label\">{{ (editingLogic() === 'or' ? '@general:terms.interface.filter.chip-logic-or' : '@general:terms.interface.filter.chip-logic-and') | translate | async }}</span>\n                </div>\n              }\n              <div class=\"axp-query-filters__condition\">\n                <div class=\"axp-query-filters__condition-head\">\n                  <div class=\"axp-query-filters__condition-heading\">\n                    <!--->\n                    <!-- ----- Field picker for mixed-field groups in advanced mode ----- -->\n                    @if (isAdvanced()) {\n                      <ax-dropdown-button class=\"ax-sm\" [text]=\"(getConditionDefinition(condition.field)?.title | translate | async) ?? ''\" [mode]=\"'dropdown'\" [look]=\"'outline'\">\n                        <ax-button-item-list>\n                          @for (def of advancedFieldOptions(); track def.field) {\n                            <ax-button-item [text]=\"(def.title | translate | async) ?? ''\" [selected]=\"condition.field === def.field\" [disabled]=\"isFilterDisabled(def)\" (onClick)=\"setConditionField(condition.id, def.field ?? '')\"></ax-button-item>\n                          }\n                        </ax-button-item-list>\n                      </ax-dropdown-button>\n                    }\n                    <!--->\n                    <!-- ----- Active operator for this condition ----- -->\n                    @if (getConditionOperatorKey(condition.id); as operatorKey) {\n                      <ax-badge [text]=\"(operatorKey | translate | async) || ''\"></ax-badge>\n                    }\n                  </div>\n                  <button type=\"button\" class=\"axp-query-filters__condition-remove\" (click)=\"handleRemoveCondition(condition.id)\">\n                    <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n                  </button>\n                </div>\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"{\n                    type: getConditionWidget(condition)?.type || 'text-editor',\n                    path: resolveEditingConditionContextField(condition.id),\n                    options: $safeNavigationMigration(getConditionWidget(condition)?.options),\n                  }\"\n                  [mode]=\"'edit'\"\n                ></ng-container>\n              </div>\n            }\n            <!--->\n            <!-- ----- Extra conditions stay on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <button type=\"button\" class=\"axp-query-filters__add-condition\" (click)=\"handleAddCondition()\">\n                <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n                <span>{{ (isAdvanced() ? '@general:terms.interface.filter.add-condition-generic' : '@general:terms.interface.filter.add-condition') | translate: { params: { title: activeFilterTitle() } } | async }}</span>\n              </button>\n            }\n          </ax-content>\n          <ax-footer class=\"border-t flex justify-end gap-2 border-border-light w-full px-4 py-2\">\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" [text]=\"'@general:actions.cancel.title' | translate | async\" (onClick)=\"handleCancelFilter()\"></ax-button>\n            <ax-button class=\"ax-sm\" [color]=\"'primary'\" [disabled]=\"!canApplyFilter()\" [text]=\"'@general:terms.interface.filter.apply-filter' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <!-- ----- Field picker when no filter is being edited ----- -->\n        <div class=\"flex flex-col lightest-surface\">\n          <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items border-none\">\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <ax-icon class=\"axp-query-filters__field-icon\" [ngClass]=\"'fa-light ' + field.icon\"></ax-icon>\n                <span class=\"leading-none\">{{ field.title | translate | async }}</span>\n              </div>\n            </div>\n          }\n        </div>\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{display:block;width:100%;min-width:0px;overflow:hidden}axp-query-filters>.flex{min-width:0px;flex-wrap:nowrap}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container,axp-query-filters ax-tag-box .ax-editor-container{display:flex;width:100%;min-width:0px;flex-wrap:nowrap;align-items:center;background-color:transparent;min-height:2.25rem}axp-query-filters ax-tag-box .ax-tags-container{display:flex;flex:1 1 0%;min-width:0;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}axp-query-filters>.flex>ax-button button{min-height:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding-block:0}.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container{scrollbar-width:none;-ms-overflow-style:none}:is(.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container)::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__chips{min-width:0px;cursor:grab;overflow-x:auto;overflow-y:hidden}.axp-query-filters__chips.axp-query-filters__chips--panning,.axp-query-filters__chips.axp-query-filters__chips--panning *{cursor:grabbing;-webkit-user-select:none;user-select:none}.axp-query-filters__chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap}.axp-query-filters__chip:hover{background-color:rgba(var(--ax-sys-color-darkest-surface))}.axp-query-filters__chip--search,.axp-query-filters__chip--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}:is(.axp-query-filters__chip--search,.axp-query-filters__chip--active):hover{background-color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__chip-title{flex-shrink:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip-text,.axp-query-filters__chip-operator{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__chip-logic{flex-shrink:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__chip--active .axp-query-filters__chip-logic,.axp-query-filters__chip--search .axp-query-filters__chip-logic{color:var(--color-white, #fff)}.axp-query-filters__chip-value{display:inline-flex;max-width:12rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:.25rem;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in srgb,#fff 20%,transparent);color:var(--color-white, #fff)}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in oklab,var(--color-white, #fff) 20%,transparent)}}.axp-query-filters__chip-remove{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;opacity:70%}.axp-query-filters__chip-remove:hover{opacity:100%}.axp-query-filters__mode-toggle{flex:0 0 auto;max-width:6rem;overflow:visible;transition:max-width .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed{max-width:0;pointer-events:none}.axp-query-filters__mode-toggle-inner{position:relative;z-index:10;margin-inline-start:var(--spacing, .25rem);display:inline-flex;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-light-surface));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);width:max-content;transform:translate(0);transition:transform .32s cubic-bezier(.32,.72,0,1),margin .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{margin-inline-start:0;transform:translate(5rem)}[dir=rtl] .axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{transform:translate(-5rem)}.axp-query-filters__mode-toggle-btn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));width:1.875rem;height:1.625rem}.axp-query-filters__mode-toggle-btn:first-child{border-start-start-radius:calc(infinity * 1px);border-end-start-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn:last-child{border-start-end-radius:calc(infinity * 1px);border-end-end-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__mode-toggle-btn:disabled:not(.axp-query-filters__mode-toggle-btn--active){cursor:not-allowed;opacity:40%}.axp-query-filters__mobile-search{min-width:0px;flex:1}.axp-query-filters__mobile-search ax-search-box,.axp-query-filters__mobile-search ax-search-box .ax-editor,.axp-query-filters__mobile-search ax-search-box .ax-editor-container,.axp-query-filters__mobile-search ax-search-box .editor-container{min-height:1.875rem;height:1.875rem}.axp-query-filters__mobile-search ax-search-box input{min-height:1.875rem;height:1.875rem;font-size:.8125rem;line-height:1.125rem}.axp-query-filters__mobile-row{display:flex;min-width:0px;flex:1;flex-wrap:nowrap;align-items:center;gap:var(--spacing, .25rem);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.axp-query-filters__mobile-row::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__mobile-chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);border-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap}.axp-query-filters__mobile-chip--available{cursor:pointer;background-color:transparent}.axp-query-filters__mobile-chip--disabled{cursor:not-allowed;opacity:50%}.axp-query-filters__mobile-chip--applied{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:transparent;color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__mobile-chip-text{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__mobile-chip-caret{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}.axp-query-filters__editor-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-query-filters__logic-toggle ax-button-group-item.ax-state-selected ax-button button,.axp-query-filters__logic-toggle ax-button button.ax-state-selected{background-image:none;box-shadow:none;background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__logic-toggle ax-button>button{min-height:2rem;height:2rem;padding-inline:.5rem;padding-block:0;font-size:.8125rem;line-height:1.125rem;font-weight:600}@media(max-width:600px){axp-query-filters{overflow:hidden}axp-query-filters>.flex{gap:.5rem;padding-block:0;padding-inline:.125rem;overflow:hidden}axp-query-filters>.flex.axp-query-filters__bar--toggle-collapsed{gap:0}.axp-query-filters__logic-toggle{flex-wrap:nowrap}.axp-query-filters__chip{gap:.375rem;padding-inline:.625rem;padding-block:.25rem;font-size:.8125rem}.axp-query-filters__chip-value{max-width:none;font-size:.8125rem}}.axp-query-filters__condition{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-heading{display:flex;min-width:0px;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-title{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-text-default));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-title{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-remove{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove:hover{color:rgba(var(--ax-sys-color-danger-surface))}.axp-query-filters__logic-split{position:relative;margin-block:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:center}.axp-query-filters__logic-split:before,.axp-query-filters__logic-split:after{content:\"\";height:1px;flex:1;background-color:rgba(var(--ax-sys-color-border-light-surface))}.axp-query-filters__logic-split-label{margin-inline:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__add-condition{margin-top:calc(var(--spacing, .25rem) * 3);display:inline-flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__add-condition:hover{text-decoration-line:underline}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}.axp-query-filters__field-icon{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i4$3.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i4$3.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i9.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i11.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i11.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$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: "22.0.8", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null }, sortPresets: { classPropertyName: "sortPresets", publicName: "sortPresets", isSignal: true, isRequired: false, transformFunction: null }, activeSortPresetName: { classPropertyName: "activeSortPresetName", publicName: "activeSortPresetName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged", onSortPresetSelected: "onSortPresetSelected" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "mobileFilterTrigger", first: true, predicate: ["mobileFilterTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderers", predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"flex w-full min-w-0 items-center gap-2 px-1.5 py-1\"\n  [class.axp-query-filters__bar--toggle-collapsed]=\"deviceService.isSmall() && mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n  (keydown.control.space)=\"openFilterPopover()\"\n>\n  @if (deviceService.isSmall()) {\n    <!-- ----- Inline search replaces the chip row ----- -->\n    @if (mobileSearchOpen()) {\n      <div id=\"axp-query-filters-mobile-search\" class=\"axp-query-filters__mobile-search\">\n        <ax-search-box\n          class=\"ax-sm\"\n          [value]=\"mobileSearchText()\"\n          [delayTime]=\"300\"\n          [placeholder]=\"('@general:terms.interface.filter.search-placeholder' | translate | async) ?? ''\"\n          (onValueChanged)=\"handleMobileSearchChanged($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <!-- ----- Compact pill row instead of the desktop tag-box toolbar ----- -->\n    @else {\n      <div\n        #mobileFilterTrigger\n        class=\"axp-query-filters__mobile-row\"\n        [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n        (wheel)=\"handleChipsWheel($event)\"\n        (pointerdown)=\"handleChipsPointerDown($event)\"\n        (scroll)=\"handleMobileChipsScroll($event)\"\n      >\n      @for (chip of mobileFilterChips(); track chip.id) {\n        <!--->\n        <!-- ----- Applied filter chip keeps the field title, with a primary border ----- -->\n        @if (chip.kind === 'applied') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--applied\"\n            [class.axp-query-filters__mobile-chip--search]=\"chip.tag.field === 'all'\"\n            (click)=\"handleTagClick(chip.tag, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ mobileChipLabel(chip.tag) }}</span>\n            <!--->\n            <!-- ----- Remove this applied filter ----- -->\n            @if (!chip.tag.readOnly) {\n              <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, chip.tagIndex)\" type=\"button\">\n                <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n              </button>\n            }\n          </div>\n        }\n        <!-- ----- Unused filter field as an outline chip ----- -->\n        @else if (chip.kind === 'available') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--available\"\n            [class.axp-query-filters__mobile-chip--disabled]=\"isFilterDisabled(chip.definition)\"\n            [attr.aria-disabled]=\"isFilterDisabled(chip.definition) ? 'true' : null\"\n            (click)=\"openMobileAvailableFilter(chip.definition, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ chip.definition.title | translate | async }}</span>\n            <ax-icon class=\"fa-light fa-angle-down axp-query-filters__mobile-chip-caret\"></ax-icon>\n          </div>\n        }\n      }\n      @for (preset of sortPresets(); track preset.name) {\n        <!--------------------------------------------------------------->\n        <!-- ----- Sort preset pill in the same row as advance filters ----- -->\n        <div\n          class=\"axp-query-filters__mobile-chip\"\n          [class.axp-query-filters__mobile-chip--applied]=\"isMobileSortPresetActive(preset)\"\n          [class.axp-query-filters__mobile-chip--available]=\"!isMobileSortPresetActive(preset)\"\n          [attr.aria-pressed]=\"isMobileSortPresetActive(preset)\"\n          (click)=\"applyMobileSortPreset(preset, $event)\"\n        >\n          <span class=\"axp-query-filters__mobile-chip-text\">{{ preset.title | translate | async }}</span>\n          <!--------------------------------------------------------------->\n          <!-- ----- Custom icon when the recipe does not use a direction arrow ----- -->\n          @if (preset.icon) {\n            <ax-icon [class]=\"preset.icon + ' axp-query-filters__mobile-chip-caret'\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Descending hint when the first sort is descending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'desc') {\n            <ax-icon class=\"fa-solid fa-arrow-down-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Ascending hint when the first sort is ascending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'asc') {\n            <ax-icon class=\"fa-solid fa-arrow-up-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n        </div>\n      }\n    </div>\n    }\n    <div\n      class=\"axp-query-filters__mode-toggle\"\n      [class.axp-query-filters__mode-toggle--collapsed]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.aria-hidden]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.inert]=\"mobileModeToggleCollapsed() && !mobileSearchOpen() ? true : null\"\n      role=\"tablist\"\n      [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n    >\n      <div class=\"axp-query-filters__mode-toggle-inner\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"!mobileSearchOpen()\"\n          [disabled]=\"isMobileFilterModeLocked()\"\n          [attr.aria-selected]=\"!mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(false)\"\n        >\n          <ax-icon class=\"fa-light fa-filter\"></ax-icon>\n        </button>\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"mobileSearchOpen()\"\n          [disabled]=\"isMobileSearchModeLocked()\"\n          [attr.aria-selected]=\"mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:actions.search.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(true)\"\n        >\n          <ax-icon class=\"fa-light fa-magnifying-glass\"></ax-icon>\n        </button>\n      </div>\n    </div>\n  } @else {\n    <!-- ----- Root AND/OR when more than one visible chip, including All ----- -->\n    @if (isAdvanced() && hasMultipleFilterGroups()) {\n      <ax-button-group\n        class=\"axp-query-filters__logic-toggle ax-sm shrink-0\"\n        [selection]=\"'single'\"\n        [look]=\"'outline'\"\n        [color]=\"'primary'\"\n      >\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-and' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'and'\" (onClick)=\"setRootLogic('and')\"></ax-button-group-item>\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-or' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'or'\" (onClick)=\"setRootLogic('or')\"></ax-button-group-item>\n      </ax-button-group>\n    }\n    <!-- ----- Filter picker when root AND/OR is hidden ----- -->\n    @else {\n      <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"isAdvanced() ? openNewFilterGroup() : openFilterPopover()\" #filterButton [look]=\"'blank'\">\n        <ax-icon class=\"far fa-bars-filter cursor-pointer\"></ax-icon>\n      </ax-button>\n    }\n  }\n  <div\n    class=\"axp-query-filters__chips min-w-0\"\n    [class.flex-1]=\"!deviceService.isSmall()\"\n    [class.hidden]=\"deviceService.isSmall()\"\n    [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n    (click)=\"handleTagBoxClick($event)\"\n    (wheel)=\"handleChipsWheel($event)\"\n    (pointerdown)=\"handleChipsPointerDown($event)\"\n  >\n    <ax-tag-box\n      #tagBoxComponent\n      [ngModel]=\"asyncTags()\"\n      (onValueChanged)=\"handleSelectFilters($event)\"\n      [textField]=\"'query'\"\n      [valueField]=\"'id'\"\n      [readonly]=\"filtersDefinitions().length === 0\"\n      [look]=\"'none'\"\n      [readonlyField]=\"'readOnly'\"\n      [tagTemplate]=\"tagTemplate\"\n      (onKeyDown)=\"handleKeyDown($event)\"\n      [addOnEnter]=\"false\"\n      [allowDuplicateValues]=\"true\"\n      [placeholder]=\"(filtersDefinitions().length === 0 ? '@general:terms.interface.filter.no-filter-definitions' : '@general:terms.interface.filter.placeholder') | translate | async\"\n      #tagBox\n    >\n      <ax-suffix class=\"hidden shrink-0 whitespace-nowrap md:flex text-gray-500\">\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-tag-box>\n  </div>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div class=\"axp-query-filters__chip\" [class.axp-query-filters__chip--active]=\"item.id === activeChipId()\" [class.axp-query-filters__chip--search]=\"item.field === 'all'\" (click)=\"handleTagClick(item, $event)\">\n      <!-- ----- Quick search chip keeps a single text label ----- -->\n      @if (item.chipMode === 'search') {\n        <span class=\"axp-query-filters__chip-text\">{{ item.query }}</span>\n      } @else if (item.chipMode === 'summary') {\n        <!-- ----- Summary chip when more than two conditions ----- -->\n        @if (item.titleLabel) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}:</span>\n        }\n        <span class=\"axp-query-filters__chip-text\">{{ item.summaryText }}</span>\n      } @else {\n        <!-- ----- One or two conditions: field + operator + quoted value ----- -->\n        @if (item.titleLabel && !item.mixed) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}</span>\n        }\n        @for (cond of item.chipConditions; track $index) {\n          <!--->\n          <!-- ----- Logic connector between conditions ----- -->\n          @if ($index > 0) {\n            <span class=\"axp-query-filters__chip-logic\">{{ item.logicLabel }}</span>\n          }\n          <!--->\n          <!-- ----- Field title on mixed-field chips ----- -->\n          @if (item.mixed && cond.title) {\n            <span class=\"axp-query-filters__chip-title\">{{ cond.title }}</span>\n          }\n          <span class=\"axp-query-filters__chip-operator\">{{ cond.operator }}</span>\n          <!--->\n          <!-- ----- Quoted value badge when the operator has a display value ----- -->\n          @if (cond.value) {\n            <span class=\"axp-query-filters__chip-value\">'{{ cond.value }}'</span>\n          }\n        }\n      }\n      @if (!item.readOnly) {\n        <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n        </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover [offsetY]=\"activeFilter() ? -30 : 0\" [openOn]=\"'toggle'\" (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\" [adaptivityEnabled]=\"true\" #popover>\n  <div class=\"axp-query-filters__popover md:min-w-72 w-full rounded-md md:max-h-[min(32rem,80vh)] lg:w-[520px] md:overflow-auto\">\n    <axp-widgets-container #widgetsContainer [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"axp-query-filters__editor-header border-b border-border-light px-4 py-2\">\n            <div class=\"flex min-w-0 items-center gap-2 font-semibold\">\n              <!--->\n              <!-- ----- Field icon when the group is a single field ----- -->\n              @if (!isMixedEditingGroup() && activeFilter()?.icon) {\n                <ax-icon class=\"w-5 shrink-0\" [class]=\"'fa-light ' + activeFilter()!.icon\"></ax-icon>\n              }\n              <span class=\"min-w-0 truncate\">\n                {{ isMixedEditingGroup() ? ('@general:terms.interface.filter.filter-group' | translate | async) : ('@general:terms.interface.filter.filter-on' | translate: { params: { title: activeFilterTitle() } } | async) }}\n              </span>\n            </div>\n            <!--->\n            <!-- ----- Condition logic AND/OR stays on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <ax-button-group class=\"axp-query-filters__logic-toggle ax-sm shrink-0\" [selection]=\"'single'\" [look]=\"'outline'\" [color]=\"'primary'\">\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-and-all' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'and'\" (onClick)=\"setEditingLogic('and')\"></ax-button-group-item>\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-or-any' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'or'\" (onClick)=\"setEditingLogic('or')\"></ax-button-group-item>\n              </ax-button-group>\n            }\n          </ax-header>\n          <ax-content class=\"p-4\">\n            @for (condition of editingConditions(); track condition.id; let i = $index) {\n              <!--->\n              <!-- ----- Numbered condition row with the field widget ----- -->\n              @if (i > 0 && !deviceService.isSmall()) {\n                <div class=\"axp-query-filters__logic-split\">\n                  <span class=\"axp-query-filters__logic-split-label\">{{ (editingLogic() === 'or' ? '@general:terms.interface.filter.chip-logic-or' : '@general:terms.interface.filter.chip-logic-and') | translate | async }}</span>\n                </div>\n              }\n              <div class=\"axp-query-filters__condition\">\n                <div class=\"axp-query-filters__condition-head\">\n                  <div class=\"axp-query-filters__condition-heading\">\n                    <!--->\n                    <!-- ----- Field picker for mixed-field groups in advanced mode ----- -->\n                    @if (isAdvanced()) {\n                      <ax-dropdown-button class=\"ax-sm\" [text]=\"(getConditionDefinition(condition.field)?.title | translate | async) ?? ''\" [mode]=\"'dropdown'\" [look]=\"'outline'\">\n                        <ax-button-item-list>\n                          @for (def of advancedFieldOptions(); track def.field) {\n                            <ax-button-item [text]=\"(def.title | translate | async) ?? ''\" [selected]=\"condition.field === def.field\" [disabled]=\"isFilterDisabled(def)\" (onClick)=\"setConditionField(condition.id, def.field ?? '')\"></ax-button-item>\n                          }\n                        </ax-button-item-list>\n                      </ax-dropdown-button>\n                    }\n                    <!--->\n                    <!-- ----- Active operator for this condition ----- -->\n                    @if (getConditionOperatorKey(condition.id); as operatorKey) {\n                      <ax-badge [text]=\"(operatorKey | translate | async) || ''\"></ax-badge>\n                    }\n                  </div>\n                  <button type=\"button\" class=\"axp-query-filters__condition-remove\" (click)=\"handleRemoveCondition(condition.id)\">\n                    <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n                  </button>\n                </div>\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"{\n                    type: getConditionWidget(condition)?.type || 'text-editor',\n                    path: resolveEditingConditionContextField(condition.id),\n                    options: $safeNavigationMigration(getConditionWidget(condition)?.options),\n                  }\"\n                  [mode]=\"'edit'\"\n                ></ng-container>\n              </div>\n            }\n            <!--->\n            <!-- ----- Extra conditions stay on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <button type=\"button\" class=\"axp-query-filters__add-condition\" (click)=\"handleAddCondition()\">\n                <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n                <span>{{ (isAdvanced() ? '@general:terms.interface.filter.add-condition-generic' : '@general:terms.interface.filter.add-condition') | translate: { params: { title: activeFilterTitle() } } | async }}</span>\n              </button>\n            }\n          </ax-content>\n          <ax-footer class=\"border-t flex justify-end gap-2 border-border-light w-full px-4 py-2\">\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" [text]=\"'@general:actions.cancel.title' | translate | async\" (onClick)=\"handleCancelFilter()\"></ax-button>\n            <ax-button class=\"ax-sm\" [color]=\"'primary'\" [disabled]=\"!canApplyFilter()\" [text]=\"'@general:terms.interface.filter.apply-filter' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <!-- ----- Field picker when no filter is being edited ----- -->\n        <div class=\"flex flex-col lightest-surface\">\n          <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items border-none\">\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <ax-icon class=\"axp-query-filters__field-icon\" [ngClass]=\"'fa-light ' + field.icon\"></ax-icon>\n                <span class=\"leading-none\">{{ field.title | translate | async }}</span>\n              </div>\n            </div>\n          }\n        </div>\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{display:block;width:100%;min-width:0px;overflow:hidden}axp-query-filters>.flex{min-width:0px;flex-wrap:nowrap}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container,axp-query-filters ax-tag-box .ax-editor-container{display:flex;width:100%;min-width:0px;flex-wrap:nowrap;align-items:center;background-color:transparent;min-height:2.25rem}axp-query-filters ax-tag-box .ax-tags-container{display:flex;flex:1 1 0%;min-width:0;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}axp-query-filters>.flex>ax-button button{min-height:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding-block:0}.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container{scrollbar-width:none;-ms-overflow-style:none}:is(.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container)::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__chips{min-width:0px;cursor:grab;overflow-x:auto;overflow-y:hidden}.axp-query-filters__chips.axp-query-filters__chips--panning,.axp-query-filters__chips.axp-query-filters__chips--panning *{cursor:grabbing;-webkit-user-select:none;user-select:none}.axp-query-filters__chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap}.axp-query-filters__chip:hover{background-color:rgba(var(--ax-sys-color-darkest-surface))}.axp-query-filters__chip--search,.axp-query-filters__chip--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}:is(.axp-query-filters__chip--search,.axp-query-filters__chip--active):hover{background-color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__chip-title{flex-shrink:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip-text,.axp-query-filters__chip-operator{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__chip-logic{flex-shrink:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__chip--active .axp-query-filters__chip-logic,.axp-query-filters__chip--search .axp-query-filters__chip-logic{color:var(--color-white, #fff)}.axp-query-filters__chip-value{display:inline-flex;max-width:12rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:.25rem;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in srgb,#fff 20%,transparent);color:var(--color-white, #fff)}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in oklab,var(--color-white, #fff) 20%,transparent)}}.axp-query-filters__chip-remove{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;opacity:70%}.axp-query-filters__chip-remove:hover{opacity:100%}.axp-query-filters__mode-toggle{flex:0 0 auto;max-width:6rem;overflow:visible;transition:max-width .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed{max-width:0;pointer-events:none}.axp-query-filters__mode-toggle-inner{position:relative;z-index:10;margin-inline-start:var(--spacing, .25rem);display:inline-flex;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-light-surface));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);width:max-content;transform:translate(0);transition:transform .32s cubic-bezier(.32,.72,0,1),margin .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{margin-inline-start:0;transform:translate(5rem)}[dir=rtl] .axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{transform:translate(-5rem)}.axp-query-filters__mode-toggle-btn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));width:1.875rem;height:1.625rem}.axp-query-filters__mode-toggle-btn:first-child{border-start-start-radius:calc(infinity * 1px);border-end-start-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn:last-child{border-start-end-radius:calc(infinity * 1px);border-end-end-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__mode-toggle-btn:disabled:not(.axp-query-filters__mode-toggle-btn--active){cursor:not-allowed;opacity:40%}.axp-query-filters__mobile-search{min-width:0px;flex:1}.axp-query-filters__mobile-search ax-search-box,.axp-query-filters__mobile-search ax-search-box .ax-editor,.axp-query-filters__mobile-search ax-search-box .ax-editor-container,.axp-query-filters__mobile-search ax-search-box .editor-container{min-height:1.875rem;height:1.875rem}.axp-query-filters__mobile-search ax-search-box input{min-height:1.875rem;height:1.875rem;font-size:.8125rem;line-height:1.125rem}.axp-query-filters__mobile-row{display:flex;min-width:0px;flex:1;flex-wrap:nowrap;align-items:center;gap:var(--spacing, .25rem);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.axp-query-filters__mobile-row::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__mobile-chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);border-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap}.axp-query-filters__mobile-chip--available{cursor:pointer;background-color:transparent}.axp-query-filters__mobile-chip--disabled{cursor:not-allowed;opacity:50%}.axp-query-filters__mobile-chip--applied{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:transparent;color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__mobile-chip-text{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__mobile-chip-caret{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}.axp-query-filters__editor-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-query-filters__logic-toggle ax-button-group-item.ax-state-selected ax-button button,.axp-query-filters__logic-toggle ax-button button.ax-state-selected{background-image:none;box-shadow:none;background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__logic-toggle ax-button>button{min-height:2rem;height:2rem;padding-inline:.5rem;padding-block:0;font-size:.8125rem;line-height:1.125rem;font-weight:600}@media(max-width:600px){axp-query-filters{overflow:hidden}axp-query-filters>.flex{gap:.5rem;padding-block:0;padding-inline:.125rem;overflow:hidden}axp-query-filters>.flex.axp-query-filters__bar--toggle-collapsed{gap:0}.axp-query-filters__logic-toggle{flex-wrap:nowrap}.axp-query-filters__chip{gap:.375rem;padding-inline:.625rem;padding-block:.25rem;font-size:.8125rem}.axp-query-filters__chip-value{max-width:none;font-size:.8125rem}}.axp-query-filters__condition{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-heading{display:flex;min-width:0px;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-title{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-text-default));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-title{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-remove{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove:hover{color:rgba(var(--ax-sys-color-danger-surface))}.axp-query-filters__logic-split{position:relative;margin-block:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:center}.axp-query-filters__logic-split:before,.axp-query-filters__logic-split:after{content:\"\";height:1px;flex:1;background-color:rgba(var(--ax-sys-color-border-light-surface))}.axp-query-filters__logic-split-label{margin-inline:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__add-condition{margin-top:calc(var(--spacing, .25rem) * 3);display:inline-flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__add-condition:hover{text-decoration-line:underline}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}.axp-query-filters__field-icon{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i4$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i9.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i11.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i11.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$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: "22.0.8", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
@@ -9465,7 +9524,7 @@ class AXPLayoutSideDetailPanelComponent {
         return icon?.surfaceVars ?? {};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutSideDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPLayoutSideDetailPanelComponent, isStandalone: true, selector: "axp-layout-side-detail-panel", inputs: { multiSelectLabel: { classPropertyName: "multiSelectLabel", publicName: "multiSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsSectionTitle: { classPropertyName: "rowsSectionTitle", publicName: "rowsSectionTitle", isSignal: true, isRequired: false, transformFunction: null }, noRowsMessage: { classPropertyName: "noRowsMessage", publicName: "noRowsMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyState: { classPropertyName: "emptyState", publicName: "emptyState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClose: "panelClose" }, queries: [{ propertyName: "projectedSections", predicate: AXPLayoutSideDetailPanelSectionDirective, isSignal: true }], ngImport: i0, template: "@if (multiSelectLabel(); as multiLabel) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span class=\"axp-layout-side-detail-panel__icon\">\n        <i class=\"fa-fw fa-lg fa-solid\"></i>\n      </span>\n      <span>{{ multiLabel }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\"></div>\n} @else if (header(); as h) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (h.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--shortcut]=\"icon.shortcut\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n          @if (icon.shortcut) {\n            <i class=\"fa-light fa-up-right-from-square axp-layout-side-detail-panel__icon-arrow\" aria-hidden=\"true\"></i>\n          }\n        </span>\n      }\n      <div class=\"flex flex-col min-w-0 flex-1\">\n        <span class=\"__heading-primary\">{{ h.primaryTitle }}</span>\n        @if (h.secondaryTitle) {\n          <span class=\"text-xs opacity-80 truncate\">{{ h.secondaryTitle }}</span>\n        }\n      </div>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    @if (sections().length > 0) {\n      @for (section of sections(); track sectionTrack(section, $index)) {\n        <div class=\"__section\">\n          @if (section.title) {\n            <div class=\"__title\">\n              <span>{{ section.title }}</span>\n            </div>\n          }\n          <div class=\"__content\">\n            @if (section.projectionKey; as projectionKey) {\n              @if (templateForProjectionKey(projectionKey); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl\" />\n              }\n            } @else {\n              @for (row of section.rows ?? []; track row.label + '-' + $index) {\n                <div class=\"__row\">\n                  <div class=\"__title\">\n                    <span>{{ row.label }}</span>\n                  </div>\n                  <div class=\"__content\">\n                    @if (row.format) {\n                      <span>{{ row.value | format: row.format | async }}</span>\n                    } @else {\n                      <span>{{ row.value ?? '---' }}</span>\n                    }\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    } @else if (rows().length > 0) {\n      <div class=\"__section\">\n        @if (rowsSectionTitle(); as sectionTitle) {\n          <div class=\"__title\">\n            <span>{{ sectionTitle }}</span>\n          </div>\n        }\n        <div class=\"__content\">\n          @for (row of rows(); track row.label + '-' + $index) {\n            <div class=\"__row\">\n              <div class=\"__title\">\n                <span>{{ row.label }}</span>\n              </div>\n              <div class=\"__content\">\n                @if (row.format) {\n                  <span>{{ row.value | format: row.format | async }}</span>\n                } @else {\n                  <span>{{ row.value ?? '---' }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else if (noRowsMessage(); as noRows) {\n      <div class=\"__section\">\n        <div class=\"__content\">\n          <span class=\"opacity-70 text-sm\">{{ noRows }}</span>\n        </div>\n      </div>\n    }\n  </div>\n} @else if (emptyState(); as empty) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (empty.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n        </span>\n      }\n      <span class=\"__heading-primary\">{{ empty.primaryTitle }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__content\">\n        <span class=\"opacity-70 text-sm\">{{ empty.message }}</span>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;axp-layout-side-detail-panel{display:flex;height:100%;flex-direction:column;border-radius:var(--radius-lg, .5rem);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);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(width>=64rem){axp-layout-side-detail-panel{min-width:calc(var(--spacing, .25rem) * 80)}}axp-layout-side-detail-panel>.__header{display:flex;flex-shrink:0;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-layout-side-detail-panel>.__header>.__title .__heading-primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon{position:relative;display:flex;flex:none;align-items:center;justify-content:center;background:transparent;border:none;box-shadow:none}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon.axp-layout-side-detail-panel__icon--shortcut .axp-layout-side-detail-panel__icon-arrow{position:absolute;bottom:-2px;right:-2px;font-size:.45em;opacity:.9}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon i{--tw-leading: 1;line-height:1}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon.axp-layout-side-detail-panel__icon--themed i{color:rgba(var(--node-bg-color))}axp-layout-side-detail-panel>.__content{display:flex;min-height:0px;flex:1;flex-direction:column;overflow-y:auto}:where(axp-layout-side-detail-panel .__content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}axp-layout-side-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__content>.__section>.__title{margin-bottom:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}axp-layout-side-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);opacity:90%}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:70%}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@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;--tw-leading: initial;--tw-font-weight: initial;--tw-divide-y-reverse: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPLayoutSideDetailPanelComponent, isStandalone: true, selector: "axp-layout-side-detail-panel", inputs: { multiSelectLabel: { classPropertyName: "multiSelectLabel", publicName: "multiSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsSectionTitle: { classPropertyName: "rowsSectionTitle", publicName: "rowsSectionTitle", isSignal: true, isRequired: false, transformFunction: null }, noRowsMessage: { classPropertyName: "noRowsMessage", publicName: "noRowsMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyState: { classPropertyName: "emptyState", publicName: "emptyState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClose: "panelClose" }, queries: [{ propertyName: "projectedSections", predicate: AXPLayoutSideDetailPanelSectionDirective, isSignal: true }], ngImport: i0, template: "@if (multiSelectLabel(); as multiLabel) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span class=\"axp-layout-side-detail-panel__icon\">\n        <i class=\"fa-fw fa-lg fa-solid\"></i>\n      </span>\n      <span>{{ multiLabel }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\"></div>\n} @else if (header(); as h) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (h.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--shortcut]=\"icon.shortcut\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n          @if (icon.shortcut) {\n            <i class=\"fa-light fa-up-right-from-square axp-layout-side-detail-panel__icon-arrow\" aria-hidden=\"true\"></i>\n          }\n        </span>\n      }\n      <div class=\"flex flex-col min-w-0 flex-1\">\n        <span class=\"__heading-primary\">{{ h.primaryTitle }}</span>\n        @if (h.secondaryTitle) {\n          <span class=\"text-xs opacity-80 truncate\">{{ h.secondaryTitle }}</span>\n        }\n      </div>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    @if (sections().length > 0) {\n      @for (section of sections(); track sectionTrack(section, $index)) {\n        <div class=\"__section\">\n          @if (section.title) {\n            <div class=\"__title\">\n              <span>{{ section.title }}</span>\n            </div>\n          }\n          <div class=\"__content\">\n            @if (section.projectionKey; as projectionKey) {\n              @if (templateForProjectionKey(projectionKey); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl\" />\n              }\n            } @else {\n              @for (row of section.rows ?? []; track row.label + '-' + $index) {\n                <div class=\"__row\">\n                  <div class=\"__title\">\n                    <span>{{ row.label }}</span>\n                  </div>\n                  <div class=\"__content\">\n                    @if (row.format) {\n                      <span>{{ row.value | format: row.format | async }}</span>\n                    } @else {\n                      <span>{{ row.value ?? '---' }}</span>\n                    }\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    } @else if (rows().length > 0) {\n      <div class=\"__section\">\n        @if (rowsSectionTitle(); as sectionTitle) {\n          <div class=\"__title\">\n            <span>{{ sectionTitle }}</span>\n          </div>\n        }\n        <div class=\"__content\">\n          @for (row of rows(); track row.label + '-' + $index) {\n            <div class=\"__row\">\n              <div class=\"__title\">\n                <span>{{ row.label }}</span>\n              </div>\n              <div class=\"__content\">\n                @if (row.format) {\n                  <span>{{ row.value | format: row.format | async }}</span>\n                } @else {\n                  <span>{{ row.value ?? '---' }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else if (noRowsMessage(); as noRows) {\n      <div class=\"__section\">\n        <div class=\"__content\">\n          <span class=\"opacity-70 text-sm\">{{ noRows }}</span>\n        </div>\n      </div>\n    }\n  </div>\n} @else if (emptyState(); as empty) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (empty.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n        </span>\n      }\n      <span class=\"__heading-primary\">{{ empty.primaryTitle }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__content\">\n        <span class=\"opacity-70 text-sm\">{{ empty.message }}</span>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;axp-layout-side-detail-panel{display:flex;height:100%;flex-direction:column;border-radius:var(--radius-lg, .5rem);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);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(width>=64rem){axp-layout-side-detail-panel{min-width:calc(var(--spacing, .25rem) * 80)}}axp-layout-side-detail-panel>.__header{display:flex;flex-shrink:0;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-layout-side-detail-panel>.__header>.__title .__heading-primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon{position:relative;display:flex;flex:none;align-items:center;justify-content:center;background:transparent;border:none;box-shadow:none}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon.axp-layout-side-detail-panel__icon--shortcut .axp-layout-side-detail-panel__icon-arrow{position:absolute;bottom:-2px;right:-2px;font-size:.45em;opacity:.9}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon i{--tw-leading: 1;line-height:1}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon.axp-layout-side-detail-panel__icon--themed i{color:rgba(var(--node-bg-color))}axp-layout-side-detail-panel>.__content{display:flex;min-height:0px;flex:1;flex-direction:column;overflow-y:auto}:where(axp-layout-side-detail-panel .__content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}axp-layout-side-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__content>.__section>.__title{margin-bottom:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}axp-layout-side-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);opacity:90%}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:70%}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@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;--tw-leading: initial;--tw-font-weight: initial;--tw-divide-y-reverse: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$3.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutSideDetailPanelComponent, decorators: [{
             type: Component,
@@ -10684,7 +10743,7 @@ class AXPResourceAppointmentComponent {
         <ax-loading></ax-loading>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPResourceAppointmentComponent, decorators: [{
             type: Component,
@@ -11245,37 +11304,31 @@ class AXPQuerySortsComponent {
         ...(ngDevMode ? [{ debugName: "activeSortSignature" }] : /* istanbul ignore next */ []));
         this.canReset = computed(() => this.activeSortSignature() !== sortQuerySignature(this.defaultSortQueries()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "canReset" }] : /* istanbul ignore next */ []));
-        // Sync from parent while preserving active-sort order (e.g. column click order).
+        // Apply active directions in place. Field order stays on the definition list.
         effect(() => {
-            const initialQueries = this.initialSortQueries();
             const definitions = this.sortDefinitions();
-            const definitionsMap = new Map(definitions.map((def) => [def.name, def]));
-            const included = new Set();
-            const mergedQueries = [];
-            for (const query of initialQueries) {
-                const definition = definitionsMap.get(query.name);
-                if (!definition) {
-                    continue;
-                }
-                mergedQueries.push({ ...definition, dir: query.dir });
-                included.add(query.name);
-            }
-            for (const definition of definitions) {
-                if (!included.has(definition.name)) {
-                    mergedQueries.push({ ...definition });
-                }
-            }
-            this.sortQueries.set(mergedQueries);
+            const dirByName = new Map(this.initialSortQueries().map((query) => [query.name, query.dir]));
+            const definitionByName = new Map(definitions.map((definition) => [definition.name, definition]));
+            const current = untracked(() => this.sortQueries());
+            const sameFields = current.length === definitions.length && current.every((field) => definitionByName.has(field.name));
+            const ordered = sameFields ? current : definitions;
+            this.sortQueries.set(ordered.map((field) => {
+                const definition = definitionByName.get(field.name) ?? field;
+                const dir = dirByName.get(field.name);
+                return {
+                    ...definition,
+                    dir: dir === 'asc' || dir === 'desc' ? dir : undefined,
+                };
+            }));
         });
     }
     //#endregion
     //#region ----- Event Handlers -----
     drop(event) {
-        const sq = [...this.sortQueries()];
-        moveItemInArray(sq, event.previousIndex, event.currentIndex);
-        this.sortQueries.set(sq);
-        this.sortDefinitions.set([...sq]);
-        this.emitActiveSortQueries();
+        const nextFields = [...this.sortQueries()];
+        moveItemInArray(nextFields, event.previousIndex, event.currentIndex);
+        this.sortQueries.set(nextFields);
+        this.emitSortQueries(this.toActiveSortQueries(nextFields));
     }
     changeItemSort(item) {
         const itemDirection = this.getSortDirection(item);
@@ -11333,9 +11386,33 @@ class AXPQuerySortsComponent {
         this.emitSortQueries(sorts);
     }
     emitActiveSortQueries() {
-        this.emitSortQueries(this.sortQueries()
-            .filter((q) => q.dir === 'asc' || q.dir === 'desc')
-            .map((q) => ({ name: q.name, dir: q.dir })));
+        const dirByName = new Map(this.toActiveSortQueries(this.sortQueries()).map((query) => [query.name, query.dir]));
+        const next = [];
+        const included = new Set();
+        for (const query of this.initialSortQueries()) {
+            const dir = dirByName.get(query.name);
+            if (dir !== 'asc' && dir !== 'desc') {
+                continue;
+            }
+            next.push({ name: query.name, dir });
+            included.add(query.name);
+        }
+        for (const field of this.sortQueries()) {
+            if (included.has(field.name)) {
+                continue;
+            }
+            const dir = dirByName.get(field.name);
+            if (dir !== 'asc' && dir !== 'desc') {
+                continue;
+            }
+            next.push({ name: field.name, dir });
+        }
+        this.emitSortQueries(next);
+    }
+    toActiveSortQueries(fields) {
+        return fields
+            .filter((field) => field.dir === 'asc' || field.dir === 'desc')
+            .map((field) => ({ name: field.name, dir: field.dir }));
     }
     emitSortQueries(sorts) {
         this.sortQueriesChange.emit(sorts);
@@ -13041,7 +13118,7 @@ class AXPSpreadsheetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpreadsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSpreadsheetComponent, isStandalone: true, selector: "axp-spreadsheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowMode: { classPropertyName: "rowMode", publicName: "rowMode", isSignal: true, isRequired: false, transformFunction: null }, rowsInput: { classPropertyName: "rowsInput", publicName: "rowsInput", isSignal: true, isRequired: false, transformFunction: null }, rowsModel: { classPropertyName: "rowsModel", publicName: "rowsModel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyCellPlaceholder: { classPropertyName: "emptyCellPlaceholder", publicName: "emptyCellPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, rowTitlePath: { classPropertyName: "rowTitlePath", publicName: "rowTitlePath", isSignal: true, isRequired: false, transformFunction: null }, rowDescriptionPath: { classPropertyName: "rowDescriptionPath", publicName: "rowDescriptionPath", isSignal: true, isRequired: false, transformFunction: null }, allowAddRows: { classPropertyName: "allowAddRows", publicName: "allowAddRows", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveRows: { classPropertyName: "allowRemoveRows", publicName: "allowRemoveRows", isSignal: true, isRequired: false, transformFunction: null }, allowAddColumns: { classPropertyName: "allowAddColumns", publicName: "allowAddColumns", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveColumns: { classPropertyName: "allowRemoveColumns", publicName: "allowRemoveColumns", isSignal: true, isRequired: false, transformFunction: null }, showCellActions: { classPropertyName: "showCellActions", publicName: "showCellActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", columnChange: "columnChange", columnsChange: "columnsChange", spreadsheetChange: "spreadsheetChange" }, host: { listeners: { "focusin": "handleHostFocusIn($event)" }, properties: { "attr.tabindex": "readonly() ? -1 : 0", "attr.role": "\"grid\"" }, classAttribute: "axp-spreadsheet" }, viewQueries: [{ propertyName: "chromeDropdowns", predicate: AXDropdownButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n  @if (isColumnsEmpty()) {\n    <!-- Empty State: Columns are empty (regardless of rows) -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty-columns.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{\n          '@general:state-message.empty-columns.description' | translate | async\n        }}\n      </div>\n      @if (allowAddColumns() && !readonly()) {\n        <div class=\"mt-4\">\n          <ng-container\n            [ngTemplateOutlet]=\"addColumnMenu\"\n            [ngTemplateOutletContext]=\"{ look: 'solid', color: 'primary', showText: true }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  } @else if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{ '@general:state-message.empty.description' | translate | async }}\n      </div>\n    </div>\n  } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"useExcelRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (useExcelRowIndex()) {\n            <col class=\"__index-col\" />\n            @for (column of currentColumns(); track column.name) {\n              <col class=\"__data-col\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          } @else {\n            @for (column of currentColumns(); track column.name) {\n              <col [style.width]=\"column.width || null\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          }\n        </colgroup>\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th\n              class=\"__corner-cell\"\n              [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n            >\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions ax-sm\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"('@general:widgets.spreadsheet.add-row' | translate | async) ?? ''\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of currentColumns(); track column.name) {\n              <th\n                class=\"__column-header\"\n                [style.width]=\"useExcelRowIndex() ? null : column.width\"\n              >\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"columnChromeMenu\"\n                  [ngTemplateOutletContext]=\"{ column: column }\"\n                ></ng-container>\n              </th>\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <th class=\"__column-header __column-header--add ax-sm\">\n                <ng-container\n                  [ngTemplateOutlet]=\"addColumnMenu\"\n                  [ngTemplateOutletContext]=\"{ look: 'blank', color: 'primary', showText: false }\"\n                ></ng-container>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Empty State Row -->\n        <tbody class=\"__tbody\">\n          <tr class=\"__row __row--empty\">\n            <td class=\"__row-header\" [attr.colspan]=\"currentColumns().length + 1 + (allowAddColumns() && !readonly() ? 1 : 0)\">\n              <div class=\"__empty-state-inline\">\n                <div class=\"__empty-icon\">\n                  <i class=\"fa-light fa-list\"></i>\n                </div>\n                <div class=\"__empty-title\">\n                  {{\n                    '@general:state-message.empty-rows.title'\n                      | translate\n                      | async\n                  }}\n                </div>\n                <div class=\"__empty-description\">\n                  {{\n                    '@general:state-message.empty-rows.description'\n                      | translate\n                      | async\n                  }}\n                </div>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"useExcelRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (useExcelRowIndex()) {\n            <col class=\"__index-col\" />\n            @for (column of currentColumns(); track column.name) {\n              <col class=\"__data-col\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          } @else {\n            @for (column of currentColumns(); track column.name) {\n              <col [style.width]=\"column.width || null\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          }\n        </colgroup>\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th\n              class=\"__corner-cell\"\n              [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n            >\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions ax-sm\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"('@general:widgets.spreadsheet.add-row' | translate | async) ?? ''\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of currentColumns(); track column.name) {\n              <th\n                class=\"__column-header\"\n                [style.width]=\"useExcelRowIndex() ? null : column.width\"\n              >\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"columnChromeMenu\"\n                  [ngTemplateOutletContext]=\"{ column: column }\"\n                ></ng-container>\n              </th>\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <th class=\"__column-header __column-header--add ax-sm\">\n                <ng-container\n                  [ngTemplateOutlet]=\"addColumnMenu\"\n                  [ngTemplateOutletContext]=\"{ look: 'blank', color: 'primary', showText: false }\"\n                ></ng-container>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Body Rows -->\n        <tbody class=\"__tbody\">\n          <axp-widgets-container\n            [context]=\"spreadsheetContext()\"\n            (onContextChanged)=\"handleSpreadsheetContextChange($event)\"\n          >\n            @for (\n              rowItem of rowsWithIds();\n              track rowItem.rowId;\n              let rowIndex = $index\n            ) {\n              <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                <!-- Row header -->\n                <td\n                  class=\"__row-header\"\n                  [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n                >\n                  <div class=\"__header-content\">\n                    @if (useExcelRowIndex()) {\n                      <div class=\"__row-index\">{{ rowIndex + 1 }}</div>\n                    }\n                    @if (rowTitlePath()) {\n                      <div class=\"__header-title\">\n                        {{ getRowTitle(rowItem.row, rowTitlePath()!) }}\n                      </div>\n                    }\n                    @if (rowDescriptionPath()) {\n                      <div class=\"__header-description\">\n                        {{\n                          getRowDescription(rowItem.row, rowDescriptionPath()!)\n                        }}\n                      </div>\n                    }\n                  </div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowChromeMenu\"\n                    [ngTemplateOutletContext]=\"{ rowId: rowItem.rowId }\"\n                  ></ng-container>\n                </td>\n\n                <!-- Spreadsheet cells -->\n                @for (column of currentColumns(); track column.name) {\n                  <td\n                    class=\"__cell\"\n                    [class.__cell--editing]=\"\n                      isCellEditing(rowItem.rowId, column.name)\n                    \"\n                    [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                    (click)=\"\n                      $event.stopPropagation();\n                      handleCellClick(rowItem.rowId, column.name, $event)\n                    \"\n                  >\n                    @if (\n                      isCellEditing(rowItem.rowId, column.name) &&\n                      !isColumnReadonly(column)\n                    ) {\n                      <!-- Edit mode: Show widget in edit mode -->\n                      <div\n                        class=\"__cell-editor __cell-editor--flat\"\n                        (focusout)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                        tabindex=\"-1\"\n                      >\n                        <ng-container\n                          axp-widget-renderer\n                          [node]=\"getCellWidgetNode(column, rowIndex)\"\n                          [mode]=\"'edit'\"\n                        ></ng-container>\n                      </div>\n                      <!---->\n                      @if (showCellActions()) {\n                        <!-- ----- Apply and cancel while the cell is being edited ----- -->\n                        <div\n                          class=\"__cell-toolbar ax-sm\"\n                          (click)=\"$event.stopPropagation()\"\n                          (mousedown)=\"\n                            $event.preventDefault(); $event.stopPropagation()\n                          \"\n                          (mouseup)=\"$event.stopPropagation()\"\n                          (focusin)=\"$event.stopPropagation()\"\n                        >\n                          <ax-button\n                            look=\"blank\"\n                            color=\"success\"\n                            (onClick)=\"commitCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.apply.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-check\"></ax-icon>\n                          </ax-button>\n                          <ax-button\n                            look=\"blank\"\n                            color=\"danger\"\n                            (onClick)=\"cancelCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.cancel.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-times\"></ax-icon>\n                          </ax-button>\n                        </div>\n                      }\n                    }\n                    <!-- ----- View mode when the cell is not being edited ----- -->\n                    @else {\n                      <div class=\"__cell-value\">\n                        <!---->\n                        @if (hasCellDisplayValue(rowIndex, column.name)) {\n                          <ng-container\n                            axp-widget-renderer\n                            [node]=\"getCellWidgetNode(column, rowIndex)\"\n                            [mode]=\"'view'\"\n                          ></ng-container>\n                        }\n                        <!-- ----- Empty cell placeholder when the value is blank ----- -->\n                        @else {\n                          <span class=\"__cell-placeholder\">{{\n                            emptyCellPlaceholder()\n                          }}</span>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n                @if (allowAddColumns() && !readonly()) {\n                  <td class=\"__cell __cell--add-spacer\"></td>\n                }\n              </tr>\n            }\n          </axp-widgets-container>\n        </tbody>\n      </table>\n    </div>\n  }\n</div>\n\n<ng-template #columnChromeMenu let-column=\"column\">\n  @if (showColumnChromeMenu()) {\n    <!-- ----- Column insert, move, properties, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.column-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddColumns()) {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-left\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-right\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-previous' | translate | async) ??\n              ''\n            \"\n            [disabled]=\"isFirstColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'previous')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-left-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-next' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'next')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-right-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-divider></ax-divider>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.column-properties' | translate | async) ??\n              ''\n            \"\n            (onClick)=\"handleEditColumnProperties(column.name)\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-pen-to-square\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveColumns()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveColumn(column.name)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #rowChromeMenu let-rowId=\"rowId\">\n  @if (showRowChromeMenu()) {\n    <!-- ----- Row insert, move, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.row-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddRows() && rowMode() === 'dynamic') {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-up\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-down\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-up' | translate | async) ?? ''\n            \"\n            [disabled]=\"isFirstRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'up')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-up-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-down' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'down')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-down-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveRows()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveRow(rowId)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #addColumnMenu\n  let-look=\"look\"\n  let-color=\"color\"\n  let-showText=\"showText\"\n>\n  <!-- ----- Add a column by picking a supported widget type ----- -->\n  <ax-dropdown-button\n    class=\"ax-sm\"\n    [class.__add-column-trigger]=\"!showText\"\n    size=\"sm\"\n    [look]=\"look\"\n    [color]=\"color\"\n    [mode]=\"'dropdown'\"\n    [text]=\"\n      showText\n        ? (('@general:widgets.spreadsheet.add-column' | translate | async) ?? '')\n        : ''\n    \"\n    [attr.aria-label]=\"\n      ('@general:widgets.spreadsheet.add-column' | translate | async) ?? ''\n    \"\n    (onClick)=\"handleChromeDropdownClick($event)\"\n  >\n    @if (!showText) {\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    }\n    <ax-button-item-list>\n      @for (widget of supportedColumnWidgets(); track widget.type) {\n        <ax-button-item\n          [text]=\"(widget.title | translate | async) ?? ''\"\n          (onClick)=\"handleAddColumnOfType(widget.type)\"\n        >\n          <ax-prefix>\n            <ax-icon [icon]=\"widget.icon\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-dropdown-button>\n</ng-template>\n<!--\n  #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{--axp-spreadsheet-row-height: var(--ax-sys-size-base, 2.5rem);display:flex;height:100%;width:100%;flex-direction:column;--tw-outline-style: none;outline-style:none}.axp-spreadsheet:focus-visible{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.axp-spreadsheet .__add-column-trigger ax-suffix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button{display:inline-flex;min-width:0px;align-items:center;justify-content:center}.axp-spreadsheet .__header-actions ax-dropdown-button ax-prefix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button ax-button button{width:var(--ax-sys-size-base, 2.5rem);height:var(--ax-sys-size-base, 2.5rem);min-height:0;padding:0}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state .__empty-description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;padding-bottom:calc(var(--spacing, .25rem) * 10);-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table.__table--cell-editing .__tbody .__row .__cell:not(.__cell--readonly):not(.__cell--editing):hover:before{opacity:0%}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:relative;position:sticky;top:0;width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;color:var(--color-neutral-700, oklch(37.1% 0 none));z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--add{width:48px;min-width:48px;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);overflow-wrap:break-word;white-space:normal;opacity:75%}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row .__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);position:relative;box-sizing:border-box;width:200px;min-width:200px;cursor:pointer;overflow:hidden;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:0;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:color-mix(in srgb,#000 5%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell:before{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:100%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer{width:48px;min-width:48px;cursor:default;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface));padding:0}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;align-items:center;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:-35px;display:flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:var(--spacing, .25rem);white-space:nowrap;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;height:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));overflow-wrap:break-word}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;align-items:center;justify-content:center;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .grid{display:flex;height:100%;width:100%;gap:0px}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(ax-text-box,ax-number-box,ax-select-box,ax-date-time-box){display:block;height:100%;min-height:0px;width:100%}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container{height:100%;min-height:0;padding:0;border:none;border-radius:0;outline:none;box-shadow:none;background:transparent;background-image:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-within,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input){height:100%;min-height:0;padding:0 .5rem;border:none;outline:none;box-shadow:none;background:transparent}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-error-container{display:none}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table.__table--excel-index{table-layout:fixed;width:100%;min-width:100%}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__index-col{width:50px}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__data-col{width:auto}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__add-col{width:48px}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header:not(.__column-header--add),.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell:not(.__cell--add-spacer){width:auto!important;min-width:0!important;max-width:none!important}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header.__column-header--add,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell.__cell--add-spacer{width:48px!important;min-width:48px!important;max-width:48px!important}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__row-header,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);overflow:hidden}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{box-sizing:border-box;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding:0;text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-500, oklch(55.6% 0 none));width:50px!important;min-width:50px!important;max-width:50px!important}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-actions,:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-actions{position:static;inset:auto;display:flex;justify-content:center}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-content{align-items:center;gap:0px}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-title{display:none}.axp-spreadsheet .__table.__table--excel-index .__row-index{font-size:11px;--tw-leading: 1;line-height:1;color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{vertical-align:middle}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__row-index,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header .__header-actions{display:none}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__header-actions{display:flex}@media(max-width:768px){.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{width:50px;min-width:50px;max-width:50px;padding:0}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-font-weight: initial;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-duration: initial;--tw-ease: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSpreadsheetComponent, isStandalone: true, selector: "axp-spreadsheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowMode: { classPropertyName: "rowMode", publicName: "rowMode", isSignal: true, isRequired: false, transformFunction: null }, rowsInput: { classPropertyName: "rowsInput", publicName: "rowsInput", isSignal: true, isRequired: false, transformFunction: null }, rowsModel: { classPropertyName: "rowsModel", publicName: "rowsModel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyCellPlaceholder: { classPropertyName: "emptyCellPlaceholder", publicName: "emptyCellPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, rowTitlePath: { classPropertyName: "rowTitlePath", publicName: "rowTitlePath", isSignal: true, isRequired: false, transformFunction: null }, rowDescriptionPath: { classPropertyName: "rowDescriptionPath", publicName: "rowDescriptionPath", isSignal: true, isRequired: false, transformFunction: null }, allowAddRows: { classPropertyName: "allowAddRows", publicName: "allowAddRows", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveRows: { classPropertyName: "allowRemoveRows", publicName: "allowRemoveRows", isSignal: true, isRequired: false, transformFunction: null }, allowAddColumns: { classPropertyName: "allowAddColumns", publicName: "allowAddColumns", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveColumns: { classPropertyName: "allowRemoveColumns", publicName: "allowRemoveColumns", isSignal: true, isRequired: false, transformFunction: null }, showCellActions: { classPropertyName: "showCellActions", publicName: "showCellActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", columnChange: "columnChange", columnsChange: "columnsChange", spreadsheetChange: "spreadsheetChange" }, host: { listeners: { "focusin": "handleHostFocusIn($event)" }, properties: { "attr.tabindex": "readonly() ? -1 : 0", "attr.role": "\"grid\"" }, classAttribute: "axp-spreadsheet" }, viewQueries: [{ propertyName: "chromeDropdowns", predicate: AXDropdownButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n  @if (isColumnsEmpty()) {\n    <!-- Empty State: Columns are empty (regardless of rows) -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty-columns.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{\n          '@general:state-message.empty-columns.description' | translate | async\n        }}\n      </div>\n      @if (allowAddColumns() && !readonly()) {\n        <div class=\"mt-4\">\n          <ng-container\n            [ngTemplateOutlet]=\"addColumnMenu\"\n            [ngTemplateOutletContext]=\"{ look: 'solid', color: 'primary', showText: true }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  } @else if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{ '@general:state-message.empty.description' | translate | async }}\n      </div>\n    </div>\n  } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"useExcelRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (useExcelRowIndex()) {\n            <col class=\"__index-col\" />\n            @for (column of currentColumns(); track column.name) {\n              <col class=\"__data-col\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          } @else {\n            @for (column of currentColumns(); track column.name) {\n              <col [style.width]=\"column.width || null\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          }\n        </colgroup>\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th\n              class=\"__corner-cell\"\n              [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n            >\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions ax-sm\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"('@general:widgets.spreadsheet.add-row' | translate | async) ?? ''\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of currentColumns(); track column.name) {\n              <th\n                class=\"__column-header\"\n                [style.width]=\"useExcelRowIndex() ? null : column.width\"\n              >\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"columnChromeMenu\"\n                  [ngTemplateOutletContext]=\"{ column: column }\"\n                ></ng-container>\n              </th>\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <th class=\"__column-header __column-header--add ax-sm\">\n                <ng-container\n                  [ngTemplateOutlet]=\"addColumnMenu\"\n                  [ngTemplateOutletContext]=\"{ look: 'blank', color: 'primary', showText: false }\"\n                ></ng-container>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Empty State Row -->\n        <tbody class=\"__tbody\">\n          <tr class=\"__row __row--empty\">\n            <td class=\"__row-header\" [attr.colspan]=\"currentColumns().length + 1 + (allowAddColumns() && !readonly() ? 1 : 0)\">\n              <div class=\"__empty-state-inline\">\n                <div class=\"__empty-icon\">\n                  <i class=\"fa-light fa-list\"></i>\n                </div>\n                <div class=\"__empty-title\">\n                  {{\n                    '@general:state-message.empty-rows.title'\n                      | translate\n                      | async\n                  }}\n                </div>\n                <div class=\"__empty-description\">\n                  {{\n                    '@general:state-message.empty-rows.description'\n                      | translate\n                      | async\n                  }}\n                </div>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"useExcelRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (useExcelRowIndex()) {\n            <col class=\"__index-col\" />\n            @for (column of currentColumns(); track column.name) {\n              <col class=\"__data-col\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          } @else {\n            @for (column of currentColumns(); track column.name) {\n              <col [style.width]=\"column.width || null\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          }\n        </colgroup>\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th\n              class=\"__corner-cell\"\n              [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n            >\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions ax-sm\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"('@general:widgets.spreadsheet.add-row' | translate | async) ?? ''\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of currentColumns(); track column.name) {\n              <th\n                class=\"__column-header\"\n                [style.width]=\"useExcelRowIndex() ? null : column.width\"\n              >\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"columnChromeMenu\"\n                  [ngTemplateOutletContext]=\"{ column: column }\"\n                ></ng-container>\n              </th>\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <th class=\"__column-header __column-header--add ax-sm\">\n                <ng-container\n                  [ngTemplateOutlet]=\"addColumnMenu\"\n                  [ngTemplateOutletContext]=\"{ look: 'blank', color: 'primary', showText: false }\"\n                ></ng-container>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Body Rows -->\n        <tbody class=\"__tbody\">\n          <axp-widgets-container\n            [context]=\"spreadsheetContext()\"\n            (onContextChanged)=\"handleSpreadsheetContextChange($event)\"\n          >\n            @for (\n              rowItem of rowsWithIds();\n              track rowItem.rowId;\n              let rowIndex = $index\n            ) {\n              <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                <!-- Row header -->\n                <td\n                  class=\"__row-header\"\n                  [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n                >\n                  <div class=\"__header-content\">\n                    @if (useExcelRowIndex()) {\n                      <div class=\"__row-index\">{{ rowIndex + 1 }}</div>\n                    }\n                    @if (rowTitlePath()) {\n                      <div class=\"__header-title\">\n                        {{ getRowTitle(rowItem.row, rowTitlePath()!) }}\n                      </div>\n                    }\n                    @if (rowDescriptionPath()) {\n                      <div class=\"__header-description\">\n                        {{\n                          getRowDescription(rowItem.row, rowDescriptionPath()!)\n                        }}\n                      </div>\n                    }\n                  </div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowChromeMenu\"\n                    [ngTemplateOutletContext]=\"{ rowId: rowItem.rowId }\"\n                  ></ng-container>\n                </td>\n\n                <!-- Spreadsheet cells -->\n                @for (column of currentColumns(); track column.name) {\n                  <td\n                    class=\"__cell\"\n                    [class.__cell--editing]=\"\n                      isCellEditing(rowItem.rowId, column.name)\n                    \"\n                    [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                    (click)=\"\n                      $event.stopPropagation();\n                      handleCellClick(rowItem.rowId, column.name, $event)\n                    \"\n                  >\n                    @if (\n                      isCellEditing(rowItem.rowId, column.name) &&\n                      !isColumnReadonly(column)\n                    ) {\n                      <!-- Edit mode: Show widget in edit mode -->\n                      <div\n                        class=\"__cell-editor __cell-editor--flat\"\n                        (focusout)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                        tabindex=\"-1\"\n                      >\n                        <ng-container\n                          axp-widget-renderer\n                          [node]=\"getCellWidgetNode(column, rowIndex)\"\n                          [mode]=\"'edit'\"\n                        ></ng-container>\n                      </div>\n                      <!---->\n                      @if (showCellActions()) {\n                        <!-- ----- Apply and cancel while the cell is being edited ----- -->\n                        <div\n                          class=\"__cell-toolbar ax-sm\"\n                          (click)=\"$event.stopPropagation()\"\n                          (mousedown)=\"\n                            $event.preventDefault(); $event.stopPropagation()\n                          \"\n                          (mouseup)=\"$event.stopPropagation()\"\n                          (focusin)=\"$event.stopPropagation()\"\n                        >\n                          <ax-button\n                            look=\"blank\"\n                            color=\"success\"\n                            (onClick)=\"commitCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.apply.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-check\"></ax-icon>\n                          </ax-button>\n                          <ax-button\n                            look=\"blank\"\n                            color=\"danger\"\n                            (onClick)=\"cancelCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.cancel.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-times\"></ax-icon>\n                          </ax-button>\n                        </div>\n                      }\n                    }\n                    <!-- ----- View mode when the cell is not being edited ----- -->\n                    @else {\n                      <div class=\"__cell-value\">\n                        <!---->\n                        @if (hasCellDisplayValue(rowIndex, column.name)) {\n                          <ng-container\n                            axp-widget-renderer\n                            [node]=\"getCellWidgetNode(column, rowIndex)\"\n                            [mode]=\"'view'\"\n                          ></ng-container>\n                        }\n                        <!-- ----- Empty cell placeholder when the value is blank ----- -->\n                        @else {\n                          <span class=\"__cell-placeholder\">{{\n                            emptyCellPlaceholder()\n                          }}</span>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n                @if (allowAddColumns() && !readonly()) {\n                  <td class=\"__cell __cell--add-spacer\"></td>\n                }\n              </tr>\n            }\n          </axp-widgets-container>\n        </tbody>\n      </table>\n    </div>\n  }\n</div>\n\n<ng-template #columnChromeMenu let-column=\"column\">\n  @if (showColumnChromeMenu()) {\n    <!-- ----- Column insert, move, properties, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.column-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddColumns()) {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-left\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-right\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-previous' | translate | async) ??\n              ''\n            \"\n            [disabled]=\"isFirstColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'previous')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-left-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-next' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'next')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-right-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-divider></ax-divider>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.column-properties' | translate | async) ??\n              ''\n            \"\n            (onClick)=\"handleEditColumnProperties(column.name)\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-pen-to-square\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveColumns()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveColumn(column.name)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #rowChromeMenu let-rowId=\"rowId\">\n  @if (showRowChromeMenu()) {\n    <!-- ----- Row insert, move, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.row-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddRows() && rowMode() === 'dynamic') {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-up\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-down\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-up' | translate | async) ?? ''\n            \"\n            [disabled]=\"isFirstRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'up')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-up-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-down' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'down')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-down-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveRows()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveRow(rowId)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #addColumnMenu\n  let-look=\"look\"\n  let-color=\"color\"\n  let-showText=\"showText\"\n>\n  <!-- ----- Add a column by picking a supported widget type ----- -->\n  <ax-dropdown-button\n    class=\"ax-sm\"\n    [class.__add-column-trigger]=\"!showText\"\n    size=\"sm\"\n    [look]=\"look\"\n    [color]=\"color\"\n    [mode]=\"'dropdown'\"\n    [text]=\"\n      showText\n        ? (('@general:widgets.spreadsheet.add-column' | translate | async) ?? '')\n        : ''\n    \"\n    [attr.aria-label]=\"\n      ('@general:widgets.spreadsheet.add-column' | translate | async) ?? ''\n    \"\n    (onClick)=\"handleChromeDropdownClick($event)\"\n  >\n    @if (!showText) {\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    }\n    <ax-button-item-list>\n      @for (widget of supportedColumnWidgets(); track widget.type) {\n        <ax-button-item\n          [text]=\"(widget.title | translate | async) ?? ''\"\n          (onClick)=\"handleAddColumnOfType(widget.type)\"\n        >\n          <ax-prefix>\n            <ax-icon [icon]=\"widget.icon\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-dropdown-button>\n</ng-template>\n<!--\n  #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{--axp-spreadsheet-row-height: var(--ax-sys-size-base, 2.5rem);display:flex;height:100%;width:100%;flex-direction:column;--tw-outline-style: none;outline-style:none}.axp-spreadsheet:focus-visible{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.axp-spreadsheet .__add-column-trigger ax-suffix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button{display:inline-flex;min-width:0px;align-items:center;justify-content:center}.axp-spreadsheet .__header-actions ax-dropdown-button ax-prefix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button ax-button button{width:var(--ax-sys-size-base, 2.5rem);height:var(--ax-sys-size-base, 2.5rem);min-height:0;padding:0}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state .__empty-description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;padding-bottom:calc(var(--spacing, .25rem) * 10);-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table.__table--cell-editing .__tbody .__row .__cell:not(.__cell--readonly):not(.__cell--editing):hover:before{opacity:0%}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:relative;position:sticky;top:0;width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;color:var(--color-neutral-700, oklch(37.1% 0 none));z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--add{width:48px;min-width:48px;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);overflow-wrap:break-word;white-space:normal;opacity:75%}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row .__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);position:relative;box-sizing:border-box;width:200px;min-width:200px;cursor:pointer;overflow:hidden;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:0;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:color-mix(in srgb,#000 5%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell:before{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:100%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer{width:48px;min-width:48px;cursor:default;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface));padding:0}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;align-items:center;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:-35px;display:flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:var(--spacing, .25rem);white-space:nowrap;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;height:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));overflow-wrap:break-word}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;align-items:center;justify-content:center;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .grid{display:flex;height:100%;width:100%;gap:0px}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(ax-text-box,ax-number-box,ax-select-box,ax-date-time-box){display:block;height:100%;min-height:0px;width:100%}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container{height:100%;min-height:0;padding:0;border:none;border-radius:0;outline:none;box-shadow:none;background:transparent;background-image:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-within,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input){height:100%;min-height:0;padding:0 .5rem;border:none;outline:none;box-shadow:none;background:transparent}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-error-container{display:none}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table.__table--excel-index{table-layout:fixed;width:100%;min-width:100%}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__index-col{width:50px}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__data-col{width:auto}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__add-col{width:48px}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header:not(.__column-header--add),.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell:not(.__cell--add-spacer){width:auto!important;min-width:0!important;max-width:none!important}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header.__column-header--add,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell.__cell--add-spacer{width:48px!important;min-width:48px!important;max-width:48px!important}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__row-header,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);overflow:hidden}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{box-sizing:border-box;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding:0;text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-500, oklch(55.6% 0 none));width:50px!important;min-width:50px!important;max-width:50px!important}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-actions,:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-actions{position:static;inset:auto;display:flex;justify-content:center}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-content{align-items:center;gap:0px}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-title{display:none}.axp-spreadsheet .__table.__table--excel-index .__row-index{font-size:11px;--tw-leading: 1;line-height:1;color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{vertical-align:middle}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__row-index,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header .__header-actions{display:none}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__header-actions{display:flex}@media(max-width:768px){.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{width:50px;min-width:50px;max-width:50px;padding:0}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-font-weight: initial;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-duration: initial;--tw-ease: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpreadsheetComponent, decorators: [{
             type: Component,