@acorex/platform 20.0.4 → 20.0.6

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

@@ -20,15 +20,20 @@ import { AXTagModule } from '@acorex/components/tag';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import * as i10 from '@acorex/components/badge';
 import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
-import { AXFormModule } from '@acorex/components/form';
+import * as i1$1 from '@acorex/components/form';
+import { AXFormModule, AXFormComponent } from '@acorex/components/form';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i3$1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i2 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
 import * as i5$1 from '@acorex/platform/layout/builder';
-import { AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import { AXPLayoutBuilderModule, AXPWidgetContainerComponent, AXPPageStatus } from '@acorex/platform/layout/builder';
 import { sortBy } from 'lodash-es';
+import { AXValidationModule } from '@acorex/core/validation';
+import { AXPGridLayoutDirective, AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS } from '@acorex/platform/common';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import * as i9 from '@acorex/cdk/list-navigation';
 import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
 import * as i6 from '@acorex/components/popover';
@@ -37,12 +42,9 @@ import { AXSelectionListModule } from '@acorex/components/selection-list';
 import * as i7 from '@acorex/components/tag-box';
 import { AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXCalendarService } from '@acorex/core/date-time';
-import { AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS } from '@acorex/platform/common';
-import * as i2$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import { BehaviorSubject, timer, Subject, takeUntil } from 'rxjs';
 import { tap } from 'rxjs/operators';
-import * as i1$1 from '@acorex/components/avatar';
+import * as i1$2 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
 import * as i3$3 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
@@ -695,6 +697,14 @@ class AXPCompareViewComponent {
          */
         this.filteredFields = computed(() => {
             const fields = this.inputs()?.fields ?? [];
+            // Set readOnly to true for all fields
+            fields.forEach(field => {
+                field.widget.options = {
+                    ...field.widget.options,
+                    allowEdit: false,
+                    readOnly: true,
+                };
+            });
             if (!this.showOnlyChanges()) {
                 return fields;
             }
@@ -790,7 +800,7 @@ class AXPCompareViewComponent {
                 // Angular
                 CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: 
                 // ACoreX
-                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i3$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: 
+                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i3$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: 
                 // Platform
                 AXPLayoutBuilderModule }, { kind: "component", type: i5$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i5$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -897,11 +907,8 @@ class AXPComponentSlotDirective {
                     options = fun();
                 });
             }
-            else if (this.evaluator.isExpression(config.options)) {
-                options = await this.evaluator.evaluate(config.options, {});
-            }
             else if (config.options) {
-                options = config.options;
+                options = await this.evaluator.evaluate(config.options, {});
             }
             // apply options and host
             const componentRef = this.viewContainerRef.createComponent(component);
@@ -1000,6 +1007,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     args: ['AXPComponentSlotModuleFactory']
                 }] }] });
 
+class AXPDynamicFormComponent {
+    constructor() {
+        //#region ----   Inputs   ----
+        /**
+         * Form definition containing groups and fields
+         */
+        this.formDefinition = input.required();
+        /**
+         * Form context/model data
+         */
+        this.context = input.required();
+        /**
+         * 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 },
+            },
+        });
+        //#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();
+        //#endregion
+        //#region ----   Properties   ----
+        this.form = viewChild(AXFormComponent);
+        this.container = viewChild(AXPWidgetContainerComponent);
+        /**
+         * Internal context signal for reactivity
+         */
+        this.internalContext = signal({});
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Computed layout configuration
+         */
+        this.computedLayout = computed(() => this.layoutConfig());
+        /**
+         * Computed form definition
+         */
+        this.computedFormDefinition = computed(() => this.formDefinition());
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Effect to sync context changes
+         */
+        this.#contextSyncEffect = effect(() => {
+            const context = this.context();
+            this.internalContext.set(context);
+        });
+        /**
+         * 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);
+            }
+        });
+    }
+    //#endregion
+    //#region ----   Lifecycle Methods   ----
+    ngOnInit() {
+        // Initialize internal context with input context
+        this.internalContext.set(this.context());
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Effect to sync context changes
+     */
+    #contextSyncEffect;
+    /**
+     * Effect to handle form status changes
+     */
+    #formStatusEffect;
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle context change events from widget container
+     */
+    handleContextChanged(event) {
+        if (event.state === 'initiated') {
+            this.contextInitiated.emit(event.data);
+        }
+        else {
+            this.internalContext.set(event.data);
+            this.contextChange.emit(event.data);
+        }
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Get the form component instance
+     */
+    getForm() {
+        return this.form();
+    }
+    /**
+     * Get current form context
+     */
+    getContext() {
+        return this.internalContext();
+    }
+    /**
+     * Update form context programmatically
+     */
+    updateContext(context) {
+        this.internalContext.set(context);
+    }
+    /**
+     * Validate the form
+     */
+    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.0.4", ngImport: i0, type: AXPDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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 }, layoutConfig: { classPropertyName: "layoutConfig", publicName: "layoutConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextChange: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, host: { 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      @if (computedFormDefinition()) {\n        @for (group of computedFormDefinition().groups; track group.name) {\n          <axp-layout-section>\n            <axp-layout-header>\n              <axp-layout-title>{{ group.title }}</axp-layout-title>\n              @if (group.description) {\n                <axp-layout-description>{{ group.description }}</axp-layout-description>\n              }\n            </axp-layout-header>\n            <axp-layout-content>\n              @for (param of group.parameters; track param.path) {\n                <div class=\"__field-container\">\n                  <div class=\"__field-info\">\n                    @if (param.title) {\n                      <axp-layout-title>{{ param.title }}</axp-layout-title>\n                    }\n                    @if (param.description) {\n                      <axp-layout-description>{{ param.description }}</axp-layout-description>\n                    }\n                  </div>\n                  <ax-form-field class=\"__field-input\" [gridLayout]=\"computedLayout()\">\n                    <ng-container axp-widget-renderer [node]=\"param.widget\" [mode]=\"'edit'\"></ng-container>\n                  </ax-form-field>\n                </div>\n              }\n            </axp-layout-content>\n          </axp-layout-section>\n        }\n      } @else {\n        <axp-layout-section>\n          <axp-layout-content>\n            <div class=\"__empty-state\">\n              <axp-layout-description>No form definition provided</axp-layout-description>\n            </div>\n          </axp-layout-content>\n        </axp-layout-section>\n      }\n    </axp-layout-sections>\n  </axp-widgets-container>\n</ax-form>\n", styles: [".axp-dynamic-form{width:100%}.axp-dynamic-form axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}.axp-dynamic-form axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-style:dashed;--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{align-items:center;gap:1rem;padding:1rem}@media (min-width: 1024px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 1280px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{padding-left:2rem;padding-right:2rem}}@media (min-width: 1536px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{padding-left:2.5rem;padding-right:2.5rem}}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 12 / span 12}@media (min-width: 768px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 4 / span 4}}@media (min-width: 1024px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 4 / span 4}}@media (min-width: 1536px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 3 / span 3}}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container axp-layout-description{margin-top:.5rem!important;font-size:.75rem!important;line-height:1rem!important}.axp-dynamic-form .__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: i1$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i1$1.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: 
+                // Platform
+                AXPLayoutBuilderModule }, { kind: "component", type: i5$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i5$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'axp-dynamic-form', imports: [
+                        CommonModule,
+                        FormsModule,
+                        // ACoreX
+                        AXFormModule,
+                        AXValidationModule,
+                        // Platform
+                        AXPLayoutBuilderModule,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutHeaderComponent,
+                        AXPThemeLayoutSectionComponent,
+                        AXPGridLayoutDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'axp-dynamic-form',
+                    }, template: "<ax-form>\n  <axp-widgets-container [context]=\"internalContext()\" (onContextChanged)=\"handleContextChanged($event)\">\n    <axp-layout-sections>\n      @if (computedFormDefinition()) {\n        @for (group of computedFormDefinition().groups; track group.name) {\n          <axp-layout-section>\n            <axp-layout-header>\n              <axp-layout-title>{{ group.title }}</axp-layout-title>\n              @if (group.description) {\n                <axp-layout-description>{{ group.description }}</axp-layout-description>\n              }\n            </axp-layout-header>\n            <axp-layout-content>\n              @for (param of group.parameters; track param.path) {\n                <div class=\"__field-container\">\n                  <div class=\"__field-info\">\n                    @if (param.title) {\n                      <axp-layout-title>{{ param.title }}</axp-layout-title>\n                    }\n                    @if (param.description) {\n                      <axp-layout-description>{{ param.description }}</axp-layout-description>\n                    }\n                  </div>\n                  <ax-form-field class=\"__field-input\" [gridLayout]=\"computedLayout()\">\n                    <ng-container axp-widget-renderer [node]=\"param.widget\" [mode]=\"'edit'\"></ng-container>\n                  </ax-form-field>\n                </div>\n              }\n            </axp-layout-content>\n          </axp-layout-section>\n        }\n      } @else {\n        <axp-layout-section>\n          <axp-layout-content>\n            <div class=\"__empty-state\">\n              <axp-layout-description>No form definition provided</axp-layout-description>\n            </div>\n          </axp-layout-content>\n        </axp-layout-section>\n      }\n    </axp-layout-sections>\n  </axp-widgets-container>\n</ax-form>\n", styles: [".axp-dynamic-form{width:100%}.axp-dynamic-form axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}.axp-dynamic-form axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-style:dashed;--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{align-items:center;gap:1rem;padding:1rem}@media (min-width: 1024px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 1280px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{padding-left:2rem;padding-right:2rem}}@media (min-width: 1536px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{padding-left:2.5rem;padding-right:2.5rem}}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 12 / span 12}@media (min-width: 768px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 4 / span 4}}@media (min-width: 1024px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 4 / span 4}}@media (min-width: 1536px){.axp-dynamic-form axp-layout-section axp-layout-content .__field-container .__field-info{grid-column:span 3 / span 3}}.axp-dynamic-form axp-layout-section axp-layout-content .__field-container axp-layout-description{margin-top:.5rem!important;font-size:.75rem!important;line-height:1rem!important}.axp-dynamic-form .__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:2rem;padding-bottom:2rem;text-align:center}.axp-dynamic-form .__empty-state .__message{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"] }]
+        }] });
+
 class AXPLayoutFiltersComponent {
     constructor() {
         this.translate = inject(AXTranslationService);
@@ -1223,7 +1393,7 @@ class AXPLayoutFiltersComponent {
     }
     #effect2;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPLayoutFiltersComponent, isStandalone: true, selector: "axp-layout-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"(filtersDefinitions().length === 0 ? 'filter.noRecords' : 'filter.title') | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-layout-filters{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.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: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["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: i7.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: i5$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i5$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i9.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onPressEnterOrSpace"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i9.AXListNavigationItemDirective, selector: "[axListNavigationItem]", exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i10.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPLayoutFiltersComponent, isStandalone: true, selector: "axp-layout-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"(filtersDefinitions().length === 0 ? 'filter.noRecords' : 'filter.title') | translate | async\"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button class=\"ax-xs\" [text]=\"'apply' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-layout-filters{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.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: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["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: i7.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: i5$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i5$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i9.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onPressEnterOrSpace"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i9.AXListNavigationItemDirective, selector: "[axListNavigationItem]", exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i10.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutFiltersComponent, decorators: [{
             type: Component,
@@ -1472,7 +1642,7 @@ class AXPUserAvatarComponent {
         return colors[idx];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.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$1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$3.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.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$2.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$3.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
             type: Component,
@@ -1488,5 +1658,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPLayoutFiltersComponent, AXPMenuBadgeHelper, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER };
+export { AXPActivityLogComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDynamicFormComponent, AXPLayoutFiltersComponent, AXPMenuBadgeHelper, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map