@acorex/platform 20.2.4-next.2 → 20.2.4-next.5

package/fesm2022/acorex-platform-widgets.mjs

@@ -1,6 +1,6 @@
 import * as i1$6 from '@acorex/platform/layout/builder';
 import { AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXPLayoutWidgetComponent, AXPWidgetGroupEnum, AXP_WIDGETS_ACTION_CATEGORY, AXPValueWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY, AXPColumnWidgetComponent, AXPLayoutBuilderModule, createNumberProperty, AXPDataListWidgetComponent, AXPWidgetStatus, AXPPageStatus, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY } from '@acorex/platform/layout/builder';
-import { objectKeyValueTransforms, AXPDataGenerator, AXPExpressionEvaluatorService } from '@acorex/platform/core';
+import { objectKeyValueTransforms, setSmart, AXPDataGenerator, AXPExpressionEvaluatorService } from '@acorex/platform/core';
 import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource, convertArrayToDataSource } from '@acorex/cdk/common';
 import * as i1$5 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
@@ -1205,7 +1205,7 @@ const AXPCheckBoxWidget = {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-column.component-BNBOATPB.mjs').then((c) => c.AXPCheckBoxWidgetColumnComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-column.component-DeKpl0uK.mjs').then((c) => c.AXPCheckBoxWidgetColumnComponent),
         },
         filter: {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
@@ -3920,8 +3920,9 @@ class AXPNumberBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
         super(...arguments);
         this.formatService = inject(AXFormatService);
         this.value = computed(() => {
-            if (!isNumber(this.rawValue))
-                return '---';
+            if (!isNumber(this.rawValue)) {
+                return this.nullText;
+            }
             const value = Number(this.rawValue);
             if (this.options['format'] && this.options['format']['name']) {
                 const { name, options } = this.options['format'];
@@ -5183,8 +5184,17 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         //
         this.widgetsConfigs = inject(STRATEGY_CONFIG_TOKEN);
         this.filterOperatorMiddleware = inject(AXPFilterOperatorMiddlewareService);
+        //#region ----   Expose & Options   ----
+        /**
+         * Expose configuration similar to lookup widget. Can be:
+         * - string path(s): 'field.path'
+         * - mapping objects: { source: 'field.path', target: 'context.target.path' }
+         */
+        this.expose = computed(() => this.options()['expose'], ...(ngDevMode ? [{ debugName: "expose" }] : []));
+        //#endregion
         this.multiple = computed(() => this.options()['multiple'], ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.placeholder = computed(() => this.options()['placeholder'] ?? '', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.hasClearButton = computed(() => this.options()['hasClearButton'], ...(ngDevMode ? [{ debugName: "hasClearButton" }] : []));
         this.allowSearch = computed(() => this.options()['allowSearch'] ?? false, ...(ngDevMode ? [{ debugName: "allowSearch" }] : []));
@@ -5213,6 +5223,26 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
     handleValueChange(e) {
         this.selectedItems.set(e.component.selectedItems);
         if (e.isUserInteraction) {
+            //#region ----   Expose extra values to context   ----
+            if (this.expose()) {
+                const selections = this.selectedItems();
+                const exposeList = Array.isArray(this.expose()) ? this.expose() : [this.expose()];
+                const itemToExpose = {};
+                exposeList.forEach((expr) => {
+                    if (typeof expr === 'string') {
+                        const values = selections.map((item) => set({}, expr, get(item, expr)));
+                        setSmart(itemToExpose, expr, this.singleOrMultiple(values));
+                    }
+                    else if (expr && typeof expr === 'object') {
+                        const values = this.multiple()
+                            ? selections.map((item) => set({}, expr.source, get(item, expr.source)))
+                            : selections.map((item) => get(item, expr.source));
+                        setSmart(itemToExpose, expr.target, this.singleOrMultiple(values));
+                    }
+                });
+                this.contextService.patch(itemToExpose);
+            }
+            //#endregion
             if (this.widgetsConfigs.selectValueStrategy === 'valueField') {
                 this.setValue(e.value);
             }
@@ -5245,6 +5275,13 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         cls[`ax-flex-1`] = true;
         return cls;
     }
+    //#region ----   Utility Methods   ----
+    /**
+     * Return a single value for single-select, or the full list for multi-select
+     */
+    singleOrMultiple(values) {
+        return this.multiple() ? values : values[0];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPSelectBoxWidgetEditComponent, isStandalone: true, selector: "axp-select-box-widget-edit", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ax-select-box
@@ -5254,6 +5291,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
       [valueField]="valueField()"
       [textField]="textField()"
       [multiple]="multiple()"
+      [readonly]="readonly()"
       [ngModel]="getValue()"
       (onValueChanged)="handleValueChange($event)"
     >
@@ -5285,6 +5323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
       [valueField]="valueField()"
       [textField]="textField()"
       [multiple]="multiple()"
+      [readonly]="readonly()"
       [ngModel]="getValue()"
       (onValueChanged)="handleValueChange($event)"
     >
@@ -5425,6 +5464,7 @@ class AXPSelectionListWidgetViewComponent extends AXPValueWidgetComponent {
         this.items = computed(() => this.options()['items'], ...(ngDevMode ? [{ debugName: "items" }] : []));
         this.valueField = computed(() => this.options()['valueField'], ...(ngDevMode ? [{ debugName: "valueField" }] : []));
         this.textField = computed(() => this.options()['textField'], ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.imageMode = computed(() => this.options()['imageMode'], ...(ngDevMode ? [{ debugName: "imageMode" }] : []));
         this.internalValue = computed(() => {
             return this.items().filter((item) => {
                 if (Array.isArray(this.getValue()))
@@ -5444,9 +5484,12 @@ class AXPSelectionListWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPSelectionListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPSelectionListWidgetViewComponent, isStandalone: true, selector: "axp-selection-list-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     @for (item of internalValue(); track $index) {
-    <ax-badge  class="ax-p-0.5" [color]="'surface'" [text]="item[this.textField()]" ></ax-badge>
-    }
-    @empty {
+      @if (imageMode()) {
+        <img class="ax-w-14 ax-h-14 ax-rounded-sm" [src]="item[this.textField()]" />
+      } @else {
+        <ax-badge class="ax-p-0.5" [color]="'surface'" [text]="item[this.textField()]"></ax-badge>
+      }
+    } @empty {
       <span class="ax-text-muted">---</span>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -5457,14 +5500,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'axp-selection-list-widget-view',
                     template: `
     @for (item of internalValue(); track $index) {
-    <ax-badge  class="ax-p-0.5" [color]="'surface'" [text]="item[this.textField()]" ></ax-badge>
-    }
-    @empty {
+      @if (imageMode()) {
+        <img class="ax-w-14 ax-h-14 ax-rounded-sm" [src]="item[this.textField()]" />
+      } @else {
+        <ax-badge class="ax-p-0.5" [color]="'surface'" [text]="item[this.textField()]"></ax-badge>
+      }
+    } @empty {
       <span class="ax-text-muted">---</span>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXBadgeModule]
+                    imports: [AXBadgeModule],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -5565,6 +5611,9 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
         this.direction = computed(() => this.options()['direction']?.id ?? 'horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.look = computed(() => this.options()['look'], ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.showControl = computed(() => this.options()['showControl'], ...(ngDevMode ? [{ debugName: "showControl" }] : []));
+        this.imageMode = computed(() => this.options()['imageMode'], ...(ngDevMode ? [{ debugName: "imageMode" }] : []));
         this.displayItems = signal([], ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
         this.ef = effect(() => {
             this.dataSource()
@@ -5599,7 +5648,15 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
       [disabled]="disabled()"
       [readonly]="readonly()"
       [direction]="direction()"
+      [look]="look()"
+      [showControl]="showControl()"
+      [customTemplate]="(imageMode() ? imageTemplate : undefined)!"
     >
+      <ng-template #imageTemplate let-item>
+        @if (imageMode()) {
+          <img class="ax-w-14 ax-h-14" [src]="item.data[textField()]" />
+        }
+      </ng-template>
       @for (validation of validationRules(); track $index) {
         <ax-validation-rule
           [rule]="validation.rule"
@@ -5626,7 +5683,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
       [disabled]="disabled()"
       [readonly]="readonly()"
       [direction]="direction()"
+      [look]="look()"
+      [showControl]="showControl()"
+      [customTemplate]="(imageMode() ? imageTemplate : undefined)!"
     >
+      <ng-template #imageTemplate let-item>
+        @if (imageMode()) {
+          <img class="ax-w-14 ax-h-14" [src]="item.data[textField()]" />
+        }
+      </ng-template>
       @for (validation of validationRules(); track $index) {
         <ax-validation-rule
           [rule]="validation.rule"
@@ -5675,6 +5740,7 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.textField = this.options['textField'];
         this.items = this.options['items'];
         this.multiple = this.options['multiple'];
+        this.imageMode = this.options['imageMode'];
         this.selectedItemIds = computed(() => {
             return this.rawValue || [];
         }, ...(ngDevMode ? [{ debugName: "selectedItemIds" }] : []));
@@ -5694,10 +5760,20 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPSelectionListWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPSelectionListWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-gap-2">
-    @if(multiple){ @for (item of selectedItems(); track $index) {
-    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
-    } }@else {
-    <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
+    @if (multiple) {
+      @for (item of selectedItems(); track $index) {
+        @if (imageMode) {
+          <img class="ax-w-10 ax-h-10 ax-rounded-sm" [src]="item[this.textField]" />
+        } @else {
+          <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
+        }
+      }
+    } @else {
+      @if (imageMode) {
+        <img class="ax-w-10 ax-h-10 ax-rounded-sm" [src]="firstItem()[this.textField]" />
+      } @else {
+        <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
+      }
     }
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -5705,15 +5781,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             type: Component,
             args: [{
                     template: ` <div class="ax-flex ax-gap-2">
-    @if(multiple){ @for (item of selectedItems(); track $index) {
-    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
-    } }@else {
-    <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
+    @if (multiple) {
+      @for (item of selectedItems(); track $index) {
+        @if (imageMode) {
+          <img class="ax-w-10 ax-h-10 ax-rounded-sm" [src]="item[this.textField]" />
+        } @else {
+          <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
+        }
+      }
+    } @else {
+      @if (imageMode) {
+        <img class="ax-w-10 ax-h-10 ax-rounded-sm" [src]="firstItem()[this.textField]" />
+      } @else {
+        <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
+      }
     }
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AXBadgeModule],
-                    inputs: ['rawValue', 'rowData']
+                    inputs: ['rawValue', 'rowData'],
                 }]
         }] });
 
@@ -6731,56 +6817,110 @@ var toggleWidgetFilter_component = /*#__PURE__*/Object.freeze({
 class AXPToggleWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ----   Component Properties   ----
         this.negative = this.options['negative'];
         this.trulyText = this.options['trulyText'];
         this.falsyText = this.options['falsyText'];
-        this.nullText = this.options['nullText'];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPToggleWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPToggleWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `@if(rawValue === null || rawValue === undefined){
-    @if(nullText){
-      <span>{{nullText}}</span>
-    }@else {
-      <span>---</span>
-    }
-  }@else if(rawValue){ @if(trulyText){
-    <ax-badge [text]="trulyText" [color]="negative ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative){
-    <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    } } }@else { @if(falsyText){
-    <ax-badge [text]="falsyText" [color]="negative ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative){
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
-    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPToggleWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
+    @if (value() == null || value() == undefined) {
+      <!-- Null/Undefined state -->
+      @if (value() != null && value() != undefined) {
+        <span>{{ nullText | translate | async }}</span>
+      } @else {
+        <span>---</span>
+      }
+    } 
+    @else {
+      <!-- True state -->
+      @if(value()==true)
+      {
+        @if (trulyText) {
+          <ax-badge 
+            [text]="(trulyText | translate | async)!" 
+            [color]="negative ? 'danger' : 'success'" 
+            [look]="'twotone'">
+          </ax-badge>
+        } @else  {
+          @if (negative) {
+            <ax-icon class="fa-solid fa-xmark ax-text-danger-500"></ax-icon>
+          } @else {
+            <ax-icon class="fa-solid fa-check ax-text-success"></ax-icon>
+          }
+        }
+      }
+      <!-- False state -->
+      @else 
+      {
+        @if (falsyText) {
+          <ax-badge 
+            [text]="(falsyText | translate | async)!" 
+            [color]="negative ? 'success' : 'danger'" 
+            [look]="'twotone'">
+          </ax-badge>
+        } @else {
+          @if (negative) {
+            <ax-icon class="fa-solid fa-check ax-text-success"></ax-icon>
+          } @else {
+            <ax-icon class="fa-solid fa-xmark ax-text-danger-500"></ax-icon>
+          }
+        }
+      }
+    } 
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPToggleWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `@if(rawValue === null || rawValue === undefined){
-    @if(nullText){
-      <span>{{nullText}}</span>
-    }@else {
-      <span>---</span>
-    }
-  }@else if(rawValue){ @if(trulyText){
-    <ax-badge [text]="trulyText" [color]="negative ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative){
-    <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    } } }@else { @if(falsyText){
-    <ax-badge [text]="falsyText" [color]="negative ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative){
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
-    } } }`,
+                    template: `
+    @if (value() == null || value() == undefined) {
+      <!-- Null/Undefined state -->
+      @if (value() != null && value() != undefined) {
+        <span>{{ nullText | translate | async }}</span>
+      } @else {
+        <span>---</span>
+      }
+    } 
+    @else {
+      <!-- True state -->
+      @if(value()==true)
+      {
+        @if (trulyText) {
+          <ax-badge 
+            [text]="(trulyText | translate | async)!" 
+            [color]="negative ? 'danger' : 'success'" 
+            [look]="'twotone'">
+          </ax-badge>
+        } @else  {
+          @if (negative) {
+            <ax-icon class="fa-solid fa-xmark ax-text-danger-500"></ax-icon>
+          } @else {
+            <ax-icon class="fa-solid fa-check ax-text-success"></ax-icon>
+          }
+        }
+      }
+      <!-- False state -->
+      @else 
+      {
+        @if (falsyText) {
+          <ax-badge 
+            [text]="(falsyText | translate | async)!" 
+            [color]="negative ? 'success' : 'danger'" 
+            [look]="'twotone'">
+          </ax-badge>
+        } @else {
+          @if (negative) {
+            <ax-icon class="fa-solid fa-check ax-text-success"></ax-icon>
+          } @else {
+            <ax-icon class="fa-solid fa-xmark ax-text-danger-500"></ax-icon>
+          }
+        }
+      }
+    } 
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXDecoratorModule, AXBadgeModule],
+                    imports: [CommonModule, AXDecoratorModule, AXBadgeModule, AXTranslationModule],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -7104,9 +7244,10 @@ class AXPFileUploaderWidgetService {
             multiple: false,
             accept: '*',
             fileEditable: true,
+            maxFileSize: 1024 * 1024 * 10,
         };
         options = { ...defaultOptions, ...options };
-        const component = await import('./acorex-platform-widgets-file-list-popup.component-B601gPsW.mjs').then(m => m.AXPFileListPopupComponent);
+        const component = await import('./acorex-platform-widgets-file-list-popup.component-BafU5Lfl.mjs').then(m => m.AXPFileListPopupComponent);
         const result = await this.popupService.open(component, {
             title: (await this.translate.translateAsync('@document-management:file')),
             data: {
@@ -7114,6 +7255,7 @@ class AXPFileUploaderWidgetService {
                 readOnly: signal(options.readOnly),
                 multiple: signal(options.multiple),
                 accept: signal(options.accept),
+                maxFileSize: signal(options.maxFileSize),
                 fileEditable: signal(options.fileEditable ?? true),
             },
         });
@@ -7134,7 +7276,6 @@ class AXPFileUploaderWidgetColumnComponent extends AXPColumnWidgetComponent {
         super(...arguments);
         this.count = computed(() => {
             const value = castArray(this.rawValue ?? []);
-            console.log('File count:', value.length, 'Raw Data:', this.rowData);
             return value.length;
         }, ...(ngDevMode ? [{ debugName: "count" }] : []));
         this.fileService = inject(AXPFileUploaderWidgetService);
@@ -7339,7 +7480,15 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         this.fileService = inject(AXFileService);
         this.multiple = computed(() => this.options()['multiple'], ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         this.accept = computed(() => this.options()['accept'], ...(ngDevMode ? [{ debugName: "accept" }] : []));
-        this.fileEditable = computed(() => this.options()['fileEditable'], ...(ngDevMode ? [{ debugName: "fileEditable" }] : []));
+        this.plugins = computed(() => this.options()['plugins'], ...(ngDevMode ? [{ debugName: "plugins" }] : []));
+        this.fileEditable = computed(() => {
+            if (this.options()['readonly']) {
+                return false;
+            }
+            return this.options()['fileEditable'];
+        }, ...(ngDevMode ? [{ debugName: "fileEditable" }] : []));
+        this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.maxFileSize = computed(() => this.options()['maxFileSize'], ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
         this.files = computed(() => (this.getValue() ?? []).map((file) => ({
             ...file,
         })) ?? [], ...(ngDevMode ? [{ debugName: "files" }] : []));
@@ -7358,6 +7507,7 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         if (!this.multiple()) {
             this.clear();
         }
+        // if the file size is greater than the max file size, return
         // create the file upload requests
         const fileUploadRequests = files.map((file) => ({
             id: AXPDataGenerator.uuid(),
@@ -7414,8 +7564,9 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFileUploaderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: AXPFileUploaderWidgetEditComponent, isStandalone: true, selector: "axp-file-uploader-widget-edit", host: { properties: { "class": "this.__class" }, styleAttribute: "border-color: rgba(var(--ax-comp-editor-border-color)); !important;" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPFileUploaderWidgetEditComponent, isStandalone: true, selector: "axp-file-uploader-widget-edit", host: { properties: { "class": "this.__class" }, styleAttribute: "border-color: rgba(var(--ax-comp-editor-border-color)); !important;" }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-justify-end ax-border-b ax-p-2" *translate="let t">
+      @if(!readonly()) {
       <!-- Add Item Button -->
       <ax-button class="ax-sm" [text]="t('@document-management:actions.add-item') | async" [color]="'primary'">
         <ax-prefix>
@@ -7436,6 +7587,7 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
           </ax-button-item-list>
         </ax-dropdown-panel>
       </ax-button>
+      }
     </div>
     <div class="ax-p-2">
       <axp-file-list
@@ -7454,6 +7606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'axp-file-uploader-widget-edit',
                     template: `
     <div class="ax-flex ax-justify-end ax-border-b ax-p-2" *translate="let t">
+      @if(!readonly()) {
       <!-- Add Item Button -->
       <ax-button class="ax-sm" [text]="t('@document-management:actions.add-item') | async" [color]="'primary'">
         <ax-prefix>
@@ -7474,6 +7627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
           </ax-button-item-list>
         </ax-dropdown-panel>
       </ax-button>
+      }
     </div>
     <div class="ax-p-2">
       <axp-file-list
@@ -16000,7 +16154,7 @@ class AXPFieldsetWidgetViewComponent extends AXPLayoutWidgetComponent {
         this.icon = computed(() => this.options()['icon'] || '', ...(ngDevMode ? [{ debugName: "icon" }] : []));
         this.collapsible = computed(() => this.options()['collapsible'] || false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
         this.isOpen = linkedSignal(() => this.options()['isOpen'] ?? true);
-        this.variant = computed(() => this.options()['variant'] || 'card', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.look = computed(() => this.options()['look'] || 'card', ...(ngDevMode ? [{ debugName: "look" }] : []));
     }
     ngOnInit() {
         super.ngOnInit();
@@ -16011,11 +16165,11 @@ class AXPFieldsetWidgetViewComponent extends AXPLayoutWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFieldsetWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget", usesInheritance: true, ngImport: i0, template: "@switch (variant()) {\n  <!-- fieldset Style -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      <legend class=\"legend\" (click)=\"toggleCollapse()\">\n        @if (icon()) {\n          <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n        }\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      </legend>\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @if (description()) {\n            <p class=\"description\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Card Style -->\n  @case ('card') {\n    <div class=\"card\">\n      <div class=\"legend\" (click)=\"toggleCollapse()\">\n        <div class=\"caption\">\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          @if (description()) {\n            <p class=\"description\">{{ description() | translate | async }}</p>\n          }\n        </div>\n        <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n          @if (collapsible()) {\n            <i class=\"fa-solid fa-chevron-down\"></i>\n          }\n        </div>\n      </div>\n\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n  <!-- Group Line style -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      <legend class=\"legend\">\n        @if (icon()) {\n          <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n        }\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      </legend>\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @if (description()) {\n            <p class=\"description\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- End of switch-->\n}\n", styles: [":host{display:block;height:fit-content;width:100%;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))}:host .fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--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))}:host .fieldset .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;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))}:host .fieldset .content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .group{border-top-width:2px;padding-left:1rem;padding-right:1rem;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))}:host .group .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;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))}:host .group .content{margin-left:-1rem;margin-right:-1rem;padding-top:.5rem}:host .group .content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .card{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))}:host .card .legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.25rem}:host .card .legend .caption{display:flex;flex-direction:column}:host .card .legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host .card .legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host .card .legend .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .card .content{border-top-width:1px;padding:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget", usesInheritance: true, ngImport: i0, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    <h3 class=\"title\">{{ title() | translate | async }}</h3>\n  </legend>\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @if (description()) {\n    <p class=\"description\">\n      {{ description() | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- Card Style -->\n@case ('card') {\n<div class=\"card\">\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      @if (description()) {\n      <p class=\"description\">{{ description() | translate | async }}</p>\n      }\n    </div>\n    <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n      @if (collapsible()) {\n      <i class=\"fa-solid fa-chevron-down\"></i>\n      }\n    </div>\n  </div>\n\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</div>\n}\n<!-- Group Line style -->\n@case ('group') {\n<fieldset class=\"group\">\n  <legend class=\"legend\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    <h3 class=\"title\">{{ title() | translate | async }}</h3>\n  </legend>\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @if (description()) {\n    <p class=\"description\">\n      {{ description() | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- End of switch-->\n}", styles: [":host{display:block;height:fit-content;width:100%;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))}:host .fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--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))}:host .fieldset .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;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))}:host .fieldset .content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .group{border-top-width:2px;padding-left:1rem;padding-right:1rem;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))}:host .group .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;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))}:host .group .content{margin-left:-1rem;margin-right:-1rem;padding-top:.5rem}:host .group .content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .card{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))}:host .card .legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.25rem}:host .card .legend .caption{display:flex;flex-direction:column}:host .card .legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host .card .legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host .card .legend .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .card .content{border-top-width:1px;padding:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFieldsetWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-fieldset-widget', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPLayoutBuilderModule, AXTranslationModule], standalone: true, template: "@switch (variant()) {\n  <!-- fieldset Style -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      <legend class=\"legend\" (click)=\"toggleCollapse()\">\n        @if (icon()) {\n          <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n        }\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      </legend>\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @if (description()) {\n            <p class=\"description\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Card Style -->\n  @case ('card') {\n    <div class=\"card\">\n      <div class=\"legend\" (click)=\"toggleCollapse()\">\n        <div class=\"caption\">\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          @if (description()) {\n            <p class=\"description\">{{ description() | translate | async }}</p>\n          }\n        </div>\n        <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n          @if (collapsible()) {\n            <i class=\"fa-solid fa-chevron-down\"></i>\n          }\n        </div>\n      </div>\n\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n  <!-- Group Line style -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      <legend class=\"legend\">\n        @if (icon()) {\n          <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n        }\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      </legend>\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @if (description()) {\n            <p class=\"description\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- End of switch-->\n}\n", styles: [":host{display:block;height:fit-content;width:100%;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))}:host .fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--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))}:host .fieldset .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;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))}:host .fieldset .content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .group{border-top-width:2px;padding-left:1rem;padding-right:1rem;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))}:host .group .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;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))}:host .group .content{margin-left:-1rem;margin-right:-1rem;padding-top:.5rem}:host .group .content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .card{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))}:host .card .legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.25rem}:host .card .legend .caption{display:flex;flex-direction:column}:host .card .legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host .card .legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host .card .legend .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .card .content{border-top-width:1px;padding:1.25rem}\n"] }]
+            args: [{ selector: 'axp-fieldset-widget', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPLayoutBuilderModule, AXTranslationModule], standalone: true, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    <h3 class=\"title\">{{ title() | translate | async }}</h3>\n  </legend>\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @if (description()) {\n    <p class=\"description\">\n      {{ description() | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- Card Style -->\n@case ('card') {\n<div class=\"card\">\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      @if (description()) {\n      <p class=\"description\">{{ description() | translate | async }}</p>\n      }\n    </div>\n    <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n      @if (collapsible()) {\n      <i class=\"fa-solid fa-chevron-down\"></i>\n      }\n    </div>\n  </div>\n\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</div>\n}\n<!-- Group Line style -->\n@case ('group') {\n<fieldset class=\"group\">\n  <legend class=\"legend\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    <h3 class=\"title\">{{ title() | translate | async }}</h3>\n  </legend>\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @if (description()) {\n    <p class=\"description\">\n      {{ description() | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- End of switch-->\n}", styles: [":host{display:block;height:fit-content;width:100%;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))}:host .fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--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))}:host .fieldset .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;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))}:host .fieldset .content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .group{border-top-width:2px;padding-left:1rem;padding-right:1rem;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))}:host .group .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;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))}:host .group .content{margin-left:-1rem;margin-right:-1rem;padding-top:.5rem}:host .group .content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .card{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))}:host .card .legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.25rem}:host .card .legend .caption{display:flex;flex-direction:column}:host .card .legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host .card .legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host .card .legend .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .card .content{border-top-width:1px;padding:1.25rem}\n"] }]
         }] });
 
 var fieldsetWidgetView_component = /*#__PURE__*/Object.freeze({
@@ -16520,6 +16674,7 @@ class AXPGridItemWidgetViewComponent extends AXPLayoutWidgetComponent {
         this.colSpan = computed(() => this.options()['colSpan'], ...(ngDevMode ? [{ debugName: "colSpan" }] : []));
         this.colStart = computed(() => this.options()['colStart'], ...(ngDevMode ? [{ debugName: "colStart" }] : []));
         this.colEnd = computed(() => this.options()['colEnd'], ...(ngDevMode ? [{ debugName: "colEnd" }] : []));
+        this.hidden = computed(() => this.options()['hidden'], ...(ngDevMode ? [{ debugName: "hidden" }] : []));
         this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id, ...(ngDevMode ? [{ debugName: "flexAlignItems" }] : []));
         this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id, ...(ngDevMode ? [{ debugName: "flexJustifyContent" }] : []));
         this.flexWrap = computed(() => this.options()['flexWrap']?.id, ...(ngDevMode ? [{ debugName: "flexWrap" }] : []));
@@ -16549,6 +16704,7 @@ class AXPGridItemWidgetViewComponent extends AXPLayoutWidgetComponent {
             cls[`lg:ax-col-start-${this.colStart()}`] = true;
         if (this.colEnd() != null)
             cls[`lg:ax-col-end-${this.colEnd()}`] = true;
+        cls[`ax-hidden`] = this.hidden();
         return cls;
     }
     get __style() {
@@ -16574,8 +16730,10 @@ class AXPGridItemWidgetViewComponent extends AXPLayoutWidgetComponent {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     @for (child of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
-      </ng-container>
+      @if (!this.hidden()) {
+        <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
+        </ng-container>
+      }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -16585,8 +16743,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'axp-grid-layout-item-widget',
                     template: `
     @for (child of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
-      </ng-container>
+      @if (!this.hidden()) {
+        <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
+        </ng-container>
+      }
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,