@acorex/platform 21.0.0-next.10 → 21.0.0-next.11

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

@@ -3585,7 +3585,7 @@ class AXPAddressWidgetService {
                             .setDirection('row')
                             .setGap('16px')
                             .formField('@location-management:locations.entities.location.fields.country', (field) => {
-                            field.path('countryId');
+                            field.path('country.id');
                             field.customWidget('lookup-editor', {
                                 entity: 'LocationManagement.GeographicRegion',
                                 look: 'select',
@@ -3599,7 +3599,7 @@ class AXPAddressWidgetService {
                             });
                         })
                             .formField('@location-management:locations.entities.location.fields.state', (field) => {
-                            field.path('stateId');
+                            field.path('state.id');
                             field.customWidget('lookup-editor', {
                                 entity: 'LocationManagement.GeographicRegion',
                                 look: 'select',
@@ -3612,15 +3612,15 @@ class AXPAddressWidgetService {
                                 filter: {
                                     logic: 'and',
                                     filters: [
-                                        { field: 'parentId', operator: { type: 'equal' }, value: '{{ context.eval("countryId") }}' },
+                                        { field: 'parentId', operator: { type: 'equal' }, value: '{{ context.eval("country.id") }}' },
                                         { field: 'type.code', operator: { type: 'equal' }, value: 'state' },
                                     ],
                                 },
-                                triggers: [{ event: "{{ events.context('countryId') }}", action: '{{ widget.refresh() }}' }],
+                                triggers: [{ event: "{{ events.context('country.id') }}", action: '{{ widget.refresh() }}' }],
                             });
                         })
                             .formField('@location-management:locations.entities.location.fields.city', (field) => {
-                            field.path('cityId');
+                            field.path('city.id');
                             field.customWidget('lookup-editor', {
                                 entity: 'LocationManagement.GeographicRegion',
                                 look: 'select',
@@ -3633,11 +3633,11 @@ class AXPAddressWidgetService {
                                 filter: {
                                     logic: 'and',
                                     filters: [
-                                        { field: 'parentId', operator: { type: 'equal' }, value: '{{ context.eval("stateId") }}' },
+                                        { field: 'parentId', operator: { type: 'equal' }, value: '{{ context.eval("state.id") }}' },
                                         { field: 'type.code', operator: { type: 'equal' }, value: 'city' },
                                     ],
                                 },
-                                triggers: [{ event: "{{ events.context('stateId') }}", action: '{{ widget.refresh() }}' }],
+                                triggers: [{ event: "{{ events.context('state.id') }}", action: '{{ widget.refresh() }}' }],
                             });
                         });
                     })
@@ -3689,9 +3689,9 @@ class AXPAddressWidgetService {
             return {
                 street1: value.street1 ?? '',
                 street2: value.street2,
-                countryId: value.countryId,
-                stateId: value.stateId,
-                cityId: value.cityId,
+                country: value.country,
+                state: value.state,
+                city: value.city,
                 postalCode: value.postalCode,
                 coordinates: value.coordinates,
                 full: value.full ?? this.formatAddress(value),
@@ -3702,9 +3702,9 @@ class AXPAddressWidgetService {
         return {
             street1: '',
             street2: '',
-            countryId: undefined,
-            stateId: undefined,
-            cityId: undefined,
+            country: undefined,
+            state: undefined,
+            city: undefined,
             postalCode: '',
             coordinates: undefined,
             full: value?.toString() || '',
@@ -4199,6 +4199,8 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         this.settingsService = inject(AXPSettingsService);
         this.multiple = computed(() => this.options()['multiple'], ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         this.clearButton = computed(() => this.options()['clearButton'], ...(ngDevMode ? [{ debugName: "clearButton" }] : []));
+        this.minValue = computed(() => this.options()['minValue'], ...(ngDevMode ? [{ debugName: "minValue" }] : []));
+        this.maxValue = computed(() => this.options()['maxValue'], ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
         this.dateMode = computed(() => this.options()['mode'] || 'short', ...(ngDevMode ? [{ debugName: "dateMode" }] : []));
         this.format = computed(() => {
             const rawValue = this.options()['format'];
@@ -4270,6 +4272,8 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
           class="ax-col-span-12"
           [ngModel]="datetime"
           (onValueChanged)="handleValueChange($event, $index)"
+          [minValue]="minValue()"
+          [maxValue]="maxValue()"
           [disabled]="disabled()"
           [readonly]="readonly()"
           [format]="calendarFormat()"
@@ -4317,6 +4321,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           class="ax-col-span-12"
           [ngModel]="datetime"
           (onValueChanged)="handleValueChange($event, $index)"
+          [minValue]="minValue()"
+          [maxValue]="maxValue()"
           [disabled]="disabled()"
           [readonly]="readonly()"
           [format]="calendarFormat()"
@@ -6787,7 +6793,9 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
                 const cleanedFilters = AXPCleanNestedFilters([this.filter()]);
                 if (cleanedFilters.length > 0) {
                     untracked(() => {
-                        this.dataSource()?.filter(this.filterOperatorMiddleware.transformFilter(cleanedFilters[0]));
+                        setTimeout(() => {
+                            this.dataSource()?.filter(this.filterOperatorMiddleware.transformFilter(cleanedFilters[0]));
+                        });
                     });
                 }
             }
@@ -10562,9 +10570,8 @@ class AXPFileListComponent {
         const key = file.id ?? String(index);
         // Start with default actions
         const defaultActions = this.getDefaultActions(file);
-        // Get global actions from FileUploaderWebhookKeys.Actions hook
-        const globalActions = this.globalActions();
         // Get per-file actions from FileUploaderWebhookKeys.FileItem.Actions hook
+        // Note: globalActions are only for toolbar, not for per-file actions
         const fileItemPayload = await this.hooks.runAsync(FileUploaderWebhookKeys.FileItem.Actions, {
             host: this.host(),
             item: file,
@@ -10574,8 +10581,8 @@ class AXPFileListComponent {
             capabilities: {},
             actions: [],
         });
-        // Combine all actions: default + global + file-item specific
-        const allActions = [...defaultActions, ...globalActions, ...(fileItemPayload?.actions ?? [])];
+        // Combine all actions: default + file-item specific (exclude globalActions from per-file items)
+        const allActions = [...defaultActions, ...(fileItemPayload?.actions ?? [])];
         // Filter actions based on plugins and excludePlugins
         const enabledPlugins = this.plugins()?.map((p) => p.name) ?? [];
         const excludedPlugins = this.excludePlugins() ?? [];
@@ -12539,18 +12546,15 @@ class AXPQrcodeWidgetColumnComponent extends AXPColumnWidgetComponent {
             dialog
                 .setTitle('QR Code')
                 .setSize('md')
-                .setContext({ content: contentValue })
-                .content((layoutBuilder) => {
-                layoutBuilder.flex((flex) => {
-                    flex.mode('view').formField('Preview', (field) => {
-                        field.readonly(true).customWidget('qrcode', {
-                            path: 'content',
-                            size: this.size(),
-                            level: this.level(),
-                            color: this.color(),
-                            outputType: this.outputType(),
-                        });
-                    });
+                .setContext({ qr: contentValue })
+                .content((content) => {
+                content.setDirection('column').setGap('24px').setAlignItems('center').customWidget('qrcode', {
+                    path: 'qr',
+                    size: this.size(),
+                    level: this.level(),
+                    color: this.color(),
+                    readonly: true,
+                    outputType: this.outputType(),
                 });
             })
                 .setActions((actions) => {
@@ -12564,8 +12568,7 @@ class AXPQrcodeWidgetColumnComponent extends AXPColumnWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPQrcodeWidgetColumnComponent, isStandalone: true, selector: "axp-qrcode-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-items-center ax-gap-2">
       @if (rawValue) {
-        <span>QR Code</span>
-        <ax-button color="default" (click)="showPopup()">
+        <ax-button class="ax-sm" look="twotone" color="default" (click)="showPopup()">
           <ax-icon>
             <i class="fa-regular fa-qrcode"></i>
           </ax-icon>
@@ -12584,8 +12587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     template: `
     <div class="ax-flex ax-items-center ax-gap-2">
       @if (rawValue) {
-        <span>QR Code</span>
-        <ax-button color="default" (click)="showPopup()">
+        <ax-button class="ax-sm" look="twotone" color="default" (click)="showPopup()">
           <ax-icon>
             <i class="fa-regular fa-qrcode"></i>
           </ax-icon>
@@ -12727,7 +12729,7 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPQrcodeWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPQrcodeWidgetEditComponent, isStandalone: true, selector: "axp-qrcode-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: "<!-- Main Container -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-p-3 ax-w-fit\">\n  <div class=\"ax-flex ax-justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-3\" #qr>\n      <!-- QR Code Display or Empty Placeholder -->\n      @if (value()) {\n      <!-- Display QR Code when value exists -->\n      <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n      </ax-qrcode>\n      } @else {\n      <!-- Empty State: Show placeholder when value is null or empty -->\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center\" [style.width.px]=\"size()\"\n        [style.height.px]=\"size()\">\n        <ax-icon icon=\"fa-light fa-qrcode\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-3\"></ax-icon>\n        <div class=\"ax-text-sm ax-text-gray-500\">\n          {{ '@general:state-message.empty.title' | translate | async }}\n        </div>\n      </div>\n      }\n\n      <!-- Action Buttons Section -->\n      @if(!readonly())\n      {\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-pt-4\">\n\n        <!-- Edit Button: Opens popover to edit QR code content -->\n        <ax-button #editBtn look=\"twotone\" [title]=\"('@general:actions.edit.title' | translate | async)!\"\n          (onClick)=\"beginEdit()\">\n          <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n        </ax-button>\n\n        <!-- Edit Popover: Text input for editing QR code content -->\n        <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n          <div\n            class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-5 ax-w-full sm:ax-w-96\">\n            <!-- Text Input for QR Code Content -->\n            <ax-text-box [value]=\"draft()\" [disabled]=\"disabled()\" [readonly]=\"readonly()\"\n              [placeholder]=\"placeholder() | translate | async\" (onValueChanged)=\"onDraftChange($event)\">\n              @if (hasClearButton()) {\n              <ax-clear-button></ax-clear-button>\n              }\n            </ax-text-box>\n            <!-- Popover Action Buttons -->\n            <div class=\"ax-flex ax-justify-end ax-gap-2 ax-mt-3\">\n              <ax-button look=\"outline\" class=\"ax-sm\" [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n                (onClick)=\"cancelEdit(); po.close()\"></ax-button>\n              <ax-button look=\"solid\" class=\"ax-sm\" color=\"primary\"\n                [text]=\"('@general:actions.submit.title' | translate | async)!\"\n                (onClick)=\"applyDraft(); po.close()\"></ax-button>\n            </div>\n          </div>\n        </ax-popover>\n\n        <!-- Upload Button: Upload text file to set QR code content -->\n        <ax-button look=\"twotone\" [title]=\"('@general:actions.upload.title' | translate | async)!\"\n          (onClick)=\"fileInput.click()\">\n          <input #fileInput type=\"file\" accept=\"text/plain\" class=\"ax-hidden\" (change)=\"onFileSelected($event)\" />\n          <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n        </ax-button>\n\n        <!-- Export Button: Download QR code as image (only shown when value exists) -->\n        @if(value()) {\n        <ax-button look=\"twotone\" [title]=\"('@general:actions.export.title' | translate | async)!\"\n          (onClick)=\"downloadQr(qr)\">\n          <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n        </ax-button>\n        }\n\n        <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n        @if(!readonly() && value()) {\n        <ax-button look=\"twotone\" [title]=\"('@general:actions.delete.title' | translate | async)!\"\n          (onClick)=\"clearValue()\">\n          <ax-icon icon=\"ax-text-danger fa-light fa-trash-can\"></ax-icon>\n        </ax-button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPQrcodeWidgetEditComponent, isStandalone: true, selector: "axp-qrcode-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: "<!-- Main Container -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-p-3 ax-w-fit\">\n  <div class=\"ax-flex ax-justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-3\" #qr>\n      <!-- QR Code Display or Empty Placeholder -->\n      @if (value()) {\n        <!-- Display QR Code when value exists -->\n        <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n        </ax-qrcode>\n      } @else {\n        <!-- Empty State: Show placeholder when value is null or empty -->\n        <div\n          class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center\"\n          [style.width.px]=\"size()\"\n          [style.height.px]=\"size()\"\n        >\n          <ax-icon icon=\"fa-light fa-qrcode\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-3\"></ax-icon>\n          <div class=\"ax-text-sm ax-text-gray-500\">\n            {{ '@general:state-message.empty.title' | translate | async }}\n          </div>\n        </div>\n      }\n\n      <!-- Action Buttons Section -->\n      @if (!readonly()) {\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-pt-4\">\n          <!-- Edit Button: Opens popover to edit QR code content -->\n          <ax-button\n            #editBtn\n            look=\"twotone\"\n            [title]=\"('@general:actions.edit.title' | translate | async)!\"\n            (onClick)=\"beginEdit()\"\n          >\n            <!-- Edit Popover: Text input for editing QR code content -->\n            <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n              <div\n                class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-5 ax-w-full sm:ax-w-96\"\n              >\n                <!-- Text Input for QR Code Content -->\n                <ax-text-box\n                  [value]=\"draft()\"\n                  [disabled]=\"disabled()\"\n                  [readonly]=\"readonly()\"\n                  [placeholder]=\"placeholder() | translate | async\"\n                  (onValueChanged)=\"onDraftChange($event)\"\n                >\n                  @if (hasClearButton()) {\n                    <ax-clear-button></ax-clear-button>\n                  }\n                </ax-text-box>\n                <!-- Popover Action Buttons -->\n                <div class=\"ax-flex ax-justify-end ax-gap-2 ax-mt-3\">\n                  <ax-button\n                    look=\"outline\"\n                    class=\"ax-sm\"\n                    [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n                    (onClick)=\"cancelEdit(); po.close()\"\n                  ></ax-button>\n                  <ax-button\n                    look=\"solid\"\n                    class=\"ax-sm\"\n                    color=\"primary\"\n                    [text]=\"('@general:actions.submit.title' | translate | async)!\"\n                    (onClick)=\"applyDraft(); po.close()\"\n                  ></ax-button>\n                </div>\n              </div>\n            </ax-popover>\n            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n          </ax-button>\n\n          <!-- Upload Button: Upload text file to set QR code content -->\n          <!-- <ax-button\n            look=\"twotone\"\n            [title]=\"('@general:actions.upload.title' | translate | async)!\"\n            (onClick)=\"fileInput.click()\"\n          >\n            <input #fileInput type=\"file\" accept=\"text/plain\" class=\"ax-hidden\" (change)=\"onFileSelected($event)\" />\n            <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n          </ax-button> -->\n\n          <!-- Export Button: Download QR code as image (only shown when value exists) -->\n          @if (value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.export.title' | translate | async)!\"\n              (onClick)=\"downloadQr(qr)\"\n            >\n              <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n          @if (!readonly() && value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"clearValue()\"\n            >\n              <ax-icon icon=\"ax-text-danger fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPQrcodeWidgetEditComponent, decorators: [{
             type: Component,
@@ -12740,7 +12742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AXTranslationModule,
                         AsyncPipe,
                         FormsModule,
-                    ], host: { class: 'ax-block ax-flex-1' }, template: "<!-- Main Container -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-p-3 ax-w-fit\">\n  <div class=\"ax-flex ax-justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-3\" #qr>\n      <!-- QR Code Display or Empty Placeholder -->\n      @if (value()) {\n      <!-- Display QR Code when value exists -->\n      <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n      </ax-qrcode>\n      } @else {\n      <!-- Empty State: Show placeholder when value is null or empty -->\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center\" [style.width.px]=\"size()\"\n        [style.height.px]=\"size()\">\n        <ax-icon icon=\"fa-light fa-qrcode\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-3\"></ax-icon>\n        <div class=\"ax-text-sm ax-text-gray-500\">\n          {{ '@general:state-message.empty.title' | translate | async }}\n        </div>\n      </div>\n      }\n\n      <!-- Action Buttons Section -->\n      @if(!readonly())\n      {\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-pt-4\">\n\n        <!-- Edit Button: Opens popover to edit QR code content -->\n        <ax-button #editBtn look=\"twotone\" [title]=\"('@general:actions.edit.title' | translate | async)!\"\n          (onClick)=\"beginEdit()\">\n          <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n        </ax-button>\n\n        <!-- Edit Popover: Text input for editing QR code content -->\n        <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n          <div\n            class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-5 ax-w-full sm:ax-w-96\">\n            <!-- Text Input for QR Code Content -->\n            <ax-text-box [value]=\"draft()\" [disabled]=\"disabled()\" [readonly]=\"readonly()\"\n              [placeholder]=\"placeholder() | translate | async\" (onValueChanged)=\"onDraftChange($event)\">\n              @if (hasClearButton()) {\n              <ax-clear-button></ax-clear-button>\n              }\n            </ax-text-box>\n            <!-- Popover Action Buttons -->\n            <div class=\"ax-flex ax-justify-end ax-gap-2 ax-mt-3\">\n              <ax-button look=\"outline\" class=\"ax-sm\" [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n                (onClick)=\"cancelEdit(); po.close()\"></ax-button>\n              <ax-button look=\"solid\" class=\"ax-sm\" color=\"primary\"\n                [text]=\"('@general:actions.submit.title' | translate | async)!\"\n                (onClick)=\"applyDraft(); po.close()\"></ax-button>\n            </div>\n          </div>\n        </ax-popover>\n\n        <!-- Upload Button: Upload text file to set QR code content -->\n        <ax-button look=\"twotone\" [title]=\"('@general:actions.upload.title' | translate | async)!\"\n          (onClick)=\"fileInput.click()\">\n          <input #fileInput type=\"file\" accept=\"text/plain\" class=\"ax-hidden\" (change)=\"onFileSelected($event)\" />\n          <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n        </ax-button>\n\n        <!-- Export Button: Download QR code as image (only shown when value exists) -->\n        @if(value()) {\n        <ax-button look=\"twotone\" [title]=\"('@general:actions.export.title' | translate | async)!\"\n          (onClick)=\"downloadQr(qr)\">\n          <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n        </ax-button>\n        }\n\n        <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n        @if(!readonly() && value()) {\n        <ax-button look=\"twotone\" [title]=\"('@general:actions.delete.title' | translate | async)!\"\n          (onClick)=\"clearValue()\">\n          <ax-icon icon=\"ax-text-danger fa-light fa-trash-can\"></ax-icon>\n        </ax-button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n</div>" }]
+                    ], host: { class: 'ax-block ax-flex-1' }, template: "<!-- Main Container -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-p-3 ax-w-fit\">\n  <div class=\"ax-flex ax-justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-3\" #qr>\n      <!-- QR Code Display or Empty Placeholder -->\n      @if (value()) {\n        <!-- Display QR Code when value exists -->\n        <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n        </ax-qrcode>\n      } @else {\n        <!-- Empty State: Show placeholder when value is null or empty -->\n        <div\n          class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center\"\n          [style.width.px]=\"size()\"\n          [style.height.px]=\"size()\"\n        >\n          <ax-icon icon=\"fa-light fa-qrcode\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-3\"></ax-icon>\n          <div class=\"ax-text-sm ax-text-gray-500\">\n            {{ '@general:state-message.empty.title' | translate | async }}\n          </div>\n        </div>\n      }\n\n      <!-- Action Buttons Section -->\n      @if (!readonly()) {\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-pt-4\">\n          <!-- Edit Button: Opens popover to edit QR code content -->\n          <ax-button\n            #editBtn\n            look=\"twotone\"\n            [title]=\"('@general:actions.edit.title' | translate | async)!\"\n            (onClick)=\"beginEdit()\"\n          >\n            <!-- Edit Popover: Text input for editing QR code content -->\n            <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n              <div\n                class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-5 ax-w-full sm:ax-w-96\"\n              >\n                <!-- Text Input for QR Code Content -->\n                <ax-text-box\n                  [value]=\"draft()\"\n                  [disabled]=\"disabled()\"\n                  [readonly]=\"readonly()\"\n                  [placeholder]=\"placeholder() | translate | async\"\n                  (onValueChanged)=\"onDraftChange($event)\"\n                >\n                  @if (hasClearButton()) {\n                    <ax-clear-button></ax-clear-button>\n                  }\n                </ax-text-box>\n                <!-- Popover Action Buttons -->\n                <div class=\"ax-flex ax-justify-end ax-gap-2 ax-mt-3\">\n                  <ax-button\n                    look=\"outline\"\n                    class=\"ax-sm\"\n                    [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n                    (onClick)=\"cancelEdit(); po.close()\"\n                  ></ax-button>\n                  <ax-button\n                    look=\"solid\"\n                    class=\"ax-sm\"\n                    color=\"primary\"\n                    [text]=\"('@general:actions.submit.title' | translate | async)!\"\n                    (onClick)=\"applyDraft(); po.close()\"\n                  ></ax-button>\n                </div>\n              </div>\n            </ax-popover>\n            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n          </ax-button>\n\n          <!-- Upload Button: Upload text file to set QR code content -->\n          <!-- <ax-button\n            look=\"twotone\"\n            [title]=\"('@general:actions.upload.title' | translate | async)!\"\n            (onClick)=\"fileInput.click()\"\n          >\n            <input #fileInput type=\"file\" accept=\"text/plain\" class=\"ax-hidden\" (change)=\"onFileSelected($event)\" />\n            <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n          </ax-button> -->\n\n          <!-- Export Button: Download QR code as image (only shown when value exists) -->\n          @if (value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.export.title' | translate | async)!\"\n              (onClick)=\"downloadQr(qr)\"\n            >\n              <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n          @if (!readonly() && value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"clearValue()\"\n            >\n              <ax-icon icon=\"ax-text-danger fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 var qrcodeWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -12751,7 +12753,6 @@ var qrcodeWidgetEdit_component = /*#__PURE__*/Object.freeze({
 class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.content = computed(() => this.getValue(), ...(ngDevMode ? [{ debugName: "content" }] : []));
         this.size = computed(() => this.options()['size'] ?? 200, ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.level = computed(() => this.options()['level']?.id ?? 'M', ...(ngDevMode ? [{ debugName: "level" }] : []));
         this.color = computed(() => AXColorUtil.colorStringToHex(this.options()['color'] ?? '#000000'), ...(ngDevMode ? [{ debugName: "color" }] : []));
@@ -12764,14 +12765,9 @@ class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPQrcodeWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPQrcodeWidgetViewComponent, isStandalone: true, selector: "axp-qrcode-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    @if (this.content()) {
-      <ax-qrcode
-        [content]="this.content()"
-        [size]="size()"
-        [color]="color()"
-        [level]="level()"
-        [outputType]="outputType()"
-      >
+    {{ getValue() }}
+    @if (getValue()) {
+      <ax-qrcode [content]="getValue()" [size]="size()" [color]="color()" [level]="level()" [outputType]="outputType()">
       </ax-qrcode>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -12781,14 +12777,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{
                     selector: 'axp-qrcode-widget',
                     template: `
-    @if (this.content()) {
-      <ax-qrcode
-        [content]="this.content()"
-        [size]="size()"
-        [color]="color()"
-        [level]="level()"
-        [outputType]="outputType()"
-      >
+    {{ getValue() }}
+    @if (getValue()) {
+      <ax-qrcode [content]="getValue()" [size]="size()" [color]="color()" [level]="level()" [outputType]="outputType()">
       </ax-qrcode>
     }
   `,
@@ -15717,11 +15708,11 @@ class AXPFieldsetWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPFieldsetWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget-view", usesInheritance: true, ngImport: i0, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  @if (shouldShowTitle()) {\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    {{ title() | translate | async }}\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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  @if (shouldShowTitle()) {\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      @if (icon()) {\n      <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n      }\n      <div class=\"text-content\">\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n        @if (description()) {\n        <p class=\"description\">{{ description() | translate | async }}</p>\n        }\n      </div>\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\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\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  @if (shouldShowTitle()) {\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    <div class=\"title-line\"></div>\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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<!-- Container Style -->\n@case ('container') {\n<div class=\"container\">\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<!-- 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;min-width:0px;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>.legend .title{margin:0;flex-shrink:0;white-space:nowrap;padding:0}:host>.fieldset>.content{display:grid;gap:1rem}:host>.fieldset>.content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.group{padding:0;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{margin-bottom:1rem;display:flex;width:100%;flex-direction:column;gap:.25rem;padding:0}:host>.group>.legend .title{margin:0;width:fit-content;white-space:nowrap;padding:0;font-size:1rem;line-height:1.5rem;font-weight:500}:host>.group>.legend .title-line{margin-top:.25rem;height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host>.group>.content{display:grid;gap:1rem}: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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.625rem 1.25rem}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:.5rem}: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 .caption .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host>.card>.content{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem;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>.container{display:grid;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget-view", usesInheritance: true, ngImport: i0, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  @if (shouldShowTitle()) {\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    {{ title() | translate | async }}\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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  @if (shouldShowTitle()) {\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      @if (icon()) {\n      <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n      }\n      <div class=\"text-content\">\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n        @if (description()) {\n        <p class=\"description\">{{ description() | translate | async }}</p>\n        }\n      </div>\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\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\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  @if (shouldShowTitle()) {\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    <div class=\"title-line\"></div>\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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<!-- Container Style -->\n@case ('container') {\n<div class=\"container\">\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<!-- End of switch-->\n}", styles: [":host{display:block;height:100%;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;min-width:0px;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>.legend .title{margin:0;flex-shrink:0;white-space:nowrap;padding:0}:host>.fieldset>.content{display:grid;gap:1rem}:host>.fieldset>.content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.group{padding:0;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{margin-bottom:1rem;display:flex;width:100%;flex-direction:column;gap:.25rem;padding:0}:host>.group>.legend .title{margin:0;width:fit-content;white-space:nowrap;padding:0;font-size:1rem;line-height:1.5rem;font-weight:500}:host>.group>.legend .title-line{margin-top:.25rem;height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host>.group>.content{display:grid;gap:1rem}:host>.group>.content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.card{height:100%;overflow:hidden;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:.625rem 1.25rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:.5rem}: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 .caption .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host>.card>.content{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem;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>.container{display:grid;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPFieldsetWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-fieldset-widget-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPWidgetCoreModule, AXTranslationModule], standalone: true, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  @if (shouldShowTitle()) {\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    {{ title() | translate | async }}\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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  @if (shouldShowTitle()) {\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      @if (icon()) {\n      <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n      }\n      <div class=\"text-content\">\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n        @if (description()) {\n        <p class=\"description\">{{ description() | translate | async }}</p>\n        }\n      </div>\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\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\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  @if (shouldShowTitle()) {\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    <div class=\"title-line\"></div>\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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<!-- Container Style -->\n@case ('container') {\n<div class=\"container\">\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<!-- 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;min-width:0px;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>.legend .title{margin:0;flex-shrink:0;white-space:nowrap;padding:0}:host>.fieldset>.content{display:grid;gap:1rem}:host>.fieldset>.content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.group{padding:0;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{margin-bottom:1rem;display:flex;width:100%;flex-direction:column;gap:.25rem;padding:0}:host>.group>.legend .title{margin:0;width:fit-content;white-space:nowrap;padding:0;font-size:1rem;line-height:1.5rem;font-weight:500}:host>.group>.legend .title-line{margin-top:.25rem;height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host>.group>.content{display:grid;gap:1rem}: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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.625rem 1.25rem}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:.5rem}: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 .caption .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host>.card>.content{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem;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>.container{display:grid;gap:1rem}\n"] }]
+            args: [{ selector: 'axp-fieldset-widget-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPWidgetCoreModule, AXTranslationModule], standalone: true, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  @if (shouldShowTitle()) {\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    {{ title() | translate | async }}\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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  @if (shouldShowTitle()) {\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      @if (icon()) {\n      <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n      }\n      <div class=\"text-content\">\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n        @if (description()) {\n        <p class=\"description\">{{ description() | translate | async }}</p>\n        }\n      </div>\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\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\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  @if (shouldShowTitle()) {\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    <div class=\"title-line\"></div>\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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<!-- Container Style -->\n@case ('container') {\n<div class=\"container\">\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<!-- End of switch-->\n}", styles: [":host{display:block;height:100%;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;min-width:0px;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>.legend .title{margin:0;flex-shrink:0;white-space:nowrap;padding:0}:host>.fieldset>.content{display:grid;gap:1rem}:host>.fieldset>.content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.group{padding:0;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{margin-bottom:1rem;display:flex;width:100%;flex-direction:column;gap:.25rem;padding:0}:host>.group>.legend .title{margin:0;width:fit-content;white-space:nowrap;padding:0;font-size:1rem;line-height:1.5rem;font-weight:500}:host>.group>.legend .title-line{margin-top:.25rem;height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host>.group>.content{display:grid;gap:1rem}:host>.group>.content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.card{height:100%;overflow:hidden;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:.625rem 1.25rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:.5rem}: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 .caption .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host>.card>.content{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem;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>.container{display:grid;gap:1rem}\n"] }]
         }] });
 
 var fieldsetWidgetView_component = /*#__PURE__*/Object.freeze({
@@ -24741,6 +24732,7 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPFormFieldWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPFormFieldWidgetViewComponent, isStandalone: true, selector: "axp-form-field-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-form-field>
+      @if (showLabel() || badge()) {
       <div class="ax-flex ax-gap-1 ax-items-center ax-justify-between">
         @if (showLabel()) {
           <ax-label [required]="isRequired()">{{ label() | translate | async }}</ax-label>
@@ -24750,6 +24742,7 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
           <span class="ax-text ax-p-1 ax-text-xs ax-rounded-md ">{{ badge() | translate | async }}</span>
         }
       </div>
+      }
       @for (node of children(); track $index) {
         <ng-container
           axp-widget-renderer
@@ -24769,6 +24762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     selector: 'axp-form-field-widget-view',
                     template: `
     <ax-form-field>
+      @if (showLabel() || badge()) {
       <div class="ax-flex ax-gap-1 ax-items-center ax-justify-between">
         @if (showLabel()) {
           <ax-label [required]="isRequired()">{{ label() | translate | async }}</ax-label>
@@ -24778,6 +24772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           <span class="ax-text ax-p-1 ax-text-xs ax-rounded-md ">{{ badge() | translate | async }}</span>
         }
       </div>
+      }
       @for (node of children(); track $index) {
         <ng-container
           axp-widget-renderer