@acorex/platform 20.2.3 → 20.2.4-next.1

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

@@ -1,53 +1,65 @@
-import * as i2$2 from '@acorex/components/button';
+import * as i6 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXCommonModule } from '@acorex/cdk/common';
-import * as i3 from '@acorex/components/decorators';
+import * as i7 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i2 from '@acorex/core/translation';
+import * as i5 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import * as i3$1 from '@acorex/components/skeleton';
+import * as i3 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
-import * as i5 from '@acorex/core/format';
+import * as i5$1 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
 import { getSystemActions, AXPExpressionEvaluatorService, AXPContextStore } from '@acorex/platform/core';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, input, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, output, linkedSignal, untracked, ViewChildren } from '@angular/core';
+import { inject, input, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, output, EventEmitter, untracked, Output, linkedSignal, ViewChildren } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import * as i8 from '@acorex/components/badge';
 import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
+import * as i3$1 from '@acorex/components/switch';
+import { AXSwitchModule } from '@acorex/components/switch';
+import * as i9 from '@angular/cdk/drag-drop';
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { cloneDeep, sortBy, isEqual, camelCase, merge, capitalize, unionBy, isArray, isNil, isEmpty, set } from 'lodash-es';
 import * as i1$1 from '@acorex/components/form';
 import { AXFormModule, AXFormComponent } from '@acorex/components/form';
+import * as i4$1 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
-import * as i2$1 from '@acorex/components/check-box';
+import * as i2 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
-import * as i1 from '@acorex/components/label';
+import * as i3$2 from '@acorex/components/label';
 import { AXLabelModule, AXLabelComponent } from '@acorex/components/label';
-import * as i3$2 from '@acorex/platform/layout/builder';
-import { AXPLayoutBuilderModule, AXPWidgetContainerComponent, AXPPageStatus } from '@acorex/platform/layout/builder';
-import { sortBy } from 'lodash-es';
+import * as i3$3 from '@acorex/platform/layout/builder';
+import { AXPLayoutBuilderModule, AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetRegistryService } from '@acorex/platform/layout/builder';
 import { AXValidationModule } from '@acorex/core/validation';
 import { AXPGridLayoutDirective, AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS } from '@acorex/platform/common';
-import * as i1$2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i7 from '@acorex/cdk/list-navigation';
+import * as i5$2 from '@acorex/components/select-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
+import * as i1$2 from '@acorex/components/collapse';
+import { AXCollapseModule } from '@acorex/components/collapse';
+import * as i2$1 from '@acorex/components/tabs';
+import { AXTabsModule } from '@acorex/components/tabs';
+import * as i7$1 from '@acorex/cdk/list-navigation';
 import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
-import * as i4$1 from '@acorex/components/popover';
+import * as i4$2 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
-import * as i5$1 from '@acorex/components/tag-box';
+import * as i5$3 from '@acorex/components/tag-box';
 import { AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXCalendarService } from '@acorex/core/date-time';
 import { BehaviorSubject, timer, Subject, takeUntil } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import * as i1$3 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
-import * as i3$3 from '@acorex/components/image';
+import * as i3$4 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
+import { AXPopupService } from '@acorex/components/popup';
 
 //#region ----   Component Definition   ----
 class AXPActivityLogComponent {
@@ -179,7 +191,7 @@ class AXPActivityLogComponent {
         return currentIndex > 0; // Can compare if not the first activity
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPActivityLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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 } }, ngImport: i0, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n\n    <!-- Activity Log Content -->\n    <div class=\"__content\">\n\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\n                <div\n                    class=\"ax-size-10 ax-rounded-full ax-border ax-flex ax-items-center ax-justify-center ax-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\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                            <span class=\"__action-type\">\n                                {{ t(`actions.${activity.changeType}.title`, {\n                                scope: 'general' }) | async }}\n                            </span>\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\"\n                            [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                                <div class=\"ax-rounded-full ax-size-7 ax-grid ax-place-items-center\">\n                                    <i class=\"{{changeClasses.icon}} {{changeClasses.text}}\"></i>\n                                </div>\n                                <span class=\"__action-text\">{{\n                                    change.description | translate | async }}</span>\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\n                </div>\n\n            </div>\n            }\n        </div>\n        }\n\n        <!-- Empty State -->\n        @if (!loading() && activities().length === 0) {\n        <div class=\"__empty\">\n            <div class=\"__icon\">\n                <ax-icon icon=\"fa-light fa-history\" class=\"__svg\"></ax-icon>\n            </div>\n            <div class=\"__content\">\n                <h4 class=\"__title\">{{ t('no-history.title', { scope: i18nScope }) | async }}</h4>\n                <p class=\"__message\">{{ t('no-history.message', { scope: i18nScope }) | async }}\n                </p>\n            </div>\n        </div>\n        }\n\n    </div>\n</div>\n\n<!-- \n\nax-success-surface\nax-primary-surface\nax-danger-surface\nax-warning-surface\nax-info-surface\nax-muted-surface\nax-text-success\n\n -->", styles: [".axp-activity-log{height:100%;width:100%}.axp-activity-log .__content .__loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__loading .__item .__avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axp-activity-log .__content .__loading .__item .__content{flex:1 1 0%}.axp-activity-log .__content .__loading .__item .__content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item .__content .__title{height:1rem;width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:.75rem;width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:.75rem;width:83.333333%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:.75rem;width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}.axp-activity-log .__content .__feed>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:1.25rem;top:.5rem;bottom:.5rem;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:1rem}.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 1 0%}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.5}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{font-weight: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:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:.375rem;padding:.25rem .5rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:.5rem;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:.75rem;line-height:1rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:.75rem;line-height:1rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-top:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem}.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-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;animation-timing-function: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:.5rem;padding-top:.25rem;padding-bottom:.25rem}.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:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__time{padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}.axp-activity-log .__content .__empty{display:flex;height:12rem;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-activity-log .__content .__empty .__icon{margin-bottom:1rem}.axp-activity-log .__content .__empty .__icon .__svg{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__message{max-width:20rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.axp-activity-log .__content .__feed .__item{gap:.625rem}.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)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i2.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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 } }, ngImport: i0, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n\n    <!-- Activity Log Content -->\n    <div class=\"__content\">\n\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\n                <div\n                    class=\"ax-size-10 ax-rounded-full ax-border ax-flex ax-items-center ax-justify-center ax-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\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                            <span class=\"__action-type\">\n                                {{ t(`actions.${activity.changeType}.title`, {\n                                scope: 'general' }) | async }}\n                            </span>\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\"\n                            [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                                <div class=\"ax-rounded-full ax-size-7 ax-grid ax-place-items-center\">\n                                    <i class=\"{{changeClasses.icon}} {{changeClasses.text}}\"></i>\n                                </div>\n                                <span class=\"__action-text\">{{\n                                    change.description | translate | async }}</span>\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\n                </div>\n\n            </div>\n            }\n        </div>\n        }\n\n        <!-- Empty State -->\n        @if (!loading() && activities().length === 0) {\n        <div class=\"__empty\">\n            <div class=\"__icon\">\n                <ax-icon icon=\"fa-light fa-history\" class=\"__svg\"></ax-icon>\n            </div>\n            <div class=\"__content\">\n                <h4 class=\"__title\">{{ t('no-history.title', { scope: i18nScope }) | async }}</h4>\n                <p class=\"__message\">{{ t('no-history.message', { scope: i18nScope }) | async }}\n                </p>\n            </div>\n        </div>\n        }\n\n    </div>\n</div>\n\n<!-- \n\nax-success-surface\nax-primary-surface\nax-danger-surface\nax-warning-surface\nax-info-surface\nax-muted-surface\nax-text-success\n\n -->", styles: [".axp-activity-log{height:100%;width:100%}.axp-activity-log .__content .__loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__loading .__item .__avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axp-activity-log .__content .__loading .__item .__content{flex:1 1 0%}.axp-activity-log .__content .__loading .__item .__content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item .__content .__title{height:1rem;width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:.75rem;width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:.75rem;width:83.333333%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:.75rem;width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}.axp-activity-log .__content .__feed>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:1.25rem;top:.5rem;bottom:.5rem;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:1rem}.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 1 0%}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.5}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{font-weight: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:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:.375rem;padding:.25rem .5rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:.5rem;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:.75rem;line-height:1rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:.75rem;line-height:1rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-top:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem}.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-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;animation-timing-function: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:.5rem;padding-top:.25rem;padding-bottom:.25rem}.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:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__time{padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}.axp-activity-log .__content .__empty{display:flex;height:12rem;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-activity-log .__content .__empty .__icon{margin-bottom:1rem}.axp-activity-log .__content .__empty .__icon .__svg{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.axp-activity-log .__content .__empty .__content .__message{max-width:20rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.axp-activity-log .__content .__feed .__item{gap:.625rem}.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)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i7.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i5$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPActivityLogComponent, decorators: [{
             type: Component,
@@ -684,6 +696,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
+class AXPQueryColumnsComponent {
+    constructor() {
+        this.columns = model([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    }
+    handleVisibilityChange(e, name) {
+        if (e.isUserInteraction) {
+            this.columns.update((prev) => {
+                return prev.map((c) => {
+                    return c.name === name ? { ...c, visible: e.value ?? true } : c;
+                });
+            });
+        }
+    }
+    drop(event) {
+        const columns = cloneDeep(this.columns());
+        moveItemInArray(columns, event.previousIndex, event.currentIndex);
+        this.columns.set(columns);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPQueryColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPQueryColumnsComponent, isStandalone: true, selector: "axp-query-columns", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n  <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n    @for (item of columns(); track item.name) {\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i7.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3$1.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPQueryColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-query-columns', imports: [
+                        CommonModule,
+                        FormsModule,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXSwitchModule,
+                        AXTranslationModule,
+                    ], template: "<div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n  <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n    @for (item of columns(); track item.name) {\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }] });
+
 class AXPCompareViewComponent {
     constructor() {
         //#region ----   Component Properties   ----
@@ -798,13 +846,13 @@ class AXPCompareViewComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPCompareViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPCompareViewComponent, isStandalone: true, selector: "axp-compare-view", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box [value]=\"showOnlyChanges()\" (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\">\n              <ax-label>\n                {{ 'compare-view.show-only-differences' | translate: { scope: 'common' } | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n          <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n            <div class=\"__object-title\" [title]=\"obj.description\">\n              <span>{{ obj.title | translate | async }}</span>\n              @if (remainingObjects().length > 2) {\n              <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                <i class=\"fa-light fa-times\"></i>\n              </span>\n              }\n            </div>\n          </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n        <tr class=\"__row\" [class.__row--odd]=\"i % 2 === 1\" [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n          [class.__row--has-equal-values]=\"hasEqualValues(field.path)\">\n          <td class=\"__field-cell\">\n            <div class=\"__field-content\">\n              <div class=\"__field-title\">\n                {{ field.title | translate | async }}\n              </div>\n              @if (field.description) {\n              <div class=\"__field-description\">{{ field.description }}</div>\n              }\n            </div>\n          </td>\n          @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n          <td class=\"__object-cell\" [attr.data-id]=\"obj.id\"\n            [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\">\n            @if (obj.context[field.path] !== undefined) {\n            <div class=\"__object-content\">\n              <axp-widgets-container [context]=\"obj.context\">\n                <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n              </axp-widgets-container>\n            </div>\n            } @else {\n            <div class=\"__object-placeholder\">---</div>\n            }\n            @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n            <div class=\"__change-indicator\">\n              <i class=\"fa-light fa-arrow-right\"></i>\n            </div>\n            }\n          </td>\n          }\n        </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPCompareViewComponent, isStandalone: true, selector: "axp-compare-view", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box\n              [value]=\"showOnlyChanges()\"\n              (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\"\n            >\n              <ax-label>\n                {{ '@activity-log:compare-view.show-only-differences' | translate | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n            <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n              <div class=\"__object-title\" [title]=\"obj.description\">\n                <span>{{ obj.title | translate | async }}</span>\n                @if (remainingObjects().length > 2) {\n                  <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                    <i class=\"fa-light fa-times\"></i>\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n          <tr\n            class=\"__row\"\n            [class.__row--odd]=\"i % 2 === 1\"\n            [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n            [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n          >\n            <td class=\"__field-cell\">\n              <div class=\"__field-content\">\n                <div class=\"__field-title\">\n                  {{ field.title | translate | async }}\n                </div>\n                @if (field.description) {\n                  <div class=\"__field-description\">{{ field.description }}</div>\n                }\n              </div>\n            </td>\n            @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n              <td\n                class=\"__object-cell\"\n                [attr.data-id]=\"obj.id\"\n                [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n              >\n                @if (obj.context[field.path] !== undefined) {\n                  <div class=\"__object-content\">\n                    <axp-widgets-container [context]=\"obj.context\">\n                      <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n                    </axp-widgets-container>\n                  </div>\n                } @else {\n                  <div class=\"__object-placeholder\">---</div>\n                }\n                @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n                  <div class=\"__change-indicator\">\n                    <i class=\"fa-light fa-arrow-right\"></i>\n                  </div>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Angular
                 CommonModule }, { kind: "ngmodule", type: 
                 // ACoreX
-                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: 
+                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: 
                 // Platform
-                AXPLayoutBuilderModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+                AXPLayoutBuilderModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
             type: Component,
@@ -820,7 +868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         AXTranslationModule,
                         // Platform
                         AXPLayoutBuilderModule
-                    ], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box [value]=\"showOnlyChanges()\" (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\">\n              <ax-label>\n                {{ 'compare-view.show-only-differences' | translate: { scope: 'common' } | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n          <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n            <div class=\"__object-title\" [title]=\"obj.description\">\n              <span>{{ obj.title | translate | async }}</span>\n              @if (remainingObjects().length > 2) {\n              <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                <i class=\"fa-light fa-times\"></i>\n              </span>\n              }\n            </div>\n          </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n        <tr class=\"__row\" [class.__row--odd]=\"i % 2 === 1\" [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n          [class.__row--has-equal-values]=\"hasEqualValues(field.path)\">\n          <td class=\"__field-cell\">\n            <div class=\"__field-content\">\n              <div class=\"__field-title\">\n                {{ field.title | translate | async }}\n              </div>\n              @if (field.description) {\n              <div class=\"__field-description\">{{ field.description }}</div>\n              }\n            </div>\n          </td>\n          @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n          <td class=\"__object-cell\" [attr.data-id]=\"obj.id\"\n            [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\">\n            @if (obj.context[field.path] !== undefined) {\n            <div class=\"__object-content\">\n              <axp-widgets-container [context]=\"obj.context\">\n                <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n              </axp-widgets-container>\n            </div>\n            } @else {\n            <div class=\"__object-placeholder\">---</div>\n            }\n            @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n            <div class=\"__change-indicator\">\n              <i class=\"fa-light fa-arrow-right\"></i>\n            </div>\n            }\n          </td>\n          }\n        </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box\n              [value]=\"showOnlyChanges()\"\n              (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\"\n            >\n              <ax-label>\n                {{ '@activity-log:compare-view.show-only-differences' | translate | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n            <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n              <div class=\"__object-title\" [title]=\"obj.description\">\n                <span>{{ obj.title | translate | async }}</span>\n                @if (remainingObjects().length > 2) {\n                  <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                    <i class=\"fa-light fa-times\"></i>\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n          <tr\n            class=\"__row\"\n            [class.__row--odd]=\"i % 2 === 1\"\n            [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n            [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n          >\n            <td class=\"__field-cell\">\n              <div class=\"__field-content\">\n                <div class=\"__field-title\">\n                  {{ field.title | translate | async }}\n                </div>\n                @if (field.description) {\n                  <div class=\"__field-description\">{{ field.description }}</div>\n                }\n              </div>\n            </td>\n            @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n              <td\n                class=\"__object-cell\"\n                [attr.data-id]=\"obj.id\"\n                [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n              >\n                @if (obj.context[field.path] !== undefined) {\n                  <div class=\"__object-content\">\n                    <axp-widgets-container [context]=\"obj.context\">\n                      <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n                    </axp-widgets-container>\n                  </div>\n                } @else {\n                  <div class=\"__object-placeholder\">---</div>\n                }\n                @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n                  <div class=\"__change-indicator\">\n                    <i class=\"fa-light fa-arrow-right\"></i>\n                  </div>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
         }] });
 
 class AXPComponentSlot {
@@ -1186,7 +1234,7 @@ class AXPDynamicFormComponent {
                 // ACoreX
                 AXFormModule }, { kind: "component", type: i1$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i1$1.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: 
                 // Platform
-                AXPLayoutBuilderModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n    axp-page-content, \n    axp-page-footer-container,\n    axp-page-footer,\n    axp-page-header,\n    axp-page-header-container,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    " }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutSectionComponent, selector: "axp-layout-section" }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[gridLayout]", inputs: ["gridLayout"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                AXPLayoutBuilderModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n    axp-page-content, \n    axp-page-footer-container,\n    axp-page-footer,\n    axp-page-header,\n    axp-page-header-container,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    " }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutSectionComponent, selector: "axp-layout-section" }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[gridLayout]", inputs: ["gridLayout"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDynamicFormComponent, decorators: [{
             type: Component,
@@ -1209,7 +1257,900 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     }, template: "<ax-form>\n  <axp-widgets-container [context]=\"internalContext()\" (onContextChanged)=\"handleContextChanged($event)\">\n    <axp-layout-sections>\n      @if (computedFormDefinition()) {\n        @for (group of computedFormDefinition().groups; track group.name) {\n          <axp-layout-section>\n            <axp-layout-header>\n              <axp-layout-title>{{ group.title }}</axp-layout-title>\n              @if (group.description) {\n                <axp-layout-description>{{ group.description }}</axp-layout-description>\n              }\n            </axp-layout-header>\n            <axp-layout-content>\n              @for (param of group.parameters; track param.path) {\n                <div class=\"__field-container\">\n                  <ax-form-field class=\"__field-input\" [gridLayout]=\"computedLayout()\">\n                    <ax-label>{{ param.title }}</ax-label>\n                    <ng-container axp-widget-renderer [node]=\"param.widget\" [mode]=\"'edit'\"></ng-container>\n                    <!-- @if (param.description) {\n                      <axp-layout-description>{{ param.description }}</axp-layout-description>\n                    } -->\n                  </ax-form-field>\n                </div>\n              }\n            </axp-layout-content>\n          </axp-layout-section>\n        }\n      } @else {\n        <axp-layout-section>\n          <axp-layout-content>\n            <div class=\"__empty-state\">\n              <axp-layout-description>No form definition provided</axp-layout-description>\n            </div>\n          </axp-layout-content>\n        </axp-layout-section>\n      }\n    </axp-layout-sections>\n  </axp-widgets-container>\n</ax-form>\n", styles: [".axp-dynamic-form{width:100%}.axp-dynamic-form axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}.axp-dynamic-form axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-style:dashed;--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{align-items:center;gap:1rem;padding:1rem}@media (min-width: 1024px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 1280px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{padding-left:2rem;padding-right:2rem}}@media (min-width: 1536px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{padding-left:2.5rem;padding-right:2.5rem}}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 12 / span 12}@media (min-width: 768px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 4 / span 4}}@media (min-width: 1024px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 4 / span 4}}@media (min-width: 1536px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 3 / span 3}}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container axp-layout-description{margin-top:.5rem!important;font-size:.75rem!important;line-height:1rem!important}.axp-dynamic-form.--compact axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){border-style:none}.axp-dynamic-form.--compact axp-layout-section axp-layout-content .__field-container{display:flex;flex-direction:column;gap:.25rem;padding:.25rem .5rem;margin-bottom:.5rem;border-width:0px}.axp-dynamic-form.--compact axp-layout-section axp-layout-content .__field-container .__field-info{margin-bottom:.125rem;width:100%}.axp-dynamic-form.--compact axp-layout-section axp-layout-content .__field-container .__field-info axp-layout-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form.--compact axp-layout-section axp-layout-content .__field-container .__field-input{width:100%}.axp-dynamic-form.--compact axp-layout-section axp-layout-content .__field-container axp-layout-description{margin-top:.125rem!important;font-size:.75rem!important;line-height:1rem!important;opacity:.75!important}.axp-dynamic-form.--compact axp-layout-section{margin-bottom:.75rem}.axp-dynamic-form.--compact axp-layout-section axp-layout-header{margin-bottom:.5rem;gap:0px;padding:.5rem}.axp-dynamic-form.--compact axp-layout-section axp-layout-header axp-layout-title{font-size:1rem;line-height:1.5rem;font-weight:600}.axp-dynamic-form.--compact axp-layout-section axp-layout-header axp-layout-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-dynamic-form.--vertical axp-layout-section axp-layout-content .__field-container{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}.axp-dynamic-form.--vertical axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 12 / span 12;width:100%}.axp-dynamic-form.--vertical axp-layout-section axp-layout-content .__field-container .__field-input{grid-column:span 12 / span 12;width:100%}.axp-dynamic-form.--vertical axp-layout-section axp-layout-content .__field-container axp-layout-description{margin-top:.25rem!important;font-size:.875rem!important;line-height:1.25rem!important}.axp-dynamic-form.--horizontal axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){border-style:none}.axp-dynamic-form.--horizontal axp-layout-section axp-layout-content .__field-container{display:flex;flex-direction:row;align-items:center;gap:1rem;padding-top:.75rem;padding-bottom:.75rem}.axp-dynamic-form.--horizontal axp-layout-section axp-layout-content .__field-container .__field-info{width:12rem;flex-shrink:0}.axp-dynamic-form.--horizontal axp-layout-section axp-layout-content .__field-container .__field-info axp-layout-title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form.--horizontal axp-layout-section axp-layout-content .__field-container .__field-input{flex:1 1 0%}.axp-dynamic-form.--horizontal axp-layout-section axp-layout-content .__field-container axp-layout-description{margin-top:.25rem!important;font-size:.75rem!important;line-height:1rem!important;opacity:.75!important}.axp-dynamic-form .__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:2rem;padding-bottom:2rem;text-align:center}.axp-dynamic-form .__empty-state .__message{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"] }]
         }] });
 
-class AXPLayoutFiltersComponent {
+//#endregion
+//#region ----   Injection Tokens   ----
+/**
+ * Injection token to provide available extra property types.
+ */
+const AXP_EXTRA_PROPERTY_TYPES = new InjectionToken('AXP_EXTRA_PROPERTY_TYPES');
+//#endregion
+
+class AXPExtraPropertiesComponent {
+    constructor() {
+        //#region ----   Inputs   ----
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        //#endregion
+        //#region ----   Outputs   ----
+        this.itemsChange = output();
+        //#endregion
+        //#region ----   Services & Dependencies   ----
+        this.providedTypes = inject(AXP_EXTRA_PROPERTY_TYPES, { optional: true }) ?? [];
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----   Class Properties   ----
+        this.newKey = signal('', ...(ngDevMode ? [{ debugName: "newKey" }] : []));
+        this.newTitle = signal('', ...(ngDevMode ? [{ debugName: "newTitle" }] : []));
+        this.newTypeId = signal('', ...(ngDevMode ? [{ debugName: "newTypeId" }] : []));
+        this.newValue = signal(undefined, ...(ngDevMode ? [{ debugName: "newValue" }] : []));
+        /** Local, ephemeral context for widget rendering */
+        this.internalContext = signal({}, ...(ngDevMode ? [{ debugName: "internalContext" }] : []));
+        this.lastTypeByKey = {};
+        this.draftVersion = signal(0, ...(ngDevMode ? [{ debugName: "draftVersion" }] : []));
+        this.draftKey = computed(() => `__draft__v${this.draftVersion()}`, ...(ngDevMode ? [{ debugName: "draftKey" }] : []));
+        this.typeOptions = computed(() => this.providedTypes, ...(ngDevMode ? [{ debugName: "typeOptions" }] : []));
+        this.presetTypes = computed(() => this.providedTypes.slice(0, 5), ...(ngDevMode ? [{ debugName: "presetTypes" }] : []));
+        this.canAdd = computed(() => {
+            const key = this.newKey()?.trim();
+            const title = this.newTitle()?.trim();
+            const typeId = this.newTypeId();
+            const val = this.newValue();
+            const hasValue = val !== undefined && val !== null && (typeof val !== 'string' || val.trim() !== '');
+            if (!key || !title || !typeId || !hasValue)
+                return false;
+            return !this.items().some((i) => i.key === key);
+        }, ...(ngDevMode ? [{ debugName: "canAdd" }] : []));
+        //#endregion
+        //#region ----   Effects   ----
+        /** Sync incoming items' values into internal context for rendering */
+        this.syncContextFromItems = effect(() => {
+            const items = this.items();
+            const current = this.internalContext();
+            const currentExtra = current['extra'] ?? {};
+            const extra = { ...currentExtra };
+            for (const it of items) {
+                if (it.value !== undefined && it.value !== null) {
+                    extra[it.key] = it.value;
+                }
+                else if (Object.prototype.hasOwnProperty.call(extra, it.key)) {
+                    delete extra[it.key];
+                }
+            }
+            const nextContext = { ...current, extra };
+            if (!isEqual(nextContext, current)) {
+                this.internalContext.set(nextContext);
+            }
+        }, ...(ngDevMode ? [{ debugName: "syncContextFromItems" }] : []));
+        /**
+         * Clear item values when their widget type changes to avoid incompatible stale values
+         */
+        this.clearValueOnTypeChange = effect(() => {
+            const items = this.items();
+            const changedKeys = new Set();
+            for (const it of items) {
+                const prevType = this.lastTypeByKey[it.key];
+                if (prevType && prevType !== it.type) {
+                    changedKeys.add(it.key);
+                }
+                this.lastTypeByKey[it.key] = it.type;
+            }
+            if (changedKeys.size > 0) {
+                const updated = items.map((it) => (changedKeys.has(it.key) ? { ...it, value: undefined } : it));
+                // Reset cached default values for affected nodes
+                changedKeys.forEach((k) => {
+                    const node = this.nodeCache[k];
+                    if (node) {
+                        node.defaultValue = undefined;
+                    }
+                });
+                this.itemsChange.emit(updated);
+            }
+        }, ...(ngDevMode ? [{ debugName: "clearValueOnTypeChange" }] : []));
+        this.nodeCache = {};
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    onContextChanged(event) {
+        // Ignore initial bootstrapping to prevent cycles
+        if (event.state === 'initiated')
+            return;
+        const data = (event.data ?? {});
+        const extra = data['extra'] ?? {};
+        // sync draft value
+        const dk = this.draftKey();
+        if (Object.prototype.hasOwnProperty.call(extra, dk)) {
+            this.newValue.set(extra[dk]);
+        }
+        const nextItems = this.items().map((it) => ({ ...it, value: extra[it.key] }));
+        if (!isEqual(nextItems, this.items())) {
+            this.itemsChange.emit(nextItems);
+        }
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    handleAddItem() {
+        if (!this.canAdd())
+            return;
+        const type = this.typeOptions().find((t) => t.id === this.newTypeId());
+        const next = {
+            key: this.newKey().trim(),
+            title: this.newTitle().trim(),
+            type: this.newTypeId(),
+            value: this.newValue(),
+            options: cloneDeep(type?.defaultOptions ?? {}),
+        };
+        const updated = [...this.items(), next];
+        this.itemsChange.emit(updated);
+        // reset inputs
+        this.newKey.set('');
+        this.newTitle.set('');
+        this.newTypeId.set('');
+        this.newValue.set(undefined);
+        // clear draft from context
+        const ctx = { ...this.internalContext() };
+        const draftExtra = { ...(ctx['extra'] ?? {}) };
+        const dk = this.draftKey();
+        if (Object.prototype.hasOwnProperty.call(draftExtra, dk)) {
+            delete draftExtra[dk];
+            this.internalContext.set({ ...ctx, extra: draftExtra });
+        }
+    }
+    handleRemoveItem(key) {
+        const updated = this.items().filter((i) => i.key !== key);
+        this.itemsChange.emit(updated);
+        // prune context
+        const ctx = { ...this.internalContext() };
+        if (ctx['extra']) {
+            const { [key]: _, ...rest } = ctx['extra'];
+            this.internalContext.set({ ...ctx, ['extra']: rest });
+        }
+    }
+    handleDrop(event) {
+        const arr = [...this.items()];
+        moveItemInArray(arr, event.previousIndex, event.currentIndex);
+        this.itemsChange.emit(arr);
+    }
+    selectPreset(id) {
+        this.newTypeId.set(id);
+    }
+    getNode(item) {
+        const key = item.key;
+        let node = this.nodeCache[key];
+        if (!node) {
+            node = {
+                type: item.type,
+                path: `extra.${item.key}`,
+                options: item.options ?? {},
+                defaultValue: item.value,
+            };
+            this.nodeCache[key] = node;
+        }
+        else {
+            // Keep reference stable; update nested fields if essential changes happen
+            node.type = item.type;
+            node.options = item.options ?? node.options;
+            // Do not overwrite defaultValue during editing to avoid resets
+        }
+        return node;
+    }
+    draftNode() {
+        const typeId = this.newTypeId();
+        const type = this.typeOptions().find((t) => t.id === typeId);
+        let node = this.draftNodeCache;
+        const resolvedType = typeId;
+        if (!node || node.type !== resolvedType) {
+            node = {
+                type: resolvedType,
+                path: `extra.${this.draftKey()}`,
+                options: cloneDeep(type?.defaultOptions ?? {}),
+                defaultValue: this.newValue(),
+            };
+            this.draftNodeCache = node;
+        }
+        else {
+            node.options = cloneDeep(type?.defaultOptions ?? {});
+        }
+        return node;
+    }
+    //#region ----   Utility Helpers   ----
+    newTypeChanged(val) {
+        this.newTypeId.set(val);
+        // force draft widget re-render on type change
+        this.draftNodeCache = undefined;
+        // clear draft value from both signal and context to avoid type mismatch
+        const prevDraftKey = this.draftKey();
+        this.newValue.set(undefined);
+        const ctx = { ...this.internalContext() };
+        const draftExtra = { ...(ctx['extra'] ?? {}) };
+        if (Object.prototype.hasOwnProperty.call(draftExtra, prevDraftKey)) {
+            delete draftExtra[prevDraftKey];
+            this.internalContext.set({ ...ctx, extra: draftExtra });
+        }
+        // bump draft version so new draft path is isolated from old widget emissions
+        this.draftVersion.set(this.draftVersion() + 1);
+        const t = this.typeOptions().find((x) => x.id === val);
+        if (t) {
+            const autoTitle = t.title ?? val;
+            const autoKey = this.sanitizeKey(autoTitle);
+            // Only auto-fill when empty
+            if (!this.newTitle()?.trim())
+                this.newTitle.set(autoTitle);
+            // always derive key from title
+            this.newKey.set(autoKey);
+        }
+    }
+    ngOnInit() {
+        // auto-select first item of type list
+        const types = this.typeOptions();
+        if (!this.newTypeId() && types && types.length > 0) {
+            this.newTypeChanged(types[0].id);
+        }
+    }
+    handleTitleChange(val) {
+        this.newTitle.set(val);
+        this.newKey.set(this.sanitizeKey(val));
+    }
+    sanitizeKey(input) {
+        if (!input)
+            return '';
+        // Convert to camelCase, remove invalid chars, ensure starts with letter/_
+        let k = camelCase(String(input));
+        k = k.replace(/[^a-zA-Z0-9_]/g, '');
+        if (!/^[a-zA-Z_]/.test(k))
+            k = `_${k}`;
+        // enforce uniqueness by suffixing if needed
+        const exists = (candidate) => this.items().some((i) => i.key === candidate);
+        if (!exists(k))
+            return k;
+        let i = 1;
+        while (exists(`${k}${i}`))
+            i++;
+        return `${k}${i}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPExtraPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPExtraPropertiesComponent, isStandalone: true, selector: "axp-extra-properties", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsChange: "itemsChange" }, host: { classAttribute: "ax-block ax-flex-1" }, ngImport: i0, template: `
+      <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+        <axp-widgets-container [context]="internalContext()" (onContextChanged)="onContextChanged($event)">
+          <div cdkDropList (cdkDropListDropped)="handleDrop($event)" class="ax-col-span-12 ax-flex ax-flex-col ax-gap-3">
+            @for(item of items(); track item.key){
+              @if(mode()==='edit'){
+                <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center" cdkDrag [cdkDragDisabled]="false">
+                  <div class="ax-col-span-12 md:ax-col-span-3 ax-flex ax-items-center ax-gap-3">
+                    <ax-icon class="fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500" cdkDragHandle></ax-icon>
+                    <div>
+                      <div class="ax-font-semibold">{{item.title}}</div>
+                    </div>
+                    <!-- Small-screen delete aligned with title -->
+                    <ax-button class="ax-ml-auto md:ax-hidden" look="blank" color="danger" (onClick)="handleRemoveItem(item.key)">
+                      <ax-prefix><ax-icon class="fa-light fa-trash-can"></ax-icon></ax-prefix>
+                    </ax-button>
+                  </div>
+                  <div class="ax-col-span-12 md:ax-col-span-8">
+                    <ng-container
+                      axp-widget-renderer
+                      [node]="getNode(item)"
+                      [mode]="'edit'"
+                    ></ng-container>
+                  </div>
+                  <div class="ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end">
+                    <ax-button look="blank" color="danger" (onClick)="handleRemoveItem(item.key)">
+                      <ax-prefix><ax-icon class="fa-light fa-trash-can"></ax-icon></ax-prefix>
+                    </ax-button>
+                  </div>
+                </div>
+              } @else {
+                <div class="ax-grid ax-grid-cols-12 ax-gap-1">
+                  <div class="ax-font-semibold">{{item.title}}</div>
+                  <div class="ax-col-span-12 ax-text-muted">
+                    <ng-container
+                      axp-widget-renderer
+                      [node]="getNode(item)"
+                      [mode]="'view'"
+                    ></ng-container>
+                  </div>
+                </div>
+              }
+            } @empty {
+              <div class="ax-col-span-12 ax-text-sm ax-text-gray-400">
+                {{ 'extra-properties:messages.no-extra-properties' | translate | async }}
+              </div>
+            }
+            @if(mode()==='edit'){
+              <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4  ax-border-t ax-border-dashed ax-pt-4">
+                <!-- Type -->
+                <ax-form-field class="ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-3">
+                  <ax-label>{{ 'extra-properties:labels.type' | translate | async }}</ax-label>
+                  <ax-select-box
+                    [value]="newTypeId()"
+                    [dataSource]="typeOptions()"
+                    valueField="id"
+                    textField="title"
+                    (onValueChanged)="newTypeChanged($event.value)"
+                  ></ax-select-box>
+                </ax-form-field>
+                <!-- Title -->
+                <ax-form-field class="ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-5">
+                  <ax-label>{{ 'extra-properties:labels.title' | translate | async }}</ax-label>
+                  <ax-text-box [ngModel]="newTitle()" (onValueChanged)="handleTitleChange($event.value)"></ax-text-box>
+                </ax-form-field>
+                <!-- Value -->
+                @if(newTypeId()){
+                  <ax-form-field class="ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-4">
+                    <ax-label>{{ 'extra-properties:labels.value' | translate | async }}</ax-label>
+                    <div (keydown.enter)="handleAddItem()">
+                      <ng-container
+                        axp-widget-renderer
+                        [node]="draftNode()"
+                        [mode]="'edit'"
+                      ></ng-container>
+                    </div>
+                  </ax-form-field>
+                }
+                <!-- Add moved to bottom (same as before) -->
+                <div class="ax-col-span-12 ax-flex ax-justify-end">
+                  <ax-button look="solid" (onClick)="handleAddItem()" [disabled]="!canAdd()" text="{{ 'extra-properties:actions.add-field' | translate | async }}">
+                    <ax-prefix><ax-icon class="fa-solid fa-add"></ax-icon></ax-prefix>
+                  </ax-button>
+                </div>
+              </div>
+            }
+          </div>
+        </axp-widgets-container>
+      </div>
+     
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i1$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i7.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i7.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: AXPLayoutBuilderModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPExtraPropertiesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-extra-properties',
+                    template: `
+      <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+        <axp-widgets-container [context]="internalContext()" (onContextChanged)="onContextChanged($event)">
+          <div cdkDropList (cdkDropListDropped)="handleDrop($event)" class="ax-col-span-12 ax-flex ax-flex-col ax-gap-3">
+            @for(item of items(); track item.key){
+              @if(mode()==='edit'){
+                <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center" cdkDrag [cdkDragDisabled]="false">
+                  <div class="ax-col-span-12 md:ax-col-span-3 ax-flex ax-items-center ax-gap-3">
+                    <ax-icon class="fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500" cdkDragHandle></ax-icon>
+                    <div>
+                      <div class="ax-font-semibold">{{item.title}}</div>
+                    </div>
+                    <!-- Small-screen delete aligned with title -->
+                    <ax-button class="ax-ml-auto md:ax-hidden" look="blank" color="danger" (onClick)="handleRemoveItem(item.key)">
+                      <ax-prefix><ax-icon class="fa-light fa-trash-can"></ax-icon></ax-prefix>
+                    </ax-button>
+                  </div>
+                  <div class="ax-col-span-12 md:ax-col-span-8">
+                    <ng-container
+                      axp-widget-renderer
+                      [node]="getNode(item)"
+                      [mode]="'edit'"
+                    ></ng-container>
+                  </div>
+                  <div class="ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end">
+                    <ax-button look="blank" color="danger" (onClick)="handleRemoveItem(item.key)">
+                      <ax-prefix><ax-icon class="fa-light fa-trash-can"></ax-icon></ax-prefix>
+                    </ax-button>
+                  </div>
+                </div>
+              } @else {
+                <div class="ax-grid ax-grid-cols-12 ax-gap-1">
+                  <div class="ax-font-semibold">{{item.title}}</div>
+                  <div class="ax-col-span-12 ax-text-muted">
+                    <ng-container
+                      axp-widget-renderer
+                      [node]="getNode(item)"
+                      [mode]="'view'"
+                    ></ng-container>
+                  </div>
+                </div>
+              }
+            } @empty {
+              <div class="ax-col-span-12 ax-text-sm ax-text-gray-400">
+                {{ 'extra-properties:messages.no-extra-properties' | translate | async }}
+              </div>
+            }
+            @if(mode()==='edit'){
+              <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4  ax-border-t ax-border-dashed ax-pt-4">
+                <!-- Type -->
+                <ax-form-field class="ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-3">
+                  <ax-label>{{ 'extra-properties:labels.type' | translate | async }}</ax-label>
+                  <ax-select-box
+                    [value]="newTypeId()"
+                    [dataSource]="typeOptions()"
+                    valueField="id"
+                    textField="title"
+                    (onValueChanged)="newTypeChanged($event.value)"
+                  ></ax-select-box>
+                </ax-form-field>
+                <!-- Title -->
+                <ax-form-field class="ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-5">
+                  <ax-label>{{ 'extra-properties:labels.title' | translate | async }}</ax-label>
+                  <ax-text-box [ngModel]="newTitle()" (onValueChanged)="handleTitleChange($event.value)"></ax-text-box>
+                </ax-form-field>
+                <!-- Value -->
+                @if(newTypeId()){
+                  <ax-form-field class="ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-4">
+                    <ax-label>{{ 'extra-properties:labels.value' | translate | async }}</ax-label>
+                    <div (keydown.enter)="handleAddItem()">
+                      <ng-container
+                        axp-widget-renderer
+                        [node]="draftNode()"
+                        [mode]="'edit'"
+                      ></ng-container>
+                    </div>
+                  </ax-form-field>
+                }
+                <!-- Add moved to bottom (same as before) -->
+                <div class="ax-col-span-12 ax-flex ax-justify-end">
+                  <ax-button look="solid" (onClick)="handleAddItem()" [disabled]="!canAdd()" text="{{ 'extra-properties:actions.add-field' | translate | async }}">
+                    <ax-prefix><ax-icon class="fa-solid fa-add"></ax-icon></ax-prefix>
+                  </ax-button>
+                </div>
+              </div>
+            }
+          </div>
+        </axp-widgets-container>
+      </div>
+     
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXLabelModule,
+                        AXTextBoxModule,
+                        AXSelectBoxModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXPLayoutBuilderModule,
+                        DragDropModule,
+                        AXTranslationModule,
+                        //AXPGridLayoutDirective,
+                    ],
+                    standalone: true,
+                    host: {
+                        class: 'ax-block ax-flex-1',
+                    },
+                }]
+        }] });
+
+class AXPWidgetPropertyViewerComponent {
+    constructor() {
+        this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
+        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.widgetRegistryService = inject(AXPWidgetRegistryService);
+        // Designer connector removed to avoid cross-entry circular dependency
+        this.currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : []));
+        this.config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.allPoperties = [];
+        this.tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+        this.groups = computed(() => {
+            return this.tabs().length ? this.tabs()[this.currentTabIndex()].groups : [];
+        }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+        this.groupCollapsedStates = new Map();
+        this.onChanged = new EventEmitter();
+        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        this.initialContext = {};
+        effect(() => {
+            if (!this.widget())
+                return;
+            const config = this.widgetRegistryService.resolve(this.widget()?.type);
+            if (config) {
+                this.initialContext = {};
+                this.config.set(config);
+                this.fillTabs();
+            }
+            else {
+                console.error(`Invalid widget name: ${this.widget()}`);
+            }
+        });
+    }
+    update(values) {
+        this.context.set(merge(cloneDeep(this.context()), values));
+    }
+    fillTabs() {
+        const tabs = [
+            {
+                name: 'general',
+                title: 'General',
+                groups: [],
+            },
+        ];
+        Object.entries(this.config()?.components ?? {}).forEach((c) => {
+            if (c[1].component != null && c[1].properties?.length) {
+                tabs.push({ name: c[0], title: capitalize(c[0]), groups: [] });
+            }
+        });
+        ///
+        this.allPoperties = [];
+        ///
+        tabs.forEach((tab) => {
+            const props = tab.name == 'general'
+                ? (this.config()?.properties ?? [])
+                : ((this.config()?.components)[tab.name]?.properties ?? []);
+            //
+            const visibleProps = props.filter((c) => c.visible != false);
+            this.allPoperties.push(...props);
+            tab.groups = unionBy(sortBy(visibleProps.map((pg) => ({
+                isCollapsed: !!this.groupCollapsedStates.get(pg.group.name),
+                name: pg.group.name,
+                title: pg.group.title,
+                props: sortBy(visibleProps.filter((p) => p.group.name == pg.group.name && pg.visible), ['order', 'title']),
+            })), ['order', 'title']), 'name').filter((c) => c.props.length);
+        });
+        this.tabs.set(tabs.filter((c) => c.groups.length));
+        //
+        this.initialContext = this.allPoperties
+            .filter((c) => (!isArray(c.schema.defaultValue) && !isNil(c.schema.defaultValue)) ||
+            (isArray(c.schema.defaultValue) && !isEmpty(c.schema.defaultValue)))
+            .reduce((acc, c) => {
+            set(acc, c.schema.interface.path, c.schema.defaultValue);
+            return acc;
+        }, {});
+        //
+        untracked(() => {
+            this.context.set(merge(cloneDeep(this.initialContext), this.widget()));
+            this.onChanged.emit({ values: this.context(), mode: 'init' });
+        });
+    }
+    handleContextChange(e) {
+        untracked(() => {
+            this.context.set(e.data);
+            this.onChanged.emit({ values: this.context(), mode: e.state == 'initiated' ? 'init' : 'update' });
+        });
+    }
+    handleTabChange(event) {
+        const indx = event.index;
+        if (this.currentTabIndex() != indx) {
+            this.currentTabIndex.set(indx);
+        }
+    }
+    handleCollapsedChange(group, collapsed) {
+        this.groupCollapsedStates.set(group, collapsed);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    @if(tabs().length > 1){\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    }\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n      @if(p.schema.interface) {\n      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$2.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$2.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXCollapseModule, AXTabsModule, AXPLayoutBuilderModule, AXTranslationModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n  @if (mode()=='advanced') {\n  <div class=\"ax-flex ax-flex-col\">\n    @if(tabs().length > 1){\n    <div class=\"ax-pb-2\">\n      <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n        @for( tab of tabs();track $index){\n        <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n    }\n    <div class=\"ax-flex-1 ax-overflow-auto\">\n      <ax-collapse-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for( group of groups();track $index){\n        <ax-collapse class=\"!ax-mb-0\" [caption]=\"group.title\" [(isCollapsed)]=\"group.isCollapsed\"\n          (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n          <div class=\"ax-flex ax-flex-col\">\n            @for( p of group.props;track $index){\n            <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n              <span class=\"ax-font-semibold\">{{ p.title }}</span>\n              @if(p.schema.interface) {\n              <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n              }\n            </div>\n            }\n          </div>\n        </ax-collapse>\n        }\n      </ax-collapse-group>\n    </div>\n  </div>\n  }\n  <!-- Simple-->\n  @else {\n  <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n    <!-- groups -->\n    @for( group of groups();track $index){\n    <!-- props -->\n    @for( p of group.props;track $index){\n    <div class=\"ax-flex ax-flex-col ax-gap-2\">\n      <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n      @if(p.schema.interface) {\n      <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n</axp-widgets-container>", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onChanged: [{
+                type: Output
+            }] } });
+
+class AXPExtraPropertiesSchemaComponent {
+    constructor() {
+        //#region ----   Inputs   ----
+        this.schema = input([], ...(ngDevMode ? [{ debugName: "schema" }] : []));
+        this.mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        //#endregion
+        //#region ----   Outputs   ----
+        this.schemaChange = output();
+        //#endregion
+        //#region ----   Services & Dependencies   ----
+        this.providedTypes = inject(AXP_EXTRA_PROPERTY_TYPES, { optional: true }) ?? [];
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----   Class Properties   ----
+        this.newTitle = signal('', ...(ngDevMode ? [{ debugName: "newTitle" }] : []));
+        this.newTypeId = signal('', ...(ngDevMode ? [{ debugName: "newTypeId" }] : []));
+        this.typeOptions = computed(() => this.providedTypes, ...(ngDevMode ? [{ debugName: "typeOptions" }] : []));
+        this.canAdd = computed(() => {
+            const title = this.newTitle()?.trim();
+            const typeId = this.newTypeId();
+            const key = this.deriveKey(title);
+            if (!key || !title || !typeId)
+                return false;
+            return !this.schema().some((i) => i.key === key);
+        }, ...(ngDevMode ? [{ debugName: "canAdd" }] : []));
+        // Selection state for right panel editor
+        this.selectedKey = signal(null, ...(ngDevMode ? [{ debugName: "selectedKey" }] : []));
+        this.selectedItem = computed(() => this.schema().find((i) => i.key === this.selectedKey()) ?? null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+        // Auto-select first item when schema changes or current selection removed
+        effect(() => {
+            const items = this.schema();
+            const current = this.selectedKey();
+            if (!items.length) {
+                if (current !== null)
+                    this.selectedKey.set(null);
+                return;
+            }
+            if (!current || !items.some((i) => i.key === current)) {
+                this.selectedKey.set(items[0].key);
+            }
+        });
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    handleAdd() {
+        if (!this.canAdd())
+            return;
+        const type = this.typeOptions().find((t) => t.id === this.newTypeId());
+        const title = this.newTitle().trim();
+        const key = this.deriveKey(title);
+        const next = {
+            key,
+            title,
+            type: this.newTypeId(),
+            options: cloneDeep(type?.defaultOptions ?? {}),
+        };
+        const updated = [...this.schema(), next];
+        this.schemaChange.emit(updated);
+        this.newTitle.set('');
+        this.newTypeId.set('');
+        // select newly added item
+        this.selectedKey.set(key);
+    }
+    handleRemove(key) {
+        const updated = this.schema().filter((i) => i.key !== key);
+        this.schemaChange.emit(updated);
+        if (this.selectedKey() === key) {
+            this.selectedKey.set(updated.length ? updated[0].key : null);
+        }
+    }
+    handleDrop(event) {
+        const arr = [...this.schema()];
+        moveItemInArray(arr, event.previousIndex, event.currentIndex);
+        this.schemaChange.emit(arr);
+    }
+    handleUpdateTitle(key, title) {
+        const updated = this.schema().map((it) => (it.key === key ? { ...it, title } : it));
+        this.schemaChange.emit(updated);
+    }
+    handleUpdateType(key, typeId) {
+        const type = this.typeOptions().find((t) => t.id === typeId);
+        const updated = this.schema().map((it) => it.key === key ? { ...it, type: typeId, options: cloneDeep(type?.defaultOptions ?? {}) } : it);
+        this.schemaChange.emit(updated);
+    }
+    newTypeChanged(val) {
+        this.newTypeId.set(val);
+        const t = this.typeOptions().find((x) => x.id === val);
+        if (t) {
+            const autoTitle = t.title ?? val;
+            if (!this.newTitle()?.trim())
+                this.newTitle.set(autoTitle);
+        }
+    }
+    handleTitleChange(val) {
+        this.newTitle.set(val);
+    }
+    handleSelect(key) {
+        this.selectedKey.set(key);
+    }
+    handleViewerChanged(e) {
+        // Ignore initial emissions to prevent change detection loops
+        if (e?.mode === 'init')
+            return;
+        const key = this.selectedKey();
+        if (!key)
+            return;
+        const nextOptions = e?.values?.options ?? {};
+        const updated = this.schema().map((it) => (it.key === key ? { ...it, options: cloneDeep(nextOptions) } : it));
+        this.schemaChange.emit(updated);
+    }
+    deriveKey(input) {
+        if (!input)
+            return '';
+        let k = camelCase(String(input));
+        k = k.replace(/[^a-zA-Z0-9_]/g, '');
+        if (!/^[a-zA-Z_]/.test(k))
+            k = `_${k}`;
+        const exists = (candidate) => this.schema().some((i) => i.key === candidate);
+        if (!exists(k))
+            return k;
+        let i = 1;
+        while (exists(`${k}${i}`))
+            i++;
+        return `${k}${i}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPExtraPropertiesSchemaComponent, isStandalone: true, selector: "axp-extra-properties-schema", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange" }, host: { classAttribute: "ax-flex ax-flex-1 ax-h-full ax-gap-4 ax-p-4" }, ngImport: i0, template: "<!-- Left Panel: list/manage properties -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-min-h-0 ax-h-full ax-w-2/3\">\n    <div class=\"ax-overflow-y-auto ax-min-h-0 ax-h-full ax-pe-2 -ax-me-2\">\n        <div cdkDropList (cdkDropListDropped)=\"handleDrop($event)\" class=\"ax-flex ax-flex-col ax-gap-3\">\n            @for (item of schema(); track item.key) {\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center ax-rounded ax-border ax-p-3 ax-cursor-pointer ax-lightest-surface \"\n                [class.!ax-lighter-surface]=\"item.key === selectedKey()\" (click)=\"handleSelect(item.key)\" cdkDrag\n                [cdkDragDisabled]=\"false\">\n                <div class=\"ax-col-span-12 md:ax-col-span-4 ax-flex ax-items-center ax-gap-3\">\n                    <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500\"\n                        cdkDragHandle></ax-icon>\n                    <div>\n                        <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                    </div>\n                </div>\n                <div class=\"ax-col-span-12 md:ax-col-span-7 ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center\">\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-select-box [value]=\"item.type\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                            textField=\"title\"\n                            (onValueChanged)=\"handleUpdateType(item.key, $event.value)\"></ax-select-box>\n                    </ax-form-field>\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-text-box [ngModel]=\"item.title\"\n                            (onValueChanged)=\"handleUpdateTitle(item.key, $event.value)\"></ax-text-box>\n                    </ax-form-field>\n                </div>\n                <div class=\"ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end\">\n                    <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemove(item.key)\">\n                        <ax-prefix><ax-icon class=\"fa-light fa-trash-can\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            } @else {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-1 ax-rounded ax-border ax-p-3\">\n                <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                <div class=\"ax-col-span-12 ax-text-xs ax-text-muted\">{{ item.key }}</div>\n            </div>\n            }\n            } @empty {\n            <div class=\"ax-text-sm ax-text-gray-400\">{{ '@extra-properties:messages.no-schema-fields' | translate |\n                async\n                }}</div>\n            }\n\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4 ax-border-t ax-border-dashed ax-pt-4\">\n                <!-- Type -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.type' | translate | async }}</ax-label>\n                    <ax-select-box [ngModel]=\"newTypeId()\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                        textField=\"title\" (onValueChanged)=\"newTypeChanged($event.value)\"></ax-select-box>\n                </ax-form-field>\n                <!-- Title -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.title' | translate | async }}</ax-label>\n                    <ax-text-box [ngModel]=\"newTitle()\"\n                        (onValueChanged)=\"handleTitleChange($event.value)\"></ax-text-box>\n                </ax-form-field>\n                <!-- Add -->\n                <div class=\"ax-col-span-12 ax-flex ax-justify-end\">\n                    <ax-button look=\"solid\" (onClick)=\"handleAdd()\" [disabled]=\"!canAdd()\"\n                        text=\"{{ '@extra-properties:actions.add-field' | translate | async }}\">\n                        <ax-prefix><ax-icon class=\"fa-solid fa-add\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n</div>\n\n<!-- Right Panel: widget property viewer for selected item -->\n<div class=\"ax-w-1/3 ax-border ax-rounded  ax-h-full ax-flex ax-flex-col ax-lightest-surface\">\n    @if (mode() === 'edit' && selectedItem()) {\n    <div class=\"ax-p-4 ax-font-semibold ax-border-b ax-lighter-surface\">\n        {{selectedItem()?.title}}\n    </div>\n    <div class=\"ax-overflow-y-auto  ax-flex-1\">\n        <axp-widget-property-viewer [widget]=\"{ type: selectedItem()!.type, options: selectedItem()!.options }\"\n            [mode]=\"'advanced'\" (onChanged)=\"handleViewerChanged($event)\" />\n    </div>\n    }\n    @else {\n    <div class=\"ax-text-sm ax-text-muted ax-p-4 ax-text-center\">{{ '@extra-properties:messages.select-field-to-edit' |\n        translate | async }}</div>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i1$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i7.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i7.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: DragDropModule }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-extra-properties-schema', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXLabelModule,
+                        AXTextBoxModule,
+                        AXSelectBoxModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        DragDropModule,
+                        AXTranslationModule,
+                        AXPWidgetPropertyViewerComponent,
+                    ], standalone: true, host: {
+                        class: 'ax-flex ax-flex-1 ax-h-full ax-gap-4 ax-p-4',
+                    }, template: "<!-- Left Panel: list/manage properties -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-min-h-0 ax-h-full ax-w-2/3\">\n    <div class=\"ax-overflow-y-auto ax-min-h-0 ax-h-full ax-pe-2 -ax-me-2\">\n        <div cdkDropList (cdkDropListDropped)=\"handleDrop($event)\" class=\"ax-flex ax-flex-col ax-gap-3\">\n            @for (item of schema(); track item.key) {\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center ax-rounded ax-border ax-p-3 ax-cursor-pointer ax-lightest-surface \"\n                [class.!ax-lighter-surface]=\"item.key === selectedKey()\" (click)=\"handleSelect(item.key)\" cdkDrag\n                [cdkDragDisabled]=\"false\">\n                <div class=\"ax-col-span-12 md:ax-col-span-4 ax-flex ax-items-center ax-gap-3\">\n                    <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500\"\n                        cdkDragHandle></ax-icon>\n                    <div>\n                        <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                    </div>\n                </div>\n                <div class=\"ax-col-span-12 md:ax-col-span-7 ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center\">\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-select-box [value]=\"item.type\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                            textField=\"title\"\n                            (onValueChanged)=\"handleUpdateType(item.key, $event.value)\"></ax-select-box>\n                    </ax-form-field>\n                    <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n                        <ax-text-box [ngModel]=\"item.title\"\n                            (onValueChanged)=\"handleUpdateTitle(item.key, $event.value)\"></ax-text-box>\n                    </ax-form-field>\n                </div>\n                <div class=\"ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end\">\n                    <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemove(item.key)\">\n                        <ax-prefix><ax-icon class=\"fa-light fa-trash-can\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            } @else {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-1 ax-rounded ax-border ax-p-3\">\n                <div class=\"ax-font-semibold\">{{ item.title }}</div>\n                <div class=\"ax-col-span-12 ax-text-xs ax-text-muted\">{{ item.key }}</div>\n            </div>\n            }\n            } @empty {\n            <div class=\"ax-text-sm ax-text-gray-400\">{{ '@extra-properties:messages.no-schema-fields' | translate |\n                async\n                }}</div>\n            }\n\n            @if (mode() === 'edit') {\n            <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4 ax-border-t ax-border-dashed ax-pt-4\">\n                <!-- Type -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.type' | translate | async }}</ax-label>\n                    <ax-select-box [ngModel]=\"newTypeId()\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n                        textField=\"title\" (onValueChanged)=\"newTypeChanged($event.value)\"></ax-select-box>\n                </ax-form-field>\n                <!-- Title -->\n                <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n                    <ax-label>{{ '@extra-properties:labels.title' | translate | async }}</ax-label>\n                    <ax-text-box [ngModel]=\"newTitle()\"\n                        (onValueChanged)=\"handleTitleChange($event.value)\"></ax-text-box>\n                </ax-form-field>\n                <!-- Add -->\n                <div class=\"ax-col-span-12 ax-flex ax-justify-end\">\n                    <ax-button look=\"solid\" (onClick)=\"handleAdd()\" [disabled]=\"!canAdd()\"\n                        text=\"{{ '@extra-properties:actions.add-field' | translate | async }}\">\n                        <ax-prefix><ax-icon class=\"fa-solid fa-add\"></ax-icon></ax-prefix>\n                    </ax-button>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n</div>\n\n<!-- Right Panel: widget property viewer for selected item -->\n<div class=\"ax-w-1/3 ax-border ax-rounded  ax-h-full ax-flex ax-flex-col ax-lightest-surface\">\n    @if (mode() === 'edit' && selectedItem()) {\n    <div class=\"ax-p-4 ax-font-semibold ax-border-b ax-lighter-surface\">\n        {{selectedItem()?.title}}\n    </div>\n    <div class=\"ax-overflow-y-auto  ax-flex-1\">\n        <axp-widget-property-viewer [widget]=\"{ type: selectedItem()!.type, options: selectedItem()!.options }\"\n            [mode]=\"'advanced'\" (onChanged)=\"handleViewerChanged($event)\" />\n    </div>\n    }\n    @else {\n    <div class=\"ax-text-sm ax-text-muted ax-p-4 ax-text-center\">{{ '@extra-properties:messages.select-field-to-edit' |\n        translate | async }}</div>\n    }\n</div>" }]
+        }], ctorParameters: () => [] });
+
+class AXPExtraPropertiesValuesComponent {
+    constructor() {
+        //#region ----   Inputs   ----
+        this.schema = input([], ...(ngDevMode ? [{ debugName: "schema" }] : []));
+        this.values = input({}, ...(ngDevMode ? [{ debugName: "values" }] : []));
+        this.mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        //#endregion
+        //#region ----   Outputs   ----
+        this.valuesChange = output();
+        //#endregion
+        //#region ----   Services & Dependencies   ----
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----   Class Properties   ----
+        this.internalContext = signal({}, ...(ngDevMode ? [{ debugName: "internalContext" }] : []));
+        this.nodeCache = {};
+        this.lastTypeByKey = {};
+        //#endregion
+        //#region ----   Effects   ----
+        this.syncContextFromInputs = effect(() => {
+            const schema = this.schema();
+            const vals = this.values();
+            const current = this.internalContext();
+            const currentExtra = current['extra'] ?? {};
+            const extra = {};
+            for (const s of schema) {
+                const v = vals[s.key];
+                if (v !== undefined && v !== null)
+                    extra[s.key] = v;
+            }
+            const nextContext = { ...current, extra };
+            if (!isEqual(nextContext, current)) {
+                this.internalContext.set(nextContext);
+            }
+        }, ...(ngDevMode ? [{ debugName: "syncContextFromInputs" }] : []));
+        this.clearOnSchemaTypeChange = effect(() => {
+            const schema = this.schema();
+            const changedKeys = new Set();
+            for (const s of schema) {
+                const prev = this.lastTypeByKey[s.key];
+                if (prev && prev !== s.type)
+                    changedKeys.add(s.key);
+                this.lastTypeByKey[s.key] = s.type;
+            }
+            if (changedKeys.size > 0) {
+                const next = { ...this.values() };
+                changedKeys.forEach((k) => delete next[k]);
+                // reset cached node defaults
+                changedKeys.forEach((k) => {
+                    const node = this.nodeCache[k];
+                    if (node)
+                        node.defaultValue = undefined;
+                });
+                this.valuesChange.emit(next);
+            }
+        }, ...(ngDevMode ? [{ debugName: "clearOnSchemaTypeChange" }] : []));
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    onContextChanged(event) {
+        if (event.state === 'initiated')
+            return;
+        const data = (event.data ?? {});
+        const extra = data['extra'] ?? {};
+        const nextValues = {};
+        for (const s of this.schema()) {
+            if (Object.prototype.hasOwnProperty.call(extra, s.key)) {
+                nextValues[s.key] = extra[s.key];
+            }
+        }
+        const currentValues = this.values();
+        if (!isEqual(currentValues, nextValues)) {
+            this.valuesChange.emit(nextValues);
+        }
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    getNode(item) {
+        const key = item.key;
+        let node = this.nodeCache[key];
+        if (!node) {
+            node = {
+                type: item.type,
+                path: `extra.${item.key}`,
+                options: item.options ?? {},
+                defaultValue: this.values()[item.key],
+            };
+            this.nodeCache[key] = node;
+        }
+        else {
+            // Keep reference stable; update nested fields if essential changes happen
+            node.type = item.type;
+            node.options = item.options ?? node.options;
+            // Do not overwrite defaultValue during editing to avoid resets
+        }
+        return node;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPExtraPropertiesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPExtraPropertiesValuesComponent, isStandalone: true, selector: "axp-extra-properties-values", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, host: { classAttribute: "ax-block ax-flex-1" }, ngImport: i0, template: `
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      <axp-widgets-container [context]="internalContext()" (onContextChanged)="onContextChanged($event)">
+        <div class="ax-col-span-12 ax-flex ax-flex-col ax-gap-3">
+          @for(item of schema(); track item.key){
+            @if(mode()==='edit'){
+              <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center">
+                <div class="ax-col-span-12 md:ax-col-span-3 ax-flex ax-items-center ax-gap-3">
+                  <div class="ax-font-semibold">{{item.title}}</div>
+                </div>
+                <div class="ax-col-span-12 md:ax-col-span-9">
+                  <ng-container
+                    axp-widget-renderer
+                    [node]="getNode(item)"
+                    [mode]="'edit'"
+                  ></ng-container>
+                </div>
+              </div>
+            } @else {
+              <div class="ax-grid ax-grid-cols-12 ax-gap-1">
+                <div class="ax-font-semibold">{{item.title}}</div>
+                <div class="ax-col-span-12 ax-text-muted">
+                  <ng-container
+                    axp-widget-renderer
+                    [node]="getNode(item)"
+                    [mode]="'view'"
+                  ></ng-container>
+                </div>
+              </div>
+            }
+          }
+        </div>
+      </axp-widgets-container>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPExtraPropertiesValuesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-extra-properties-values',
+                    template: `
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      <axp-widgets-container [context]="internalContext()" (onContextChanged)="onContextChanged($event)">
+        <div class="ax-col-span-12 ax-flex ax-flex-col ax-gap-3">
+          @for(item of schema(); track item.key){
+            @if(mode()==='edit'){
+              <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center">
+                <div class="ax-col-span-12 md:ax-col-span-3 ax-flex ax-items-center ax-gap-3">
+                  <div class="ax-font-semibold">{{item.title}}</div>
+                </div>
+                <div class="ax-col-span-12 md:ax-col-span-9">
+                  <ng-container
+                    axp-widget-renderer
+                    [node]="getNode(item)"
+                    [mode]="'edit'"
+                  ></ng-container>
+                </div>
+              </div>
+            } @else {
+              <div class="ax-grid ax-grid-cols-12 ax-gap-1">
+                <div class="ax-font-semibold">{{item.title}}</div>
+                <div class="ax-col-span-12 ax-text-muted">
+                  <ng-container
+                    axp-widget-renderer
+                    [node]="getNode(item)"
+                    [mode]="'view'"
+                  ></ng-container>
+                </div>
+              </div>
+            }
+          }
+        </div>
+      </axp-widgets-container>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXPLayoutBuilderModule],
+                    standalone: true,
+                    host: {
+                        class: 'ax-block ax-flex-1',
+                    },
+                }]
+        }] });
+
+class AXPQueryFiltersComponent {
     constructor() {
         this.translate = inject(AXTranslationService);
         this.calendarService = inject(AXCalendarService);
@@ -1219,7 +2160,9 @@ class AXPLayoutFiltersComponent {
         this.onFiltersChanged = output();
         this.tagBox = viewChild('tagBox', ...(ngDevMode ? [{ debugName: "tagBox" }] : []));
         this.selectedField = signal(null, ...(ngDevMode ? [{ debugName: "selectedField" }] : []));
-        this.selectedFilters = linkedSignal(() => this.convertQueriesToDefinitions(this.initialFilters()).map((i) => ({ ...i, readOnly: true })));
+        this.selectedFilters = linkedSignal(() => this.convertQueriesToDefinitions(this.initialFilters()), {
+            equal: isEqual,
+        });
         this.context = linkedSignal(() => this.convertQueriesToContext(this.initialFilters()));
         this.activeFilter = signal(null, ...(ngDevMode ? [{ debugName: "activeFilter" }] : []));
         this.asyncTags = signal([], ...(ngDevMode ? [{ debugName: "asyncTags" }] : []));
@@ -1233,7 +2176,7 @@ class AXPLayoutFiltersComponent {
                     sf.operator?.type === (this.context()[sf.field]?.operation?.type || f.operator?.type)));
         };
         this.getDisplayValue = async (filter, val) => {
-            if (filter.widget.type === 'select-editor' || filter.widget.type === 'select-filter') {
+            if (filter.widget?.type === 'select-editor' || filter.widget?.type === 'select-filter') {
                 const dataSource = filter.widget.options?.['dataSource'];
                 const textField = filter.widget.options?.['textField'];
                 const valueField = filter.widget.options?.['valueField'];
@@ -1284,6 +2227,7 @@ class AXPLayoutFiltersComponent {
                     field: f.field,
                     operator: context[f.field]?.operation,
                     value: context[f.field]?.value,
+                    hidden: f.hidden,
                 }));
                 const newContext = {};
                 convertedFilters.forEach((cf) => {
@@ -1308,7 +2252,7 @@ class AXPLayoutFiltersComponent {
                     query: `${this.translate.translateSync(filter.title)} ${this.getActiveOperator(filter)} '${displayValue}'`,
                 };
             })).then((results) => {
-                this.asyncTags.set(results);
+                this.asyncTags.set(results.filter((r) => !r.hidden));
             });
         }, ...(ngDevMode ? [{ debugName: "#effect2" }] : []));
     }
@@ -1323,6 +2267,7 @@ class AXPLayoutFiltersComponent {
                 title: definition?.title || '',
                 widget: definition?.widget,
                 filterType: definition?.filterType,
+                hidden: q.hidden,
             };
         });
     }
@@ -1336,6 +2281,7 @@ class AXPLayoutFiltersComponent {
         this.tagBoxInput = this.tagBox()?.getHostElement().querySelector('input');
     }
     handleSelectField(field) {
+        console.log(field);
         this.activeFilter.set(field);
         // this.inputValue.set('');
         this.tagBox()?.inputValue.set('');
@@ -1383,8 +2329,9 @@ class AXPLayoutFiltersComponent {
     #effect;
     handleSelectFilters(e) {
         if (e.value?.length < this.selectedFilters().length) {
+            const hiddenFilters = this.selectedFilters().filter((f) => f.hidden);
             this.selectedFilters.update((prev) => {
-                return e.value;
+                return hiddenFilters.concat(e.value);
             });
         }
     }
@@ -1431,12 +2378,12 @@ class AXPLayoutFiltersComponent {
         }
     }
     #effect2;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPLayoutFiltersComponent, isStandalone: true, selector: "axp-layout-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\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    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"(filtersDefinitions().length === 0 ? 'filter.noRecords' : 'filter.title') | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-layout-filters{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i4$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onPressEnterOrSpace"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i8.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\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    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"(filtersDefinitions().length === 0 ? 'filter.noRecords' : 'filter.title') | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i7.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i7.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i4$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$3.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7$1.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onPressEnterOrSpace"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7$1.AXListNavigationItemDirective, selector: "[axListNavigationItem]", exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i8.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-layout-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+            args: [{ selector: 'axp-query-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
                         FormsModule,
                         AXButtonModule,
@@ -1448,12 +2395,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         AXPLayoutBuilderModule,
                         AXListNavigationModule,
                         AXBadgeModule,
-                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\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    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"(filtersDefinitions().length === 0 ? 'filter.noRecords' : 'filter.title') | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-layout-filters{width:100%}\n"] }]
+                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\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    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"(filtersDefinitions().length === 0 ? 'filter.noRecords' : 'filter.title') | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"] }]
         }], propDecorators: { listItems: [{
                 type: ViewChildren,
                 args: ['caseItem']
             }] } });
 
+class AXPQuerySortsComponent {
+    constructor() {
+        this.sortDefinitions = model([], ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : []));
+        this.sortQueries = signal([], ...(ngDevMode ? [{ debugName: "sortQueries", equal: isEqual }] : [{
+                equal: isEqual,
+            }]));
+        this.initialSortQueries = input([], ...(ngDevMode ? [{ debugName: "initialSortQueries" }] : []));
+        this.sortQueriesChange = output();
+        // Recompute merged sort queries whenever inputs change
+        effect(() => {
+            const initialQueries = this.initialSortQueries();
+            const definitions = this.sortDefinitions();
+            const existingQueriesMap = new Map(initialQueries.map((q) => [q.name, q]));
+            const mergedQueries = definitions.map((def) => {
+                const existingQuery = existingQueriesMap.get(def.name);
+                return existingQuery ? { ...def, dir: existingQuery.dir } : { ...def };
+            });
+            this.sortQueries.set(mergedQueries);
+        });
+        effect(() => {
+            this.sortQueriesChange.emit(this.sortQueries());
+        });
+    }
+    drop(event) {
+        const sd = this.sortDefinitions();
+        moveItemInArray(sd, event.previousIndex, event.currentIndex);
+        this.sortDefinitions.set([...sd]);
+        // Reorder sortQueries based on new sortDefinitions order
+        const sq = this.sortQueries();
+        moveItemInArray(sq, event.previousIndex, event.currentIndex);
+        this.sortQueries.set([...sq]);
+    }
+    getSortDirection(item) {
+        return this.sortQueries().find((i) => i.name === item.name)?.dir;
+    }
+    changeItemSort(item) {
+        const itemDirection = this.getSortDirection(item);
+        const newDirection = itemDirection === 'asc' ? 'desc' : itemDirection === 'desc' ? undefined : 'asc';
+        this.sortQueries.update((prev) => {
+            return prev.map((field) => {
+                if (field.name === item.name) {
+                    return { ...field, dir: newDirection };
+                }
+                return field;
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i7.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-query-sorts', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                        AXTabsModule,
+                        AXTranslationModule,
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                    ], template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
 const AXP_USER_AVATAR_PROVIDER = new InjectionToken('AXP_USER_AVATAR_PROVIDER', {
     providedIn: 'root',
     factory: () => {
@@ -1681,7 +2692,7 @@ class AXPUserAvatarComponent {
         return colors[idx];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasPicture()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$3.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.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$3.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasPicture()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$3.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i7.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$4.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
             type: Component,
@@ -1693,6 +2704,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     ], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n  @if(hasPicture()){\n  <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n  }@else{\n  <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->\n" }]
         }] });
 
+class AXPQueryViewsComponent {
+    constructor() {
+        this.popupService = inject(AXPopupService);
+        this.translate = inject(AXTranslationService);
+        this.tabs = viewChild('tabs', ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+        this.views = model([], ...(ngDevMode ? [{ debugName: "views" }] : []));
+        this.selectedView = model.required(...(ngDevMode ? [{ debugName: "selectedView" }] : []));
+        this.isMounted = signal(false, ...(ngDevMode ? [{ debugName: "isMounted" }] : []));
+        this.#effect = effect(() => {
+            if (!this.isMounted())
+                return;
+            const views = untracked(() => this.views());
+            if (!views)
+                return;
+            const selectedTab = views.findIndex((v) => v.name == this.selectedView().name);
+            untracked(() => {
+                if (selectedTab != -1) {
+                    this.tabs()?.select(selectedTab);
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
+    }
+    ngAfterViewInit() {
+        this.isMounted.set(true);
+    }
+    #effect;
+    setView(view) {
+        this.selectedView.set(view);
+    }
+    handleActiveChange(e) {
+        console.log(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPQueryViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPQueryViewsComponent, isStandalone: true, selector: "axp-query-views", inputs: { views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { views: "viewsChange", selectedView: "selectedViewChange" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"ax-font-semibold\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [text]=\"(item.title | translate | async) || 'item.title'\">\n    </ax-tab-item>\n  }\n  <!-- <ax-tab-item\n      (onClick)=\"createNew()\"\n      [key]=\"'create-new'\"\n      [text]=\"('view.createNew' | translate | async) || 'Create New'\"\n    >\n    </ax-tab-item> -->\n</ax-tabs>\n", dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPQueryViewsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-query-views', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTabsModule, AXTranslationModule, CommonModule], template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"ax-font-semibold\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [text]=\"(item.title | translate | async) || 'item.title'\">\n    </ax-tab-item>\n  }\n  <!-- <ax-tab-item\n      (onClick)=\"createNew()\"\n      [key]=\"'create-new'\"\n      [text]=\"('view.createNew' | translate | async) || 'Create New'\"\n    >\n    </ax-tab-item> -->\n</ax-tabs>\n" }]
+        }] });
+
 /**
  * Generic widget item component for displaying selectable widgets with icons, titles, and descriptions.
  * Can be used across different modules for consistent widget display and interaction.
@@ -1751,5 +2802,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDynamicFormComponent, AXPLayoutFiltersComponent, AXPMenuBadgeHelper, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER };
+export { AXPActivityLogComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDynamicFormComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map