@acorex/platform 21.0.0-next.72 → 21.0.0-next.74

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

@@ -21,7 +21,7 @@ import * as i1$6 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i6 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService, resolveMultiLanguageString } from '@acorex/core/translation';
-import { AXP_LOCALE_MANAGEMENT_PORT, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPClipBoardService, AXPSettingsService, AXPRegionalSetting, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, AXPFileStorageService, AXPFileActionsService, AXPStatusDefinitionProviderService, AXPRefreshEvent, AXPCommonSettings } from '@acorex/platform/common';
+import { AXP_LOCALE_MANAGEMENT_PORT, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPClipBoardService, AXPSettingsService, AXPRegionalSetting, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, AXPFileStorageService, AXPFileActionsService, normalizePositiveNumberOption, resolveEntityRowDisplayText, resolveEntityRowDisplayTitle, downloadGraphicFromElement, printGraphicFromElement, AXPStatusDefinitionProviderService, AXPRefreshEvent, AXPCommonSettings } from '@acorex/platform/common';
 import { AXPDeviceService, setSmart, AXPColorPaletteService, extractValue, shouldUseLocaleMapShape, buildLocaleTextMapValue, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPDataSourceDefinitionProviderService, sortByMultiLanguageString, applyQueryArray, chordToKbdItemKeys, objectKeyValueTransforms } from '@acorex/platform/core';
 import * as i1$4 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
@@ -31,11 +31,11 @@ import * as i1$5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3$1 from '@acorex/components/select-box';
 import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
-import { set, get, castArray, isNil, isNull, isEmpty, isNumber, isEqual, cloneDeep } from 'lodash-es';
+import { set, get, castArray, isNil, isNull, isEmpty, isNumber, defaultTo, isEqual, cloneDeep } from 'lodash-es';
 import * as i2$2 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPCommandService, provideQuerySetups } from '@acorex/platform/runtime';
-import { AXPConditionBuilderComponent, AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPStateMessageComponent, AXPOutcomeResultsViewerComponent, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPItemConfiguratorComponent, AXPRepeaterRowsLayoutComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex/platform/layout/components';
+import { AXPConditionBuilderComponent, AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPStateMessageComponent, AXPOutcomeResultsViewerComponent, AXPSignatureEditorService, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPItemConfiguratorComponent, AXPRepeaterRowsLayoutComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex/platform/layout/components';
 import { AXValidationModule, AXValidationService } from '@acorex/core/validation';
 import { AXColorUtil } from '@acorex/core/utils';
 import * as i2$3 from '@acorex/components/color-box';
@@ -3152,7 +3152,6 @@ const AXPAddressWidget = {
     },
 };
 
-//#region ----   Address Data Types   ----
 //#endregion
 
 //#region ----   Service   ----
@@ -4291,7 +4290,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Filter mode: grid/list filters with operation metadata and optional preset ranges -->\n@if (filterMode()) {\n  <!-- Simple filter UI: operation picker + one or two datetime inputs -->\n  @if (filterUi() === 'simple') {\n    <div class=\"ax-flex ax-items-center ax-w-full\">\n      <!-- Between operation: from / to range inputs -->\n      @if (operation().type === 'between') {\n        <div class=\"ax-flex-1 ax-flex ax-gap-2\">\n          <ax-datetime-box\n            #dateTimeBox\n            class=\"ax-w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n          <ax-datetime-box\n            class=\"ax-w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      } @else {\n        <!-- Single-value operations: equal, greaterThan, lessThan, isEmpty, isNotEmpty, etc. -->\n        <ax-datetime-box\n          #dateTimeBox\n          class=\"ax-flex-1\"\n          [format]=\"calendarFormat()\"\n          [picker]=\"format()\"\n          [depth]=\"inputDepth()\"\n          [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n          [disabled]=\"isValuelessOperation()\"\n          [ngModel]=\"filterValue()\"\n          (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n        >\n          <ax-clear-button></ax-clear-button>\n          @for (validation of validationRules(); track $index) {\n            <ax-validation-rule\n              [rule]=\"validation.rule\"\n              [message]=\"validation.options?.message\"\n              [options]=\"validation.options\"\n            ></ax-validation-rule>\n          }\n        </ax-datetime-box>\n      }\n\n      <!-- Operation selector (equal, between, isEmpty, ...) -->\n      <axp-filter-operations\n        type=\"datetime\"\n        [operations]=\"filterOperations()\"\n        [selectedOperation]=\"operation().type\"\n        (selectedOperationChange)=\"handleOperationChange($event)\"\n      ></axp-filter-operations>\n    </div>\n  } @else {\n    <!-- Presets filter UI: relative ranges (Today, This Week, ...) plus manual inputs -->\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-w-full\">\n      <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n      @if (resolvedPresets().length) {\n        <ax-select-box\n          #selectBox\n          class=\"ax-w-full\"\n          [dataSource]=\"translatedPresets()\"\n          [valueField]=\"'id'\"\n          [textField]=\"'title'\"\n          [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n          [ngModel]=\"selectedPresetId()\"\n          (onValueChanged)=\"handlePresetChange($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-select-box>\n      }\n\n      <!-- Manual preset: custom between range -->\n      @if (selectedManualPreset()?.operationType === 'between') {\n        <div class=\"ax-flex ax-gap-2 ax-mt-2 ax-w-full\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      }\n\n      <!-- Manual preset: single bound for greaterThan / lessThan -->\n      @if (\n        selectedManualPreset()?.operationType === 'greaterThan' ||\n        selectedManualPreset()?.operationType === 'lessThan'\n      ) {\n        <div class=\"ax-w-full ax-mt-2\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [ngModel]=\"filterValue()\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n          >\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n        </div>\n      }\n    </div>\n  }\n} @else {\n  <!-- Standard form edit: single date/time value bound to entity or form field -->\n  <ax-datetime-box\n    [ngModel]=\"getValue()\"\n    [picker]=\"format()\"\n    [depth]=\"inputDepth()\"\n    (onValueChanged)=\"handleValueChange($event)\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [format]=\"calendarFormat()\"\n    [placeholder]=\"placeholder()\"\n  >\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"validation.options?.message\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n    @if (clearButton()) {\n      <ax-clear-button></ax-clear-button>\n    }\n  </ax-datetime-box>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "calendarLook", "boxLook", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Filter mode: grid/list filters with operation metadata and optional preset ranges -->\n@if (filterMode()) {\n  <!-- Simple filter UI: operation picker + one or two datetime inputs -->\n  @if (filterUi() === 'simple') {\n    <div class=\"ax-flex ax-items-center ax-w-full\">\n      <!-- Between operation: from / to range inputs -->\n      @if (operation().type === 'between') {\n        <div class=\"ax-flex-1 ax-flex ax-gap-2\">\n          <ax-datetime-box\n            #dateTimeBox\n            class=\"ax-w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n          <ax-datetime-box\n            class=\"ax-w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      } @else {\n        <!-- Single-value operations: equal, greaterThan, lessThan, isEmpty, isNotEmpty, etc. -->\n        <ax-datetime-box\n          #dateTimeBox\n          class=\"ax-flex-1\"\n          [format]=\"calendarFormat()\"\n          [picker]=\"format()\"\n          [depth]=\"inputDepth()\"\n          [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n          [disabled]=\"isValuelessOperation()\"\n          [ngModel]=\"filterValue()\"\n          (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n        >\n          <ax-clear-button></ax-clear-button>\n          @for (validation of validationRules(); track $index) {\n            <ax-validation-rule\n              [rule]=\"validation.rule\"\n              [message]=\"validation.options?.message\"\n              [options]=\"validation.options\"\n            ></ax-validation-rule>\n          }\n        </ax-datetime-box>\n      }\n\n      <!-- Operation selector (equal, between, isEmpty, ...) -->\n      <axp-filter-operations\n        type=\"datetime\"\n        [operations]=\"filterOperations()\"\n        [selectedOperation]=\"operation().type\"\n        (selectedOperationChange)=\"handleOperationChange($event)\"\n      ></axp-filter-operations>\n    </div>\n  } @else {\n    <!-- Presets filter UI: relative ranges (Today, This Week, ...) plus manual inputs -->\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-w-full\">\n      <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n      @if (resolvedPresets().length) {\n        <ax-select-box\n          #selectBox\n          class=\"ax-w-full\"\n          [dataSource]=\"translatedPresets()\"\n          [valueField]=\"'id'\"\n          [textField]=\"'title'\"\n          [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n          [ngModel]=\"selectedPresetId()\"\n          (onValueChanged)=\"handlePresetChange($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-select-box>\n      }\n\n      <!-- Manual preset: custom between range -->\n      @if (selectedManualPreset()?.operationType === 'between') {\n        <div class=\"ax-flex ax-gap-2 ax-mt-2 ax-w-full\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      }\n\n      <!-- Manual preset: single bound for greaterThan / lessThan -->\n      @if (\n        selectedManualPreset()?.operationType === 'greaterThan' ||\n        selectedManualPreset()?.operationType === 'lessThan'\n      ) {\n        <div class=\"ax-w-full ax-mt-2\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [ngModel]=\"filterValue()\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n          >\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n        </div>\n      }\n    </div>\n  }\n} @else {\n  <!-- Standard form edit: single date/time value bound to entity or form field -->\n  <ax-datetime-box\n    [ngModel]=\"getValue()\"\n    [picker]=\"format()\"\n    [depth]=\"inputDepth()\"\n    (onValueChanged)=\"handleValueChange($event)\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [format]=\"calendarFormat()\"\n    [placeholder]=\"placeholder()\"\n  >\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"validation.options?.message\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n    @if (clearButton()) {\n      <ax-clear-button></ax-clear-button>\n    }\n  </ax-datetime-box>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "calendarLook", "yearRange", "boxLook", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -5384,18 +5383,40 @@ const AXPNumberBoxWidget = {
     },
 };
 
+//#region ---- Password Text Direction ----
+/** Default text direction for password inputs (Latin passwords in RTL locales). */
+const PASSWORD_DEFAULT_TEXT_DIRECTION = 'ltr';
+/**
+ * Resolves password field text direction. Defaults to LTR unless explicitly overridden.
+ */
+function resolvePasswordTextDirection(options) {
+    const direction = options['direction'];
+    if (direction === 'ltr' || direction === 'rtl') {
+        return direction;
+    }
+    return PASSWORD_DEFAULT_TEXT_DIRECTION;
+}
+//#endregion
+
 class AXPPasswordBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
         this.hasEyeIcon = this.options['hasEyeIcon'];
         this.showPassword = this.options['showPassword'];
+        this.textDirection = computed(() => resolvePasswordTextDirection(this.options), ...(ngDevMode ? [{ debugName: "textDirection" }] : /* istanbul ignore next */ []));
         this.show = signal(!!this.rawValue, ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
     }
+    get hostDir() {
+        return this.textDirection();
+    }
+    get hostDirection() {
+        return this.textDirection();
+    }
     toggleEye() {
         this.show.update((prev) => !prev);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPasswordBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPasswordBoxWidgetColumnComponent, isStandalone: true, selector: "axp-password-box-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPasswordBoxWidgetColumnComponent, isStandalone: true, selector: "axp-password-box-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, host: { properties: { "attr.dir": "this.hostDir", "style.direction": "this.hostDirection" } }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
     <span>{{ show() ? rawValue : '*******' }}</span>
     @if (hasEyeIcon) {
       <span
@@ -5433,7 +5454,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     inputs: ['rawValue', 'rowData'],
                 }]
-        }] });
+        }], propDecorators: { hostDir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], hostDirection: [{
+                type: HostBinding,
+                args: ['style.direction']
+            }] } });
 
 var passwordBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -5445,6 +5472,13 @@ class AXPPasswordBoxWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.hasClearButton = computed(() => this.options()['hasClearButton'], ...(ngDevMode ? [{ debugName: "hasClearButton" }] : /* istanbul ignore next */ []));
+        this.textDirection = computed(() => resolvePasswordTextDirection(this.options()), ...(ngDevMode ? [{ debugName: "textDirection" }] : /* istanbul ignore next */ []));
+    }
+    get hostDir() {
+        return this.textDirection();
+    }
+    get hostDirection() {
+        return this.textDirection();
     }
     get __class() {
         const cls = {};
@@ -5453,7 +5487,7 @@ class AXPPasswordBoxWidgetEditComponent extends AXPValueWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPasswordBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPasswordBoxWidgetEditComponent, isStandalone: true, selector: "axp-password-box-widget-edit", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPasswordBoxWidgetEditComponent, isStandalone: true, selector: "axp-password-box-widget-edit", host: { properties: { "attr.dir": "this.hostDir", "style.direction": "this.hostDirection", "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-password-box [ngModel]="getValue()" [disabled]="disabled()" (onValueChanged)="handleValueChanged($event)">
       @for (validation of validationRules(); track $index) {
         <ax-validation-rule
@@ -5489,7 +5523,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormsModule, AXDecoratorModule, AXPasswordBoxModule, AXValidationModule, AXFormModule],
                 }]
-        }], propDecorators: { __class: [{
+        }], propDecorators: { hostDir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], hostDirection: [{
+                type: HostBinding,
+                args: ['style.direction']
+            }], __class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -5506,6 +5546,7 @@ class AXPPasswordBoxWidgetViewComponent extends AXPValueWidgetComponent {
         this.hasCopyIcon = computed(() => this.options()['hasCopyIcon'], ...(ngDevMode ? [{ debugName: "hasCopyIcon" }] : /* istanbul ignore next */ []));
         this.hasEyeIcon = computed(() => this.options()['hasEyeIcon'], ...(ngDevMode ? [{ debugName: "hasEyeIcon" }] : /* istanbul ignore next */ []));
         this.showPassword = computed(() => this.options()['showPassword'], ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
+        this.textDirection = computed(() => resolvePasswordTextDirection(this.options()), ...(ngDevMode ? [{ debugName: "textDirection" }] : /* istanbul ignore next */ []));
         this.show = signal(false, ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
         this.clipboard = inject(AXPClipBoardService);
     }
@@ -5515,7 +5556,11 @@ class AXPPasswordBoxWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPasswordBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPasswordBoxWidgetViewComponent, isStandalone: true, selector: "axp-password-box-widget-view", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-col-start-1 ax-col-end-10 lg:ax-col-end-7">
-      <div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
+      <div
+        class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max"
+        [attr.dir]="textDirection()"
+        [style.direction]="textDirection()"
+      >
         <span>{{ show() ? internalValue() : '*******' }}</span>
         @if (hasEyeIcon()) {
           <span
@@ -5547,7 +5592,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-password-box-widget-view',
                     template: `
     <div class="ax-col-start-1 ax-col-end-10 lg:ax-col-end-7">
-      <div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
+      <div
+        class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max"
+        [attr.dir]="textDirection()"
+        [style.direction]="textDirection()"
+      >
         <span>{{ show() ? internalValue() : '*******' }}</span>
         @if (hasEyeIcon()) {
           <span
@@ -6387,19 +6436,49 @@ var richTextWidgetColumn_component = /*#__PURE__*/Object.freeze({
 class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ----   Services & Dependencies   ----
+        this.popupService = inject(AXPopupService);
+        this.translationService = inject(AXTranslationService);
+        this.wysiwygRef = viewChild('wysiwygRef', ...(ngDevMode ? [{ debugName: "wysiwygRef" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Computed Properties   ----
         this.placeholder = computed(() => this.options()['placeholder'], ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.effectiveMultiLanguage = computed(() => shouldUseLocaleMapShape(!!this.options()['multiLanguage'], this.getValue(), this.fullPath() ? this.contextService.getSavedValue(this.fullPath()) : undefined), ...(ngDevMode ? [{ debugName: "effectiveMultiLanguage" }] : /* istanbul ignore next */ []));
         this.minLineCount = computed(() => this.options()['minLineCount'] ?? this.options()['maxLineCount'] ?? 3, ...(ngDevMode ? [{ debugName: "minLineCount" }] : /* istanbul ignore next */ []));
         this.maxLineCount = computed(() => this.options()['maxLineCount'] ?? this.options()['minLineCount'] ?? 3, ...(ngDevMode ? [{ debugName: "maxLineCount" }] : /* istanbul ignore next */ []));
-        this.popupService = inject(AXPopupService);
-        this.translationService = inject(AXTranslationService);
+        this.getCurrentText = computed(() => this.translationService.resolve(this.getValue(), this.currentLanguage()), ...(ngDevMode ? [{ debugName: "getCurrentText" }] : /* istanbul ignore next */ []));
         this.currentLanguage = toSignal(this.translationService.langChanges$, {
             initialValue: this.translationService.getActiveLang(),
         });
-        this.getCurrentText = computed(() => this.translationService.resolve(this.getValue(), this.currentLanguage()), ...(ngDevMode ? [{ debugName: "getCurrentText" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Quill keeps its own DOM state; one-way ngModel does not refresh it on discard/apply.
+         * Re-sync when the context store reverts or replaces data from outside user edits.
+         */
+        this.#syncWysiwygFromContextEffect = effect(() => {
+            const changeState = this.contextService.changeEvent().state;
+            const text = this.getCurrentText();
+            const wysiwyg = this.wysiwygRef();
+            if (!this.shouldSyncWysiwygFromContext(changeState)) {
+                return;
+            }
+            untracked(() => {
+                void this.applyWysiwygContentWhenReady(wysiwyg, text);
+            });
+        }, ...(ngDevMode ? [{ debugName: "#syncWysiwygFromContextEffect" }] : /* istanbul ignore next */ []));
     }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Quill keeps its own DOM state; one-way ngModel does not refresh it on discard/apply.
+     * Re-sync when the context store reverts or replaces data from outside user edits.
+     */
+    #syncWysiwygFromContextEffect;
+    //#endregion
+    //#region ----   UI Handlers   ----
     onWysiwygChanged(e) {
         if (!e.isUserInteraction)
             return;
@@ -6436,11 +6515,34 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
             this.setValue({ ...map });
         }
     }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    shouldSyncWysiwygFromContext(state) {
+        return state === 'restored' || state === 'initiated';
+    }
+    async applyWysiwygContentWhenReady(wysiwyg, text) {
+        const content = defaultTo(text, '');
+        for (let attempt = 0; attempt < 30; attempt++) {
+            const editor = wysiwyg ?? this.wysiwygRef();
+            if (!editor) {
+                return;
+            }
+            try {
+                editor.setWysiwygContent(content);
+                return;
+            }
+            catch {
+                await new Promise((resolve) => setTimeout(resolve, 50));
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRichTextWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRichTextWidgetEditComponent, isStandalone: true, selector: "axp-rich-text-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: `<ax-wysiwyg-container
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRichTextWidgetEditComponent, isStandalone: true, selector: "axp-rich-text-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, viewQueries: [{ propertyName: "wysiwygRef", first: true, predicate: ["wysiwygRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ax-wysiwyg-container
+    #wysiwygRef
     [placeHolder]="(placeholder() | translate | async)!"
     [disabled]="disabled()"
     [readonly]="readonly()"
+    [initialLine]="3"
     [look]="'solid'"
     [ngModel]="getCurrentText()"
     (onValueChanged)="onWysiwygChanged($event)"
@@ -6472,16 +6574,18 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
         [options]="validation.options"
       ></ax-validation-rule>
     }
-  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i2$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$5.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i2$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i2$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder", "initialLine"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$5.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i2$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRichTextWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-rich-text-widget-edit',
                     template: `<ax-wysiwyg-container
+    #wysiwygRef
     [placeHolder]="(placeholder() | translate | async)!"
     [disabled]="disabled()"
     [readonly]="readonly()"
+    [initialLine]="3"
     [look]="'solid'"
     [ngModel]="getCurrentText()"
     (onValueChanged)="onWysiwygChanged($event)"
@@ -6530,7 +6634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AsyncPipe,
                     ],
                 }]
-        }] });
+        }], propDecorators: { wysiwygRef: [{ type: i0.ViewChild, args: ['wysiwygRef', { isSignal: true }] }] } });
 
 var richTextWidgetEdit_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -10099,7 +10203,7 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
         ></ax-dropdown-command-column>
       }
     </ax-data-table>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$c.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$c.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$c.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i1$c.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$c.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$c.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$c.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$c.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i1$c.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$c.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataListWidgetViewComponent, decorators: [{
             type: Component,
@@ -11908,29 +12012,77 @@ var mapWidgetView_component = /*#__PURE__*/Object.freeze({
     AXPMapWidgetViewComponent: AXPMapWidgetViewComponent
 });
 
-//#region ----   Component: QR Code Widget Column   ----
-class AXPQrcodeWidgetColumnComponent extends AXPColumnWidgetComponent {
+const DEFAULT_QRCODE_SIZE = 200;
+const AXPQrcodeWidget = {
+    name: 'qrcode',
+    title: '@platform-layout-widgets:widgets.qrcode.title',
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
+    icon: 'fa-light fa-qrcode',
+    description: '@platform-layout-widgets:widgets.qrcode.description',
+    type: 'view',
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        cloneProperty(AXP_COLOR_PROPERTY, { schema: { interface: { defaultValue: '#000000' } } }),
+        cloneProperty(AXP_CONTENT_PROPERTY, { schema: { interface: { defaultValue: 'http://google.com' } } }),
+        createNumberProperty({
+            name: 'size',
+            title: 'Size',
+            path: 'options.size',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            defaultValue: DEFAULT_QRCODE_SIZE,
+        }),
+        createSelectProperty({
+            name: 'level',
+            title: 'Error Correction Level',
+            path: 'options.level',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            dataSource: ['L', 'M', 'Q', 'H'],
+            defaultValue: 'M',
+        }),
+        createSelectProperty({
+            name: 'outputType',
+            title: 'Output Type',
+            path: 'options.outputType',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            dataSource: ['svg', 'canvas'],
+            defaultValue: 'svg',
+        }),
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return qrcodeWidgetEdit_component; }).then((c) => c.AXPQrcodeWidgetEditComponent),
+        },
+        column: {
+            component: () => Promise.resolve().then(function () { return qrcodeWidgetColumn_component; }).then((c) => c.AXPQrcodeWidgetColumnComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
+        },
+    },
+};
+
+//#region ---- Types ----
+const QRCODE_WIDGET_NAME = 'qrcode';
+//#endregion
+//#region ---- QR code viewer service ----
+/**
+ * Opens a read-only QR code preview dialog with print and cancel actions.
+ */
+class AXPQrcodeViewerService {
     constructor() {
-        super(...arguments);
-        //#region ----   Services & Dependencies   ----
+        //#region ---- Services & Dependencies ----
         this.layoutBuilder = inject(AXPLayoutBuilderService);
-        //#endregion
-        //#region ----   Computed Properties   ----
-        this.size = computed(() => this.options?.size ?? 200, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.level = computed(() => {
-            const opt = this.options?.level;
-            return typeof opt === 'string' ? opt : (opt?.id ?? 'M');
-        }, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
-        this.color = computed(() => {
-            const opt = this.options?.color;
-            return AXColorUtil.colorStringToHex(opt ?? '#000000');
-        }, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-        this.outputType = computed(() => this.options?.outputType ?? 'svg', ...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
+        this.translation = inject(AXTranslationService);
     }
     //#endregion
-    //#region ----   UI Handlers   ----
-    async showPopup() {
-        const contentValue = this.rawValue;
+    //#region ---- Public API ----
+    async open(options) {
+        const contentValue = options.content;
         if (!contentValue) {
             return;
         }
@@ -11938,26 +12090,113 @@ class AXPQrcodeWidgetColumnComponent extends AXPColumnWidgetComponent {
             .create()
             .dialog((dialog) => {
             dialog
-                .setTitle('QR Code')
+                .setTitle(this.resolveDialogTitle(options.title))
                 .setSize('md')
+                .setCloseButton(true)
                 .setContext({ qr: contentValue })
                 .content((content) => {
-                content.setDirection('column').setGap('24px').setAlignItems('center').customWidget('qrcode', {
+                content
+                    .setDirection('column')
+                    .setGap('24px')
+                    .setAlignItems('center')
+                    .mode('view')
+                    .customWidget(QRCODE_WIDGET_NAME, {
+                    name: QRCODE_WIDGET_NAME,
                     path: 'qr',
-                    size: this.size(),
-                    level: this.level(),
-                    color: this.color(),
+                    size: normalizePositiveNumberOption(options.size, DEFAULT_QRCODE_SIZE),
+                    level: options.level ?? 'M',
+                    color: options.color ?? '#000000',
                     readonly: true,
-                    outputType: this.outputType(),
+                    outputType: options.outputType ?? 'svg',
+                    showContent: true,
                 });
             })
                 .setActions((actions) => {
+                actions.custom({
+                    title: '@general:actions.print.title',
+                    icon: 'fa-light fa-print',
+                    command: { name: `widget:${QRCODE_WIDGET_NAME}.print` },
+                    position: 'suffix',
+                });
                 actions.cancel('@general:actions.cancel.title');
             });
         })
             .show();
         ref.close();
     }
+    //#endregion
+    //#region ---- Utility Methods ----
+    resolveDialogTitle(title) {
+        const resolved = resolveEntityRowDisplayText(title, this.translation.getActiveLang());
+        return resolved || '@platform-layout-widgets:widgets.qrcode.title';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeViewerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeViewerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Viewer open helper ----
+function buildQrcodeViewerOpenOptions(params) {
+    const title = params.data
+        ? resolveEntityRowDisplayTitle({
+            data: params.data,
+            widgetOptions: params.widgetOptions,
+            formatService: params.formatService,
+            activeLang: params.activeLang,
+            entity: params.entity,
+        })
+        : '';
+    const levelOption = params.widgetOptions['level'];
+    const resolvedLevel = (typeof levelOption === 'string'
+        ? levelOption
+        : levelOption?.id) ?? 'M';
+    return {
+        content: params.content,
+        title: title || params.fallbackTitleKey,
+        size: normalizePositiveNumberOption(params.widgetOptions['size'], DEFAULT_QRCODE_SIZE),
+        level: resolvedLevel,
+        color: params.widgetOptions['color'] ?? '#000000',
+        outputType: params.widgetOptions['outputType'] ?? 'svg',
+    };
+}
+async function openQrcodeViewer(viewer, params) {
+    const content = params.content?.trim();
+    if (!content) {
+        return;
+    }
+    await viewer.open(buildQrcodeViewerOpenOptions({ ...params, content }));
+}
+//#endregion
+
+//#region ---- Component: QR Code Widget Column ----
+class AXPQrcodeWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ---- Services & Dependencies ----
+        this.qrcodeViewer = inject(AXPQrcodeViewerService);
+        this.formatService = inject(AXFormatService);
+        this.translation = inject(AXTranslationService);
+    }
+    //#endregion
+    //#region ---- UI Handlers ----
+    async showPopup() {
+        const contentValue = this.rawValue;
+        if (!contentValue) {
+            return;
+        }
+        await openQrcodeViewer(this.qrcodeViewer, {
+            content: contentValue,
+            data: this.rowData,
+            widgetOptions: { ...this.options, size: 500 },
+            formatService: this.formatService,
+            activeLang: this.translation.getActiveLang(),
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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">
@@ -12004,8 +12243,13 @@ var qrcodeWidgetColumn_component = /*#__PURE__*/Object.freeze({
 class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ---- Services & Dependencies ----
+        this.qrcodeViewer = inject(AXPQrcodeViewerService);
+        this.formatService = inject(AXFormatService);
+        this.translation = inject(AXTranslationService);
+        //#endregion
         this.value = computed(() => this.getValue(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.size = computed(() => this.options()['size'] ?? 200, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.size = computed(() => normalizePositiveNumberOption(this.options()['size'], DEFAULT_QRCODE_SIZE), ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.level = computed(() => this.options()['level']?.id ?? 'M', ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
         this.color = computed(() => AXColorUtil.colorStringToHex(this.options()['color'] ?? '#000000'), ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.format = computed(() => this.options()['format']?.id ?? 'png', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
@@ -12035,73 +12279,27 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
     cancelEdit() {
         this.draft.set(this.value() ?? '');
     }
-    downloadQr(el) {
-        const svg = el.querySelector('svg');
-        const fmt = this.format();
-        if (fmt === 'svg') {
-            this.downloadSVGElement(svg, 'qrcode.svg');
-        }
-        else if (fmt === 'png') {
-            this.rasterizeAndDownload(el, 'image/png', 'qrcode.png');
-        }
-        else {
-            this.rasterizeAndDownload(el, 'image/jpeg', 'qrcode.jpg');
+    async openPreview() {
+        const content = this.value();
+        if (!content) {
+            return;
         }
+        await openQrcodeViewer(this.qrcodeViewer, {
+            content,
+            data: this.contextService.data(),
+            widgetOptions: this.options(),
+            formatService: this.formatService,
+            activeLang: this.translation.getActiveLang(),
+        });
     }
-    downloadSVGElement(svgEl, filename = 'image.svg') {
-        // Convert the SVG element to a string
-        if (!svgEl)
-            return;
-        const serializer = new XMLSerializer();
-        let source = serializer.serializeToString(svgEl);
-        // Add the XML declaration (optional but recommended)
-        if (!source.match(/^<\?xml/)) {
-            source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
-        }
-        // Create a Blob and trigger download
-        const blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    }
-    rasterizeAndDownload(el, mime, filename) {
-        const svgEl = el.querySelector('svg');
-        if (!svgEl)
-            return;
-        const serializer = new XMLSerializer();
-        let source = serializer.serializeToString(svgEl);
-        if (!source.match(/^<\?xml/)) {
-            source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
-        }
-        const svgUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);
-        const img = new Image();
-        const size = this.size();
-        const canvas = document.createElement('canvas');
-        canvas.width = size;
-        canvas.height = size;
-        const ctx = canvas.getContext('2d');
-        if (!ctx)
-            return;
-        if (mime === 'image/jpeg') {
-            ctx.fillStyle = '#ffffff';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-        }
-        img.onload = () => {
-            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-            const url = canvas.toDataURL(mime);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = filename;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-        };
-        img.src = svgUrl;
+    downloadQr(el) {
+        const fmt = this.format();
+        const format = fmt === 'jpg' ? 'jpeg' : fmt;
+        downloadGraphicFromElement(el, {
+            format,
+            filename: `qrcode.${fmt}`,
+            fallbackSize: this.size(),
+        });
     }
     clearValue() {
         this.setValue('');
@@ -12123,7 +12321,7 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$3.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: "21.2.9", 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.preview.title' | translate | async)!\"\n              (onClick)=\"openPreview()\"\n            >\n              <ax-icon icon=\"fa-light fa-expand\"></ax-icon>\n            </ax-button>\n\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", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$3.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: "21.2.9", ngImport: i0, type: AXPQrcodeWidgetEditComponent, decorators: [{
             type: Component,
@@ -12136,7 +12334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         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\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" }]
+                    ], 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.preview.title' | translate | async)!\"\n              (onClick)=\"openPreview()\"\n            >\n              <ax-icon icon=\"fa-light fa-expand\"></ax-icon>\n            </ax-button>\n\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({
@@ -12147,102 +12345,132 @@ var qrcodeWidgetEdit_component = /*#__PURE__*/Object.freeze({
 class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.size = computed(() => this.options()['size'] ?? 200, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        //#region ---- Services & Dependencies ----
+        this.qrcodeViewer = inject(AXPQrcodeViewerService);
+        this.formatService = inject(AXFormatService);
+        this.translation = inject(AXTranslationService);
+        //#endregion
+        //#region ---- View Children ----
+        this.qrContainer = viewChild('qrContainer', ...(ngDevMode ? [{ debugName: "qrContainer" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Computed Properties ----
+        this.size = computed(() => normalizePositiveNumberOption(this.options()['size'], DEFAULT_QRCODE_SIZE), ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.level = computed(() => this.options()['level']?.id ?? 'M', ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
         this.color = computed(() => AXColorUtil.colorStringToHex(this.options()['color'] ?? '#000000'), ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.outputType = computed(() => this.options()['outputType'] ?? 'svg', ...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
+        this.showContent = computed(() => !!this.options()['showContent'], ...(ngDevMode ? [{ debugName: "showContent" }] : /* istanbul ignore next */ []));
+        this.contentLabel = computed(() => this.options()['contentLabel'] ?? '@platform-layout-widgets:widgets.qrcode.content', ...(ngDevMode ? [{ debugName: "contentLabel" }] : /* istanbul ignore next */ []));
     }
-    get __class() {
-        const cls = {};
-        cls[`ax-inline-block`] = true;
-        return cls;
+    //#endregion
+    //#region ---- UI Handlers ----
+    async openPreview() {
+        const content = this.getValue();
+        if (!content) {
+            return;
+        }
+        await openQrcodeViewer(this.qrcodeViewer, {
+            content,
+            data: this.contextService.data(),
+            widgetOptions: this.options(),
+            formatService: this.formatService,
+            activeLang: this.translation.getActiveLang(),
+        });
+    }
+    //#endregion
+    //#region ---- Widget API ----
+    api() {
+        return {
+            print: () => {
+                const container = this.qrContainer()?.nativeElement;
+                if (container) {
+                    printGraphicFromElement(container, {
+                        fallbackSize: this.size(),
+                        title: 'QR Code',
+                        imageAlt: 'QR Code',
+                    });
+                }
+            },
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQrcodeWidgetViewComponent, isStandalone: true, selector: "axp-qrcode-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    {{ getValue() }}
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQrcodeWidgetViewComponent, isStandalone: true, selector: "axp-qrcode-widget", host: { classAttribute: "ax-block ax-w-full" }, viewQueries: [{ propertyName: "qrContainer", first: true, predicate: ["qrContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (getValue()) {
-      <ax-qrcode [content]="getValue()" [size]="size()" [color]="color()" [level]="level()" [outputType]="outputType()">
-      </ax-qrcode>
+      <div class="ax-flex ax-w-full ax-flex-col ax-items-center ax-gap-4 ax-text-center">
+        <div #qrContainer class="ax-inline-block">
+          <ax-qrcode
+            [content]="getValue()"
+            [size]="size()"
+            [color]="color()"
+            [level]="level()"
+            [outputType]="outputType()"
+          >
+          </ax-qrcode>
+        </div>
+        @if (showContent()) {
+          <div class="ax-flex ax-max-w-full ax-flex-col ax-items-center ax-gap-1">
+            <span class="ax-text-sm ax-font-medium">{{ contentLabel() | translate | async }}</span>
+            <span class="ax-break-all ax-text-sm">{{ getValue() }}</span>
+          </div>
+        } @else {
+          <ax-button
+            look="twotone"
+            class="ax-sm"
+            [title]="('@general:actions.preview.title' | translate | async)!"
+            (onClick)="openPreview()"
+          >
+            <ax-icon icon="fa-light fa-expand"></ax-icon>
+          </ax-button>
+        }
+      </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$3.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$3.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-qrcode-widget',
                     template: `
-    {{ getValue() }}
     @if (getValue()) {
-      <ax-qrcode [content]="getValue()" [size]="size()" [color]="color()" [level]="level()" [outputType]="outputType()">
-      </ax-qrcode>
+      <div class="ax-flex ax-w-full ax-flex-col ax-items-center ax-gap-4 ax-text-center">
+        <div #qrContainer class="ax-inline-block">
+          <ax-qrcode
+            [content]="getValue()"
+            [size]="size()"
+            [color]="color()"
+            [level]="level()"
+            [outputType]="outputType()"
+          >
+          </ax-qrcode>
+        </div>
+        @if (showContent()) {
+          <div class="ax-flex ax-max-w-full ax-flex-col ax-items-center ax-gap-1">
+            <span class="ax-text-sm ax-font-medium">{{ contentLabel() | translate | async }}</span>
+            <span class="ax-break-all ax-text-sm">{{ getValue() }}</span>
+          </div>
+        } @else {
+          <ax-button
+            look="twotone"
+            class="ax-sm"
+            [title]="('@general:actions.preview.title' | translate | async)!"
+            (onClick)="openPreview()"
+          >
+            <ax-icon icon="fa-light fa-expand"></ax-icon>
+          </ax-button>
+        }
+      </div>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXQrcodeModule],
+                    imports: [AXButtonModule, AXDecoratorModule, AXQrcodeModule, AXTranslationModule, AsyncPipe],
+                    host: { class: 'ax-block ax-w-full' },
                 }]
-        }], propDecorators: { __class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { qrContainer: [{ type: i0.ViewChild, args: ['qrContainer', { isSignal: true }] }] } });
 
 var qrcodeWidgetView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
     AXPQrcodeWidgetViewComponent: AXPQrcodeWidgetViewComponent
 });
 
-const AXPQrcodeWidget = {
-    name: 'qrcode',
-    title: '@platform-layout-widgets:widgets.qrcode.title',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
-    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
-    icon: 'fa-light fa-qrcode',
-    description: '@platform-layout-widgets:widgets.qrcode.description',
-    type: 'view',
-    properties: [
-        AXP_NAME_PROPERTY,
-        AXP_DATA_PATH_PROPERTY,
-        cloneProperty(AXP_COLOR_PROPERTY, { schema: { interface: { defaultValue: '#000000' } } }),
-        cloneProperty(AXP_CONTENT_PROPERTY, { schema: { interface: { defaultValue: 'http://google.com' } } }),
-        createNumberProperty({
-            name: 'size',
-            title: 'Size',
-            path: 'options.size',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            defaultValue: 200,
-        }),
-        createSelectProperty({
-            name: 'level',
-            title: 'Error Correction Level',
-            path: 'options.level',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            dataSource: ['L', 'M', 'Q', 'H'],
-            defaultValue: 'M',
-        }),
-        createSelectProperty({
-            name: 'outputType',
-            title: 'Output Type',
-            path: 'options.outputType',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            dataSource: ['svg', 'canvas'],
-            defaultValue: 'svg',
-        }),
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
-        },
-        edit: {
-            component: () => Promise.resolve().then(function () { return qrcodeWidgetEdit_component; }).then((c) => c.AXPQrcodeWidgetEditComponent),
-        },
-        column: {
-            component: () => Promise.resolve().then(function () { return qrcodeWidgetColumn_component; }).then((c) => c.AXPQrcodeWidgetColumnComponent),
-        },
-        designer: {
-            component: () => Promise.resolve().then(function () { return qrcodeWidgetView_component; }).then((c) => c.AXPQrcodeWidgetViewComponent),
-        },
-    },
-};
-
 //#region ----   Imports   ----
 //#endregion
 //#region ----   Component   ----
@@ -12652,7 +12880,7 @@ class AXPSignatureWidgetEditComponent extends AXPValueWidgetComponent {
         this.paintView = viewChild('paintView', ...(ngDevMode ? [{ debugName: "paintView" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ---- Services & Dependencies ----
-        this.layoutBuilder = inject(AXPLayoutBuilderService);
+        this.signatureEditorService = inject(AXPSignatureEditorService);
         this.deviceService = inject(AXPDeviceService);
         //#endregion
         //#region ---- Effects ----
@@ -12735,62 +12963,13 @@ class AXPSignatureWidgetEditComponent extends AXPValueWidgetComponent {
         if (this.disabled()) {
             return;
         }
-        const ref = await this.layoutBuilder
-            .create()
-            .dialog((dialog) => {
-            dialog
-                .setTitle('@platform-layout-widgets:widgets.signature.title')
-                .setSize('sm')
-                .setCloseButton(true)
-                .setContext({ value: this.getValue() })
-                .content((content) => {
-                content.setDirection('column').setGap('16px').setAlignItems('stretch').customWidget('signature', {
-                    name: 'signature',
-                    path: 'value',
-                    disabled: this.disabled(),
-                    showOverlay: false,
-                    editMode: true,
-                });
-            })
-                .setActions((actions) => {
-                actions.custom({
-                    title: '@general:actions.clear.title',
-                    icon: 'fa-light fa-eraser',
-                    disabled: '{{ !context.value }}',
-                    command: { name: 'widget:signature.clear' },
-                    position: 'prefix',
-                });
-                actions.custom({
-                    title: '@general:actions.delete.title',
-                    icon: 'fa-light fa-trash-can',
-                    color: 'danger',
-                    disabled: '{{ !context.value }}',
-                    command: { name: 'signature-clear' },
-                });
-                actions.custom({
-                    title: '@general:actions.apply.title',
-                    icon: 'fa-light fa-check',
-                    color: 'primary',
-                    disabled: false,
-                    command: { name: 'signature-apply' },
-                });
-            });
-        })
-            .show();
-        const action = ref.action();
-        const context = ref.context() ?? {};
-        if (action === 'signature-clear') {
-            ref.close();
-            this.setValue(null);
-            return;
-        }
-        if (action === 'signature-apply') {
-            const newValue = context.value;
-            if (typeof newValue === 'string' || newValue === null) {
-                this.setValue(newValue);
-            }
+        const result = await this.signatureEditorService.open({
+            value: this.getValue(),
+            disabled: this.disabled(),
+        });
+        if (result.action === 'apply') {
+            this.setValue(result.value);
         }
-        ref.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSignatureWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSignatureWidgetEditComponent, isStandalone: true, selector: "axp-signature-pad-widget-edit", host: { classAttribute: "ax-block ax-w-full" }, viewQueries: [{ propertyName: "paintContainer", first: true, predicate: ["paintContainer"], descendants: true, isSignal: true }, { propertyName: "paintView", first: true, predicate: ["paintView"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-signature-pad-widget-edit ax-block ax-w-full ax-select-none\">\n  <div\n    class=\"ax-relative ax-w-full ax-min-h-[9rem] ax-overflow-hidden ax-rounded-md\"\n    [class.ax-cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.ax-cursor-not-allowed]=\"disabled()\"\n    [class.ax-opacity-60]=\"disabled()\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (click)=\"handleSurfaceClick($event)\"\n    (pointerdown)=\"handleSurfacePointerDown($event)\"\n  >\n    @if (showSignaturePreview()) {\n      <ax-image [src]=\"getValue()!\" class=\"ax-block ax-w-full ax-min-h-[9rem] ax-object-contain\" />\n    } @else if (showPaintSurface()) {\n      <ax-paint-container\n        look=\"none\"\n        [editMode]=\"editMode()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event)\"\n        class=\"__paint\"\n        #paintContainer\n      >\n        <ax-paint-view #paintView paintBackgroundColor=\"white\"></ax-paint-view>\n      </ax-paint-container>\n    }\n\n    @if (showEmptyHint()) {\n      <div\n        class=\"ax-absolute ax-inset-0 ax-z-10 ax-flex ax-flex-col ax-items-center ax-justify-center ax-gap-2 ax-pointer-events-none\"\n      >\n        <i class=\"fa-light fa-file-signature ax-text-2xl\"></i>\n        <span class=\"ax-text-sm\">{{ emptyHint() | translate | async }}</span>\n      </div>\n    }\n\n    @if (showDialogHint()) {\n      <div\n        class=\"ax-absolute ax-inset-0 ax-z-10 ax-flex ax-items-center ax-justify-center ax-pointer-events-none ax-text-sm ax-opacity-60\"\n      >\n        {{ signHereHint() | translate | async }}\n      </div>\n    }\n\n    @if (showDesktopHover()) {\n      <div\n        class=\"ax-absolute ax-inset-0 ax-z-20 ax-flex ax-cursor-pointer ax-items-center ax-justify-center ax-bg-neutral-900/50 ax-text-neutral-100 ax-transition-opacity ax-duration-400\"\n        data-signature-action=\"true\"\n        [style.opacity]=\"hovering() ? 1 : 0\"\n        (click)=\"handleOverlayClick($event)\"\n      >\n        <i class=\"fa-light fa-pen\"></i>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-signature-pad-widget-edit .__paint{display:block;width:100%;min-height:9rem}.axp-signature-pad-widget-edit ax-paint-container{display:block;width:100%}.axp-signature-pad-widget-edit ax-paint-container .ax-main-toolbar,.axp-signature-pad-widget-edit ax-paint-container .ax-secondary-toolbar{display:none}:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container>.ax-editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view .ax-canvas-element{border:none!important;box-shadow:none!important;outline:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXPaintModule }, { kind: "component", type: i2$8.AXPaintContainerComponent, selector: "ax-paint-container", inputs: ["look", "disabled", "editMode"] }, { kind: "component", type: i2$8.AXPaintViewComponent, selector: "ax-paint-view", inputs: ["class", "paintBackgroundColor"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1$e.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -27954,5 +28133,5 @@ var getWidgetsForAi_query = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPAddressWidget, AXPAddressWidgetColumnComponent, AXPAddressWidgetEditComponent, AXPAddressWidgetService, AXPAddressWidgetViewComponent, AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetViewComponent, AXPCodeEditorWidget, AXPCodeEditorWidgetColumnComponent, AXPCodeEditorWidgetEditComponent, AXPCodeEditorWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConditionBuilderWidget, AXPConditionBuilderWidgetEditComponent, AXPConditionBuilderWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDataSourceOptionsWidget, AXPDataSourceOptionsWidgetEditComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGetWidgetsForAIQuery, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPItemConfiguratorWidget, AXPItemConfiguratorWidgetColumnComponent, AXPItemConfiguratorWidgetEditComponent, AXPJsonViewerWidget, AXPJsonViewerWidgetEditComponent, AXPJsonViewerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetViewComponent, AXPOutcomeResultsViewerWidget, AXPOutcomeResultsViewerWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPProgressBarWidget, AXPProgressBarWidgetColumnComponent, AXPProgressBarWidgetEditComponent, AXPProgressBarWidgetViewComponent, AXPProviderSelectWidgetColumnComponent, AXPProviderSelectWidgetEditBase, AXPProviderSelectWidgetViewComponent, AXPQrcodeWidget, AXPQrcodeWidgetColumnComponent, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRatePickerWidget, AXPRatePickerWidgetColumnComponent, AXPRatePickerWidgetEditComponent, AXPRatePickerWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectLanguagePopup, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusChipComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPStopwatchWidget, AXPStopwatchWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetColumnComponent, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_DATA_LIST_CMD_DELETE, AXP_DATA_LIST_CMD_EDIT, AXP_DATA_LIST_PENDING_DELETE_KEY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_ROW_EXPR_PREFIX, AXP_SPACING_UNITS, AXP_WIDGET_AI_AGENT_ASSIST_FOLLOW_UP_CHIPS_LAYOUT, AXP_WIDGET_AI_AGENT_CHART_LAYOUT, AXP_WIDGET_AI_AGENT_FORM_LAYOUT, AXP_WIDGET_AI_AGENT_NAMES, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, matchesWidgetAiAgent };
+export { AXPAddressWidget, AXPAddressWidgetColumnComponent, AXPAddressWidgetEditComponent, AXPAddressWidgetService, AXPAddressWidgetViewComponent, AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetViewComponent, AXPCodeEditorWidget, AXPCodeEditorWidgetColumnComponent, AXPCodeEditorWidgetEditComponent, AXPCodeEditorWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConditionBuilderWidget, AXPConditionBuilderWidgetEditComponent, AXPConditionBuilderWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDataSourceOptionsWidget, AXPDataSourceOptionsWidgetEditComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGetWidgetsForAIQuery, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPItemConfiguratorWidget, AXPItemConfiguratorWidgetColumnComponent, AXPItemConfiguratorWidgetEditComponent, AXPJsonViewerWidget, AXPJsonViewerWidgetEditComponent, AXPJsonViewerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetViewComponent, AXPOutcomeResultsViewerWidget, AXPOutcomeResultsViewerWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPProgressBarWidget, AXPProgressBarWidgetColumnComponent, AXPProgressBarWidgetEditComponent, AXPProgressBarWidgetViewComponent, AXPProviderSelectWidgetColumnComponent, AXPProviderSelectWidgetEditBase, AXPProviderSelectWidgetViewComponent, AXPQrcodeViewerService, AXPQrcodeWidget, AXPQrcodeWidgetColumnComponent, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRatePickerWidget, AXPRatePickerWidgetColumnComponent, AXPRatePickerWidgetEditComponent, AXPRatePickerWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectLanguagePopup, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusChipComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPStopwatchWidget, AXPStopwatchWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetColumnComponent, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_DATA_LIST_CMD_DELETE, AXP_DATA_LIST_CMD_EDIT, AXP_DATA_LIST_PENDING_DELETE_KEY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_ROW_EXPR_PREFIX, AXP_SPACING_UNITS, AXP_WIDGET_AI_AGENT_ASSIST_FOLLOW_UP_CHIPS_LAYOUT, AXP_WIDGET_AI_AGENT_CHART_LAYOUT, AXP_WIDGET_AI_AGENT_FORM_LAYOUT, AXP_WIDGET_AI_AGENT_NAMES, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_QRCODE_SIZE, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, matchesWidgetAiAgent };
 //# sourceMappingURL=acorex-platform-layout-widgets.mjs.map