@acorex/platform 20.3.0-next.8 → 20.4.0

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

@@ -1,77 +1,103 @@
-import * as i2$1 from '@acorex/components/button';
+import * as i5$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i1$1 from '@acorex/cdk/common';
 import { AXCommonModule } from '@acorex/cdk/common';
-import * as i3 from '@acorex/components/decorators';
+import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i5 from '@acorex/core/translation';
-import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import * as i3$1 from '@acorex/components/skeleton';
+import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
-import * as i5$1 from '@acorex/core/format';
+import * as i4$1 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import { getSystemActions, AXPExpressionEvaluatorService, AXPContextStore } from '@acorex/platform/core';
+import { getSystemActions, AXPExpressionEvaluatorService, AXPContextStore, AXPGridLayoutDirective } 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, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, output, Input, EventEmitter, untracked, Output, linkedSignal, ViewChildren } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, untracked, EventEmitter, Output, linkedSignal, ViewChildren, Input } 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$2 from '@acorex/components/switch';
+import * as i4$2 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i2$2 from '@acorex/components/tree-view';
+import { AXTreeViewModule } from '@acorex/components/tree-view';
+import * as i6 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import * as i3 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
-import * as i9 from '@angular/cdk/drag-drop';
+import * as i3$3 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 i2$2 from '@acorex/components/form';
-import { AXFormModule, AXFormComponent } from '@acorex/components/form';
-import * as i4$3 from '@acorex/components/text-box';
+import { cloneDeep, sortBy, isEmpty, isNil, isEqual, camelCase, merge, capitalize, unionBy, isArray, set } from 'lodash-es';
+import * as i2$4 from '@acorex/components/form';
+import { AXFormModule } from '@acorex/components/form';
+import * as i4$4 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
-import * as i2 from '@acorex/components/check-box';
+import * as i2$3 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
-import * as i3$3 from '@acorex/components/label';
-import { AXLabelModule, AXLabelComponent } from '@acorex/components/label';
-import * as i3$4 from '@acorex/platform/layout/builder';
-import { AXPLayoutBuilderModule, AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetRegistryService, AXPWidgetsCatalog } from '@acorex/platform/layout/builder';
-import * as i4$1 from '@acorex/components/data-table';
+import * as i3$1 from '@acorex/components/label';
+import { AXLabelModule } from '@acorex/components/label';
+import * as i3$2 from '@acorex/platform/layout/widget-core';
+import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';
+import * as i4$3 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXBasePageComponent } from '@acorex/components/page';
-import * as i5$2 from '@acorex/components/search-box';
-import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXPopupService } from '@acorex/components/popup';
-import { AXValidationModule } from '@acorex/core/validation';
-import { AXPGridLayoutDirective, AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS } from '@acorex/platform/common';
-import * as i3$5 from '@acorex/components/dropdown';
-import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i4$2 from '@acorex/components/loading';
-import { AXLoadingModule } from '@acorex/components/loading';
-import * as i5$3 from '@acorex/components/select-box';
+import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
+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$3 from '@acorex/components/tabs';
+import * as i1$2 from '@acorex/components/accordion';
+import { AXAccordionModule } from '@acorex/components/accordion';
+import * as i2$5 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import * as i7 from '@acorex/cdk/list-navigation';
 import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
-import * as i4$4 from '@acorex/components/popover';
+import * as i4$5 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
-import * as i5$4 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 { AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS, AXPFileStorageService } from '@acorex/platform/common';
+import * as i1$3 from '@acorex/components/image-editor';
+import { AXImageEditorContainerComponent, AXImageEditorModule } from '@acorex/components/image-editor';
+import * as i3$4 from '@acorex/components/toolbar';
+import { AXToolBarModule } from '@acorex/components/toolbar';
 import { BehaviorSubject, timer, Subject, takeUntil } from 'rxjs';
 import { tap } from 'rxjs/operators';
-import * as i1$3 from '@acorex/components/avatar';
+import * as i1$4 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
-import * as i3$6 from '@acorex/components/image';
+import * as i3$5 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 
+//#endregion
+//#region ----   Component Definition   ----
+//#endregion
+//#region ----   Component Class   ----
+class AXPStateMessageComponent {
+    constructor() {
+        // Core properties
+        this.mode = input('empty', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+        // Optional styling
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPStateMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: AXPStateMessageComponent, isStandalone: true, selector: "axp-state-message", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-variant]=\"variant()\">\n  <div class=\"__icon\" *ngIf=\"icon()\">\n    <i [class]=\"icon()\"></i>\n  </div>\n  <div class=\"__content\">\n    <h3 class=\"__title\" *ngIf=\"title()\">{{ title() | translate | async }}</h3>\n    <p class=\"__description\" *ngIf=\"description()\">{{ description() | translate | async }}</p>\n    <div class=\"__actions\">\n      <ng-content select=\"[slot=actions]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".axp-state-message{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.axp-state-message .__icon{margin-bottom:1rem}.axp-state-message .__icon i{opacity:74%;display:block;font-weight:400;font-size:2.25rem!important;line-height:2.5rem!important}.axp-state-message .__content{max-width:28rem}.axp-state-message .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}.axp-state-message .__description{margin-bottom:1rem;opacity:74%;display:block;font-weight:400;font-size:.875rem!important;line-height:1.25rem!important}.axp-state-message .__actions{display:flex;flex-direction:column;align-items:center;gap:.5rem}.axp-state-message[data-mode=empty] .__icon i{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__icon i{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__title{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__icon i{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__title{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__icon i{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__title{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.axp-state-message[data-variant=compact]{padding:1.5rem .75rem}.axp-state-message[data-variant=compact] .__icon{margin-bottom:.5rem}.axp-state-message[data-variant=compact] .__icon i{font-size:1.5rem!important;line-height:2rem!important}.axp-state-message[data-variant=compact] .__title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem}.axp-state-message[data-variant=compact] .__description{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.axp-state-message[data-variant=minimal]{padding:1rem .5rem}.axp-state-message[data-variant=minimal] .__icon{margin-bottom:.25rem}.axp-state-message[data-variant=minimal] .__icon i{font-size:1.25rem!important;line-height:1.75rem!important}.axp-state-message[data-variant=minimal] .__title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.axp-state-message[data-variant=minimal] .__description{margin-bottom:.25rem;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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.3.4", ngImport: i0, type: AXPStateMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-state-message', standalone: true, imports: [CommonModule, AXTranslationModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-variant]=\"variant()\">\n  <div class=\"__icon\" *ngIf=\"icon()\">\n    <i [class]=\"icon()\"></i>\n  </div>\n  <div class=\"__content\">\n    <h3 class=\"__title\" *ngIf=\"title()\">{{ title() | translate | async }}</h3>\n    <p class=\"__description\" *ngIf=\"description()\">{{ description() | translate | async }}</p>\n    <div class=\"__actions\">\n      <ng-content select=\"[slot=actions]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".axp-state-message{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.axp-state-message .__icon{margin-bottom:1rem}.axp-state-message .__icon i{opacity:74%;display:block;font-weight:400;font-size:2.25rem!important;line-height:2.5rem!important}.axp-state-message .__content{max-width:28rem}.axp-state-message .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}.axp-state-message .__description{margin-bottom:1rem;opacity:74%;display:block;font-weight:400;font-size:.875rem!important;line-height:1.25rem!important}.axp-state-message .__actions{display:flex;flex-direction:column;align-items:center;gap:.5rem}.axp-state-message[data-mode=empty] .__icon i{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__icon i{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__title{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__icon i{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__title{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__icon i{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__title{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.axp-state-message[data-variant=compact]{padding:1.5rem .75rem}.axp-state-message[data-variant=compact] .__icon{margin-bottom:.5rem}.axp-state-message[data-variant=compact] .__icon i{font-size:1.5rem!important;line-height:2rem!important}.axp-state-message[data-variant=compact] .__title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem}.axp-state-message[data-variant=compact] .__description{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.axp-state-message[data-variant=minimal]{padding:1rem .5rem}.axp-state-message[data-variant=minimal] .__icon{margin-bottom:.25rem}.axp-state-message[data-variant=minimal] .__icon i{font-size:1.25rem!important;line-height:1.75rem!important}.axp-state-message[data-variant=minimal] .__title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.axp-state-message[data-variant=minimal] .__description{margin-bottom:.25rem;font-size:.75rem;line-height:1rem}\n"] }]
+        }] });
+
 //#region ----   Component Definition   ----
 class AXPActivityLogComponent {
     //#endregion
@@ -201,10 +227,10 @@ class AXPActivityLogComponent {
         const currentIndex = this.activities().findIndex(a => a.id === activity.id);
         return currentIndex > 0; // Can compare if not the first activity
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPActivityLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPActivityLogComponent, isStandalone: true, selector: "axp-activity-log", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, 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: i5.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: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i5$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPActivityLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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  <!-- Activity Log Content -->\n  <div class=\"__content\">\n    <!-- Loading State -->\n    @if (loading()) {\n    <div class=\"__loading\">\n      @for (item of [1, 2, 3, 4]; track $index) {\n      <div class=\"__item\">\n        <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n        <div class=\"__content\">\n          <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Activity Feed -->\n    @if (!loading() && activities().length > 0) {\n    <div class=\"__feed\">\n      @for (activity of activities(); track activity.id) {\n      @let changeClasses = getChangeClasses(activity.changeType);\n      @let isItemExpanded = isExpanded(activity.id);\n      @let hasExpandableContentItem = hasExpandableContent(activity);\n      <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n        <div class=\"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            <!-- 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(`@general:actions.${activity.changeType}.title`) | 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\" [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\">{{ 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        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (!loading() && activities().length === 0) {\n    <axp-state-message icon=\"fa-light fa-history\" [title]=\"'@activity-log:state-message.no-history.title'\"\n      [description]=\"'@activity-log:state-message.no-history.description'\">\n    </axp-state-message>\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}@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: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPActivityLogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPActivityLogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-activity-log', standalone: true, imports: [
                         CommonModule,
@@ -216,7 +242,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         AXFormatModule,
                         AXTagModule,
                         AXAccordionCdkModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
+                        AXPStateMessageComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n  <!-- Activity Log Content -->\n  <div class=\"__content\">\n    <!-- Loading State -->\n    @if (loading()) {\n    <div class=\"__loading\">\n      @for (item of [1, 2, 3, 4]; track $index) {\n      <div class=\"__item\">\n        <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n        <div class=\"__content\">\n          <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n          <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Activity Feed -->\n    @if (!loading() && activities().length > 0) {\n    <div class=\"__feed\">\n      @for (activity of activities(); track activity.id) {\n      @let changeClasses = getChangeClasses(activity.changeType);\n      @let isItemExpanded = isExpanded(activity.id);\n      @let hasExpandableContentItem = hasExpandableContent(activity);\n      <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n        <div class=\"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            <!-- 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(`@general:actions.${activity.changeType}.title`) | 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\" [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\">{{ 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        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (!loading() && activities().length === 0) {\n    <axp-state-message icon=\"fa-light fa-history\" [title]=\"'@activity-log:state-message.no-history.title'\"\n      [description]=\"'@activity-log:state-message.no-history.description'\">\n    </axp-state-message>\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}@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"] }]
         }], ctorParameters: () => [] });
 
 const AXP_TASK_BADGE_PROVIDERS = new InjectionToken('AXP_TASK_BADGE_PROVIDERS');
@@ -244,10 +271,10 @@ class AXPTaskBadgeService {
         this.computedCache.set(key, total);
         return total;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTaskBadgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTaskBadgeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTaskBadgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTaskBadgeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTaskBadgeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTaskBadgeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -278,10 +305,10 @@ class AXPTaskBadgeDirective {
         const node = signal[SIGNAL];
         signalSetFn(node, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTaskBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.8", type: AXPTaskBadgeDirective, isStandalone: true, selector: "[axp-task-badge]", inputs: { badgeKey: { classPropertyName: "badgeKey", publicName: "badgeKey", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "axp-task-badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTaskBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", type: AXPTaskBadgeDirective, isStandalone: true, selector: "[axp-task-badge]", inputs: { badgeKey: { classPropertyName: "badgeKey", publicName: "badgeKey", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "axp-task-badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTaskBadgeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTaskBadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axp-task-badge]',
@@ -303,10 +330,10 @@ class AXPMenuBadgeHelper {
 }
 
 class AXPThemeLayoutPagePrimaryActionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutPagePrimaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-primary", ngImport: i0, template: `<ng-content select="ax-button,ax-dropdown-button"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutPagePrimaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-primary", ngImport: i0, template: `<ng-content select="ax-button,ax-dropdown-button"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -317,10 +344,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                 }]
         }] });
 class AXPThemeLayoutPageSecondaryActionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutPageSecondaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-secondary", ngImport: i0, template: `<ng-content select="ax-button-item,ax-divider,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutPageSecondaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-secondary", ngImport: i0, template: `<ng-content select="ax-button-item,ax-divider,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -339,8 +366,8 @@ class AXPThemeLayoutActionsComponent {
         this.secondaryContent = contentChild(AXPThemeLayoutPageSecondaryActionsComponent, ...(ngDevMode ? [{ debugName: "secondaryContent" }] : []));
         this.hasSecondary = computed(() => this.secondaryContent() != null, ...(ngDevMode ? [{ debugName: "hasSecondary" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", type: AXPThemeLayoutActionsComponent, isStandalone: true, selector: "axp-layout-actions", queries: [{ propertyName: "primaryContent", first: true, predicate: AXPThemeLayoutPagePrimaryActionsComponent, descendants: true, isSignal: true }, { propertyName: "secondaryContent", first: true, predicate: AXPThemeLayoutPageSecondaryActionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "primaryTemplate", first: true, predicate: ["primary"], descendants: true, isSignal: true }, { propertyName: "secondaryTemplate", first: true, predicate: ["secondary"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", type: AXPThemeLayoutActionsComponent, isStandalone: true, selector: "axp-layout-actions", queries: [{ propertyName: "primaryContent", first: true, predicate: AXPThemeLayoutPagePrimaryActionsComponent, descendants: true, isSignal: true }, { propertyName: "secondaryContent", first: true, predicate: AXPThemeLayoutPageSecondaryActionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "primaryTemplate", first: true, predicate: ["primary"], descendants: true, isSignal: true }, { propertyName: "secondaryTemplate", first: true, predicate: ["secondary"], descendants: true, isSignal: true }], ngImport: i0, template: `
 
     <ng-template #primary>
         <ng-content select="axp-layout-actions-primary"></ng-content>
@@ -353,7 +380,7 @@ class AXPThemeLayoutActionsComponent {
     <ng-content></ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutActionsComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [],
@@ -381,10 +408,10 @@ class AXPThemeLayoutBlockComponent {
         this.elementRef = inject(ElementRef);
         this.hostElement = this.elementRef.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutBlockComponent, isStandalone: true, 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    ", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutBlockComponent, isStandalone: true, 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    ", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutBlockComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -420,14 +447,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
         }] });
 
 class AXPThemeLayoutFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutFooterComponent, isStandalone: true, selector: "axp-layout-footer, axp-layout-page-footer", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutFooterComponent, isStandalone: true, selector: "axp-layout-footer, axp-layout-page-footer", ngImport: i0, template: `
      <ng-content select="axp-layout-prefix"></ng-content>
      <ng-content></ng-content>
      <ng-content select="axp-layout-suffix"></ng-content>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutFooterComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [],
@@ -452,8 +479,8 @@ class AXPThemeLayoutPageHeaderComponent {
         this.breadcrumbs = viewChild('breadcrumbs', ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
         this.navButton = viewChild('navButton', ...(ngDevMode ? [{ debugName: "navButton" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", type: AXPThemeLayoutPageHeaderComponent, isStandalone: true, selector: "axp-layout-page-header", viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true, isSignal: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true, isSignal: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true, isSignal: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true, isSignal: true }, { propertyName: "breadcrumbs", first: true, predicate: ["breadcrumbs"], descendants: true, isSignal: true }, { propertyName: "navButton", first: true, predicate: ["navButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", type: AXPThemeLayoutPageHeaderComponent, isStandalone: true, selector: "axp-layout-page-header", viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true, isSignal: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true, isSignal: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true, isSignal: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true, isSignal: true }, { propertyName: "breadcrumbs", first: true, predicate: ["breadcrumbs"], descendants: true, isSignal: true }, { propertyName: "navButton", first: true, predicate: ["navButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #breadcrumbs>
       <ng-content select="axp-layout-breadcrumbs"></ng-content>
     </ng-template>
@@ -478,7 +505,7 @@ class AXPThemeLayoutPageHeaderComponent {
     </ng-template>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [],
@@ -513,14 +540,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                 }]
         }] });
 class AXPThemeLayoutHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutHeaderComponent, isStandalone: true, selector: "axp-layout-header", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutHeaderComponent, isStandalone: true, selector: "axp-layout-header", ngImport: i0, template: `
     <ng-content select="axp-layout-prefix"></ng-content>
     <ng-content></ng-content>
     <ng-content select="axp-layout-suffix"></ng-content>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [],
@@ -537,10 +564,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
         }] });
 
 class AXPThemeLayoutListComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutListComponent, isStandalone: true, selector: "axp-layout-list", ngImport: i0, template: `<ng-content select="axp-layout-list-item,axp-layout-list-group,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutListComponent, isStandalone: true, selector: "axp-layout-list", ngImport: i0, template: `<ng-content select="axp-layout-list-item,axp-layout-list-group,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -551,10 +578,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                 }]
         }] });
 class AXPThemeLayoutListItemsGroupComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutListItemsGroupComponent, isStandalone: true, selector: "axp-layout-list-group", ngImport: i0, template: `<ng-content select="axp-layout-list-item, axp-layout-title, axp-layout-header ,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutListItemsGroupComponent, isStandalone: true, selector: "axp-layout-list-group", ngImport: i0, template: `<ng-content select="axp-layout-list-item, axp-layout-title, axp-layout-header ,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -565,10 +592,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                 }]
         }] });
 class AXPThemeLayoutListItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutListItemComponent, isStandalone: true, selector: "axp-layout-list-item", ngImport: i0, template: `<ng-content select="axp-layout-content,axp-layout-prefix,axp-layout-suffix,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutListItemComponent, isStandalone: true, selector: "axp-layout-list-item", ngImport: i0, template: `<ng-content select="axp-layout-content,axp-layout-prefix,axp-layout-suffix,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListItemComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -580,13 +607,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
         }] });
 
 class AXPThemeLayoutSectionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutSectionComponent, isStandalone: true, selector: "axp-layout-section", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutSectionComponent, isStandalone: true, selector: "axp-layout-section", ngImport: i0, template: `
       <ng-content select="axp-layout-header"></ng-content>
       <ng-content select="axp-layout-content"></ng-content>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutSectionComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [],
@@ -602,15 +629,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
         }] });
 
 class AXPThemeLayoutStartSideComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutStartSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutStartSideComponent, isStandalone: true, selector: "axp-layout-page-start-side, axp-layout-start-side", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutStartSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutStartSideComponent, isStandalone: true, selector: "axp-layout-page-start-side, axp-layout-start-side", ngImport: i0, template: `
     <ng-content select="axp-layout-header"></ng-content>
     <ng-content select="axp-layout-content"></ng-content>
     <ng-content select="axp-layout-footer"></ng-content>
     <ng-content></ng-content>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutStartSideComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutStartSideComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [],
@@ -627,14 +654,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                 }]
         }] });
 class AXPThemeLayoutEndSideComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutEndSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutEndSideComponent, isStandalone: true, selector: "axp-layout-page-end-side, axp-layout-end-side", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutEndSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutEndSideComponent, isStandalone: true, selector: "axp-layout-page-end-side, axp-layout-end-side", ngImport: i0, template: `
     <ng-content select="axp-layout-header"></ng-content>
     <ng-content select="axp-layout-content"></ng-content>
     <ng-content select="axp-layout-footer"></ng-content>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutEndSideComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutEndSideComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [],
@@ -651,14 +678,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
         }] });
 
 class AXPThemeLayoutToolbarComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutToolbarComponent, isStandalone: true, selector: "axp-layout-toolbar", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutToolbarComponent, isStandalone: true, selector: "axp-layout-toolbar", ngImport: i0, template: `
     <ng-content select="axp-layout-prefix"></ng-content>
     <ng-content select="axp-layout-suffix"></ng-content>
     <ng-content></ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [],
@@ -693,10 +720,10 @@ class AXPThemeLayoutContainerComponent {
     ngOnDestroy() {
         this.mutationObserver?.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeLayoutContainerComponent, isStandalone: true, selector: "axp-layout-container", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutContainerComponent, isStandalone: true, selector: "axp-layout-container", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeLayoutContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutContainerComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -707,6 +734,284 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                 }]
         }] });
 
+class AXPCategoryTreeComponent {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----   Inputs   ----
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.config = input({
+            textField: 'title',
+            valueField: 'id',
+            expandedField: 'expand',
+            showCheckbox: false,
+            searchable: true,
+            searchPlaceholder: '@general:terms.interface.category.search.placeholder',
+            emptyStateTitle: '@general:terms.interface.category.search.no-records.title',
+            emptyStateDescription: '@general:terms.interface.category.search.no-records.description',
+            emptyStateIcon: 'fa-light fa-folder-open',
+        }, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.actions = input({
+            canCreate: true,
+            canUpdate: true,
+            canDelete: true,
+            canCreateChild: true,
+            createLabel: 'Add New',
+            updateLabel: 'Edit',
+            deleteLabel: 'Delete',
+            createChildLabel: 'Add New Child',
+        }, ...(ngDevMode ? [{ debugName: "actions" }] : []));
+        this.events = input({}, ...(ngDevMode ? [{ debugName: "events" }] : []));
+        //#endregion
+        //#region ----   Outputs   ----
+        this.nodeClick = output();
+        this.nodeSelect = output();
+        this.nodeCreate = output();
+        this.nodeUpdate = output();
+        this.nodeDelete = output();
+        this.searchChange = output();
+        this.collapseChange = output();
+        //#endregion
+        //#region ----   Component State   ----
+        this.tree = viewChild('tree', ...(ngDevMode ? [{ debugName: "tree" }] : []));
+        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.searchValue = signal('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
+        this.treeItems = signal([
+            {
+                id: 'root',
+                title: '@general:terms.interface.selection.all-items',
+                description: '',
+                parentId: undefined,
+                childCount: 0,
+                expand: true,
+                children: [],
+            },
+        ], ...(ngDevMode ? [{ debugName: "treeItems" }] : []));
+        //#endregion
+        //#region ----   Computed Properties   ----
+        this.emptyStateTitle = computed(() => {
+            const title = this.config().emptyStateTitle || '';
+            return title;
+        }, ...(ngDevMode ? [{ debugName: "emptyStateTitle" }] : []));
+        this.emptyStateDescription = computed(() => {
+            const description = this.config().emptyStateDescription || '';
+            return description;
+        }, ...(ngDevMode ? [{ debugName: "emptyStateDescription" }] : []));
+    }
+    //#endregion
+    //#region ----   Lifecycle Methods   ----
+    async ngOnInit() {
+        await this.loadRootNodes();
+    }
+    //#endregion
+    //#region ----   Data Loading Methods   ----
+    async loadRootNodes() {
+        this.isLoading.set(true);
+        try {
+            const entities = await this.dataSource().loadRootNodes();
+            const nodes = this.convertEntitiesToTreeNodes(entities);
+            this.treeItems.update((prev) => prev.map((item) => ({
+                ...item,
+                children: nodes,
+            })));
+        }
+        catch (error) {
+            console.error('Error loading root nodes:', error);
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    async loadChildNodes(parentId) {
+        if (!this.dataSource().loadChildNodes)
+            return;
+        this.tree()?.setNodeLoading(parentId, true);
+        try {
+            const entities = await this.dataSource().loadChildNodes(parentId);
+            const children = this.convertEntitiesToTreeNodes(entities);
+            this.updateNodeChildren(parentId, children);
+        }
+        catch (error) {
+            console.error('Error loading child nodes:', error);
+        }
+        finally {
+            this.tree()?.setNodeLoading(parentId, false);
+        }
+    }
+    async searchNodes(searchValue) {
+        if (!this.dataSource().searchNodes)
+            return;
+        this.isLoading.set(true);
+        try {
+            const entities = await this.dataSource().searchNodes(searchValue);
+            const nodes = this.convertEntitiesToTreeNodes(entities);
+            this.treeItems.update((prev) => prev.map((item) => ({
+                ...item,
+                children: nodes,
+            })));
+        }
+        catch (error) {
+            console.error('Error searching nodes:', error);
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    async handleNodeClick(event) {
+        const node = event.data;
+        // Extract the entity data (without tree-specific properties)
+        const entity = {
+            id: node.id,
+            title: node.title,
+            description: node.description,
+            parentId: node.parentId,
+            childCount: node.childCount
+        };
+        this.nodeClick.emit(entity);
+        this.events().onNodeClick?.(entity);
+    }
+    async handleCollapseChanged(event) {
+        const node = event.data;
+        // Extract the entity data (without tree-specific properties)
+        const entity = {
+            id: node.id,
+            title: node.title,
+            description: node.description,
+            parentId: node.parentId,
+            childCount: node.childCount
+        };
+        this.collapseChange.emit(entity);
+        this.events().onCollapseChange?.(entity);
+        // Load children if node is being expanded
+        // Check both expand property and active property (active seems to be the actual expansion state)
+        if ((node.expand || node.active) && this.dataSource().loadChildNodes) {
+            await this.loadChildNodes(node.id);
+        }
+    }
+    async handleSearchChange(event) {
+        const searchValue = event.value;
+        this.searchValue.set(searchValue);
+        this.searchChange.emit(searchValue);
+        this.events().onSearchChange?.(searchValue);
+        if (searchValue) {
+            await this.searchNodes(searchValue);
+        }
+        else {
+            await this.loadRootNodes();
+        }
+    }
+    //#endregion
+    //#region ----   CRUD Action Handlers   ----
+    async handleCreateRootClick(event) {
+        event.nativeEvent.preventDefault();
+        event.nativeEvent.stopPropagation();
+        this.nodeCreate.emit(undefined);
+        this.events().onNodeCreate?.(undefined);
+    }
+    async handleCreateChildClick(node, event) {
+        event.nativeEvent.preventDefault();
+        event.nativeEvent.stopPropagation();
+        // Extract the entity data (without tree-specific properties)
+        const entity = {
+            id: node.id,
+            title: node.title,
+            description: node.description,
+            parentId: node.parentId,
+            childCount: node.childCount
+        };
+        this.nodeCreate.emit(entity);
+        this.events().onNodeCreate?.(entity);
+    }
+    async handleUpdateNodeClick(node, event) {
+        event.nativeEvent.preventDefault();
+        event.nativeEvent.stopPropagation();
+        // Extract the entity data (without tree-specific properties)
+        const entity = {
+            id: node.id,
+            title: node.title,
+            description: node.description,
+            parentId: node.parentId,
+            childCount: node.childCount
+        };
+        this.nodeUpdate.emit(entity);
+        this.events().onNodeUpdate?.(entity);
+    }
+    async handleDeleteNodeClick(node, event) {
+        event.nativeEvent.preventDefault();
+        event.nativeEvent.stopPropagation();
+        // Extract the entity data (without tree-specific properties)
+        const entity = {
+            id: node.id,
+            title: node.title,
+            description: node.description,
+            parentId: node.parentId,
+            childCount: node.childCount
+        };
+        this.nodeDelete.emit(entity);
+        this.events().onNodeDelete?.(entity);
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    convertEntitiesToTreeNodes(entities) {
+        return entities.map(entity => ({
+            ...entity,
+            children: entity.childCount > 0 ? [] : undefined, // Set children to empty array if has children, undefined if no children
+            expand: false,
+            hasChild: entity.childCount > 0, // Set hasChild based on childCount
+        }));
+    }
+    updateNodeChildren(parentId, children) {
+        const updateChildrenAtPath = (items, id) => {
+            return items.map((item) => {
+                if (item.id === id) {
+                    return { ...item, children };
+                }
+                if (item.children?.length) {
+                    return { ...item, children: updateChildrenAtPath(item.children, id) };
+                }
+                return item;
+            });
+        };
+        this.treeItems.update((prev) => prev.map((item) => ({
+            ...item,
+            children: updateChildrenAtPath(item.children || [], parentId),
+        })));
+    }
+    async refreshTree(parentId) {
+        if (parentId) {
+            await this.loadChildNodes(parentId);
+        }
+        else {
+            await this.loadRootNodes();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title | translate | async }}</span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n          <div class=\"ax-flex ax-items-center ax-gap-1\">\n            <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"actions().createChildLabel || 'Add New Child'\"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"actions().updateLabel || 'Edit'\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"actions().deleteLabel || 'Delete'\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: i2$2.AXTreeViewComponent, selector: "ax-tree-view", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { 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: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { 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.3.4", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-category-tree', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXTreeViewModule,
+                        AXSkeletonModule,
+                        AXPThemeLayoutBlockComponent,
+                        AXSearchBoxModule,
+                        AXPThemeLayoutHeaderComponent,
+                        AXPThemeLayoutToolbarComponent,
+                        AXTranslationModule,
+                        AXButtonModule,
+                        AXDropdownModule,
+                        AXPStateMessageComponent,
+                    ], template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title | translate | async }}</span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n          <div class=\"ax-flex ax-items-center ax-gap-1\">\n            <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"actions().createChildLabel || 'Add New Child'\"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"actions().updateLabel || 'Edit'\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"actions().deleteLabel || 'Delete'\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n" }]
+        }] });
+
+//#region ----   Tree Node Interface   ----
+//#endregion
+
 class AXPQueryColumnsComponent {
     constructor() {
         this.columns = model([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
@@ -725,10 +1030,10 @@ class AXPQueryColumnsComponent {
         moveItemInArray(columns, event.previousIndex, event.currentIndex);
         this.columns.set(columns);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPQueryColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3$2.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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3.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.8", ngImport: i0, type: AXPQueryColumnsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryColumnsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-query-columns', imports: [
                         CommonModule,
@@ -856,16 +1161,16 @@ class AXPCompareViewComponent {
     }
     ngOnDestroy() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPCompareViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPCompareViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: i3$3.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: 
+                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: 
                 // Platform
-                AXPLayoutBuilderModule }, { kind: "component", type: i3$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$4.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 }); }
+                AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], 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.8", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-compare-view', imports: [
                         // Angular
@@ -878,15 +1183,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         AXCheckBoxModule,
                         AXTranslationModule,
                         // Platform
-                        AXPLayoutBuilderModule
+                        AXPWidgetCoreModule
                     ], 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 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.8", type: AXPComponentSlot, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: AXPComponentSlot, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlot, decorators: [{
             type: Directive
         }] });
 
@@ -906,10 +1211,10 @@ class AXPComponentSlotRegistryService {
     get(slotName) {
         return this.registry.get(slotName) || [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlotRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlotRegistryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlotRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1008,10 +1313,10 @@ class AXPComponentSlotDirective {
         return condition(this.contextStore.data());
         //return condition(this.context());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.8", type: AXPComponentSlotDirective, isStandalone: false, selector: "axp-component-slot", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, host: { classPropertyName: "host", publicName: "host", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["slot"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", type: AXPComponentSlotDirective, isStandalone: false, selector: "axp-component-slot", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, host: { classPropertyName: "host", publicName: "host", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["slot"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlotDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'axp-component-slot',
@@ -1071,11 +1376,11 @@ class AXPComponentSlotModule {
             f();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlotModule, deps: [{ token: 'AXPComponentSlotModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlotModule, declarations: [AXPComponentSlotDirective], exports: [AXPComponentSlotDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlotModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotModule, deps: [{ token: 'AXPComponentSlotModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotModule, declarations: [AXPComponentSlotDirective], exports: [AXPComponentSlotDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPComponentSlotModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXPComponentSlotDirective],
@@ -1100,12 +1405,15 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
             selectionMode: 'single',
             searchFields: [],
             parentField: undefined,
-            allowCreate: false
+            allowCreate: false,
+            filters: undefined
         }, ...(ngDevMode ? [{ debugName: "config" }] : []));
         this.searchTerm = '';
         this.grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : []));
         this.initialSelectedItems = [];
         this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+        // Category Filter State
+        this.activeCategoryFilter = signal(null, ...(ngDevMode ? [{ debugName: "activeCategoryFilter" }] : []));
         //#endregion
         //#region ----   Computed Properties   ----
         this.allowSelect = computed(() => this.selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "allowSelect" }] : []));
@@ -1120,6 +1428,24 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
             }
             return `Search in ${searchFields.join(', ')}...`;
         }, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+        // Category Tree Configuration
+        this.categoryTreeConfig = computed(() => ({
+            textField: 'title',
+            valueField: 'id',
+            showCheckbox: false,
+            searchable: true,
+            searchPlaceholder: '@general:terms.interface.category.search.placeholder',
+            emptyStateTitle: '@general:terms.interface.category.search.no-records.title',
+            emptyStateDescription: '@general:terms.interface.category.search.no-records.description',
+            emptyStateIcon: 'fa-light fa-folder-open',
+        }), ...(ngDevMode ? [{ debugName: "categoryTreeConfig" }] : []));
+        // Category Tree Actions (no CRUD in filter mode)
+        this.categoryTreeActions = computed(() => ({
+            canCreate: false,
+            canUpdate: false,
+            canDelete: false,
+            canCreateChild: false,
+        }), ...(ngDevMode ? [{ debugName: "categoryTreeActions" }] : []));
     }
     //#endregion
     //#region ----   Lifecycle Methods   ----
@@ -1186,6 +1512,31 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
             await this.grid().expandRow(row);
         }
     }
+    // Category Filter Event Handlers
+    handleCategoryFilterClick(node) {
+        const categoryConfig = this.config().categoryFilter;
+        // Get the filter value from the node
+        const filterValue = node.id;
+        // Store active filter state
+        this.activeCategoryFilter.set({
+            node,
+            filterValue
+        });
+        // Apply filter to main data source
+        this.applyCategoryFilter(filterValue, categoryConfig);
+    }
+    clearCategoryFilter() {
+        this.activeCategoryFilter.set(null);
+        // Apply only base filters (without category filter)
+        const baseFilters = this.config().filters;
+        if (baseFilters) {
+            this.config().dataSource.filter(baseFilters);
+        }
+        else {
+            this.config().dataSource.clearFilter();
+        }
+        this.config().dataSource.refresh();
+    }
     //#endregion
     //#region ----   Private Methods   ----
     applySearchFilter(searchTerm) {
@@ -1193,18 +1544,76 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         if (!searchFields || searchFields.length === 0) {
             return;
         }
-        // Apply search filter to data source
-        // This will be implemented based on the data source type
-        console.log('Applying search filter:', searchTerm, 'to fields:', searchFields);
+        if (isEmpty(searchTerm) || isNil(searchTerm)) {
+            // Apply only base filters when search is cleared
+            const baseFilters = this.config().filters;
+            if (baseFilters) {
+                this.config().dataSource.filter(baseFilters);
+            }
+            else {
+                this.config().dataSource.clearFilter();
+            }
+            this.config().dataSource.refresh();
+            return;
+        }
+        // Get base filters from config
+        const baseFilters = this.config().filters;
+        // Create search filter
+        const searchFilter = {
+            field: 'title',
+            value: searchTerm,
+            operator: { type: 'contains' }
+        };
+        // Merge base filters with search filter
+        const allFilters = baseFilters ? [baseFilters, searchFilter] : [searchFilter];
+        const filter = {
+            field: null,
+            logic: 'and',
+            operator: null,
+            filters: allFilters
+        };
+        // Apply filter to data source
+        this.config().dataSource.filter(filter);
+        this.config().dataSource.refresh();
     }
     applyFilterAndSort() {
-        // Apply any existing filters and sorting
-        console.log('Applying filter and sort');
+        // Apply base filters from config
+        const baseFilters = this.config().filters;
+        if (baseFilters) {
+            this.config().dataSource.filter(baseFilters);
+            this.config().dataSource.refresh();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-4 ax-overflow-hidden\">\n  @if (hasSearch()) {\n    <div class=\"ax-w-full\">\n      <ax-search-box\n        [placeholder]=\"searchPlaceholder()\"\n        [value]=\"searchTerm\"\n        (onValueChanged)=\"handleChangeSearchValue($event)\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n  }\n\n  <ax-data-table\n    #grid\n    [showFooter]=\"false\"\n    class=\"ax-h-[50vh]\"\n    [paging]=\"true\"\n    [loading]=\"{ enabled: true, animation: true }\"\n    [dataSource]=\"config().dataSource\"\n    [parentField]=\"config().parentField\"\n    (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n    (onRowClick)=\"handleRowClick($event)\"\n    (onRowDbClick)=\"handleRowDbClick($event)\"\n  >\n    @if (config().selectionMode === 'multiple') {\n      <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n    }\n\n    @for (col of config().columns; track col.name) {\n      @if (col.visible) {\n        <axp-widget-column-renderer\n          [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n          [caption]=\"col.title | translate | async\"\n          [node]=\"{\n            path: col.name,\n            type: col.widget.type,\n            options: col.widget.options,\n          }\"\n        >\n        </axp-widget-column-renderer>\n      }\n    }\n  </ax-data-table>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('close' | translate | async)!\" (onClick)=\"handleCloseClick()\"> </ax-button>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      [text]=\"('select' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\"\n      [disabled]=\"allowSelect() === false\"\n    >\n    </ax-button>\n    @if (config().allowCreate) {\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'Create-New' | translate | async\"\n        (onClick)=\"handleCreateNewClick()\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    }\n  </ax-suffix>\n</ax-footer>\n", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$4.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    applyCategoryFilter(filterValue, categoryConfig) {
+        if (isNil(filterValue) || filterValue === 'root') {
+            this.config().dataSource.clearFilter();
+            this.config().dataSource.refresh();
+            return;
+        }
+        // Get base filters from config
+        const baseFilters = this.config().filters;
+        // Create category filter
+        const categoryFilter = {
+            field: categoryConfig.filterField,
+            value: filterValue,
+            operator: { type: categoryConfig.filterOperator || 'contains' }
+        };
+        // Merge base filters with category filter
+        const allFilters = baseFilters ? [baseFilters, categoryFilter] : [categoryFilter];
+        const filter = {
+            field: null,
+            logic: 'and',
+            operator: null,
+            filters: allFilters
+        };
+        // Apply filter to data source (adds to existing filters)
+        this.config().dataSource.filter(filter);
+        this.config().dataSource.refresh();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDataSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n    <!-- Category Filter Side Panel -->\n    @if (config().categoryFilter?.enabled) {\n      <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n        <axp-category-tree\n          [dataSource]=\"config().categoryFilter!.dataSource\"\n          [config]=\"categoryTreeConfig()\"\n          [actions]=\"categoryTreeActions()\"\n          (nodeClick)=\"handleCategoryFilterClick($event)\"\n        >\n        </axp-category-tree>\n      </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n        <div class=\"ax-w-full ax-mb-2\">\n          <ax-search-box\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchTerm\"\n            (onValueChanged)=\"handleChangeSearchValue($event)\"\n            [axAutoFocus]=\"true\"\n          >\n            <ax-clear-button></ax-clear-button>\n          </ax-search-box>\n        </div>\n      }\n\n      <ax-data-table\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-h-[50vh]\"\n        [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\"\n        [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n      >\n        @if (config().selectionMode === 'multiple') {\n          <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n\n        @for (col of config().columns; track col.name) {\n          @if (col.visible) {\n            <axp-widget-column-renderer\n              [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n              [caption]=\"col.title | translate | async\"\n              [node]=\"{\n                path: col.dataPath || col.name,\n                type: col.widget.type,\n                options: col.widget.options,\n              }\"\n            >\n            </axp-widget-column-renderer>\n          }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\"\n    >\n    </ax-button>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\"\n      [disabled]=\"allowSelect() === false\"\n    >\n    </ax-button>\n    <!-- @if (config().allowCreate) {\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.create.title' | translate | async\"\n        (onClick)=\"handleCreateNewClick()\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    } -->\n  </ax-suffix>\n</ax-footer>\n", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area .ax-data-table{flex:1;min-height:0}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$3.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$3.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { 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.8", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-data-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -1215,10 +1624,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         AXDropdownButtonModule,
                         AXDataTableModule,
                         AXSearchBoxModule,
-                        AXPLayoutBuilderModule,
+                        AXPWidgetCoreModule,
                         AXTranslationModule,
                         AXBadgeModule,
-                    ], inputs: [], template: "<div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-4 ax-overflow-hidden\">\n  @if (hasSearch()) {\n    <div class=\"ax-w-full\">\n      <ax-search-box\n        [placeholder]=\"searchPlaceholder()\"\n        [value]=\"searchTerm\"\n        (onValueChanged)=\"handleChangeSearchValue($event)\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n  }\n\n  <ax-data-table\n    #grid\n    [showFooter]=\"false\"\n    class=\"ax-h-[50vh]\"\n    [paging]=\"true\"\n    [loading]=\"{ enabled: true, animation: true }\"\n    [dataSource]=\"config().dataSource\"\n    [parentField]=\"config().parentField\"\n    (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n    (onRowClick)=\"handleRowClick($event)\"\n    (onRowDbClick)=\"handleRowDbClick($event)\"\n  >\n    @if (config().selectionMode === 'multiple') {\n      <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n    }\n\n    @for (col of config().columns; track col.name) {\n      @if (col.visible) {\n        <axp-widget-column-renderer\n          [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n          [caption]=\"col.title | translate | async\"\n          [node]=\"{\n            path: col.name,\n            type: col.widget.type,\n            options: col.widget.options,\n          }\"\n        >\n        </axp-widget-column-renderer>\n      }\n    }\n  </ax-data-table>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('close' | translate | async)!\" (onClick)=\"handleCloseClick()\"> </ax-button>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      [text]=\"('select' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\"\n      [disabled]=\"allowSelect() === false\"\n    >\n    </ax-button>\n    @if (config().allowCreate) {\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'Create-New' | translate | async\"\n        (onClick)=\"handleCreateNewClick()\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    }\n  </ax-suffix>\n</ax-footer>\n", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}\n"] }]
+                        AXPCategoryTreeComponent,
+                    ], inputs: [], template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n    <!-- Category Filter Side Panel -->\n    @if (config().categoryFilter?.enabled) {\n      <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n        <axp-category-tree\n          [dataSource]=\"config().categoryFilter!.dataSource\"\n          [config]=\"categoryTreeConfig()\"\n          [actions]=\"categoryTreeActions()\"\n          (nodeClick)=\"handleCategoryFilterClick($event)\"\n        >\n        </axp-category-tree>\n      </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n        <div class=\"ax-w-full ax-mb-2\">\n          <ax-search-box\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchTerm\"\n            (onValueChanged)=\"handleChangeSearchValue($event)\"\n            [axAutoFocus]=\"true\"\n          >\n            <ax-clear-button></ax-clear-button>\n          </ax-search-box>\n        </div>\n      }\n\n      <ax-data-table\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-h-[50vh]\"\n        [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\"\n        [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n      >\n        @if (config().selectionMode === 'multiple') {\n          <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n\n        @for (col of config().columns; track col.name) {\n          @if (col.visible) {\n            <axp-widget-column-renderer\n              [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n              [caption]=\"col.title | translate | async\"\n              [node]=\"{\n                path: col.dataPath || col.name,\n                type: col.widget.type,\n                options: col.widget.options,\n              }\"\n            >\n            </axp-widget-column-renderer>\n          }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\"\n    >\n    </ax-button>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\"\n      [disabled]=\"allowSelect() === false\"\n    >\n    </ax-button>\n    <!-- @if (config().allowCreate) {\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.create.title' | translate | async\"\n        (onClick)=\"handleCreateNewClick()\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    } -->\n  </ax-suffix>\n</ax-footer>\n", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area .ax-data-table{flex:1;min-height:0}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"] }]
         }] });
 
 var dataSelector_component = /*#__PURE__*/Object.freeze({
@@ -1230,6 +1640,7 @@ class AXPDataSelectorService {
     constructor() {
         //#region ----   Services & Dependencies   ----
         this.popupService = inject(AXPopupService);
+        this.expressionService = inject(AXPExpressionEvaluatorService);
     }
     //#endregion
     //#region ----   Public Methods   ----
@@ -1238,820 +1649,1169 @@ class AXPDataSelectorService {
      */
     async open(config) {
         const component = await Promise.resolve().then(function () { return dataSelector_component; }).then(c => c.AXPDataSelectorComponent);
+        // Create a copy of config to avoid mutating the original
+        const processedConfig = { ...config };
+        // Evaluate filters if they exist
+        if (processedConfig.filters) {
+            processedConfig.filters = await this.expressionService.evaluate(processedConfig.filters);
+        }
         const result = await this.popupService.open(component, {
-            title: config.title,
+            title: processedConfig.title,
+            size: processedConfig.categoryFilter?.enabled ?
+                'lg'
+                : (processedConfig.columns.length > 3 ? 'lg' : 'md'),
             data: {
-                config: signal(config)
+                config: signal(processedConfig)
             }
         });
         return result.data || null;
     }
     /**
-     * Open data selector for meta data selection
+     * Open data selector with category filter
      */
-    async openMetaDataSelector(dataSource) {
-        const config = {
-            title: '@data-management:meta-data-selector.select-items',
-            dataSource: dataSource,
-            columns: [
-                {
-                    name: 'title',
-                    title: 'Title',
-                    visible: true,
-                    widget: {
-                        type: 'text',
-                        options: {}
-                    }
-                },
-                {
-                    name: 'description',
-                    title: 'Description',
-                    visible: true,
-                    widget: {
-                        type: 'text',
-                        options: {}
-                    }
-                }
-            ],
-            selectionMode: 'multiple',
-            searchFields: ['title', 'description'],
-            parentField: 'parentId',
-            allowCreate: false
+    async openWithCategoryFilter(config, categoryFilterConfig) {
+        const enhancedConfig = {
+            ...config,
+            categoryFilter: {
+                enabled: true,
+                ...categoryFilterConfig
+            }
         };
-        return this.open(config);
+        return this.open(enhancedConfig);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDataSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDataSelectorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDataSelectorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AXPWidgetPropertyViewerService {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.popupService = inject(AXPopupService);
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Open widget property viewer popup
+     */
+    async open(config) {
+        const component = await Promise.resolve().then(function () { return widgetPropertyViewerPopup_component; }).then(c => c.AXPWidgetPropertyViewerPopupComponent);
+        const result = await this.popupService.open(component, {
+            title: config.title,
+            size: config.size || 'lg',
+            data: {
+                widget: signal(config.widget),
+                mode: signal(config.mode || 'simple')
+            }
+        });
+        return result.data || null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataSelectorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataSelectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
-class AXPDynamicFormComponent {
+//#endregion
+//#region ----   Conversion Utilities   ----
+/**
+ * Convert designer field to form field definition
+ */
+function convertDesignerFieldToFormField(field) {
+    return {
+        path: field.name,
+        title: field.title,
+        description: field.description,
+        widget: field.widget,
+        mode: field.mode,
+        layout: field.layout,
+    };
+}
+/**
+ * Convert designer group to form group definition
+ */
+function convertDesignerGroupToFormGroup(group) {
+    return {
+        name: group.name,
+        title: group.title,
+        description: group.description,
+        parameters: group.fields.map(convertDesignerFieldToFormField),
+        mode: group.mode,
+    };
+}
+/**
+ * Convert designer state to form definition
+ */
+function convertDesignerStateToFormDefinition(state) {
+    return {
+        groups: state.groups.map(convertDesignerGroupToFormGroup),
+    };
+}
+//#endregion
+
+class AXPDynamicFormDesignerComponent {
     constructor() {
         //#region ----   Inputs   ----
-        /**
-         * Form definition containing groups and fields
-         */
-        this.formDefinition = input.required(...(ngDevMode ? [{ debugName: "formDefinition" }] : []));
-        /**
-         * Form context/model data
-         */
-        this.context = input.required(...(ngDevMode ? [{ debugName: "context" }] : []));
-        /**
-         * Form appearance and density styling (normal, compact, spacious)
-         */
-        this.layoutLook = input('normal', ...(ngDevMode ? [{ debugName: "layoutLook" }] : []));
-        /**
-         * Form layout direction and flow (vertical, horizontal, grid)
-         */
-        this.layoutDirection = input('vertical', ...(ngDevMode ? [{ debugName: "layoutDirection" }] : []));
-        /**
-         * Custom layout configuration for form fields
-         */
-        this.layoutConfig = input({
-            positions: {
-                default: { colSpan: 12 },
-                md: { colSpan: 8 },
-                lg: { colSpan: 6 },
-                xl: { colSpan: 5 },
-                xxl: { colSpan: 4 },
-            },
-        }, ...(ngDevMode ? [{ debugName: "layoutConfig" }] : []));
+        // Form definition model for two-way binding
+        this.formDefinition = model({ groups: [] }, ...(ngDevMode ? [{ debugName: "formDefinition" }] : []));
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        // Flag to prevent external sync during internal updates
+        this.isInternalUpdate = false;
         //#endregion
-        //#region ----   Outputs   ----
-        /**
-         * Emitted when form context changes
-         */
-        this.contextChange = output();
-        /**
-         * Emitted when context change is initiated
-         */
-        this.contextInitiated = output();
-        /**
-         * Emitted when form becomes valid/invalid
-         */
-        this.validityChange = output();
+        //#region ----   Services & Dependencies   ----
+        this.widgetRegistry = inject(AXPWidgetRegistryService);
+        this.formBuilderService = inject(AXPLayoutBuilderService);
+        this.widgetPropertyViewerService = inject(AXPWidgetPropertyViewerService);
         //#endregion
-        //#region ----   Properties   ----
-        this.form = viewChild(AXFormComponent, ...(ngDevMode ? [{ debugName: "form" }] : []));
-        this.container = viewChild(AXPWidgetContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
-        /**
-         * Internal context signal for reactivity
-         */
-        this.internalContext = signal({}, ...(ngDevMode ? [{ debugName: "internalContext" }] : []));
+        //#region ----   Class Properties   ----
+        // Designer state
+        this.selectedFieldId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFieldId" }] : []));
+        // Internal designer state for UI management
+        this.designerState = signal({ groups: [], mode: 'designer' }, ...(ngDevMode ? [{ debugName: "designerState" }] : []));
+        // Field management - simplified approach
+        // Available widgets filtered by FormElement group
+        this.availableWidgets = computed(() => {
+            return this.widgetRegistry
+                .all()
+                .filter((widget) => widget.groups?.includes(AXPWidgetGroupEnum.FormElement) && widget.type === 'editor')
+                .map((widget) => ({
+                name: widget.name,
+                title: widget.title,
+                icon: widget.icon,
+                description: widget.description,
+                type: widget.type,
+                properties: widget.properties,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "availableWidgets" }] : []));
+        // Widget options for select box
+        this.widgetOptions = computed(() => {
+            return this.availableWidgets().map((w) => ({
+                value: w.name,
+                text: w.title,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "widgetOptions" }] : []));
+        // Get all fields from all groups
+        this.getAllFields = computed(() => {
+            const groups = this.designerState().groups || [];
+            if (!groups || groups.length === 0)
+                return [];
+            return groups.flatMap((group) => group.fields);
+        }, ...(ngDevMode ? [{ debugName: "getAllFields" }] : []));
+        // Convert form definition to designer groups for template rendering
+        this.designerGroups = computed(() => {
+            const formDef = this.formDefinition();
+            if (!formDef?.groups)
+                return [];
+            return formDef.groups.map((group) => ({
+                id: `group-${group.name}`,
+                name: group.name,
+                title: group.title,
+                description: group.description,
+                mode: group.mode,
+                fields: group.parameters.map((param) => ({
+                    id: `field-${param.path}`,
+                    name: param.path,
+                    title: param.title || '',
+                    description: param.description,
+                    widget: param.widget,
+                    mode: param.mode,
+                    layout: param.layout,
+                })),
+            }));
+        }, ...(ngDevMode ? [{ debugName: "designerGroups" }] : []));
         //#endregion
-        //#region ----   Computed Properties   ----
+        //#region ----   Effects   ----
         /**
-         * Computed layout configuration
+         * Effect to log form definition changes
          */
-        this.computedLayout = computed(() => this.layoutConfig(), ...(ngDevMode ? [{ debugName: "computedLayout" }] : []));
+        this.logFormDefinitionChanges = effect(() => {
+            const formDef = this.formDefinition();
+            console.log('formDefinition changed to:', formDef);
+            console.log('formDefinition groups details:', formDef.groups?.map((g) => ({ name: g.name })));
+        }, ...(ngDevMode ? [{ debugName: "logFormDefinitionChanges" }] : []));
         /**
-         * Host classes based on layout look and direction
+         * Effect to sync form definition model to designer state
          */
-        this.hostClasses = computed(() => {
-            const classes = ['axp-dynamic-form'];
-            const look = this.layoutLook();
-            const direction = this.layoutDirection();
-            if (look && look !== 'normal') {
-                classes.push(`--look-${look}`);
-            }
-            if (direction && direction !== 'vertical') {
-                classes.push(`--direction-${direction}`);
+        this.syncModelToDesigner = effect(() => {
+            const formDef = this.formDefinition();
+            if (formDef && formDef.groups.length > 0) {
+                if (!this.isInternalUpdate) {
+                    untracked(() => {
+                        console.log('syncModelToDesigner - syncing external changes:', formDef);
+                        this.setFormDefinition(formDef);
+                    });
+                }
+                else {
+                    console.log('syncModelToDesigner - BLOCKED internal update, flag is set');
+                }
             }
-            return classes.join(' ');
-        }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-        //#endregion
-        //#region ----   Effects   ----
+        }, ...(ngDevMode ? [{ debugName: "syncModelToDesigner" }] : []));
         /**
-         * Effect to sync context changes
+         * Effect to sync designer state changes back to model
          */
-        this.#contextSyncEffect = effect(() => {
-            const context = this.context();
-            this.internalContext.set(context);
-        }, ...(ngDevMode ? [{ debugName: "#contextSyncEffect" }] : []));
-        /**
-         * Effect to handle form status changes
-         */
-        this.#formStatusEffect = effect(() => {
-            const form = this.form();
-            if (form) {
-                // You can add form status tracking here if needed
-                this.container()?.builderService.setStatus(AXPPageStatus.Rendered);
+        this.syncDesignerToModel = effect(() => {
+            const designerState = this.designerState();
+            const formDef = convertDesignerStateToFormDefinition(designerState);
+            const currentModel = untracked(() => this.formDefinition());
+            // Only update if there's a meaningful change
+            if (!isEqual(formDef, currentModel)) {
+                untracked(() => {
+                    this.formDefinition.set(formDef);
+                });
             }
-        }, ...(ngDevMode ? [{ debugName: "#formStatusEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "syncDesignerToModel" }] : []));
     }
     //#endregion
-    //#region ----   Lifecycle Methods   ----
-    ngOnInit() {
-        // Initialize internal context with input context
-        this.internalContext.set(this.context() ?? {});
-    }
-    //#endregion
-    //#region ----   Effects   ----
+    //#region ----   External API Methods   ----
     /**
-     * Effect to sync context changes
+     * Get the current form definition (converted from designer state)
      */
-    #contextSyncEffect;
+    getFormDefinition() {
+        return convertDesignerStateToFormDefinition(this.designerState());
+    }
     /**
-     * Effect to handle form status changes
+     * Set the form definition (converted to designer state)
      */
-    #formStatusEffect;
-    //#endregion
-    //#region ----   Event Handlers   ----
+    setFormDefinition(definition) {
+        const groups = definition.groups.map((group) => ({
+            id: this.generateId(),
+            name: group.name,
+            title: group.title,
+            description: group.description,
+            mode: group.mode,
+            fields: group.parameters.map((param) => ({
+                id: this.generateId(),
+                name: param.path,
+                title: param.title || '',
+                description: param.description,
+                widget: param.widget,
+                mode: param.mode,
+                layout: param.layout,
+            })),
+        }));
+        this.designerState.set({
+            groups,
+            mode: 'designer',
+        });
+    }
     /**
-     * Handle context change events from widget container
+     * Add a new field to the form
+     * @param field The field to add
      */
-    handleContextChanged(event) {
-        const data = event.data ?? {};
-        if (event.state === 'initiated') {
-            this.contextInitiated.emit(data);
+    addField(field) {
+        const currentDefinition = this.formDefinition();
+        const updatedGroups = [...(currentDefinition.groups || [])];
+        if (updatedGroups.length === 0) {
+            // Create default group if none exists
+            updatedGroups.push({
+                name: 'default-group',
+                title: 'Default Group',
+                parameters: [
+                    {
+                        path: field.name,
+                        title: field.title,
+                        description: field.description,
+                        widget: field.widget,
+                        mode: field.mode,
+                        layout: field.layout,
+                    },
+                ],
+            });
         }
         else {
-            this.internalContext.set(data);
-            this.contextChange.emit(data);
-        }
-    }
-    isRequired(param) {
-        const validations = param.widget?.options?.['validations'];
-        if (Array.isArray(validations)) {
-            return validations.some((v) => v?.rule === 'required');
-        }
-        if (validations && typeof validations === 'object') {
-            // Support object-shaped validations like { required: true }
-            return Boolean(validations['required']);
+            // Add to first group
+            updatedGroups[0] = {
+                ...updatedGroups[0],
+                parameters: [
+                    ...updatedGroups[0].parameters,
+                    {
+                        path: field.name,
+                        title: field.title,
+                        description: field.description,
+                        widget: field.widget,
+                        mode: field.mode,
+                        layout: field.layout,
+                    },
+                ],
+            };
         }
-        return false;
-    }
-    //#endregion
-    //#region ----   Public Methods   ----
-    /**
-     * Get the form component instance
-     */
-    getForm() {
-        return this.form();
-    }
-    /**
-     * Get current form context
-     */
-    getContext() {
-        return this.internalContext();
+        // Set flag to prevent external sync during internal update
+        this.isInternalUpdate = true;
+        this.formDefinition.set({
+            ...currentDefinition,
+            groups: updatedGroups,
+        });
+        // Reset flag after a delay
+        setTimeout(() => {
+            this.isInternalUpdate = false;
+        }, 100);
     }
     /**
-     * Update form context programmatically
+     * Update an existing field
+     * @param fieldId The ID of the field to update
+     * @param updates The updates to apply
      */
-    updateContext(context) {
-        this.internalContext.set(context);
+    updateField(fieldId, updates) {
+        const currentDefinition = this.formDefinition();
+        const updatedGroups = currentDefinition.groups.map((group) => ({
+            ...group,
+            parameters: group.parameters.map((param) => param.path === fieldId
+                ? {
+                    ...param,
+                    title: updates.title ?? param.title,
+                    description: updates.description ?? param.description,
+                    widget: updates.widget ?? param.widget,
+                    mode: updates.mode ?? param.mode,
+                    layout: updates.layout ?? param.layout,
+                }
+                : param),
+        }));
+        // Set flag to prevent external sync during internal update
+        this.isInternalUpdate = true;
+        this.formDefinition.set({
+            ...currentDefinition,
+            groups: updatedGroups,
+        });
+        // Reset flag after a delay
+        setTimeout(() => {
+            this.isInternalUpdate = false;
+        }, 100);
     }
     /**
-     * Validate the form
+     * Remove a field from the form
+     * @param fieldId The ID of the field to remove
      */
-    async validate() {
-        const form = this.form();
-        if (form) {
-            const isValid = await form.validate();
-            this.validityChange.emit(isValid.result);
-            return isValid.result;
-        }
-        return false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPDynamicFormComponent, isStandalone: true, selector: "axp-dynamic-form", inputs: { formDefinition: { classPropertyName: "formDefinition", publicName: "formDefinition", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, layoutLook: { classPropertyName: "layoutLook", publicName: "layoutLook", isSignal: true, isRequired: false, transformFunction: null }, layoutDirection: { classPropertyName: "layoutDirection", publicName: "layoutDirection", isSignal: true, isRequired: false, transformFunction: null }, layoutConfig: { classPropertyName: "layoutConfig", publicName: "layoutConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextChange: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, host: { properties: { "class": "hostClasses()" }, classAttribute: "axp-dynamic-form" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-form>\n  <axp-widgets-container [context]=\"internalContext()\" (onContextChanged)=\"handleContextChanged($event)\">\n    <axp-layout-sections>\n      @for (group of formDefinition().groups; track group.name) {\n        <axp-layout-section>\n          @if (group.title || group.description) {\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          }\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 [required]=\"isRequired(param)\">{{ param.title! | translate | async }}</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! | translate | async }}</axp-layout-description>\n                  }\n                </ax-form-field>\n              </div>\n            }\n          </axp-layout-content>\n        </axp-layout-section>\n      } @empty {\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.--look-compact axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){border-style:none}.axp-dynamic-form.--look-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.--look-compact axp-layout-section axp-layout-content .__field-container .__field-info{margin-bottom:.125rem;width:100%}.axp-dynamic-form.--look-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.--look-compact axp-layout-section axp-layout-content .__field-container .__field-input{width:100%}.axp-dynamic-form.--look-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.--look-compact axp-layout-section{margin-bottom:.75rem}.axp-dynamic-form.--look-compact axp-layout-section axp-layout-header{margin-bottom:.5rem;gap:0px;padding:.5rem}.axp-dynamic-form.--look-compact axp-layout-section axp-layout-header axp-layout-title{font-size:1rem;line-height:1.5rem;font-weight:600}.axp-dynamic-form.--look-compact axp-layout-section axp-layout-header axp-layout-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-dynamic-form.--look-borderless axp-layout-section{border-width:0px!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.axp-dynamic-form.--look-borderless axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){border-style:none}.axp-dynamic-form.--look-borderless 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.--look-borderless axp-layout-section axp-layout-content .__field-container .__field-info{margin-bottom:.125rem;width:100%}.axp-dynamic-form.--look-borderless 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.--look-borderless axp-layout-section axp-layout-content .__field-container .__field-input{width:100%}.axp-dynamic-form.--look-borderless 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.--direction-vertical axp-layout-section axp-layout-content .__field-container{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}.axp-dynamic-form.--direction-vertical axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 12 / span 12;width:100%}.axp-dynamic-form.--direction-vertical axp-layout-section axp-layout-content .__field-container .__field-input{grid-column:span 12 / span 12;width:100%}.axp-dynamic-form.--direction-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.--direction-horizontal axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){border-style:none}.axp-dynamic-form.--direction-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.--direction-horizontal axp-layout-section axp-layout-content .__field-container .__field-info{width:12rem;flex-shrink:0}.axp-dynamic-form.--direction-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.--direction-horizontal axp-layout-section axp-layout-content .__field-container .__field-input{flex:1 1 0%}.axp-dynamic-form.--direction-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.--direction-grid axp-layout-section axp-layout-content .__field-container{display:grid;grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width: 768px){.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 1280px){.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container{grid-template-columns:repeat(4,minmax(0,1fr))}}.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container{gap:1rem;padding:1rem}.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:1 / -1}.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container .__field-input{grid-column:1 / -1}.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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: 
-                // ACoreX
-                AXFormModule }, { kind: "component", type: i2$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: 
-                // Platform
-                AXPLayoutBuilderModule }, { kind: "component", type: i3$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$4.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"] }, { 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.8", ngImport: i0, type: AXPDynamicFormComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'axp-dynamic-form', imports: [
-                        CommonModule,
-                        FormsModule,
-                        // ACoreX
-                        AXFormModule,
-                        AXValidationModule,
-                        AXTranslationModule,
-                        // Platform
-                        AXPLayoutBuilderModule,
-                        AXPThemeLayoutBlockComponent,
-                        AXPThemeLayoutHeaderComponent,
-                        AXPThemeLayoutSectionComponent,
-                        AXPGridLayoutDirective,
-                        AXLabelComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'axp-dynamic-form',
-                        '[class]': 'hostClasses()',
-                    }, template: "<ax-form>\n  <axp-widgets-container [context]=\"internalContext()\" (onContextChanged)=\"handleContextChanged($event)\">\n    <axp-layout-sections>\n      @for (group of formDefinition().groups; track group.name) {\n        <axp-layout-section>\n          @if (group.title || group.description) {\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          }\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 [required]=\"isRequired(param)\">{{ param.title! | translate | async }}</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! | translate | async }}</axp-layout-description>\n                  }\n                </ax-form-field>\n              </div>\n            }\n          </axp-layout-content>\n        </axp-layout-section>\n      } @empty {\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.--look-compact axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){border-style:none}.axp-dynamic-form.--look-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.--look-compact axp-layout-section axp-layout-content .__field-container .__field-info{margin-bottom:.125rem;width:100%}.axp-dynamic-form.--look-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.--look-compact axp-layout-section axp-layout-content .__field-container .__field-input{width:100%}.axp-dynamic-form.--look-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.--look-compact axp-layout-section{margin-bottom:.75rem}.axp-dynamic-form.--look-compact axp-layout-section axp-layout-header{margin-bottom:.5rem;gap:0px;padding:.5rem}.axp-dynamic-form.--look-compact axp-layout-section axp-layout-header axp-layout-title{font-size:1rem;line-height:1.5rem;font-weight:600}.axp-dynamic-form.--look-compact axp-layout-section axp-layout-header axp-layout-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-dynamic-form.--look-borderless axp-layout-section{border-width:0px!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.axp-dynamic-form.--look-borderless axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){border-style:none}.axp-dynamic-form.--look-borderless 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.--look-borderless axp-layout-section axp-layout-content .__field-container .__field-info{margin-bottom:.125rem;width:100%}.axp-dynamic-form.--look-borderless 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.--look-borderless axp-layout-section axp-layout-content .__field-container .__field-input{width:100%}.axp-dynamic-form.--look-borderless 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.--direction-vertical axp-layout-section axp-layout-content .__field-container{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}.axp-dynamic-form.--direction-vertical axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 12 / span 12;width:100%}.axp-dynamic-form.--direction-vertical axp-layout-section axp-layout-content .__field-container .__field-input{grid-column:span 12 / span 12;width:100%}.axp-dynamic-form.--direction-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.--direction-horizontal axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){border-style:none}.axp-dynamic-form.--direction-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.--direction-horizontal axp-layout-section axp-layout-content .__field-container .__field-info{width:12rem;flex-shrink:0}.axp-dynamic-form.--direction-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.--direction-horizontal axp-layout-section axp-layout-content .__field-container .__field-input{flex:1 1 0%}.axp-dynamic-form.--direction-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.--direction-grid axp-layout-section axp-layout-content .__field-container{display:grid;grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width: 768px){.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 1280px){.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container{grid-template-columns:repeat(4,minmax(0,1fr))}}.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container{gap:1rem;padding:1rem}.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:1 / -1}.axp-dynamic-form.--direction-grid axp-layout-section axp-layout-content .__field-container .__field-input{grid-column:1 / -1}.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 AXPDynamicDialogComponent extends AXBasePageComponent {
-    constructor() {
-        super(...arguments);
-        this.dynamicForm = viewChild(AXPDynamicFormComponent, ...(ngDevMode ? [{ debugName: "dynamicForm" }] : []));
-        this.isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
-        this.previousContext = signal({}, ...(ngDevMode ? [{ debugName: "previousContext" }] : []));
-        this.formData = signal({}, ...(ngDevMode ? [{ debugName: "formData" }] : []));
-        // This will be set by the popup service automatically
-        this.dialogResult = null;
-        this.isSubmittingFromDialog = false;
-        this.callBack = () => { };
-        //#region ----   Computed Properties   ----
-        /**
-         * Form context for widget container
-         */
-        this.formContext = computed(() => this.formData(), ...(ngDevMode ? [{ debugName: "formContext" }] : []));
-        /**
-         * Combined loading state from both signal and dialog
-         */
-        this.isFormLoading = computed(() => this.isSubmitting() || this.isSubmittingFromDialog, ...(ngDevMode ? [{ debugName: "isFormLoading" }] : []));
-        this.defaultLayout = () => ({
-            positions: {
-                default: { colSpan: 12 },
-                md: { colSpan: 8 },
-                lg: { colSpan: 6 },
-                xl: { colSpan: 5 },
-                xxl: { colSpan: 4 }
-            }
+    removeField(fieldId) {
+        const currentDefinition = this.formDefinition();
+        const updatedGroups = currentDefinition.groups.map((group) => ({
+            ...group,
+            parameters: group.parameters.filter((param) => param.path !== fieldId),
+        }));
+        // Set flag to prevent external sync during internal update
+        this.isInternalUpdate = true;
+        this.formDefinition.set({
+            ...currentDefinition,
+            groups: updatedGroups,
         });
-        /**
-         * Footer actions for dynamic button system
-         */
-        this.footerPrefixActions = computed(() => this.config.actions?.footer?.prefix || [], ...(ngDevMode ? [{ debugName: "footerPrefixActions" }] : []));
-        this.footerSuffixActions = computed(() => this.config.actions?.footer?.suffix || [], ...(ngDevMode ? [{ debugName: "footerSuffixActions" }] : []));
-        this.hasFooterActions = computed(() => {
-            const prefixActions = this.footerPrefixActions();
-            const suffixActions = this.footerSuffixActions();
-            return prefixActions.length > 0 || suffixActions.length > 0;
-        }, ...(ngDevMode ? [{ debugName: "hasFooterActions" }] : []));
-        this.hasVisibleFooterPrefixActions = computed(() => {
-            const prefixFooterActions = this.footerPrefixActions();
-            return prefixFooterActions.some((action) => action.visible != false);
-        }, ...(ngDevMode ? [{ debugName: "hasVisibleFooterPrefixActions" }] : []));
-        this.hasVisibleFooterSuffixActions = computed(() => {
-            const suffixFooterActions = this.footerSuffixActions();
-            return suffixFooterActions.some((action) => action.visible != false);
-        }, ...(ngDevMode ? [{ debugName: "hasVisibleFooterSuffixActions" }] : []));
+        // Reset flag after a delay
+        setTimeout(() => {
+            this.isInternalUpdate = false;
+        }, 100);
     }
-    //#endregion
-    //#region ----   Lifecycle Methods   ----
-    ngOnInit() {
-        this.formData.set(this.config.context ?? {});
-    }
-    //#endregion
-    //#region ----   Event Handlers   ----
-    handleContextInitiated(context) {
-        this.previousContext.set(context);
-    }
-    handleContextChanged(context) {
-        this.formData.set(context);
-    }
-    //#endregion
-    //#region ----   Action Execution   ----
     /**
-     * Execute a dynamic action
+     * Get all available widget types
      */
-    async executeAction(action) {
-        if (action.command) {
-            // Execute the command if provided
-            await this.executeCommand(action.command);
-        }
-        else {
-            // Handle custom action logic here
-            const result = {
-                context: this.formData(),
-                action: action.name || action.title
-            };
-            this.close(result);
-        }
+    getAvailableWidgets() {
+        return this.availableWidgets();
     }
     /**
-     * Execute a command
+     * Add a new group to the form
+     * @param group The group to add
      */
-    async executeCommand(command) {
-        // Handle command execution logic here
-        if (command.options?.['validate'] == true) {
-            if (!await this.isFormValid()) {
-                return;
-            }
-        }
-        //
-        if (command.name == 'cancel') {
-            this.close();
-        }
-        const result = {
-            context: this.formData(),
-            action: command.name
-        };
-        // Store result in component property and popup data
-        this.dialogResult = result;
-        // Store in popup data for DialogRef access
-        if (this.data) {
-            this.data.context = result.context;
-            this.data.action = result.action;
-        }
-        // Call the callback with DialogRef
-        this.callBack({
-            close: (result) => {
-                this.close(result);
-            },
-            context: () => {
-                return this.formData();
-            },
-            action: () => {
-                return result.action;
-            },
-            setLoading: (loading) => {
-                this.isSubmitting.set(loading);
-            }
+    addGroup(group) {
+        const currentDefinition = this.formDefinition();
+        const updatedGroups = [...(currentDefinition.groups || [])];
+        // Convert designer group to form group
+        updatedGroups.push({
+            name: group.name,
+            title: group.title,
+            description: group.description,
+            parameters: group.fields.map((field) => ({
+                path: field.name,
+                title: field.title,
+                description: field.description,
+                widget: field.widget,
+                mode: field.mode,
+                layout: field.layout,
+            })),
+            mode: group.mode,
+        });
+        this.formDefinition.set({
+            ...currentDefinition,
+            groups: updatedGroups,
         });
     }
-    //#endregion
-    //#region ----   Public Methods   ----
     /**
-     * Check if form is valid
+     * Remove a group from the form
+     * @param groupName The name of the group to remove
      */
-    async isFormValid() {
-        return await this.dynamicForm()?.validate() ?? false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDynamicDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPDynamicDialogComponent, isStandalone: true, selector: "axp-dynamic-dialog", inputs: { config: "config" }, viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: AXPDynamicFormComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-p-4\">\n  <axp-dynamic-form\n    [formDefinition]=\"config.formDefinition\"\n    [context]=\"formContext()\"\n    [layoutConfig]=\"config.layoutConfig || defaultLayout()\"\n    [layoutLook]=\"'borderless'\"\n    [layoutDirection]=\"'vertical'\"\n    (contextChange)=\"handleContextChanged($event)\"\n    (contextInitiated)=\"handleContextInitiated($event)\"\n  >\n  </axp-dynamic-form>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    <!-- Dynamic footer prefix actions -->\n    @if (hasVisibleFooterPrefixActions()) {\n      @for (action of footerPrefixActions(); track $index) {\n        @if (action.visible != false) {\n          <ax-button\n            [disabled]=\"action.disabled || isFormLoading()\"\n            [text]=\"(action.title | translate | async)!\"\n            [look]=\"'outline'\"\n            [color]=\"action.color\"\n            (onClick)=\"executeAction(action)\"\n          >\n            <ax-prefix>\n              <i class=\"{{ action.icon }}\"></i>\n            </ax-prefix>\n            @if (action?.items) {\n              <ax-dropdown-panel #panel>\n                <ax-button-item-list>\n                  @for (sub of action?.items; track $index) {\n                    @if (sub.visible != false) {\n                      <ax-button-item\n                        [text]=\"(sub.title | translate | async)!\"\n                        [color]=\"sub.color\"\n                        [disabled]=\"sub.disabled\"\n                        (onClick)=\"executeAction(sub)\"\n                      >\n                        <ax-prefix>\n                          <i class=\"fa-light {{ sub.icon }}\"></i>\n                        </ax-prefix>\n                      </ax-button-item>\n                      @if (sub.break) {\n                        <div class=\"ax-divider\"></div>\n                      }\n                    }\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            }\n          </ax-button>\n        }\n      }\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <!-- Dynamic footer suffix actions -->\n    @if (hasFooterActions()) {\n      <!-- Suffix actions -->\n      @if (hasVisibleFooterSuffixActions()) {\n        @for (action of footerSuffixActions(); track $index) {\n          @if (action.visible != false) {\n            <ax-button\n              [disabled]=\"action.disabled || isFormLoading()\"\n              [text]=\"(action.title | translate | async)!\"\n              [look]=\"'solid'\"\n              [color]=\"action.color\"\n              (onClick)=\"executeAction(action)\"\n            >\n              @if (isFormLoading() && action.command?.name != 'cancel') {\n                <ax-loading></ax-loading>\n              }\n              <ax-prefix>\n                <i class=\"{{ action.icon }}\"></i>\n              </ax-prefix>\n              @if (action?.items) {\n                <ax-dropdown-panel #panel>\n                  <ax-button-item-list>\n                    @for (sub of action?.items; track $index) {\n                      @if (sub.visible != false) {\n                        <ax-button-item\n                          [text]=\"(sub.title | translate | async)!\"\n                          [color]=\"sub.color\"\n                          [disabled]=\"sub.disabled\"\n                          (onClick)=\"executeAction(sub)\"\n                        >\n                          <ax-prefix>\n                            <i class=\"fa-light {{ sub.icon }}\"></i>\n                          </ax-prefix>\n                        </ax-button-item>\n                        @if (sub.break) {\n                          <div class=\"ax-divider\"></div>\n                        }\n                      }\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-panel>\n              }\n            </ax-button>\n          }\n        }\n      }\n    }\n  </ax-suffix>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: 
-                //
-                AXFormModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "component", type: AXPDynamicFormComponent, selector: "axp-dynamic-form", inputs: ["formDefinition", "context", "layoutLook", "layoutDirection", "layoutConfig"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { 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: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i3$5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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.8", ngImport: i0, type: AXPDynamicDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-dynamic-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        //
-                        AXFormModule,
-                        AXValidationModule,
-                        AXPDynamicFormComponent,
-                        AXDecoratorModule,
-                        AXButtonModule,
-                        AXDropdownButtonModule,
-                        AXDropdownModule,
-                        AXLoadingModule,
-                        AXTranslationModule,
-                    ], template: "<div class=\"ax-p-4\">\n  <axp-dynamic-form\n    [formDefinition]=\"config.formDefinition\"\n    [context]=\"formContext()\"\n    [layoutConfig]=\"config.layoutConfig || defaultLayout()\"\n    [layoutLook]=\"'borderless'\"\n    [layoutDirection]=\"'vertical'\"\n    (contextChange)=\"handleContextChanged($event)\"\n    (contextInitiated)=\"handleContextInitiated($event)\"\n  >\n  </axp-dynamic-form>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    <!-- Dynamic footer prefix actions -->\n    @if (hasVisibleFooterPrefixActions()) {\n      @for (action of footerPrefixActions(); track $index) {\n        @if (action.visible != false) {\n          <ax-button\n            [disabled]=\"action.disabled || isFormLoading()\"\n            [text]=\"(action.title | translate | async)!\"\n            [look]=\"'outline'\"\n            [color]=\"action.color\"\n            (onClick)=\"executeAction(action)\"\n          >\n            <ax-prefix>\n              <i class=\"{{ action.icon }}\"></i>\n            </ax-prefix>\n            @if (action?.items) {\n              <ax-dropdown-panel #panel>\n                <ax-button-item-list>\n                  @for (sub of action?.items; track $index) {\n                    @if (sub.visible != false) {\n                      <ax-button-item\n                        [text]=\"(sub.title | translate | async)!\"\n                        [color]=\"sub.color\"\n                        [disabled]=\"sub.disabled\"\n                        (onClick)=\"executeAction(sub)\"\n                      >\n                        <ax-prefix>\n                          <i class=\"fa-light {{ sub.icon }}\"></i>\n                        </ax-prefix>\n                      </ax-button-item>\n                      @if (sub.break) {\n                        <div class=\"ax-divider\"></div>\n                      }\n                    }\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            }\n          </ax-button>\n        }\n      }\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <!-- Dynamic footer suffix actions -->\n    @if (hasFooterActions()) {\n      <!-- Suffix actions -->\n      @if (hasVisibleFooterSuffixActions()) {\n        @for (action of footerSuffixActions(); track $index) {\n          @if (action.visible != false) {\n            <ax-button\n              [disabled]=\"action.disabled || isFormLoading()\"\n              [text]=\"(action.title | translate | async)!\"\n              [look]=\"'solid'\"\n              [color]=\"action.color\"\n              (onClick)=\"executeAction(action)\"\n            >\n              @if (isFormLoading() && action.command?.name != 'cancel') {\n                <ax-loading></ax-loading>\n              }\n              <ax-prefix>\n                <i class=\"{{ action.icon }}\"></i>\n              </ax-prefix>\n              @if (action?.items) {\n                <ax-dropdown-panel #panel>\n                  <ax-button-item-list>\n                    @for (sub of action?.items; track $index) {\n                      @if (sub.visible != false) {\n                        <ax-button-item\n                          [text]=\"(sub.title | translate | async)!\"\n                          [color]=\"sub.color\"\n                          [disabled]=\"sub.disabled\"\n                          (onClick)=\"executeAction(sub)\"\n                        >\n                          <ax-prefix>\n                            <i class=\"fa-light {{ sub.icon }}\"></i>\n                          </ax-prefix>\n                        </ax-button-item>\n                        @if (sub.break) {\n                          <div class=\"ax-divider\"></div>\n                        }\n                      }\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-panel>\n              }\n            </ax-button>\n          }\n        }\n      }\n    }\n  </ax-suffix>\n</ax-footer>\n" }]
-        }], propDecorators: { config: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
-
-var dynamicDialog_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPDynamicDialogComponent: AXPDynamicDialogComponent
-});
-
-class AXPDynamicDialogService {
-    constructor() {
-        this.popupService = inject(AXPopupService);
+    removeGroup(groupName) {
+        const currentDefinition = this.formDefinition();
+        const updatedGroups = currentDefinition.groups.filter((group) => group.name !== groupName);
+        this.formDefinition.set({
+            ...currentDefinition,
+            groups: updatedGroups,
+        });
     }
     /**
-     * Show a dynamic dialog with the given configuration
-     * @param config Dialog configuration including fields, validation, and UI options
-     * @returns Promise resolving to dialog reference for controlling the dialog
+     * Reorder groups in the form
+     * @param fromIndex Source index
+     * @param toIndex Target index
      */
-    async showDialog(config) {
-        const component = await Promise.resolve().then(function () { return dynamicDialog_component; }).then(c => c.AXPDynamicDialogComponent);
-        return new Promise(async (resolve) => {
-            // Open popup and wait for it to close
-            await this.popupService.open(component, {
-                title: config.title,
-                size: config.size || 'md',
-                closeButton: false,
-                closeOnBackdropClick: false,
-                draggable: false,
-                data: {
-                    config,
-                    dialogResult: null,
-                    isSubmittingFromDialog: false,
-                    callBack: (result) => {
-                        resolve(result);
-                    }
-                }
-            });
+    reorderGroups(fromIndex, toIndex) {
+        const currentDefinition = this.formDefinition();
+        const updatedGroups = [...currentDefinition.groups];
+        // Move group from one position to another
+        const [movedGroup] = updatedGroups.splice(fromIndex, 1);
+        updatedGroups.splice(toIndex, 0, movedGroup);
+        this.formDefinition.set({
+            ...currentDefinition,
+            groups: updatedGroups,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDynamicDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDynamicDialogService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDynamicDialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class AXPDynamicFormBuilderService {
-    constructor() {
-        //#region ----   Services & Dependencies   ----
-        this.dialogService = inject(AXPDynamicDialogService);
-    }
-    //#endregion
-    //#region ----   Public Methods   ----
     /**
-     * Create a new form builder
+     * Update an existing group
+     * @param groupName The name of the group to update
+     * @param updates The updates to apply
      */
-    form() {
-        return new FormBuilder();
+    updateGroup(groupName, updates) {
+        console.log('updateGroup called with:', { groupName, updates });
+        const currentDefinition = this.formDefinition();
+        console.log('Current definition before update:', currentDefinition);
+        const updatedGroups = currentDefinition.groups.map((group) => {
+            if (group.name === groupName) {
+                const updatedGroup = {
+                    ...group,
+                    title: updates.title ?? group.title,
+                    description: updates.description ?? group.description,
+                    mode: updates.mode ?? group.mode,
+                };
+                console.log('Updating group:', { original: group, updates, result: updatedGroup });
+                return updatedGroup;
+            }
+            return group;
+        });
+        const newDefinition = {
+            ...currentDefinition,
+            groups: updatedGroups,
+        };
+        console.log('New definition after update:', newDefinition);
+        // Set flag to prevent external sync during internal update
+        this.isInternalUpdate = true;
+        console.log('Set isInternalUpdate flag to prevent external sync');
+        this.formDefinition.set(newDefinition);
+        // Reset flag after a longer delay to ensure all effects have processed
+        setTimeout(() => {
+            this.isInternalUpdate = false;
+            console.log('Reset isInternalUpdate flag');
+        }, 100);
     }
     /**
-     * Create a new dialog builder
+     * Move a field to a different group
+     * @param fieldName The name/path of the field to move
+     * @param targetGroupName The name of the target group
      */
-    dialog() {
-        return new DialogBuilder(this.dialogService);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDynamicFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDynamicFormBuilderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDynamicFormBuilderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-//#region ----   Form Builder Implementation   ----
-class FormBuilder {
-    constructor() {
-        this.state = {
-            groups: [],
-            layoutConfig: {
-                positions: {
-                    default: { colSpan: 12 },
-                    md: { colSpan: 8 },
-                    lg: { colSpan: 6 },
-                    xl: { colSpan: 5 },
-                    xxl: { colSpan: 4 },
-                },
-            },
-            look: 'normal',
-            direction: 'vertical'
-        };
+    moveFieldToGroup(fieldName, targetGroupName) {
+        const currentDefinition = this.formDefinition();
+        let fieldToMove = null;
+        // Find and remove the field from its current group
+        const updatedGroups = currentDefinition.groups.map((group) => {
+            const fieldIndex = group.parameters.findIndex((param) => param.path === fieldName);
+            if (fieldIndex !== -1) {
+                fieldToMove = group.parameters[fieldIndex];
+                return {
+                    ...group,
+                    parameters: group.parameters.filter((_, index) => index !== fieldIndex),
+                };
+            }
+            return group;
+        });
+        // Add the field to the target group
+        if (fieldToMove) {
+            const finalGroups = updatedGroups.map((group) => group.name === targetGroupName
+                ? {
+                    ...group,
+                    parameters: [...group.parameters, fieldToMove],
+                }
+                : group);
+            this.formDefinition.set({
+                ...currentDefinition,
+                groups: finalGroups,
+            });
+        }
     }
-    group(name, delegate) {
-        const groupBuilder = new GroupBuilder(this, name);
-        if (delegate) {
-            delegate(groupBuilder);
+    //#endregion
+    //#region ----   Event Handlers   ----
+    async handleAddGroupClick() {
+        try {
+            // Create dialog using new Layout Builder API
+            const dialogRef = await this.formBuilderService
+                .create()
+                .dialog((dialog) => {
+                dialog
+                    .setTitle('Add Group')
+                    .setSize('md')
+                    .setCloseButton(true)
+                    .setContext({ name: '', title: '', description: '' })
+                    .content((layoutBuilder) => {
+                    layoutBuilder.flex((flex) => {
+                        flex
+                            .setDirection('column')
+                            .setGap('16px')
+                            .formField('Group Name', (field) => {
+                            field.path('name');
+                            field.textBox({
+                                placeholder: 'Enter group name (used as identifier)',
+                                validations: [{ rule: 'required' }],
+                            });
+                        })
+                            .formField('Group Title', (field) => {
+                            field.path('title');
+                            field.textBox({
+                                placeholder: 'Enter group display title',
+                            });
+                        })
+                            .formField('Group Description', (field) => {
+                            field.path('description');
+                            field.largeTextBox({
+                                placeholder: 'Enter group description (optional)',
+                                rows: 3,
+                            });
+                        });
+                    });
+                })
+                    .setActions((actions) => actions.cancel('@general:actions.cancel.title').submit('@general:actions.add.title'));
+            })
+                .show();
+            // Get the form data from the dialog
+            const formData = dialogRef.context();
+            const action = dialogRef.action();
+            // Close the dialog
+            dialogRef.close();
+            if (action !== 'cancel' && formData && formData.name) {
+                // Create new group
+                const newGroup = {
+                    id: this.generateId(),
+                    name: this.deriveGroupKey(formData.name),
+                    title: formData.title || formData.name,
+                    description: formData.description,
+                    fields: [],
+                    layout: {
+                        positions: {
+                            sm: { colSpan: 12 },
+                            md: { colSpan: 6 },
+                            lg: { colSpan: 4 },
+                        },
+                    },
+                };
+                this.addGroup(newGroup);
+            }
+        }
+        catch (error) {
+            console.error('Error adding group:', error);
         }
-        this.addGroup(groupBuilder.build());
-        return this;
     }
-    layout(config) {
-        this.state.layoutConfig = { ...this.state.layoutConfig, ...config };
-        return this;
+    async handleAddFieldToGroup(group) {
+        try {
+            // Create dialog using new Layout Builder API
+            const dialogRef = await this.formBuilderService
+                .create()
+                .dialog((dialog) => {
+                dialog
+                    .setTitle(`Add Field to ${group.title || group.name}`)
+                    .setSize('sm')
+                    .setCloseButton(true)
+                    .setContext({ title: '', widgetType: '' })
+                    .content((layoutBuilder) => {
+                    layoutBuilder.flex((flex) => {
+                        flex
+                            .setDirection('column')
+                            .setGap('16px')
+                            .formField('Field Title', (field) => {
+                            field.path('title');
+                            field.textBox({
+                                placeholder: 'Enter field title',
+                                validations: [{ rule: 'required' }],
+                            });
+                        })
+                            .formField('Widget Type', (field) => {
+                            field.path('widgetType');
+                            field.selectBox({
+                                valueField: 'value',
+                                textField: 'text',
+                                dataSource: this.widgetOptions(),
+                                placeholder: 'Select widget type',
+                                validations: [{ rule: 'required' }],
+                            });
+                        });
+                    });
+                })
+                    .setActions((actions) => actions.cancel('@general:actions.cancel.title').submit('@general:actions.add.title'));
+            })
+                .show();
+            // Get the form data from the dialog
+            const formData = dialogRef.context();
+            const action = dialogRef.action();
+            // Close the dialog
+            dialogRef.close();
+            if (action !== 'cancel' && formData && formData.title && formData.widgetType) {
+                // Extract the widget type value (it might be an object from select box)
+                const widgetTypeValue = typeof formData.widgetType === 'string'
+                    ? formData.widgetType
+                    : formData.widgetType?.value || formData.widgetType?.name;
+                if (!widgetTypeValue) {
+                    console.error('Invalid widget type:', formData.widgetType);
+                    return;
+                }
+                // Create field with AXPWidgetNode structure
+                const field = {
+                    id: this.generateId(),
+                    name: this.deriveKey(formData.title),
+                    title: formData.title,
+                    widget: {
+                        type: widgetTypeValue,
+                        name: this.deriveKey(formData.title),
+                        options: {
+                            // Add validations to widget options
+                            validations: [],
+                        },
+                    },
+                    layout: { positions: { sm: { colSpan: 12 } } }, // Default full width
+                };
+                this.addFieldToGroup(field, group.name);
+            }
+        }
+        catch (error) {
+            console.error('Error adding field to group:', error);
+        }
     }
-    look(look) {
-        this.state.look = look;
-        return this;
+    async handleFieldEdit(field) {
+        try {
+            // Use the existing widget property viewer service
+            const result = await this.widgetPropertyViewerService.open({
+                title: `Edit Field: ${field.title}`,
+                widget: field.widget,
+                mode: 'advanced',
+                size: 'md',
+            });
+            if (result && result.values) {
+                // Update the field with the new widget options
+                this.updateField(field.name, {
+                    widget: {
+                        ...field.widget,
+                        options: result.values.options || field.widget.options,
+                    },
+                });
+            }
+        }
+        catch (error) {
+            console.error('Error editing field:', error);
+        }
     }
-    direction(direction) {
-        this.state.direction = direction;
-        return this;
+    handleFieldRemove(field) {
+        // Call public method for external handling
+        this.removeField(field.name);
     }
-    build() {
-        return {
-            groups: this.state.groups
-        };
+    async handleGroupEdit(group) {
+        // Similar to field edit but for group properties
+        try {
+            const dialogRef = await this.formBuilderService
+                .create()
+                .dialog((dialog) => {
+                dialog
+                    .setTitle(`Edit Group: ${group.title || group.name}`)
+                    .setSize('md')
+                    .setCloseButton(true)
+                    .setContext({
+                    title: group.title || '',
+                    description: group.description || '',
+                })
+                    .content((layoutBuilder) => {
+                    layoutBuilder.flex((flex) => {
+                        flex
+                            .setDirection('column')
+                            .setGap('16px')
+                            .formField('Group Title', (field) => {
+                            field.path('title');
+                            field.textBox({
+                                placeholder: 'Enter group display title',
+                            });
+                        })
+                            .formField('Group Description', (field) => {
+                            field.path('description');
+                            field.largeTextBox({
+                                placeholder: 'Enter group description (optional)',
+                                rows: 3,
+                            });
+                        });
+                    });
+                })
+                    .setActions((actions) => actions.cancel('@general:actions.cancel.title').submit('@general:actions.save.title'));
+            })
+                .show();
+            const formData = dialogRef.context();
+            const action = dialogRef.action();
+            dialogRef.close();
+            if (action !== 'cancel' && formData) {
+                this.updateGroup(group.name, {
+                    title: formData.title,
+                    description: formData.description,
+                });
+            }
+        }
+        catch (error) {
+            console.error('Error editing group:', error);
+        }
     }
-    addGroup(group) {
-        this.state.groups.push(group);
+    async handleGroupLayoutEdit(group) {
+        // Group layout editing is disabled - always use 12 columns
+        // Focus is on field-level colSpan and colStart configuration
+        console.log('Group layout editing is disabled. All groups use 12 columns by default.');
     }
-}
-//#endregion
-//#region ----   Group Builder Implementation   ----
-class GroupBuilder {
-    constructor(formBuilder, name) {
-        this.formBuilder = formBuilder;
-        this.groupState = {
-            name: '',
-            title: '',
-            description: '',
-            parameters: []
-        };
-        this.groupState.name = name;
+    handleGroupRemove(group) {
+        this.removeGroup(group.name);
     }
-    field(path, delegate) {
-        const fieldBuilder = new FieldBuilder(this, path);
-        if (delegate) {
-            delegate(fieldBuilder);
+    /**
+     * Handle field layout editing
+     */
+    async handleFieldLayoutEdit(field, group) {
+        try {
+            const currentLayout = field.layout || { positions: {} };
+            // Create dialog using new Layout Builder API
+            const dialogRef = await this.formBuilderService
+                .create()
+                .dialog((dialog) => {
+                dialog
+                    .setTitle(`Field Layout Settings - ${field.title || field.name}`)
+                    .setSize('lg')
+                    .setCloseButton(true)
+                    .setContext({
+                    sm_colSpan: currentLayout.positions?.sm?.colSpan,
+                    sm_colStart: currentLayout.positions?.sm?.colStart,
+                    md_colSpan: currentLayout.positions?.md?.colSpan,
+                    md_colStart: currentLayout.positions?.md?.colStart,
+                    lg_colSpan: currentLayout.positions?.lg?.colSpan,
+                    lg_colStart: currentLayout.positions?.lg?.colStart,
+                    xl_colSpan: currentLayout.positions?.xl?.colSpan,
+                    xl_colStart: currentLayout.positions?.xl?.colStart,
+                    xxl_colSpan: currentLayout.positions?.xxl?.colSpan,
+                    xxl_colStart: currentLayout.positions?.xxl?.colStart,
+                    xxxl_colSpan: currentLayout.positions?.xxxl?.colSpan,
+                    xxxl_colStart: currentLayout.positions?.xxxl?.colStart,
+                })
+                    .content((layoutBuilder) => {
+                    layoutBuilder.flex((flex) => {
+                        flex
+                            .setDirection('column')
+                            .setGap('16px')
+                            .formField('Responsive Layout Configuration (12-Column Grid)', (f) => {
+                            f.setShowLabel(false);
+                            f.customWidget('spacer');
+                        })
+                            .formField('Small Screens - Column Span', (f) => {
+                            f.path('sm_colSpan');
+                            f.numberBox({ placeholder: 'How many columns to span (1-12)' });
+                        })
+                            .formField('Small Screens - Column Start', (f) => {
+                            f.path('sm_colStart');
+                            f.numberBox({ placeholder: 'Starting column position (1-12)' });
+                        })
+                            .formField('Medium Screens - Column Span', (f) => {
+                            f.path('md_colSpan');
+                            f.numberBox({ placeholder: 'How many columns to span (1-12)' });
+                        })
+                            .formField('Medium Screens - Column Start', (f) => {
+                            f.path('md_colStart');
+                            f.numberBox({ placeholder: 'Starting column position (1-12)' });
+                        })
+                            .formField('Large Screens - Column Span', (f) => {
+                            f.path('lg_colSpan');
+                            f.numberBox({ placeholder: 'How many columns to span (1-12)' });
+                        })
+                            .formField('Large Screens - Column Start', (f) => {
+                            f.path('lg_colStart');
+                            f.numberBox({ placeholder: 'Starting column position (1-12)' });
+                        })
+                            .formField('Extra Large Screens - Column Span', (f) => {
+                            f.path('xl_colSpan');
+                            f.numberBox({ placeholder: 'How many columns to span (1-12)' });
+                        })
+                            .formField('Extra Large Screens - Column Start', (f) => {
+                            f.path('xl_colStart');
+                            f.numberBox({ placeholder: 'Starting column position (1-12)' });
+                        })
+                            .formField('2x Large Screens - Column Span', (f) => {
+                            f.path('xxl_colSpan');
+                            f.numberBox({ placeholder: 'How many columns to span (1-12)' });
+                        })
+                            .formField('2x Large Screens - Column Start', (f) => {
+                            f.path('xxl_colStart');
+                            f.numberBox({ placeholder: 'Starting column position (1-12)' });
+                        })
+                            .formField('3x Large Screens - Column Span', (f) => {
+                            f.path('xxxl_colSpan');
+                            f.numberBox({ placeholder: 'How many columns to span (1-12)' });
+                        })
+                            .formField('3x Large Screens - Column Start', (f) => {
+                            f.path('xxxl_colStart');
+                            f.numberBox({ placeholder: 'Starting column position (1-12)' });
+                        });
+                    });
+                })
+                    .setActions((actions) => actions.cancel('@general:actions.cancel.title').submit('@general:actions.apply.title'));
+            })
+                .show();
+            // Get the form data and action BEFORE closing
+            const formData = dialogRef.context();
+            const action = dialogRef.action();
+            console.log('Field Layout Dialog result:', { formData, action, currentLayout });
+            // Close the dialog after getting the data
+            dialogRef.close();
+            if (action !== 'cancel' && formData) {
+                const newLayout = {
+                    positions: {},
+                };
+                // Build the layout object from form data
+                if (formData.sm_colSpan || formData.sm_colStart) {
+                    newLayout.positions.sm = {};
+                    if (formData.sm_colSpan)
+                        newLayout.positions.sm.colSpan = formData.sm_colSpan;
+                    if (formData.sm_colStart)
+                        newLayout.positions.sm.colStart = formData.sm_colStart;
+                }
+                if (formData.md_colSpan || formData.md_colStart) {
+                    newLayout.positions.md = {};
+                    if (formData.md_colSpan)
+                        newLayout.positions.md.colSpan = formData.md_colSpan;
+                    if (formData.md_colStart)
+                        newLayout.positions.md.colStart = formData.md_colStart;
+                }
+                if (formData.lg_colSpan || formData.lg_colStart) {
+                    newLayout.positions.lg = {};
+                    if (formData.lg_colSpan)
+                        newLayout.positions.lg.colSpan = formData.lg_colSpan;
+                    if (formData.lg_colStart)
+                        newLayout.positions.lg.colStart = formData.lg_colStart;
+                }
+                if (formData.xl_colSpan || formData.xl_colStart) {
+                    newLayout.positions.xl = {};
+                    if (formData.xl_colSpan)
+                        newLayout.positions.xl.colSpan = formData.xl_colSpan;
+                    if (formData.xl_colStart)
+                        newLayout.positions.xl.colStart = formData.xl_colStart;
+                }
+                if (formData.xxl_colSpan || formData.xxl_colStart) {
+                    newLayout.positions.xxl = {};
+                    if (formData.xxl_colSpan)
+                        newLayout.positions.xxl.colSpan = formData.xxl_colSpan;
+                    if (formData.xxl_colStart)
+                        newLayout.positions.xxl.colStart = formData.xxl_colStart;
+                }
+                if (formData.xxxl_colSpan || formData.xxxl_colStart) {
+                    newLayout.positions.xxxl = {};
+                    if (formData.xxxl_colSpan)
+                        newLayout.positions.xxxl.colSpan = formData.xxxl_colSpan;
+                    if (formData.xxxl_colStart)
+                        newLayout.positions.xxxl.colStart = formData.xxxl_colStart;
+                }
+                console.log('Updating field with layout:', newLayout);
+                // Update the field with the new layout
+                this.updateField(field.name, { layout: newLayout });
+            }
         }
-        this.addField(fieldBuilder.build());
-        return this;
-    }
-    group(name, delegate) {
-        const nestedGroupBuilder = new GroupBuilder(this.formBuilder, name);
-        if (delegate) {
-            delegate(nestedGroupBuilder);
+        catch (error) {
+            console.error('Error editing field layout:', error);
         }
-        this.addGroup(nestedGroupBuilder.build());
-        return this;
     }
-    build() {
-        return {
-            name: this.groupState.name,
-            title: this.groupState.title,
-            description: this.groupState.description,
-            parameters: this.groupState.parameters
-        };
-    }
-    addField(field) {
-        this.groupState.parameters.push(field);
+    handleGroupDrop(event) {
+        if (event.previousIndex !== event.currentIndex) {
+            this.reorderGroups(event.previousIndex, event.currentIndex);
+        }
     }
-    addGroup(group) {
-        // For nested groups, we add them to the parent form builder
-        this.formBuilder['addGroup'](group);
+    handleFieldDrop(event, targetGroupName) {
+        const formDef = this.formDefinition();
+        if (!formDef.groups.length)
+            return;
+        if (event.previousContainer === event.container) {
+            // Same container - just reorder within group
+            const targetGroup = formDef.groups.find((g) => g.name === targetGroupName);
+            if (!targetGroup)
+                return;
+            const parameters = [...targetGroup.parameters];
+            moveItemInArray(parameters, event.previousIndex, event.currentIndex);
+            const updatedGroups = formDef.groups.map((g) => (g.name === targetGroupName ? { ...g, parameters } : g));
+            // Set flag to prevent external sync during internal update
+            this.isInternalUpdate = true;
+            this.formDefinition.set({
+                ...formDef,
+                groups: updatedGroups,
+            });
+            // Reset flag after a delay
+            setTimeout(() => {
+                this.isInternalUpdate = false;
+            }, 100);
+        }
+        else {
+            // Different containers - move field between groups
+            const sourceGroupName = event.previousContainer.id.replace('group-', '').replace('-fields', '');
+            const targetGroupName = event.container.id.replace('group-', '').replace('-fields', '');
+            const sourceGroup = formDef.groups.find((g) => g.name === sourceGroupName);
+            const targetGroup = formDef.groups.find((g) => g.name === targetGroupName);
+            if (!sourceGroup || !targetGroup)
+                return;
+            // Get the field being moved
+            const fieldToMove = sourceGroup.parameters[event.previousIndex];
+            // Remove from source group
+            const updatedSourceParams = [...sourceGroup.parameters];
+            updatedSourceParams.splice(event.previousIndex, 1);
+            // Add to target group
+            const updatedTargetParams = [...targetGroup.parameters];
+            updatedTargetParams.splice(event.currentIndex, 0, fieldToMove);
+            // Update both groups
+            const updatedGroups = formDef.groups.map((g) => {
+                if (g.name === sourceGroupName) {
+                    return { ...g, parameters: updatedSourceParams };
+                }
+                else if (g.name === targetGroupName) {
+                    return { ...g, parameters: updatedTargetParams };
+                }
+                return g;
+            });
+            // Set flag to prevent external sync during internal update
+            this.isInternalUpdate = true;
+            this.formDefinition.set({
+                ...formDef,
+                groups: updatedGroups,
+            });
+            // Reset flag after a delay
+            setTimeout(() => {
+                this.isInternalUpdate = false;
+            }, 100);
+        }
     }
-}
-//#endregion
-//#region ----   Field Builder Implementation   ----
-class FieldBuilder {
-    constructor(groupBuilder, path) {
-        this.groupBuilder = groupBuilder;
-        this.fieldState = {
-            path: '',
-            title: '',
-            description: '',
-            defaultValue: undefined,
-            widget: undefined,
-        };
-        this.fieldState.path = path;
-        this.fieldState.title = path;
-    }
-    title(title) {
-        this.fieldState.title = title;
-        return this;
-    }
-    description(description) {
-        this.fieldState.description = description;
-        return this;
-    }
-    defaultValue(value) {
-        this.fieldState.defaultValue = value;
-        return this;
-    }
-    textBox(options) {
-        this.fieldState.widget = {
-            type: 'text-editor',
-            path: this.fieldState.path,
-            options: {
-                ...options,
-                defaultValue: this.fieldState.defaultValue
+    async handlePreviewClick() {
+        try {
+            const formDef = this.getFormDefinition();
+            // Check if form has content
+            if (!formDef.groups || formDef.groups.length === 0) {
+                // Show empty state message
+                const dialogRef = await this.formBuilderService
+                    .create()
+                    .dialog((dialog) => {
+                    dialog
+                        .setTitle('Form Preview')
+                        .setSize('md')
+                        .setCloseButton(true)
+                        .setContext({})
+                        .setActions((actions) => actions.cancel('@general:actions.close.title'));
+                })
+                    .show();
+                dialogRef.close();
+                return;
             }
-        };
-        return this;
-    }
-    largeTextBox(options) {
-        this.fieldState.widget = {
-            type: 'large-text-editor',
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+            // Create a dynamic form using the current definition with new Layout Builder
+            const dialogRef = await this.formBuilderService
+                .create()
+                .dialog((dialog) => {
+                dialog
+                    .setTitle('Form Preview')
+                    .setSize('lg')
+                    .setCloseButton(true)
+                    .setContext({})
+                    .content((layoutBuilder) => {
+                    layoutBuilder.flex((mainFlex) => {
+                        mainFlex.setDirection('column').setGap('20px');
+                        for (const group of formDef.groups) {
+                            mainFlex.fieldset((fieldset) => {
+                                if (group.title)
+                                    fieldset.setTitle(group.title);
+                                if (group.description)
+                                    fieldset.setDescription(group.description);
+                                fieldset.setCols(12);
+                                for (const param of group.parameters) {
+                                    fieldset.formField(param.title || param.path, (f) => {
+                                        f.path(param.path);
+                                        if (param.layout) {
+                                            console.log(`Preview: Applying layout to field ${param.path}:`, param.layout);
+                                            f.layout(param.layout);
+                                        }
+                                        // Map widget types to builder methods
+                                        const widgetType = param.widget?.type;
+                                        const opts = param.widget?.options || {};
+                                        switch (widgetType) {
+                                            case 'text-editor':
+                                                f.textBox(opts);
+                                                break;
+                                            case 'large-text-editor':
+                                                f.largeTextBox(opts);
+                                                break;
+                                            case 'rich-text-editor':
+                                                f.richText(opts);
+                                                break;
+                                            case 'password-editor':
+                                                f.passwordBox(opts);
+                                                break;
+                                            case 'number-editor':
+                                                f.numberBox(opts);
+                                                break;
+                                            case 'select-editor':
+                                                f.selectBox(opts);
+                                                break;
+                                            case 'lookup-editor':
+                                                f.lookupBox(opts);
+                                                break;
+                                            case 'selection-list-editor':
+                                                f.selectionList(opts);
+                                                break;
+                                            case 'date-time-editor':
+                                                f.dateTimeBox(opts);
+                                                break;
+                                            case 'toggle-editor':
+                                                f.toggleSwitch(opts);
+                                                break;
+                                            case 'color-editor':
+                                                f.colorBox(opts);
+                                                break;
+                                            default:
+                                                f.customWidget(widgetType, opts);
+                                                break;
+                                        }
+                                    });
+                                }
+                            });
+                        }
+                    });
+                })
+                    .setActions((actions) => actions.cancel('@general:actions.close.title'));
+            })
+                .show();
+            dialogRef.close();
+        }
+        catch (error) {
+            console.error('Error showing preview:', error);
+        }
     }
-    richText(options) {
-        this.fieldState.widget = {
-            type: 'rich-text-editor',
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+    //#endregion
+    //#region ----   Utility Methods   ----
+    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 groups = this.formDefinition().groups || [];
+        const exists = (candidate) => groups.some((group) => group.parameters.some((param) => param.path === candidate));
+        if (!exists(k))
+            return k;
+        let i = 1;
+        while (exists(`${k}${i}`))
+            i++;
+        return `${k}${i}`;
     }
-    passwordBox(options) {
-        this.fieldState.widget = {
-            type: 'password-editor',
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+    generateId() {
+        return `field_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
     }
-    selectBox(options) {
-        this.fieldState.widget = {
-            type: 'select-editor',
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+    getWidgetIcon(widgetName) {
+        const widget = this.availableWidgets().find((w) => w.name === widgetName);
+        return widget?.icon ?? 'fa-light fa-square';
     }
-    selectionList(options) {
-        this.fieldState.widget = {
-            type: 'selection-list-editor',
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+    getWidgetTitle(widgetName) {
+        const widget = this.availableWidgets().find((w) => w.name === widgetName);
+        return widget?.title ?? widgetName;
     }
-    lookupBox(options) {
-        this.fieldState.widget = {
-            type: 'lookup-editor',
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+    getWidgetNode(field) {
+        return field.widget;
     }
-    numberBox(options) {
-        this.fieldState.widget = {
-            type: 'number-editor',
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+    deriveGroupKey(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 groups = this.formDefinition().groups || [];
+        const exists = (candidate) => groups.some((group) => group.name === candidate);
+        if (!exists(k))
+            return k;
+        let i = 1;
+        while (exists(`${k}${i}`))
+            i++;
+        return `${k}${i}`;
     }
-    dateTimeBox(options) {
-        this.fieldState.widget = {
-            type: 'date-time-editor',
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+    getGroupOptions() {
+        return this.formDefinition().groups.map((group) => ({
+            value: group.name,
+            text: group.title || group.name,
+        }));
     }
-    toggleSwitch(options) {
-        this.fieldState.widget = {
-            type: 'toggle-editor',
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+    addFieldToGroup(field, groupName) {
+        const currentDefinition = this.formDefinition();
+        const updatedGroups = currentDefinition.groups.map((group) => group.name === groupName
+            ? {
+                ...group,
+                parameters: [
+                    ...group.parameters,
+                    {
+                        path: field.name,
+                        title: field.title,
+                        description: field.description,
+                        widget: field.widget,
+                        mode: field.mode,
+                        layout: field.layout,
+                    },
+                ],
+            }
+            : group);
+        this.formDefinition.set({
+            ...currentDefinition,
+            groups: updatedGroups,
+        });
     }
-    colorBox(options) {
-        this.fieldState.widget = {
-            type: 'color-editor',
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+    getAllGroupDropLists() {
+        return this.designerGroups().map((group) => `group-${group.name}-fields`);
     }
-    widget(type, options) {
-        this.fieldState.widget = {
-            type,
-            path: this.fieldState.path,
-            options
-        };
-        return this;
+    /**
+     * Get the grid column count for a group (always 12 columns)
+     */
+    getGroupColumnCount() {
+        return 12; // Always 12 columns for all groups
     }
-    build() {
+    /**
+     * Get default field grid layout based on group configuration
+     */
+    getFieldGridLayout(group, fieldIndex) {
+        // Always use 12 columns, provide smart default layout
         return {
-            path: this.fieldState.path,
-            title: this.fieldState.title,
-            description: this.fieldState.description,
-            widget: this.fieldState.widget
-        };
-    }
-}
-//#endregion
-//#region ----   Dialog Builder Implementation   ----
-class DialogBuilder extends FormBuilder {
-    constructor(dialogService) {
-        super();
-        this.dialogService = dialogService;
-        this.dialogState = {
-            groups: [],
-            layoutConfig: {
-                positions: {
-                    default: { colSpan: 12 },
-                    md: { colSpan: 8 },
-                    lg: { colSpan: 6 },
-                    xl: { colSpan: 5 },
-                    xxl: { colSpan: 4 },
-                },
+            positions: {
+                sm: { colSpan: 6 }, // Half width on small screens (6/12)
+                md: { colSpan: 3 }, // 1/4 width on medium screens (3/12)
+                lg: { colSpan: 3 }, // 1/4 width on large screens (3/12)
+                xl: { colSpan: 3 }, // 1/4 width on xl screens (3/12)
+                xxl: { colSpan: 3 }, // 1/4 width on xxl screens (3/12)
+                xxxl: { colSpan: 3 }, // 1/4 width on xxxl screens (3/12)
             },
-            look: 'normal',
-            direction: 'vertical',
-            title: '',
-            message: '',
-            size: 'md',
-            context: {},
-            actions: {
-                footer: {
-                    prefix: [],
-                    suffix: []
-                }
-            }
-        };
-    }
-    // Override to keep chaining within dialog context
-    group(name, delegate) {
-        super.group(name, delegate);
-        return this;
-    }
-    title(title) {
-        this.dialogState.title = title;
-        return this;
-    }
-    message(message) {
-        this.dialogState.message = message;
-        return this;
-    }
-    size(size) {
-        this.dialogState.size = size;
-        return this;
-    }
-    context(context) {
-        this.dialogState.context = context;
-        return this;
-    }
-    actions(delegate) {
-        const actionBuilder = new ActionBuilder(this);
-        if (delegate) {
-            delegate(actionBuilder);
-        }
-        return this;
-    }
-    async show() {
-        const config = {
-            title: this.dialogState.title,
-            message: this.dialogState.message,
-            formDefinition: this.build(),
-            context: this.dialogState.context,
-            size: this.dialogState.size,
-            actions: this.dialogState.actions
         };
-        return await this.dialogService.showDialog(config);
-    }
-}
-//#endregion
-//#region ----   Action Builder Implementation   ----
-class ActionBuilder {
-    constructor(dialogBuilder) {
-        this.dialogBuilder = dialogBuilder;
-    }
-    cancel(text) {
-        if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
-            this.dialogBuilder['dialogState'].actions.footer.suffix = [];
-        }
-        this.dialogBuilder['dialogState'].actions.footer.suffix.push({
-            title: text || '@general:actions.cancel.title',
-            icon: 'fa-times',
-            color: 'default',
-            command: { name: 'cancel' }
-        });
-        return this;
-    }
-    submit(text) {
-        if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
-            this.dialogBuilder['dialogState'].actions.footer.suffix = [];
-        }
-        this.dialogBuilder['dialogState'].actions.footer.suffix.push({
-            title: text || '@general:actions.submit.title',
-            icon: 'fa-check',
-            color: 'primary',
-            command: { name: 'submit', options: { validate: true } }
-        });
-        return this;
-    }
-    custom(action) {
-        if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
-            this.dialogBuilder['dialogState'].actions.footer.suffix = [];
-        }
-        this.dialogBuilder['dialogState'].actions.footer.suffix.push(action);
-        return this;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDynamicFormDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPDynamicFormDesignerComponent, isStandalone: true, selector: "axp-dynamic-form-designer", inputs: { formDefinition: { classPropertyName: "formDefinition", publicName: "formDefinition", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formDefinition: "formDefinitionChange" }, host: { classAttribute: "ax-w-full ax-h-full" }, ngImport: i0, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n  @if (!readonly()) {\n    <div class=\"__header\">\n      <div class=\"__header-left\">\n        <!-- Left side can be used for other actions in the future -->\n      </div>\n      <div class=\"__header-right\">\n        <ax-button\n          class=\"ax-sm\"\n          [text]=\"t('@dynamic-form-designer:actions.add-group') | async\"\n          [color]=\"'primary'\"\n          (onClick)=\"handleAddGroupClick()\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n\n        <ax-button\n          class=\"ax-sm\"\n          [text]=\"t('@dynamic-form-designer:actions.preview') | async\"\n          [color]=\"'success'\"\n          (onClick)=\"handlePreviewClick()\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  }\n  <div class=\"__content\">\n    @if (formDefinition().groups.length === 0) {\n      <axp-state-message\n        icon=\"fa-light fa-layer-group\"\n        [title]=\"'@dynamic-form-designer:groups.empty'\"\n        [description]=\"'@dynamic-form-designer:groups.empty-description'\"\n      >\n      </axp-state-message>\n    } @else {\n      <div\n        class=\"__groups-container\"\n        cdkDropList\n        [cdkDropListData]=\"designerGroups()\"\n        (cdkDropListDropped)=\"handleGroupDrop($event)\"\n      >\n        @for (group of designerGroups(); track group.id) {\n          <div class=\"__group\" cdkDrag>\n            <div class=\"__group-header\">\n              @if (!readonly()) {\n                <div class=\"__group-drag-handle\" cdkDragHandle>\n                  <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n                </div>\n              }\n              <div class=\"__group-info\">\n                <h3 class=\"__group-title\">{{ group.title || group.name }}</h3>\n                @if (group.description) {\n                  <p class=\"__group-description\">{{ group.description }}</p>\n                }\n              </div>\n              @if (!readonly()) {\n                <div class=\"__group-actions\">\n                  <ax-button\n                    class=\"ax-sm\"\n                    [text]=\"t('@dynamic-form-designer:actions.add-field') | async\"\n                    [color]=\"'accent2'\"\n                    (onClick)=\"handleAddFieldToGroup(group)\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button>\n                  <ax-button\n                    class=\"ax-sm\"\n                    [look]=\"'blank'\"\n                    color=\"info\"\n                    (onClick)=\"handleGroupLayoutEdit(group)\"\n                    [title]=\"t('@dynamic-form-designer:actions.layout-settings') | async\"\n                  >\n                    <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n                  </ax-button>\n                  <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n                    <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                  </ax-button>\n                  <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n                    <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </div>\n\n            <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n              <div\n                class=\"__items-list\"\n                cdkDropList\n                [id]=\"'group-' + group.name + '-fields'\"\n                [cdkDropListData]=\"group.fields\"\n                [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n                (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\"\n              >\n                @if (group.fields.length === 0) {\n                  <axp-state-message\n                    icon=\"fa-light fa-plus\"\n                    [title]=\"'@dynamic-form-designer:fields.empty-group'\"\n                    [description]=\"'@dynamic-form-designer:fields.empty-group-description'\"\n                  >\n                  </axp-state-message>\n                } @else {\n                  @for (field of group.fields; track field.id) {\n                    <div\n                      class=\"__field-item\"\n                      cdkDrag\n                      [class.__selected]=\"selectedFieldId() === field.id\"\n                      [axp-grid-layout]=\"getFieldGridLayout(group)\"\n                    >\n                      <div class=\"__drag-handle\" cdkDragHandle>\n                        <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n                      </div>\n\n                      <div class=\"__item-content\">\n                        <div class=\"__item-header\">\n                          <div class=\"__field-icon\">\n                            <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n                          </div>\n                          <div class=\"__field-info\">\n                            <h4 class=\"__item-title\">{{ field.title }}</h4>\n                            <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n                            @if (field.description) {\n                              <p class=\"__field-description\">{{ field.description }}</p>\n                            }\n                          </div>\n                        </div>\n                      </div>\n\n                      @if (!readonly()) {\n                        <div class=\"__item-actions\">\n                          <ax-button\n                            class=\"ax-sm\"\n                            [look]=\"'blank'\"\n                            color=\"accent2\"\n                            (onClick)=\"handleFieldLayoutEdit(field, group)\"\n                            title=\"Configure field layout (colSpan, colStart)\"\n                          >\n                            <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n                          </ax-button>\n                          <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n                            <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                          </ax-button>\n\n                          <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n                            <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                          </ax-button>\n                        </div>\n                      }\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;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-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{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))}.axp-dynamic-form-designer .__content .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;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-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--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));cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.__field-item:hover{--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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--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))}.__field-item.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.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: i3$3.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: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-
-//#endregion
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDynamicFormDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-dynamic-form-designer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXLabelModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        DragDropModule,
+                        AXTranslationModule,
+                        AXPStateMessageComponent,
+                        AXPGridLayoutDirective,
+                    ], standalone: true, host: {
+                        class: 'ax-w-full ax-h-full',
+                    }, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n  @if (!readonly()) {\n    <div class=\"__header\">\n      <div class=\"__header-left\">\n        <!-- Left side can be used for other actions in the future -->\n      </div>\n      <div class=\"__header-right\">\n        <ax-button\n          class=\"ax-sm\"\n          [text]=\"t('@dynamic-form-designer:actions.add-group') | async\"\n          [color]=\"'primary'\"\n          (onClick)=\"handleAddGroupClick()\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n\n        <ax-button\n          class=\"ax-sm\"\n          [text]=\"t('@dynamic-form-designer:actions.preview') | async\"\n          [color]=\"'success'\"\n          (onClick)=\"handlePreviewClick()\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  }\n  <div class=\"__content\">\n    @if (formDefinition().groups.length === 0) {\n      <axp-state-message\n        icon=\"fa-light fa-layer-group\"\n        [title]=\"'@dynamic-form-designer:groups.empty'\"\n        [description]=\"'@dynamic-form-designer:groups.empty-description'\"\n      >\n      </axp-state-message>\n    } @else {\n      <div\n        class=\"__groups-container\"\n        cdkDropList\n        [cdkDropListData]=\"designerGroups()\"\n        (cdkDropListDropped)=\"handleGroupDrop($event)\"\n      >\n        @for (group of designerGroups(); track group.id) {\n          <div class=\"__group\" cdkDrag>\n            <div class=\"__group-header\">\n              @if (!readonly()) {\n                <div class=\"__group-drag-handle\" cdkDragHandle>\n                  <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n                </div>\n              }\n              <div class=\"__group-info\">\n                <h3 class=\"__group-title\">{{ group.title || group.name }}</h3>\n                @if (group.description) {\n                  <p class=\"__group-description\">{{ group.description }}</p>\n                }\n              </div>\n              @if (!readonly()) {\n                <div class=\"__group-actions\">\n                  <ax-button\n                    class=\"ax-sm\"\n                    [text]=\"t('@dynamic-form-designer:actions.add-field') | async\"\n                    [color]=\"'accent2'\"\n                    (onClick)=\"handleAddFieldToGroup(group)\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button>\n                  <ax-button\n                    class=\"ax-sm\"\n                    [look]=\"'blank'\"\n                    color=\"info\"\n                    (onClick)=\"handleGroupLayoutEdit(group)\"\n                    [title]=\"t('@dynamic-form-designer:actions.layout-settings') | async\"\n                  >\n                    <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n                  </ax-button>\n                  <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n                    <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                  </ax-button>\n                  <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n                    <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </div>\n\n            <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n              <div\n                class=\"__items-list\"\n                cdkDropList\n                [id]=\"'group-' + group.name + '-fields'\"\n                [cdkDropListData]=\"group.fields\"\n                [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n                (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\"\n              >\n                @if (group.fields.length === 0) {\n                  <axp-state-message\n                    icon=\"fa-light fa-plus\"\n                    [title]=\"'@dynamic-form-designer:fields.empty-group'\"\n                    [description]=\"'@dynamic-form-designer:fields.empty-group-description'\"\n                  >\n                  </axp-state-message>\n                } @else {\n                  @for (field of group.fields; track field.id) {\n                    <div\n                      class=\"__field-item\"\n                      cdkDrag\n                      [class.__selected]=\"selectedFieldId() === field.id\"\n                      [axp-grid-layout]=\"getFieldGridLayout(group)\"\n                    >\n                      <div class=\"__drag-handle\" cdkDragHandle>\n                        <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n                      </div>\n\n                      <div class=\"__item-content\">\n                        <div class=\"__item-header\">\n                          <div class=\"__field-icon\">\n                            <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n                          </div>\n                          <div class=\"__field-info\">\n                            <h4 class=\"__item-title\">{{ field.title }}</h4>\n                            <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n                            @if (field.description) {\n                              <p class=\"__field-description\">{{ field.description }}</p>\n                            }\n                          </div>\n                        </div>\n                      </div>\n\n                      @if (!readonly()) {\n                        <div class=\"__item-actions\">\n                          <ax-button\n                            class=\"ax-sm\"\n                            [look]=\"'blank'\"\n                            color=\"accent2\"\n                            (onClick)=\"handleFieldLayoutEdit(field, group)\"\n                            title=\"Configure field layout (colSpan, colStart)\"\n                          >\n                            <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n                          </ax-button>\n                          <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n                            <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                          </ax-button>\n\n                          <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n                            <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                          </ax-button>\n                        </div>\n                      }\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;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-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{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))}.axp-dynamic-form-designer .__content .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;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-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--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));cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.__field-item:hover{--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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--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))}.__field-item.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"] }]
+        }] });
 
 //#endregion
 //#region ----   Injection Tokens   ----
@@ -2303,8 +3063,8 @@ class AXPExtraPropertiesComponent {
             i++;
         return `${k}${i}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPExtraPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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">
@@ -2394,9 +3154,9 @@ class AXPExtraPropertiesComponent {
         </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: i2$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$3.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$3.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", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: 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: AXPLayoutBuilderModule }, { kind: "component", type: i3$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$4.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 }); }
+    `, 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: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.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", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.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: i3$3.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: i3$3.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.8", ngImport: i0, type: AXPExtraPropertiesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-extra-properties',
@@ -2501,7 +3261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         AXSelectBoxModule,
                         AXButtonModule,
                         AXDecoratorModule,
-                        AXPLayoutBuilderModule,
+                        AXPWidgetCoreModule,
                         DragDropModule,
                         AXTranslationModule,
                         //AXPGridLayoutDirective,
@@ -2607,12 +3367,12 @@ class AXPWidgetPropertyViewerComponent {
     handleCollapsedChange(group, collapsed) {
         this.groupCollapsedStates.set(group, collapsed);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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\n              class=\"!ax-mb-0\"\n              [caption]=\"group.title\"\n              [(isCollapsed)]=\"group.isCollapsed\"\n              (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n            >\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</axp-widgets-container>\n", 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$3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$3.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$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$4.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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-accordion-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for (group of groups(); track $index) {\n        <ax-accordion-item 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-accordion-item>\n        }\n      </ax-accordion-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</axp-widgets-container>", styles: ["axp-widget-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$2.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$2.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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.8", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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\n              class=\"!ax-mb-0\"\n              [caption]=\"group.title\"\n              [(isCollapsed)]=\"group.isCollapsed\"\n              (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n            >\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</axp-widgets-container>\n", styles: [":host ax-collapse .ax-collapse-header{font-weight:600}\n"] }]
+            args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXAccordionModule, AXTabsModule, AXPWidgetCoreModule, 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-accordion-group class=\"ax-h-fit\" [look]=\"'flat'\">\n        @for (group of groups(); track $index) {\n        <ax-accordion-item 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-accordion-item>\n        }\n      </ax-accordion-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</axp-widgets-container>", styles: ["axp-widget-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onChanged: [{
                 type: Output
             }] } });
@@ -2742,10 +3502,10 @@ class AXPExtraPropertiesSchemaComponent {
             i++;
         return `${k}${i}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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: i2$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$3.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$3.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", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: 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: 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.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", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.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: i3$3.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: i3$3.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.8", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-extra-properties-schema', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -2863,8 +3623,8 @@ class AXPExtraPropertiesValuesComponent {
         }
         return node;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPExtraPropertiesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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">
@@ -2894,9 +3654,9 @@ class AXPExtraPropertiesValuesComponent {
         </div>
       </axp-widgets-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPExtraPropertiesValuesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesValuesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-extra-properties-values',
@@ -2932,7 +3692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXFormModule, AXLabelModule],
+                    imports: [CommonModule, AXPWidgetCoreModule, AXFormModule, AXLabelModule],
                     standalone: true,
                     host: {
                         class: 'ax-block ax-flex-1',
@@ -2950,10 +3710,10 @@ class AXPQueryFiltersComponent {
         this.onFiltersChanged = output();
         this.tagBox = viewChild('tagBox', ...(ngDevMode ? [{ debugName: "tagBox" }] : []));
         this.selectedField = signal(null, ...(ngDevMode ? [{ debugName: "selectedField" }] : []));
-        this.selectedFilters = linkedSignal(() => this.convertQueriesToDefinitions(this.initialFilters()), {
-            equal: isEqual,
-        });
-        this.context = linkedSignal(() => this.convertQueriesToContext(this.initialFilters()));
+        this.selectedFilters = linkedSignal(() => this.convertQueriesToDefinitions(this.initialFilters()), ...(ngDevMode ? [{ debugName: "selectedFilters", equal: isEqual }] : [{
+                equal: isEqual,
+            }]));
+        this.context = linkedSignal(() => this.convertQueriesToContext(this.initialFilters()), ...(ngDevMode ? [{ debugName: "context" }] : []));
         this.activeFilter = signal(null, ...(ngDevMode ? [{ debugName: "activeFilter" }] : []));
         this.asyncTags = signal([], ...(ngDevMode ? [{ debugName: "asyncTags" }] : []));
         this.popover = viewChild('popover', ...(ngDevMode ? [{ debugName: "popover" }] : []));
@@ -3018,12 +3778,14 @@ class AXPQueryFiltersComponent {
                     operator: context[f.field]?.operation,
                     value: context[f.field]?.value,
                     hidden: f.hidden,
+                    displayText: context[f.field]?.displayText,
                 }));
                 const newContext = {};
                 convertedFilters.forEach((cf) => {
                     newContext[cf.field] = {
                         value: cf.value,
                         operation: typeof cf.operator === 'string' ? { type: cf.operator } : cf.operator,
+                        displayText: context[cf.field]?.displayText,
                     };
                 });
                 this.context.set(newContext);
@@ -3036,7 +3798,8 @@ class AXPQueryFiltersComponent {
             const context = this.context();
             Promise.all(filters.map(async (filter) => {
                 const val = context[filter.field]?.value;
-                const displayValue = await this.getDisplayValue(filter, val);
+                const displayText = context[filter.field]?.displayText;
+                const displayValue = displayText ? displayText : await this.getDisplayValue(filter, val);
                 return {
                     ...filter,
                     query: `${this.translate.translateSync(filter.title)} ${this.getActiveOperator(filter)} '${displayValue}'`,
@@ -3063,7 +3826,7 @@ class AXPQueryFiltersComponent {
     }
     convertQueriesToContext(queries) {
         return queries.reduce((acc, q) => {
-            acc[q.field] = { value: q.value, operation: q.operator };
+            acc[q.field] = { value: q.value, operation: q.operator, displayText: q.displayText };
             return acc;
         }, {});
     }
@@ -3168,10 +3931,10 @@ class AXPQueryFiltersComponent {
         }
     }
     #effect2;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, 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: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: 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$4.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$4.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$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$4.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: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  ></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\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\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\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"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: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i4$5.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: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: 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.8", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-query-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
@@ -3182,15 +3945,255 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         AXPopoverModule,
                         AXSelectionListModule,
                         AXTagBoxModule,
-                        AXPLayoutBuilderModule,
+                        AXPWidgetCoreModule,
                         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-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"] }]
+                    ], 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]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  ></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\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\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\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"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 AXPImageEditorPopupComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.fileStorage = inject(AXPFileStorageService);
+        this.image = input.required(...(ngDevMode ? [{ debugName: "image" }] : []));
+        this.showHistory = input(true, ...(ngDevMode ? [{ debugName: "showHistory" }] : []));
+        this.look = input('blank', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.container = viewChild(AXImageEditorContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
+        this.blobUrl = signal(null, ...(ngDevMode ? [{ debugName: "blobUrl" }] : []));
+        this.url = signal(null, ...(ngDevMode ? [{ debugName: "url" }] : []));
+        this.context = linkedSignal(() => ({ image: this.image() }), ...(ngDevMode ? [{ debugName: "context" }] : []));
+    }
+    async ngOnInit() {
+        const value = this.image();
+        //for safety
+        if (!value) {
+            this.url.set(null);
+            return;
+        }
+        const prev = this.blobUrl();
+        if (prev) {
+            URL.revokeObjectURL(prev);
+        }
+        const blob = value;
+        const next = URL.createObjectURL(blob);
+        this.blobUrl.set(next);
+        this.url.set(next);
+    }
+    handleValueChanged(e) {
+        const value = e?.value;
+        const webP = value?.find((item) => item.type.startsWith('image/webp'));
+        if (webP) {
+            this.context.set({ image: webP });
+        }
+    }
+    handleSave() {
+        this.container()?.save();
+        this.close({ data: this.context() });
+    }
+    handleCancel() {
+        this.close({ data: { image: null } });
+    }
+    ngOnDestroy() {
+        const prev = this.blobUrl();
+        if (prev) {
+            URL.revokeObjectURL(prev);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPImageEditorPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPImageEditorPopupComponent, isStandalone: true, selector: "axp-image-editor-popup", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, showHistory: { classPropertyName: "showHistory", publicName: "showHistory", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: AXImageEditorContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ax-form class="ax-flex ax-justify-center">
+      <ax-form-field class="ax-p-2">
+        <ax-image-editor-container #container [look]="look()" (onValueChanged)="handleValueChanged($event)">
+          <ax-header>
+            <ax-toolbar>
+              <ax-prefix>
+                @if (showHistory()) {
+                  <ax-image-editor-history></ax-image-editor-history>
+                }
+              </ax-prefix>
+            </ax-toolbar>
+          </ax-header>
+          <ax-image-editor-view [src]="url() || ''"></ax-image-editor-view>
+        </ax-image-editor-container>
+      </ax-form-field>
+    </ax-form>
+    <ax-footer class="ax-flex ax-justify-end ax-gap-2">
+      <ax-suffix>
+        <ax-button  look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
+        </ax-button>
+        <ax-button color="primary" look="solid" (onClick)="handleSave()" [text]="'@general:actions.save.title' | translate | async">
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `, isInline: true, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$3.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "src"] }, { kind: "component", type: i1$3.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$3.AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i3$4.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPImageEditorPopupComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'axp-image-editor-popup', imports: [
+                        CommonModule,
+                        AXImageEditorModule,
+                        AXFormModule,
+                        AXToolBarModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXTranslationModule,
+                    ], template: `
+    <ax-form class="ax-flex ax-justify-center">
+      <ax-form-field class="ax-p-2">
+        <ax-image-editor-container #container [look]="look()" (onValueChanged)="handleValueChanged($event)">
+          <ax-header>
+            <ax-toolbar>
+              <ax-prefix>
+                @if (showHistory()) {
+                  <ax-image-editor-history></ax-image-editor-history>
+                }
+              </ax-prefix>
+            </ax-toolbar>
+          </ax-header>
+          <ax-image-editor-view [src]="url() || ''"></ax-image-editor-view>
+        </ax-image-editor-container>
+      </ax-form-field>
+    </ax-form>
+    <ax-footer class="ax-flex ax-justify-end ax-gap-2">
+      <ax-suffix>
+        <ax-button  look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
+        </ax-button>
+        <ax-button color="primary" look="solid" (onClick)="handleSave()" [text]="'@general:actions.save.title' | translate | async">
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"] }]
+        }] });
+
+var imageEditorPopup_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPImageEditorPopupComponent: AXPImageEditorPopupComponent
+});
+
+class AXPImageEditorService {
+    constructor() {
+        this.popupService = inject(AXPopupService);
+        this.translate = inject(AXTranslationService);
+    }
+    async open(options) {
+        const component = await Promise.resolve().then(function () { return imageEditorPopup_component; }).then((m) => m.AXPImageEditorPopupComponent);
+        const result = await this.popupService.open(component, {
+            title: options?.title ?? (await this.translate.translateAsync('@general:image.title')),
+            data: {
+                image: signal(options?.image),
+                showHistory: signal(options?.showHistory ?? true),
+                look: signal(options?.look ?? 'solid'),
+            },
+        });
+        return result?.data?.data?.image ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPImageEditorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPImageEditorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Inputs   ----
+        this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
+        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        //#endregion
+        //#region ----   Properties   ----
+        this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    handlePropertyChanged(event) {
+        this.currentValues.set(event.values);
+    }
+    handleCloseClick() {
+        this.close();
+    }
+    handleApplyClick() {
+        this.close({
+            values: this.currentValues(),
+            mode: 'update'
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: AXPWidgetPropertyViewerPopupComponent, isStandalone: true, selector: "axp-widget-property-viewer-popup", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
+      <axp-widget-property-viewer 
+        [widget]="widget()" 
+        [mode]="mode()"
+        (onChanged)="handlePropertyChanged($event)">
+      </axp-widget-property-viewer>
+    </div>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button 
+          look="solid" 
+          [text]="'@general:actions.close.title' | translate | async"
+          (onClick)="handleCloseClick()">
+        </ax-button>
+        <ax-button 
+          look="solid" 
+          color="primary" 
+          [text]="'@general:actions.apply.title' | translate | async"
+          (onClick)="handleApplyClick()">
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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: "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.3.4", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-widget-property-viewer-popup',
+                    template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
+      <axp-widget-property-viewer 
+        [widget]="widget()" 
+        [mode]="mode()"
+        (onChanged)="handlePropertyChanged($event)">
+      </axp-widget-property-viewer>
+    </div>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button 
+          look="solid" 
+          [text]="'@general:actions.close.title' | translate | async"
+          (onClick)="handleCloseClick()">
+        </ax-button>
+        <ax-button 
+          look="solid" 
+          color="primary" 
+          [text]="'@general:actions.apply.title' | translate | async"
+          (onClick)="handleApplyClick()">
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPWidgetPropertyViewerComponent
+                    ],
+                }]
+        }] });
+
+var widgetPropertyViewerPopup_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPWidgetPropertyViewerPopupComponent: AXPWidgetPropertyViewerPopupComponent
+});
+
 class AXPQuerySortsComponent {
     constructor() {
         this.sortDefinitions = model([], ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : []));
@@ -3238,10 +4241,10 @@ class AXPQuerySortsComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: 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.8", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-query-sorts', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         CdkDropList,
@@ -3328,8 +4331,8 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
             metadata: this.config?.metadata
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTemplateViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPTemplateViewerComponent, isStandalone: true, selector: "axp-template-viewer", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTemplateViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPTemplateViewerComponent, isStandalone: true, selector: "axp-template-viewer", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-p-4 ax-min-h-64">
         <ax-form #form>
           <axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)" >
@@ -3339,18 +4342,18 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
     </div>
     
     @if (config?.showActions !== false) {
-      <ax-footer *translate="let t">
+      <ax-footer>
         <ax-suffix>
-          <ax-button [text]="t('cancel') | async" (onClick)="handleCancel()"></ax-button>
+          <ax-button [text]="'@general:actions.cancel.title' | translate | async" (onClick)="handleCancel()"></ax-button>
           @if (!config?.readOnly) {
-            <ax-button color="primary" [text]="t('submit') | async" (onClick)="handleSubmit(form)"></ax-button>
+            <ax-button color="primary" [text]="'@general:actions.submit.title' | translate | async" (onClick)="handleSubmit(form)"></ax-button>
           }
         </ax-suffix>
       </ax-footer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { 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: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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.8", ngImport: i0, type: AXPTemplateViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTemplateViewerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-template-viewer',
@@ -3364,18 +4367,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
     </div>
     
     @if (config?.showActions !== false) {
-      <ax-footer *translate="let t">
+      <ax-footer>
         <ax-suffix>
-          <ax-button [text]="t('cancel') | async" (onClick)="handleCancel()"></ax-button>
+          <ax-button [text]="'@general:actions.cancel.title' | translate | async" (onClick)="handleCancel()"></ax-button>
           @if (!config?.readOnly) {
-            <ax-button color="primary" [text]="t('submit') | async" (onClick)="handleSubmit(form)"></ax-button>
+            <ax-button color="primary" [text]="'@general:actions.submit.title' | translate | async" (onClick)="handleSubmit(form)"></ax-button>
           }
         </ax-suffix>
       </ax-footer>
     }
   `,
                     encapsulation: ViewEncapsulation.None,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXDecoratorModule, AXButtonModule, AXFormModule, AXTranslationModule]
+                    imports: [CommonModule, AXPWidgetCoreModule, AXDecoratorModule, AXButtonModule, AXFormModule, AXTranslationModule]
                 }]
         }], propDecorators: { config: [{
                 type: Input
@@ -3419,10 +4422,10 @@ class AXPTemplateViewerService {
             showActions: false
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTemplateViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTemplateViewerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTemplateViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTemplateViewerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTemplateViewerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTemplateViewerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3562,10 +4565,10 @@ class AXPUserAvatarService {
             throw error;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPUserAvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPUserAvatarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPUserAvatarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3587,7 +4590,7 @@ class AXPUserAvatarComponent {
         this.isOnline = computed(() => this.userInfo()?.status === 'online', ...(ngDevMode ? [{ debugName: "isOnline" }] : []));
         this.avatarText = computed(() => this.getInitials(), ...(ngDevMode ? [{ debugName: "avatarText" }] : []));
         this.avatarColor = computed(() => this.pickColor(this.avatarText()), ...(ngDevMode ? [{ debugName: "avatarColor" }] : []));
-        this.hasPicture = signal(false, ...(ngDevMode ? [{ debugName: "hasPicture" }] : []));
+        this.hasPicture = signal(true, ...(ngDevMode ? [{ debugName: "hasPicture" }] : []));
     }
     onImageError(event) {
         this.hasPicture.set(false);
@@ -3655,17 +4658,12 @@ class AXPUserAvatarComponent {
         const idx = this.hashString(initials) % colors.length;
         return colors[idx];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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$6.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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$4.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$5.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.8", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-user-avatar', imports: [
-                        AXAvatarModule,
-                        AXDecoratorModule,
-                        AXImageModule,
-                        AXBadgeModule
-                    ], 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" }]
+            args: [{ selector: 'axp-user-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule, AXBadgeModule], 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 {
@@ -3700,12 +4698,12 @@ class AXPQueryViewsComponent {
     handleActiveChange(e) {
         console.log(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPQueryViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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$3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$3.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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]=\"('@general:actions.create.title' | translate | async) || 'Create New'\"\n    >\n    </ax-tab-item> -->\n</ax-tabs>\n", dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$5.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.8", ngImport: i0, type: AXPQueryViewsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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" }]
+            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]=\"('@general:actions.create.title' | translate | async) || 'Create New'\"\n    >\n    </ax-tab-item> -->\n</ax-tabs>\n" }]
         }] });
 
 /**
@@ -3754,10 +4752,10 @@ class AXPWidgetItemComponent {
     getIconClass() {
         return this.widget().icon || 'fa-light fa-document';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPWidgetItemComponent, isStandalone: true, selector: "axp-widget-item", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, showPinButton: { classPropertyName: "showPinButton", publicName: "showPinButton", isSignal: true, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onWidgetClick: "onWidgetClick", onPinClick: "onPinClick" }, ngImport: i0, template: "<div (click)=\"handleClick($event)\"\n    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n    [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n    [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n    <!-- Widget Icon -->\n    <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n        [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n        [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n        <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n    </div>\n\n    <!-- Widget Content -->\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n            <!-- Widget Title -->\n            <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"widget().title\">\n                {{ widget().title }}\n            </div>\n\n            <!-- Pin Button -->\n            @if (showPinButton()) {\n            <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n                @if (widget().isPinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\" title=\"Unpin\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n                    title=\"Pin\"></i>\n                }\n            </div>\n            }\n        </div>\n\n        <!-- Widget Description -->\n        @if (widget().description) {\n        <span class=\"ax-text-xs ax-truncate\" [title]=\"widget().description\">\n            {{ widget().description }}\n        </span>\n        }\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPWidgetItemComponent, isStandalone: true, selector: "axp-widget-item", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, showPinButton: { classPropertyName: "showPinButton", publicName: "showPinButton", isSignal: true, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onWidgetClick: "onWidgetClick", onPinClick: "onPinClick" }, ngImport: i0, template: "<div (click)=\"handleClick($event)\"\n    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n    [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n    [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n    <!-- Widget Icon -->\n    <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n        [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n        [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n        <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n    </div>\n\n    <!-- Widget Content -->\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n            <!-- Widget Title -->\n            <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"widget().title\">\n                {{ widget().title }}\n            </div>\n\n            <!-- Pin Button -->\n            @if (showPinButton()) {\n            <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n                @if (widget().isPinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\" title=\"Unpin\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n                    title=\"Pin\"></i>\n                }\n            </div>\n            }\n        </div>\n\n        <!-- Widget Description -->\n        @if (widget().description) {\n        <span class=\"ax-text-xs ax-truncate\" [title]=\"widget().description\">\n            {{ widget().description }}\n        </span>\n        }\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-widget-item', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div (click)=\"handleClick($event)\"\n    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n    [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n    [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n    <!-- Widget Icon -->\n    <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n        [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n        [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n        <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n    </div>\n\n    <!-- Widget Content -->\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n            <!-- Widget Title -->\n            <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"widget().title\">\n                {{ widget().title }}\n            </div>\n\n            <!-- Pin Button -->\n            @if (showPinButton()) {\n            <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n                @if (widget().isPinned) {\n                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\" title=\"Unpin\"></i>\n                } @else {\n                <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n                    title=\"Pin\"></i>\n                }\n            </div>\n            }\n        </div>\n\n        <!-- Widget Description -->\n        @if (widget().description) {\n        <span class=\"ax-text-xs ax-truncate\" [title]=\"widget().description\">\n            {{ widget().description }}\n        </span>\n        }\n    </div>\n</div>" }]
         }] });
@@ -3766,5 +4764,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDynamicDialogComponent, AXPDynamicDialogService, AXPDynamicFormBuilderService, AXPDynamicFormComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, 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 };
+export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDynamicFormDesignerComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPStateMessageComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, convertDesignerFieldToFormField, convertDesignerGroupToFormGroup, convertDesignerStateToFormDefinition };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map