@acorex/platform 21.0.0-next.37 → 21.0.0-next.40

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

@@ -1,5 +1,5 @@
 import * as i1$3 from '@acorex/platform/layout/widget-core';
-import { createStringProperty, AXPWidgetsCatalog, createBooleanProperty, createSelectProperty, createNumberProperty, cloneProperty, AXPWidgetCoreModule, AXPDataListWidgetComponent, AXPColumnWidgetComponent, AXPLayoutBaseWidgetComponent, AXPWidgetGroupEnum, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_AI_CATEGORY, AXP_WIDGETS_EDITOR_CATEGORY, AXPValueWidgetComponent, AXPWidgetStatus, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetRegistryService, AXPPropertyEditorHelper, AXPBlockBaseLayoutWidgetComponent, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXPTableBaseLayoutWidgetComponent, AXPTableItemBaseLayoutWidgetComponent, findNonEmptyBreakpoints, AXPGridItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXP_WIDGET_DEFINITION_PROVIDER, normalizeWidgetCategories, isWidgetAiCatalogIncluded } from '@acorex/platform/layout/widget-core';
+import { createStringProperty, AXPWidgetsCatalog, createBooleanProperty, createSelectProperty, createNumberProperty, cloneProperty, AXPWidgetCoreModule, AXPDataListWidgetComponent, AXPColumnWidgetComponent, AXPLayoutBaseWidgetComponent, AXPWidgetGroupEnum, AXP_WIDGETS_ACTION_SUB_CONTROLS, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_EDITOR_CATEGORY, AXPValueWidgetComponent, AXP_WIDGETS_EDITOR_SUB_CHOICE, AXP_WIDGETS_EDITOR_SUB_VISUAL, AXP_WIDGETS_EDITOR_SUB_COMPOSITE, AXP_WIDGETS_EDITOR_SUB_DATETIME, AXP_WIDGETS_EDITOR_SUB_RICH, AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS, AXP_WIDGETS_EDITOR_SUB_NUMERIC, AXPWidgetStatus, AXP_WIDGETS_ADVANCE_SUB_MEDIA, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_INPUT, AXP_WIDGETS_LAYOUT_SUB_LISTS, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_DATA, AXP_WIDGETS_ADVANCE_SUB_TOOLS, AXP_WIDGETS_EDITOR_SUB_CONFIG, AXPWidgetRegistryService, AXPPropertyEditorHelper, AXP_WIDGETS_LAYOUT_SUB_GRID, AXPBlockBaseLayoutWidgetComponent, AXP_WIDGETS_LAYOUT_SUB_SURFACES, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXP_WIDGETS_LAYOUT_SUB_SHELL, AXPTableBaseLayoutWidgetComponent, AXPTableItemBaseLayoutWidgetComponent, findNonEmptyBreakpoints, AXPGridItemBaseLayoutWidgetComponent, AXP_WIDGETS_LAYOUT_SUB_UTILITY, AXPGridBaseLayoutWidgetComponent, AXP_WIDGETS_LAYOUT_SUB_TABS, AXP_WIDGET_DEFINITION_PROVIDER, normalizeDefinitionCategories } from '@acorex/platform/layout/widget-core';
 import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource, convertArrayToDataSource } from '@acorex/cdk/common';
 import { AXActionSheetService } from '@acorex/components/action-sheet';
 import * as i1$2 from '@acorex/components/badge';
@@ -20,9 +20,9 @@ import { AXTabsModule } from '@acorex/components/tabs';
 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 } from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService, resolveMultiLanguageString } from '@acorex/core/translation';
 import { AXP_LOCALE_MANAGEMENT_PORT, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPClipBoardService, AXPSettingsService, AXPRegionalSetting, AXPFileStorageService, AXPFileTypeProviderService, AXPFileActionsService, AXPStatusDefinitionProviderService, AXPRefreshEvent, AXPCommonSettings, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS } from '@acorex/platform/common';
-import { AXPDeviceService, setSmart, AXPColorPaletteService, extractValue, AXPResolveMultiLanguageStringPipe, AXPMultiLanguageStringResolverService, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPComponentSlotModule, AXPDataSourceDefinitionProviderService, sortByMultiLanguageString, applyQueryArray, objectKeyValueTransforms, resolveMultiLanguageString } from '@acorex/platform/core';
+import { AXPDeviceService, setSmart, AXPColorPaletteService, extractValue, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPComponentSlotModule, AXPDataSourceDefinitionProviderService, sortByMultiLanguageString, applyQueryArray, objectKeyValueTransforms } from '@acorex/platform/core';
 import * as i1$4 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -119,6 +119,8 @@ import { AXCronJobModule } from '@acorex/components/cron-job';
 import { AXTimeDurationFormatter, AXCalendarService } from '@acorex/core/date-time';
 import * as i3$6 from '@acorex/components/time-duration';
 import { AXTimeDurationModule } from '@acorex/components/time-duration';
+import * as i4$1 from '@acorex/components/tooltip';
+import { AXTooltipModule } from '@acorex/components/tooltip';
 import * as i1$l from '@acorex/components/alert';
 import { AXAlertModule } from '@acorex/components/alert';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -1310,8 +1312,7 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
             if (this.showOtherLanguages() || !this.hasLanguagesBeyondProfiles()) {
                 return list;
             }
-            return list.filter((l) => l.isLocaleProfile ||
-                this.hasTranslationContent(l.context?.value));
+            return list.filter((l) => l.isLocaleProfile || this.hasTranslationContent(l.context?.value));
         }, ...(ngDevMode ? [{ debugName: "visibleLanguageList" }] : /* istanbul ignore next */ []));
     }
     //#region ---- Lifecycle ----
@@ -1326,6 +1327,7 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
     handleContextChanged(e, language) {
         language.context = e.data;
     }
+    //TODO NEED TO FIX THOSE HAS NO PROFILE
     onShowOtherLanguagesChanged(event) {
         const next = !!event.value;
         this.showOtherLanguages.set(next);
@@ -1337,8 +1339,7 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
             if (!current) {
                 return list;
             }
-            const staysVisible = current.isLocaleProfile ||
-                (!current.isLocaleProfile && this.hasTranslationContent(current.context?.value));
+            const staysVisible = current.isLocaleProfile || (!current.isLocaleProfile && this.hasTranslationContent(current.context?.value));
             if (staysVisible) {
                 return list;
             }
@@ -1375,7 +1376,9 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
     async onSaveButtonClick() {
         const merged = { ...this.values };
         this.languageList().forEach((item) => {
-            merged[item.code] = item.context.value;
+            if (item.context.value) {
+                merged[item.code] = item.context.value;
+            }
         });
         this.close(merged);
     }
@@ -1984,10 +1987,11 @@ var buttonWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPButtonWidget = {
     name: 'button-action',
-    title: 'Button',
-    description: 'Triggers customizable actions',
+    title: '@platform-layout-widgets:widgets.button-action.title',
+    description: '@platform-layout-widgets:widgets.button-action.description',
     icon: 'fa-light fa-play',
-    categories: [AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ACTION_CATEGORY],
+    subCategory: AXP_WIDGETS_ACTION_SUB_CONTROLS,
     aiDescription: 'Primary or secondary action button. Use when the answer should offer a clear next step (submit, navigate, run) with label and optional icon.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'action',
@@ -2025,7 +2029,7 @@ const AXPConditionBuilderWidget = {
     description: 'Builds filter conditions (field/operator/value) with AND/OR groups',
     icon: 'fa-light fa-filter',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.BaseWidget],
     type: 'editor',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
     components: {
@@ -2549,10 +2553,11 @@ var checkboxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPCheckBoxWidget = {
     name: 'checkbox-editor',
-    title: 'Check Box',
+    title: '@platform-layout-widgets:widgets.checkbox-editor.title',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
-    description: 'Selects multiple options via checkboxes',
+    description: '@platform-layout-widgets:widgets.checkbox-editor.description',
     icon: 'fa-light fa-square-check',
     defaultFilterWidgetName: 'boolean-filter',
     type: 'editor',
@@ -2782,10 +2787,11 @@ var colorBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPColorBoxWidget = {
     name: 'color-editor',
-    title: 'Color Box',
-    description: 'Picks and applies colors',
+    title: '@platform-layout-widgets:widgets.color-editor.title',
+    description: '@platform-layout-widgets:widgets.color-editor.description',
     icon: 'fa-light fa-palette',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_VISUAL,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     properties: [
@@ -3133,10 +3139,11 @@ var colorPaletteWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPColorPaletteWidget = {
     name: 'color-palette-editor',
-    title: 'Color Palette',
-    description: 'Selects colors from a predefined palette',
+    title: '@platform-layout-widgets:widgets.color-palette-editor.title',
+    description: '@platform-layout-widgets:widgets.color-palette-editor.description',
     icon: 'fa-light fa-swatchbook',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_VISUAL,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     properties: [
@@ -3362,10 +3369,11 @@ var connectedListsWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 const AXPConnectedDragDropListsWidget = {
     name: 'connected-lists-editor',
-    title: 'Connected Drag & Drop Lists',
-    description: 'Two connected lists with drag and drop transfer',
+    title: '@platform-layout-widgets:widgets.connected-lists-editor.title',
+    description: '@platform-layout-widgets:widgets.connected-lists-editor.description',
     icon: 'fa-light fa-arrow-right-arrow-left',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.UtilityWidget],
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
     type: 'editor',
@@ -4143,9 +4151,10 @@ var contactWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPContactWidget = {
     name: 'contact-editor',
-    title: 'Contact',
-    description: 'Inputs contact information',
+    title: '@platform-layout-widgets:widgets.contact-editor.title',
+    description: '@platform-layout-widgets:widgets.contact-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_COMPOSITE,
     groups: [AXPWidgetGroupEnum.FormElement],
     icon: 'fa-light fa-address-book',
     defaultFilterWidgetName: 'string-filter',
@@ -4195,9 +4204,10 @@ const AXPContactWidget = {
 
 const AXPAddressWidget = {
     name: 'address-editor',
-    title: 'Address',
-    description: 'Inputs address information',
+    title: '@platform-layout-widgets:widgets.address-editor.title',
+    description: '@platform-layout-widgets:widgets.address-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_COMPOSITE,
     groups: [AXPWidgetGroupEnum.FormElement],
     icon: 'fa-light fa-location-dot',
     defaultFilterWidgetName: 'string-filter',
@@ -5292,10 +5302,11 @@ var dateTimeBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPDateTimeBoxWidget = {
     name: 'date-time-editor',
-    title: 'Date Time Box',
-    description: 'Selects date and time',
+    title: '@platform-layout-widgets:widgets.date-time-editor.title',
+    description: '@platform-layout-widgets:widgets.date-time-editor.description',
     icon: 'fa-light fa-calendar',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_DATETIME,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     defaultFilterWidgetName: 'datetime-filter',
@@ -5544,11 +5555,12 @@ var editorJsWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPEditorJsWidget = {
     name: 'editor-js-editor',
-    title: 'Editor Js',
-    description: 'Formats and edits text',
+    title: '@platform-layout-widgets:widgets.editor-js-editor.title',
+    description: '@platform-layout-widgets:widgets.editor-js-editor.description',
     icon: 'fa-light fa-input-text',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    groups: [AXPWidgetGroupEnum.FormElement],
+    subCategory: AXP_WIDGETS_EDITOR_SUB_RICH,
+    groups: [AXPWidgetGroupEnum.BaseWidget],
     defaultFilterWidgetName: 'string-filter',
     type: 'editor',
     properties: [
@@ -5577,20 +5589,20 @@ const AXPEditorJsWidget = {
 class AXPLargeTextWidgetColumnComponent extends AXPColumnWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLargeTextWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPLargeTextWidgetColumnComponent, isStandalone: true, selector: "axp-large-text-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
-    @let text = rawValue | axpResolveMultiLanguageString;
+    @let text = rawValue | translate | async;
     @if (text) {
       <span class="ax-truncate"> {{ text }} </span>
     } @else {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ 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: AXPLargeTextWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-large-text-widget-column',
                     template: `
-    @let text = rawValue | axpResolveMultiLanguageString;
+    @let text = rawValue | translate | async;
     @if (text) {
       <span class="ax-truncate"> {{ text }} </span>
     } @else {
@@ -5598,7 +5610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXPResolveMultiLanguageStringPipe],
+                    imports: [AXTranslationModule, AsyncPipe],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -5620,11 +5632,10 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
         this.rows = computed(() => this.options()['rows'], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
         this.popupService = inject(AXPopupService);
         this.translationService = inject(AXTranslationService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
         this.currentLanguage = toSignal(this.translationService.langChanges$, {
             initialValue: this.translationService.getActiveLang(),
         });
-        this.getCurrentText = computed(() => this.mlResolver.resolve(this.getValue(), this.currentLanguage()), ...(ngDevMode ? [{ debugName: "getCurrentText" }] : /* istanbul ignore next */ []));
+        this.getCurrentText = computed(() => this.translationService.resolve(this.getValue(), this.currentLanguage()), ...(ngDevMode ? [{ debugName: "getCurrentText" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         super.ngOnInit();
@@ -5658,7 +5669,7 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
             title: 'Select Language',
             size: 'md',
             data: {
-                values: this.mlResolver.toLocaleMap(this.getValue(), this.currentLanguage()),
+                values: this.translationService.toLocaleMap(this.getValue(), this.currentLanguage()),
                 currentLanguage: this.currentLanguage(),
                 node: node,
                 mode: 'edit',
@@ -5776,50 +5787,34 @@ var largeTextWidgetEdit_component = /*#__PURE__*/Object.freeze({
 class AXPLargeTextWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLargeTextWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPLargeTextWidgetViewComponent, isStandalone: true, selector: "axp-large-text-widget-view", usesInheritance: true, ngImport: i0, template: `
-
     <div class="ax-max-w-full ax-text-muted">
-
-      @let text = getValue() | axpResolveMultiLanguageString;
+      @let text = getValue() | translate | async;
 
       @if (text) {
-
         <span> {{ text }} </span>
-
       } @else {
-
         <span class="ax-text-muted">---</span>
-
       }
-
     </div>
-
-  `, isInline: true, dependencies: [{ kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ 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: AXPLargeTextWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-large-text-widget-view',
                     template: `
-
     <div class="ax-max-w-full ax-text-muted">
-
-      @let text = getValue() | axpResolveMultiLanguageString;
+      @let text = getValue() | translate | async;
 
       @if (text) {
-
         <span> {{ text }} </span>
-
       } @else {
-
         <span class="ax-text-muted">---</span>
-
       }
-
     </div>
-
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXPResolveMultiLanguageStringPipe],
+                    imports: [AXTranslationModule, AsyncPipe],
                 }]
         }] });
 
@@ -5830,10 +5825,11 @@ var largeTextWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPLargeTextWidget = {
     name: 'large-text-editor',
-    title: 'Large Text Box',
-    description: 'Inputs long text entries',
+    title: '@platform-layout-widgets:widgets.large-text-editor.title',
+    description: '@platform-layout-widgets:widgets.large-text-editor.description',
     icon: 'fa-light fa-input-text',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'string-filter',
     type: 'editor',
@@ -5970,10 +5966,11 @@ var listWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 const AXPDragDropListWidget = {
     name: 'list-editor',
-    title: 'Drag & Drop List',
-    description: 'Reorderable list with drag and drop',
+    title: '@platform-layout-widgets:widgets.list-editor.title',
+    description: '@platform-layout-widgets:widgets.list-editor.description',
     icon: 'fa-light fa-list',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     type: 'editor',
@@ -6249,10 +6246,11 @@ var numberBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPNumberBoxWidget = {
     name: 'number-editor',
-    title: 'Number Box',
-    description: 'Inputs numeric values',
+    title: '@platform-layout-widgets:widgets.number-editor.title',
+    description: '@platform-layout-widgets:widgets.number-editor.description',
     icon: 'fa-light fa-input-numeric',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_NUMERIC,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     defaultFilterWidgetName: 'number-filter',
@@ -6498,10 +6496,11 @@ var passwordBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPPasswordBoxWidget = {
     name: 'password-editor',
-    title: 'Password Box',
-    description: 'Secures password input',
+    title: '@platform-layout-widgets:widgets.password-editor.title',
+    description: '@platform-layout-widgets:widgets.password-editor.description',
     icon: 'fa-light fa-lock',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS,
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -6861,10 +6860,11 @@ var progressBarWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPProgressBarWidget = {
     name: 'progress-bar-editor',
-    title: 'Progress Bar',
-    description: 'Displays progress as a value out of a total with visual progress bar',
+    title: '@platform-layout-widgets:widgets.progress-bar-editor.title',
+    description: '@platform-layout-widgets:widgets.progress-bar-editor.description',
     icon: 'fa-light fa-chart-line-up',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_NUMERIC,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     properties: [
@@ -7078,10 +7078,11 @@ var ratePickerWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPRatePickerWidget = {
     name: 'rate-picker-editor',
-    title: 'Rate Picker',
-    description: 'Allows users to select a rating value',
+    title: '@platform-layout-widgets:widgets.rate-picker-editor.title',
+    description: '@platform-layout-widgets:widgets.rate-picker-editor.description',
     icon: 'fa-light fa-star',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_NUMERIC,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'number-filter',
     type: 'editor',
@@ -7123,30 +7124,97 @@ const AXPRatePickerWidget = {
     },
 };
 
+/** Stable context path for rich-text preview dialogs (layout builder + context store). */
+const AXP_RICH_TEXT_DIALOG_BODY_PATH = '__axpRichTextDialogBody';
+/**
+ * Turns camelCase / kebab-case property segments into Title Case words for fallback titles.
+ */
+function humanizePropertyPath(path) {
+    if (!path) {
+        return '';
+    }
+    const spaced = path.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/[-_]/g, ' ');
+    return spaced.replace(/\b\w/g, (c) => c.toUpperCase());
+}
+/**
+ * Resolves dialog title: translated keys (`@...`), humanized identifiers, or plain captions.
+ */
+async function resolveRichTextPreviewTitle(translation, caption, path) {
+    const raw = caption?.trim() || path?.trim() || '';
+    if (!raw) {
+        return '';
+    }
+    if (raw.startsWith('@')) {
+        return (await translation.translateAsync(raw)) ?? raw;
+    }
+    if (/^[a-z][a-zA-Z0-9]*$/.test(raw)) {
+        return humanizePropertyPath(raw);
+    }
+    return raw;
+}
+/**
+ * Approximate visible text length for rich HTML (decides inline vs truncated column cell).
+ */
+function richTextPlainTextLength(html) {
+    if (!html?.trim()) {
+        return 0;
+    }
+    try {
+        if (typeof DOMParser !== 'undefined') {
+            const doc = new DOMParser().parseFromString(html, 'text/html');
+            const text = doc.body.textContent?.replace(/\s+/g, ' ').trim() ?? '';
+            return text.length;
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    return html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim().length;
+}
+
 class AXPRichTextWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
         this.platform = inject(AXPlatform);
         this.layoutBuilder = inject(AXPLayoutBuilderService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
+        this.mlResolver = inject(AXTranslationService);
+    }
+    /** Plain-text length threshold: above this, cell is clamped and clickable for full preview. */
+    previewMaxChars() {
+        const v = this.options['previewMaxChars'];
+        return typeof v === 'number' && v > 0 ? v : 100;
+    }
+    /** Whether resolved HTML is long enough to warrant truncation + popup. */
+    isTruncatedPreview(resolvedHtml) {
+        return richTextPlainTextLength(resolvedHtml) > this.previewMaxChars();
+    }
+    onExpandClick(event) {
+        event.nativeEvent.preventDefault();
+        event.nativeEvent.stopPropagation();
+        void this.openPopup();
     }
     async openPopup() {
-        const html = this.mlResolver.resolve(this.rawValue);
+        const lang = this.mlResolver.getActiveLang();
+        const resolvedHtml = this.mlResolver.resolve(this.rawValue, lang) ?? '';
+        if (!this.isTruncatedPreview(resolvedHtml)) {
+            return;
+        }
+        const title = await resolveRichTextPreviewTitle(this.mlResolver, this.columnCaption, this.path);
         const size = this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md';
-        const ref = await this.layoutBuilder
+        await this.layoutBuilder
             .create()
             .dialog((dialog) => {
             dialog
-                .setTitle(this.path ?? '')
+                .setTitle(title)
                 .setSize(size)
+                .setContext({ [AXP_RICH_TEXT_DIALOG_BODY_PATH]: resolvedHtml })
                 .content((layoutBuilder) => {
                 layoutBuilder.flex((flex) => {
-                    flex.mode('view').formField('Content', (field) => {
-                        field.readonly(true).customWidget('rich-text-editor', {
-                            src: html,
-                            toolbar: [],
-                            height: 400,
-                        });
+                    flex.mode('view').richText({
+                        path: AXP_RICH_TEXT_DIALOG_BODY_PATH,
+                        defaultValue: resolvedHtml,
+                        showFullContent: true,
+                        height: 400,
                     });
                 });
             })
@@ -7155,42 +7223,71 @@ class AXPRichTextWidgetColumnComponent extends AXPColumnWidgetComponent {
             });
         })
             .show();
-        ref.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRichTextWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRichTextWidgetColumnComponent, isStandalone: true, selector: "axp-rich-text-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
-    @let html = rawValue | axpResolveMultiLanguageString;
+    @let html = rawValue | translate | async;
+    @let expandHint = '@platform-layout-widgets:widgets.rich-text-editor.column-expand-title' | translate | async;
     @if (html) {
-      <span
-        class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer"
-        (click)="openPopup()"
-        [innerHTML]="html | safe: 'html'"
-      >
-      </span>
+      @if (isTruncatedPreview(html)) {
+        <div class="ax-flex ax-gap-1 ax-items-start ax-min-w-0 ax-max-w-full">
+          <div
+            class="ax-min-w-0 ax-flex-1 ax-line-clamp-3 ax-overflow-hidden ax-break-words"
+            [innerHTML]="html | safe: 'html'"
+          ></div>
+          <ax-button
+            class="ax-xs ax-shrink-0"
+            look="blank"
+            [iconOnly]="true"
+            [text]="expandHint ?? ''"
+            [title]="expandHint ?? ''"
+            (onClick)="onExpandClick($event)"
+          >
+            <ax-icon icon="far fa-expand"></ax-icon>
+          </ax-button>
+        </div>
+      } @else {
+        <div class="ax-min-w-0 ax-max-w-full ax-break-words" [innerHTML]="html | safe: 'html'"></div>
+      }
     } @else {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { 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: AXPRichTextWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-rich-text-widget-column',
                     template: `
-    @let html = rawValue | axpResolveMultiLanguageString;
+    @let html = rawValue | translate | async;
+    @let expandHint = '@platform-layout-widgets:widgets.rich-text-editor.column-expand-title' | translate | async;
     @if (html) {
-      <span
-        class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer"
-        (click)="openPopup()"
-        [innerHTML]="html | safe: 'html'"
-      >
-      </span>
+      @if (isTruncatedPreview(html)) {
+        <div class="ax-flex ax-gap-1 ax-items-start ax-min-w-0 ax-max-w-full">
+          <div
+            class="ax-min-w-0 ax-flex-1 ax-line-clamp-3 ax-overflow-hidden ax-break-words"
+            [innerHTML]="html | safe: 'html'"
+          ></div>
+          <ax-button
+            class="ax-xs ax-shrink-0"
+            look="blank"
+            [iconOnly]="true"
+            [text]="expandHint ?? ''"
+            [title]="expandHint ?? ''"
+            (onClick)="onExpandClick($event)"
+          >
+            <ax-icon icon="far fa-expand"></ax-icon>
+          </ax-button>
+        </div>
+      } @else {
+        <div class="ax-min-w-0 ax-max-w-full ax-break-words" [innerHTML]="html | safe: 'html'"></div>
+      }
     } @else {
       <span class="ax-text-muted">---</span>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXSafePipe, AXPResolveMultiLanguageStringPipe],
+                    imports: [AXButtonModule, AXDecoratorModule, AXSafePipe, AXTranslationModule, AsyncPipe],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -7211,11 +7308,10 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
         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.mlResolver = inject(AXPMultiLanguageStringResolverService);
         this.currentLanguage = toSignal(this.translationService.langChanges$, {
             initialValue: this.translationService.getActiveLang(),
         });
-        this.getCurrentText = computed(() => this.mlResolver.resolve(this.getValue(), this.currentLanguage()), ...(ngDevMode ? [{ debugName: "getCurrentText" }] : /* istanbul ignore next */ []));
+        this.getCurrentText = computed(() => this.translationService.resolve(this.getValue(), this.currentLanguage()), ...(ngDevMode ? [{ debugName: "getCurrentText" }] : /* istanbul ignore next */ []));
     }
     onWysiwygChanged(e) {
         if (!e.isUserInteraction)
@@ -7250,7 +7346,7 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
             title: 'Select Language',
             size: 'lg',
             data: {
-                values: this.mlResolver.toLocaleMap(this.getValue(), this.currentLanguage()),
+                values: this.translationService.toLocaleMap(this.getValue(), this.currentLanguage()),
                 currentLanguage: this.currentLanguage(),
                 node: node,
                 mode: 'edit',
@@ -7367,29 +7463,40 @@ class AXPRichTextWidgetViewComponent extends AXPValueWidgetComponent {
         super(...arguments);
         this.platform = inject(AXPlatform);
         this.layoutBuilder = inject(AXPLayoutBuilderService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
-        /** Resolved HTML for the preview dialog (same rules as the inline snippet). */
+        this.mlResolver = inject(AXTranslationService);
+        this.currentLanguage = toSignal(this.mlResolver.langChanges$, {
+            initialValue: this.mlResolver.getActiveLang(),
+        });
+        /** Resolved HTML for inline snippet and preview dialog. */
         this.displayHtml = computed(() => {
             const v = this.getValue();
-            return this.mlResolver.resolve(v);
+            return this.mlResolver.resolve(v, this.currentLanguage());
         }, ...(ngDevMode ? [{ debugName: "displayHtml" }] : /* istanbul ignore next */ []));
+        /** Full-body preview (dialogs) vs truncated grid snippet. */
+        this.showFullContent = computed(() => this.options()['showFullContent'] === true, ...(ngDevMode ? [{ debugName: "showFullContent" }] : /* istanbul ignore next */ []));
+        this.previewMaxHeightPx = computed(() => {
+            const h = this.options()['height'];
+            return h != null && h > 0 ? h : 400;
+        }, ...(ngDevMode ? [{ debugName: "previewMaxHeightPx" }] : /* istanbul ignore next */ []));
     }
     async openPopup() {
+        const resolvedHtml = this.displayHtml();
+        const title = await resolveRichTextPreviewTitle(this.mlResolver, undefined, this.path);
         const size = this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md';
-        const ref = await this.layoutBuilder
+        await this.layoutBuilder
             .create()
             .dialog((dialog) => {
             dialog
-                .setTitle(this.path ?? '')
+                .setTitle(title)
                 .setSize(size)
+                .setContext({ [AXP_RICH_TEXT_DIALOG_BODY_PATH]: resolvedHtml })
                 .content((layoutBuilder) => {
                 layoutBuilder.flex((flex) => {
-                    flex.mode('view').formField('Content', (field) => {
-                        field.readonly(true).customWidget('rich-text-editor', {
-                            src: this.displayHtml(),
-                            toolbar: [],
-                            height: 400,
-                        });
+                    flex.mode('view').richText({
+                        path: AXP_RICH_TEXT_DIALOG_BODY_PATH,
+                        defaultValue: resolvedHtml,
+                        showFullContent: true,
+                        height: 400,
                     });
                 });
             })
@@ -7398,42 +7505,65 @@ class AXPRichTextWidgetViewComponent extends AXPValueWidgetComponent {
             });
         })
             .show();
-        ref.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRichTextWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRichTextWidgetViewComponent, isStandalone: true, selector: "axp-rich-text-widget-view", usesInheritance: true, ngImport: i0, template: `
-    @let html = getValue() | axpResolveMultiLanguageString;
-    @if (html) {
-      <span
-        class="ax-truncate ax-underline ax-cursor-pointer ax-text-muted"
-        (click)="openPopup()"
-        [innerHTML]="html | safe: 'html'"
-      >
-      </span>
+    @let html = getValue() | translate | async;
+    @if (showFullContent()) {
+      @if (html) {
+        <div
+          class="ax-overflow-auto ax-min-h-0 ax-rich-text-widget-full-preview"
+          [style.max-height.px]="previewMaxHeightPx()"
+          [innerHTML]="html | safe: 'html'"
+        ></div>
+      } @else {
+        <span class="ax-text-muted">---</span>
+      }
     } @else {
-      <span class="ax-text-muted">---</span>
+      @if (html) {
+        <span
+          class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer ax-text-muted"
+          (click)="openPopup()"
+          [innerHTML]="html | safe: 'html'"
+        >
+        </span>
+      } @else {
+        <span class="ax-text-muted">---</span>
+      }
     }
-  `, isInline: true, dependencies: [{ kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { 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: AXPRichTextWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-rich-text-widget-view',
                     template: `
-    @let html = getValue() | axpResolveMultiLanguageString;
-    @if (html) {
-      <span
-        class="ax-truncate ax-underline ax-cursor-pointer ax-text-muted"
-        (click)="openPopup()"
-        [innerHTML]="html | safe: 'html'"
-      >
-      </span>
+    @let html = getValue() | translate | async;
+    @if (showFullContent()) {
+      @if (html) {
+        <div
+          class="ax-overflow-auto ax-min-h-0 ax-rich-text-widget-full-preview"
+          [style.max-height.px]="previewMaxHeightPx()"
+          [innerHTML]="html | safe: 'html'"
+        ></div>
+      } @else {
+        <span class="ax-text-muted">---</span>
+      }
     } @else {
-      <span class="ax-text-muted">---</span>
+      @if (html) {
+        <span
+          class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer ax-text-muted"
+          (click)="openPopup()"
+          [innerHTML]="html | safe: 'html'"
+        >
+        </span>
+      } @else {
+        <span class="ax-text-muted">---</span>
+      }
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXSafePipe, AXPResolveMultiLanguageStringPipe],
+                    imports: [AXSafePipe, AXTranslationModule, AsyncPipe],
                 }]
         }] });
 
@@ -7444,10 +7574,11 @@ var richTextWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPRichTextWidget = {
     name: 'rich-text-editor',
-    title: 'Rich Text',
-    description: 'Formats and edits rich text',
+    title: '@platform-layout-widgets:widgets.rich-text-editor.title',
+    description: '@platform-layout-widgets:widgets.rich-text-editor.description',
     icon: 'fa-light fa-input-text',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_RICH,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'string-filter',
     type: 'editor',
@@ -7683,35 +7814,36 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
                 this.contextService.patch(itemToExpose, true);
             }
             //#endregion
-            //#region ----   Set Value Based on Mode   ----
-            if (this.filterMode()) {
-                // Filter mode: set value with operation structure
-                const newValue = e.value;
-                const text = this.selectedItems().map((item) => get(item, this.textField()));
-                this.setValue({
-                    value: newValue,
-                    displayText: text,
-                    operation: {
-                        type: this.multiple() ? 'in' : 'equal',
-                    },
-                });
+        }
+        //#region ----   Set Value Based on Mode   ----
+        // Apply strategy even when the value comes from outside (isUserInteraction=false).
+        if (this.filterMode()) {
+            // Filter mode: set value with operation structure
+            const newValue = e.value;
+            const text = this.selectedItems().map((item) => get(item, this.textField()));
+            this.setValue({
+                value: newValue,
+                displayText: text,
+                operation: {
+                    type: this.multiple() ? 'in' : 'equal',
+                },
+            });
+        }
+        else {
+            // Normal mode: set value directly
+            if (this.widgetsConfigs.selectValueStrategy === 'valueField') {
+                this.setValue(e.value);
             }
             else {
-                // Normal mode: set value directly
-                if (this.widgetsConfigs.selectValueStrategy === 'valueField') {
-                    this.setValue(e.value);
+                if (this.multiple()) {
+                    this.setValue(this.selectedItems());
                 }
                 else {
-                    if (this.multiple()) {
-                        this.setValue(this.selectedItems());
-                    }
-                    else {
-                        this.setValue(this.selectedItems()[0]);
-                    }
+                    this.setValue(this.selectedItems()[0]);
                 }
             }
-            //#endregion
         }
+        //#endregion
     }
     handleSearchValueChange(e) {
         if (e.isUserInteraction) {
@@ -7925,10 +8057,11 @@ var selectBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPSelectBoxWidget = {
     name: 'select-editor',
-    title: 'Select Box',
-    description: 'Chooses from dropdown options',
+    title: '@platform-layout-widgets:widgets.select-editor.title',
+    description: '@platform-layout-widgets:widgets.select-editor.description',
     icon: 'fa-light fa-list-dropdown',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'select-filter',
     type: 'editor',
@@ -8282,10 +8415,11 @@ var selectionListWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPSelectionListWidget = {
     name: 'selection-list-editor',
-    title: 'Selection List',
-    description: 'Selects from a list',
+    title: '@platform-layout-widgets:widgets.selection-list-editor.title',
+    description: '@platform-layout-widgets:widgets.selection-list-editor.description',
     icon: 'fa-light fa-list-radio',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'select-filter',
     properties: [
@@ -8775,10 +8909,11 @@ var tagEditorWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTagEditorWidget = {
     name: 'tag-editor',
-    title: 'Tag Editor',
+    title: '@platform-layout-widgets:widgets.tag-editor.title',
     icon: 'fa-light fa-tags',
-    description: 'Input and manage multiple tags',
+    description: '@platform-layout-widgets:widgets.tag-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
@@ -9162,10 +9297,11 @@ var templateBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTemplateBoxWidget = {
     name: 'template-box-editor',
-    title: 'Template Box',
+    title: '@platform-layout-widgets:widgets.template-box-editor.title',
     icon: 'fa-light fa-file-alt',
-    description: 'Advanced template text editor with language support',
+    description: '@platform-layout-widgets:widgets.template-box-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS,
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
     properties: [
@@ -9198,20 +9334,20 @@ const AXPTemplateBoxWidget = {
 class AXPTextBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTextBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPTextBoxWidgetColumnComponent, isStandalone: true, selector: "axp-text-box-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
-    @let text = rawValue | axpResolveMultiLanguageString;
+    @let text = rawValue | translate | async;
     @if (text) {
       {{ text }}
     } @else {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ 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: AXPTextBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-text-box-widget-column',
                     template: `
-    @let text = rawValue | axpResolveMultiLanguageString;
+    @let text = rawValue | translate | async;
     @if (text) {
       {{ text }}
     } @else {
@@ -9219,7 +9355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXPResolveMultiLanguageStringPipe],
+                    imports: [AXTranslationModule, AsyncPipe],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -9234,7 +9370,6 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         this.popupService = inject(AXPopupService);
         this.translationService = inject(AXTranslationService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
         this.multiLanguage = computed(() => this.options()['multiLanguage'], ...(ngDevMode ? [{ debugName: "multiLanguage" }] : /* istanbul ignore next */ []));
         this.hasClearButton = computed(() => this.options()['hasClearButton'], ...(ngDevMode ? [{ debugName: "hasClearButton" }] : /* istanbul ignore next */ []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -9258,7 +9393,6 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         if (!e.isUserInteraction) {
             return;
         }
-        ;
         if (this.multiLanguage()) {
             const v = this.getValue();
             const obj = v && typeof v === 'object' && !Array.isArray(v) ? { ...v } : {};
@@ -9270,7 +9404,7 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     getCurrentText() {
-        return this.mlResolver.resolve(this.getValue(), this.currentLanguage());
+        return this.translationService.resolve(this.getValue(), this.currentLanguage());
     }
     async openMultiLanguagePopup() {
         const node = {
@@ -9285,7 +9419,7 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
             title: 'Multi-language Text',
             size: 'md',
             data: {
-                values: this.mlResolver.toLocaleMap(this.getValue(), this.currentLanguage()),
+                values: this.translationService.toLocaleMap(this.getValue(), this.currentLanguage()),
                 currentLanguage: this.currentLanguage(),
                 node: node,
                 mode: 'edit',
@@ -9401,33 +9535,35 @@ var textBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
 
 class AXPTextBoxWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTextBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPTextBoxWidgetViewComponent, isStandalone: true, selector: "axp-text-box-widget-view", usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-text-muted">
-      @let text = getValue() | axpResolveMultiLanguageString;
-      @if (text) {
-        <p>{{ text }}</p>
-      } @else {
-        <p class="ax-text-muted">---</p>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPTextBoxWidgetViewComponent, isStandalone: true, selector: "axp-text-box-widget-view", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-text-muted">
+      @let text = getValue() | translate | async;
+
+      @if (text) {
+        <p>{{ text }}</p>
+      } @else {
+        <p class="ax-text-muted">---</p>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ 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: AXPTextBoxWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-text-box-widget-view',
-                    template: `
-    <div class="ax-text-muted">
-      @let text = getValue() | axpResolveMultiLanguageString;
-      @if (text) {
-        <p>{{ text }}</p>
-      } @else {
-        <p class="ax-text-muted">---</p>
-      }
-    </div>
+                    template: `
+    <div class="ax-text-muted">
+      @let text = getValue() | translate | async;
+
+      @if (text) {
+        <p>{{ text }}</p>
+      } @else {
+        <p class="ax-text-muted">---</p>
+      }
+    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXPResolveMultiLanguageStringPipe],
+                    imports: [AXTranslationModule, AsyncPipe],
                 }]
         }] });
 
@@ -9438,10 +9574,11 @@ var textBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTextBoxWidget = {
     name: 'text-editor',
-    title: 'Text Box',
+    title: '@platform-layout-widgets:widgets.text-editor.title',
     icon: 'fa-light fa-input-text',
-    description: 'Inputs single-line text',
+    description: '@platform-layout-widgets:widgets.text-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
@@ -9783,11 +9920,12 @@ var toggleWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPToggleWidget = {
     name: 'toggle-editor',
-    title: 'Toggle',
-    description: 'Switches between on/off states',
+    title: '@platform-layout-widgets:widgets.toggle-editor.title',
+    description: '@platform-layout-widgets:widgets.toggle-editor.description',
     icon: 'fa-light fa-toggle-on',
     defaultFilterWidgetName: 'boolean-filter',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     properties: [
@@ -10360,10 +10498,11 @@ var avatarWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPAvatarWidget = {
     name: 'avatar',
-    title: 'Avatar',
-    description: 'Displays an avatar image based on a reference ID and type',
+    title: '@platform-layout-widgets:widgets.avatar.title',
+    description: '@platform-layout-widgets:widgets.avatar.description',
     icon: 'fa-light fa-image-user',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     aiDescription: 'User or entity avatar from a reference id/type. Use when the answer should show who or what something belongs to, not a full photo gallery.',
     groups: [AXPWidgetGroupEnum.EntityWidget],
     type: 'editor',
@@ -10601,10 +10740,11 @@ var codeEditorWidgetColumn_component = /*#__PURE__*/Object.freeze({
 //#region ----   Widget Config   ----
 const AXPCodeEditorWidget = {
     name: 'code-editor',
-    title: 'Code Editor',
-    description: 'A code editor widget for editing code expressions and scripts',
+    title: '@platform-layout-widgets:widgets.code-editor.title',
+    description: '@platform-layout-widgets:widgets.code-editor.description',
     icon: 'fa-light fa-code',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_INPUT,
     aiDescription: 'Syntax-highlighted code block. Use for snippets, scripts, or configs where line structure and language matter; bind source via data path or options.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
@@ -10914,10 +11054,11 @@ var dataListWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPDataListWidget = {
     name: 'data-list',
-    title: 'Data List',
-    description: 'Displays data in a list like table format with customizable columns',
+    title: '@platform-layout-widgets:widgets.data-list.title',
+    description: '@platform-layout-widgets:widgets.data-list.description',
     icon: 'fa-light fa-table',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_LISTS,
     aiDescription: 'Use for tabular data: multiple rows with defined columns, paging, and optional row commands. Provide options.dataSource (rows) and options.columns.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'view',
@@ -11824,7 +11965,7 @@ class AXPFileUploaderWidgetService {
             showEditDialogAfterSelect: false,
         };
         options = { ...defaultOptions, ...options };
-        const component = await import('./acorex-platform-layout-widgets-file-list-popup.component-9uCkMxcc.mjs').then((m) => m.AXPFileListPopupComponent);
+        const component = await import('./acorex-platform-layout-widgets-file-list-popup.component-CDYAGBku.mjs').then((m) => m.AXPFileListPopupComponent);
         const result = await this.popupService.open(component, {
             title: await this.translate.translateAsync('@document-management:terms.common.file'),
             data: {
@@ -11862,9 +12003,9 @@ class AXPFileUploaderWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.fileService = inject(AXPFileUploaderWidgetService);
     }
     async openFileList() {
-        console.log(this.rawValue);
-        this.fileService.showFileList({
-            files: castArray(this.rawValue ?? []),
+        const files = castArray(this.rawValue ?? []).filter((item) => item != null && typeof item === 'object' && typeof item.name === 'string');
+        await this.fileService.showFileList({
+            files,
             readonly: true,
         });
     }
@@ -12322,10 +12463,11 @@ var fileUploaderWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPFileUploaderWidget = {
     name: 'file-uploader',
-    title: 'File Uploader',
-    description: 'Uploads and manages files',
+    title: '@platform-layout-widgets:widgets.file-uploader.title',
+    description: '@platform-layout-widgets:widgets.file-uploader.description',
     icon: 'fa-light fa-files',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     aiDescription: 'Use when the answer involves file attachments: list, upload, or download. Prefer when the user references documents or media beyond inline text.',
     groups: ['form-element'],
     type: 'editor',
@@ -13053,10 +13195,11 @@ var galleryWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPGalleryWidget = {
     name: 'gallery',
-    title: 'Media Gallery',
-    description: 'Shows and edits image galleries',
+    title: '@platform-layout-widgets:widgets.gallery.title',
+    description: '@platform-layout-widgets:widgets.gallery.description',
     icon: 'fa-light fa-images',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     aiDescription: 'Image gallery with thumbnails and optional fullscreen. Use for multiple images or a carousel-like browse experience (not a single static image).',
     groups: [AXPWidgetGroupEnum.FormElement],
     properties: [
@@ -13534,13 +13677,13 @@ var imageMarkerWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPImageMarkerWidget = {
     name: 'image-marker',
-    title: 'Image Marker',
-    description: 'Image Marker Widget to add markers to an image',
+    title: '@platform-layout-widgets:widgets.image-marker.title',
+    description: '@platform-layout-widgets:widgets.image-marker.description',
     icon: 'fa-light fa-map-marker-alt',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     aiDescription: 'Use when highlighting points or regions on a base image (annotations, hotspots). Provide base image plus marker coordinates or overlays in options.',
     groups: [AXPWidgetGroupEnum.FormElement],
-    aiCatalog: 'include',
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -13704,12 +13847,13 @@ var jsonViewerWidgetEdit_component = /*#__PURE__*/Object.freeze({
 //#region ----   Widget Config   ----
 const AXPJsonViewerWidget = {
     name: 'json-viewer',
-    title: 'JSON Viewer',
-    description: 'Displays JSON data in a formatted, collapsible tree view',
+    title: '@platform-layout-widgets:widgets.json-viewer.title',
+    description: '@platform-layout-widgets:widgets.json-viewer.description',
     icon: 'fa-light fa-code',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_DATA,
     aiDescription: 'Shows JSON as an expandable tree. Prefer when the payload is structured data (objects/arrays) and hierarchy matters more than plain text.',
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.BaseWidget],
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -14172,10 +14316,11 @@ var qrcodeWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPQrcodeWidget = {
     name: 'qrcode',
-    title: 'QR Code',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    title: '@platform-layout-widgets:widgets.qrcode.title',
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     icon: 'fa-light fa-qrcode',
-    description: 'Display and edit QR Codes',
+    description: '@platform-layout-widgets:widgets.qrcode.description',
     aiDescription: 'Renders a scannable QR code from text or URL (options.content). Use when the user should open a link or payload on a phone.',
     type: 'view',
     properties: [
@@ -14465,9 +14610,10 @@ var schedulerPickerWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPSchedulerPickerWidget = {
     name: 'scheduler-picker',
-    title: 'Scheduler Picker',
+    title: '@platform-layout-widgets:widgets.scheduler-picker.title',
     icon: 'fa-light fa-calendar-clock',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_INPUT,
     aiDescription: 'Schedule or calendar picker. Use when the user selects dates, times, or recurring slots; bind value via data path.',
     type: 'editor',
     groups: [AXPWidgetGroupEnum.FormElement],
@@ -14804,10 +14950,11 @@ var signaturePadWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPSignatureWidget = {
     name: 'signature',
-    title: 'Signature',
-    description: 'Captures digital signatures',
+    title: '@platform-layout-widgets:widgets.signature.title',
+    description: '@platform-layout-widgets:widgets.signature.description',
     icon: 'fa-light fa-file-signature',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_INPUT,
     aiDescription: 'Digital signature capture or display. Use when consent, approval, or handwritten input is required instead of typed text.',
     type: 'editor',
     properties: [
@@ -14891,6 +15038,8 @@ class AXPStatusChipComponent {
         this.isPopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPopoverOpen" }] : /* istanbul ignore next */ []));
         this.isUpdating = signal(false, ...(ngDevMode ? [{ debugName: "isUpdating" }] : /* istanbul ignore next */ []));
         this.providerSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "providerSignal" }] : /* istanbul ignore next */ []));
+        /** Native tooltip from translated `AXPStatusDefinition.description` (i18n key). */
+        this.chipTooltip = signal(null, ...(ngDevMode ? [{ debugName: "chipTooltip" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Computed Properties   ----
         this.statuses = computed(() => this.providerSignal()?.statuses ?? [], ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
@@ -14930,15 +15079,9 @@ class AXPStatusChipComponent {
             if (!Array.isArray(statuses) || statuses.length === 0) {
                 return [];
             }
-            // If no transitions defined, show all other statuses as available options
+            // No declared transitions: executeTransition() rejects every path — do not offer fake targets
             if (!Array.isArray(transitions) || transitions.length === 0) {
-                return statuses
-                    .filter((s) => s.name !== currentStatus.name)
-                    .map((s) => ({
-                    from: currentStatus.name,
-                    to: s.name,
-                    toStatus: s,
-                }));
+                return [];
             }
             // Filter transitions that start from current status
             const availableTransitions = transitions.filter((t) => t.from === currentStatus.name);
@@ -14974,6 +15117,18 @@ class AXPStatusChipComponent {
                 this.providerSignal.set(provider);
             });
         }, ...(ngDevMode ? [{ debugName: "loadProvider" }] : /* istanbul ignore next */ []));
+        this.syncDescriptionTooltip = effect(() => {
+            const def = this.currentStatus();
+            const descKey = def?.description;
+            if (!descKey) {
+                untracked(() => this.chipTooltip.set(null));
+                return;
+            }
+            void this.translationService
+                .translateAsync(descKey)
+                .then((t) => untracked(() => this.chipTooltip.set(t || null)))
+                .catch(() => untracked(() => this.chipTooltip.set(null)));
+        }, ...(ngDevMode ? [{ debugName: "syncDescriptionTooltip" }] : /* istanbul ignore next */ []));
     }
     //#endregion
     //#region ----   Public Methods   ----
@@ -15072,8 +15227,12 @@ class AXPStatusChipComponent {
         [class.ax-cursor-pointer]="hasTransitions"
         [class.ax-cursor-default]="!hasTransitions"
         (click)="hasTransitions && openPopover()"
+        [attr.title]="chipTooltip() ?? null"
         #chipElement
       >
+        @if (currentStatusDef.icon) {
+          <i [class]="currentStatusDef.icon + ' ax-text-[0.85em] ax-opacity-90'"></i>
+        }
         <span>{{ currentStatusDef.title | translate | async }}</span>
         @if (hasTransitions) {
           <i class="fa-light fa-chevron-down ax-text-xs"></i>
@@ -15140,8 +15299,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         [class.ax-cursor-pointer]="hasTransitions"
         [class.ax-cursor-default]="!hasTransitions"
         (click)="hasTransitions && openPopover()"
+        [attr.title]="chipTooltip() ?? null"
         #chipElement
       >
+        @if (currentStatusDef.icon) {
+          <i [class]="currentStatusDef.icon + ' ax-text-[0.85em] ax-opacity-90'"></i>
+        }
         <span>{{ currentStatusDef.title | translate | async }}</span>
         @if (hasTransitions) {
           <i class="fa-light fa-chevron-down ax-text-xs"></i>
@@ -15230,8 +15393,22 @@ class AXPStatusWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.definitionKey = computed(() => {
             return this.options['definitionKey'] ?? null;
         }, ...(ngDevMode ? [{ debugName: "definitionKey" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, the grid cell is display-only (no transition popover). Default false preserves existing grids.
+         */
+        this.columnReadonly = computed(() => !!this.options['readonly'], ...(ngDevMode ? [{ debugName: "columnReadonly" }] : /* istanbul ignore next */ []));
         this.entityData = computed(() => {
-            return this.rowDataSignal();
+            const row = this.rowDataSignal();
+            if (!row || typeof row !== 'object') {
+                return null;
+            }
+            const entityKey = this.options['entity'];
+            const fieldName = this.options['fieldName'];
+            return {
+                ...row,
+                ...(entityKey ? { entity: entityKey, entityName: entityKey } : {}),
+                ...(fieldName ? { statusField: fieldName } : {}),
+            };
         }, ...(ngDevMode ? [{ debugName: "entityData" }] : /* istanbul ignore next */ []));
         this.resolvedStatuses = computed(() => {
             return this.providerSignal()?.statuses ?? [];
@@ -15271,15 +15448,9 @@ class AXPStatusWidgetColumnComponent extends AXPColumnWidgetComponent {
             if (!Array.isArray(statuses) || statuses.length === 0) {
                 return [];
             }
-            // If no transitions defined, show all other statuses as available options
+            // No declared transitions: executeTransition() rejects every path — do not offer fake targets
             if (!Array.isArray(transitions) || transitions.length === 0) {
-                return statuses
-                    .filter((s) => s.name !== currentStatus.name)
-                    .map((status) => ({
-                    from: currentStatus.name,
-                    to: status.name,
-                    toStatus: status,
-                }));
+                return [];
             }
             // Filter transitions that start from current status
             const availableTransitions = transitions.filter((t) => t.from === currentStatus.name);
@@ -15330,7 +15501,7 @@ class AXPStatusWidgetColumnComponent extends AXPColumnWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXPStatusWidgetColumnComponent, isStandalone: true, selector: "axp-status-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData", rawValueInput: ["rawValue", "rawValueInput"], rowDataInput: ["rowData", "rowDataInput"] }, viewQueries: [{ propertyName: "statusChip", first: true, predicate: AXPStatusChipComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <axp-status-chip
       [status]="statusItem()"
-      [readonly]="false"
+      [readonly]="columnReadonly()"
       [availableTransitions]="getAvailableTransitions()"
       [definitionKey]="definitionKey()"
       [entityData]="entityData()"
@@ -15348,7 +15519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     <axp-status-chip
       [status]="statusItem()"
-      [readonly]="false"
+      [readonly]="columnReadonly()"
       [availableTransitions]="getAvailableTransitions()"
       [definitionKey]="definitionKey()"
       [entityData]="entityData()"
@@ -15385,6 +15556,8 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
         //#region ----   Properties   ----
         this.statusService = inject(AXPStatusDefinitionProviderService);
         this.definitionKey = computed(() => this.options()['definitionKey'] ?? null, ...(ngDevMode ? [{ debugName: "definitionKey" }] : /* istanbul ignore next */ []));
+        /** When true, the chip is display-only (no transition popover). Set via interface options. */
+        this.isReadonly = computed(() => !!this.options()['readonly'] || !!this.options()['disabled'], ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
         this.providerSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "providerSignal" }] : /* istanbul ignore next */ []));
         this.statuses = computed(() => this.providerSignal()?.statuses ?? [], ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
         this.transitions = computed(() => this.providerSignal()?.transitions ?? [], ...(ngDevMode ? [{ debugName: "transitions" }] : /* istanbul ignore next */ []));
@@ -15472,15 +15645,9 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
             if (!Array.isArray(statuses) || statuses.length === 0) {
                 return [];
             }
-            // If no transitions defined, show all other statuses as available options
+            // No declared transitions: executeTransition() rejects every path — do not offer fake targets
             if (!Array.isArray(transitions) || transitions.length === 0) {
-                return statuses
-                    .filter((s) => s.name !== currentStatus.name)
-                    .map((status) => ({
-                    from: currentStatus.name,
-                    to: status.name,
-                    toStatus: status,
-                }));
+                return [];
             }
             // Filter transitions that start from current status
             const availableTransitions = transitions.filter((t) => t.from === currentStatus.name);
@@ -15520,19 +15687,41 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
         // Could show a toast notification here if needed
     }
     /**
-     * Get entity data for command execution context
+     * Build context for default `Entity:UpdateStatus` (entity key, record id, status field path).
      */
     getEntityData() {
-        // Return current entity data if available
-        // This could be enhanced to get full entity context
-        const value = this.getValue();
-        return value ? { value } : null;
+        const opts = this.options();
+        const entityKey = (opts['entityName'] ?? opts['entity']);
+        const statusField = (opts['statusField'] ?? opts['fieldName'] ?? this.path);
+        const parentPath = this.parentPath();
+        const idPathCandidates = [
+            parentPath ? `${parentPath}.id` : null,
+            'id',
+            parentPath ? `${parentPath}._id` : null,
+            '_id',
+        ].filter((p) => !!p);
+        let id;
+        for (const p of idPathCandidates) {
+            id = this.contextService.getValue(p);
+            if (id != null && String(id).length > 0) {
+                break;
+            }
+        }
+        if (!entityKey || id == null || String(id).length === 0) {
+            return null;
+        }
+        return {
+            entity: entityKey,
+            entityName: entityKey,
+            statusField: statusField ?? 'statusId',
+            id: String(id),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPStatusWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXPStatusWidgetEditComponent, isStandalone: true, selector: "axp-status-widget-edit", viewQueries: [{ propertyName: "statusChip", first: true, predicate: AXPStatusChipComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <axp-status-chip
       [status]="currentStatus()"
-      [readonly]="false"
+      [readonly]="isReadonly()"
       [availableTransitions]="getAvailableTransitions()"
       [definitionKey]="definitionKey()"
       [entityData]="getEntityData()"
@@ -15550,7 +15739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     <axp-status-chip
       [status]="currentStatus()"
-      [readonly]="false"
+      [readonly]="isReadonly()"
       [availableTransitions]="getAvailableTransitions()"
       [definitionKey]="definitionKey()"
       [entityData]="getEntityData()"
@@ -15580,11 +15769,12 @@ class AXPStatusWidgetViewComponent extends AXPDataListWidgetComponent {
         //#region ----   Properties   ----
         this.statusService = inject(AXPStatusDefinitionProviderService);
         this.definitionKey = computed(() => this.options()['definitionKey'] ?? null, ...(ngDevMode ? [{ debugName: "definitionKey" }] : /* istanbul ignore next */ []));
+        /** When true, the chip is display-only (no transition popover). Set via interface options. */
+        this.isReadonly = computed(() => !!this.options()['readonly'] || !!this.options()['disabled'], ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
         this.providerSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "providerSignal" }] : /* istanbul ignore next */ []));
         this.resolvedStatuses = computed(() => this.providerSignal()?.statuses ?? [], ...(ngDevMode ? [{ debugName: "resolvedStatuses" }] : /* istanbul ignore next */ []));
         this.resolvedTransitions = computed(() => this.providerSignal()?.transitions ?? [], ...(ngDevMode ? [{ debugName: "resolvedTransitions" }] : /* istanbul ignore next */ []));
         //#endregion
-        //#endregion
         //#region ----   Effects   ----
         this.loadProvider = effect(async () => {
             const key = this.definitionKey();
@@ -15641,15 +15831,9 @@ class AXPStatusWidgetViewComponent extends AXPDataListWidgetComponent {
             if (!Array.isArray(statuses) || statuses.length === 0) {
                 return [];
             }
-            // If no transitions defined, show all other statuses as available options
+            // No declared transitions: executeTransition() rejects every path — do not offer fake targets
             if (!Array.isArray(transitions) || transitions.length === 0) {
-                return statuses
-                    .filter((s) => s.name !== currentStatus.name)
-                    .map((status) => ({
-                    from: currentStatus.name,
-                    to: status.name,
-                    toStatus: status,
-                }));
+                return [];
             }
             // Filter transitions that start from current status
             const availableTransitions = transitions.filter((t) => t.from === currentStatus.name);
@@ -15702,7 +15886,7 @@ class AXPStatusWidgetViewComponent extends AXPDataListWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXPStatusWidgetViewComponent, isStandalone: true, selector: "axp-status-widget-view", viewQueries: [{ propertyName: "statusChip", first: true, predicate: AXPStatusChipComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <axp-status-chip
       [status]="currentStatus()"
-      [readonly]="false"
+      [readonly]="isReadonly()"
       [availableTransitions]="getAvailableTransitions()"
       [definitionKey]="definitionKey()"
       [entityData]="getEntityData()"
@@ -15720,7 +15904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     <axp-status-chip
       [status]="currentStatus()"
-      [readonly]="false"
+      [readonly]="isReadonly()"
       [availableTransitions]="getAvailableTransitions()"
       [definitionKey]="definitionKey()"
       [entityData]="getEntityData()"
@@ -15742,10 +15926,11 @@ var statusWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPStatusWidget = {
     name: 'status-widget',
-    title: 'Status Widget',
-    description: 'Displays and manages entity status with visual indicators',
+    title: '@platform-layout-widgets:widgets.status-widget.title',
+    description: '@platform-layout-widgets:widgets.status-widget.description',
     icon: 'fa-light fa-circle-check',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_DATA,
     aiDescription: 'Visual status chip or badge for entity/state. Use when the answer should highlight a single workflow or lifecycle state (e.g. open, approved).',
     groups: [AXPWidgetGroupEnum.EntityWidget],
     defaultFilterWidgetName: 'status-filter',
@@ -15778,10 +15963,11 @@ const AXPStatusWidget = {
 //#region ----   Widget Config   ----
 const AXPStopwatchWidget = {
     name: 'stopwatch',
-    title: 'Stopwatch',
-    description: 'A stopwatch widget that can count up or count down from a time limit',
+    title: '@platform-layout-widgets:widgets.stopwatch.title',
+    description: '@platform-layout-widgets:widgets.stopwatch.description',
     icon: 'fa-light fa-stopwatch',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_TOOLS,
     aiDescription: 'Live stopwatch or countdown. Use when the answer involves elapsed time, deadlines, or timed steps; configure mode (count-up vs count-down) in options.',
     groups: [AXPWidgetGroupEnum.UtilityWidget],
     type: 'view',
@@ -15962,10 +16148,11 @@ var stopwatchWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPWidgetFieldConfiguratorWidget = {
     name: 'widget-field-configurator',
-    title: 'Widget Field Configurator',
-    icon: 'fa-solid fa-puzzle-piece',
-    description: 'Configure widget type and options for a single field',
+    title: '@platform-layout-widgets:widgets.widget-field-configurator.title',
+    icon: 'fa-light fa-puzzle-piece',
+    description: '@platform-layout-widgets:widgets.widget-field-configurator.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CONFIG,
     groups: [AXPWidgetGroupEnum.UtilityWidget],
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
@@ -16182,12 +16369,12 @@ class AXPWidgetFieldConfiguratorWidgetColumnComponent extends AXPColumnWidgetCom
     @if (widget()) {
       <i [class]="widget()?.icon" class="fa-fw"></i>&nbsp;
       <span [title]="widget()?.title" class="ax-text-xs ax-font-medium">
-        {{ widget()?.title }}
+        {{ widget()?.title | translate | async }}
       </span>
     } @else {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ 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: AXPWidgetFieldConfiguratorWidgetColumnComponent, decorators: [{
             type: Component,
@@ -16197,14 +16384,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     @if (widget()) {
       <i [class]="widget()?.icon" class="fa-fw"></i>&nbsp;
       <span [title]="widget()?.title" class="ax-text-xs ax-font-medium">
-        {{ widget()?.title }}
+        {{ widget()?.title | translate | async }}
       </span>
     } @else {
       <span class="ax-text-muted">---</span>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [],
+                    imports: [AXTranslationModule, AsyncPipe],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -16216,10 +16403,11 @@ var widgetFieldConfiguratorWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 const AXPItemConfiguratorWidget = {
     name: 'item-configurator',
-    title: 'Item Configurator',
-    icon: 'fa-solid fa-sliders',
-    description: 'Select an item and edit settings via the generic property viewer; the form value remains a widget node (type + options) for compatibility.',
+    title: '@platform-layout-widgets:widgets.item-configurator.title',
+    icon: 'fa-light fa-sliders',
+    description: '@platform-layout-widgets:widgets.item-configurator.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CONFIG,
     groups: [AXPWidgetGroupEnum.UtilityWidget],
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
@@ -17215,9 +17403,10 @@ var advancedGridWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPAdvancedGridWidget = {
     name: 'advanced-grid-layout',
-    title: 'Advanced Grid Layout',
+    title: '@platform-layout-widgets:widgets.advanced-grid-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     icon: 'fa-light fa-grid-2',
     properties: [
         AXP_NAME_PROPERTY,
@@ -17455,9 +17644,10 @@ var advancedGridItemWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPAdvancedGridItemWidget = {
     name: 'advanced-grid-item-layout',
-    title: 'Advanced Grid Item',
+    title: '@platform-layout-widgets:widgets.advanced-grid-item-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     icon: 'fa-light fa-objects-column',
     properties: [
         AXP_NAME_PROPERTY,
@@ -17600,10 +17790,11 @@ var blockWidgetView_component = /*#__PURE__*/Object.freeze({
 const AXPBlockWidget = {
     name: 'block-layout',
     type: 'container',
-    title: 'Block Layout',
-    description: 'Organizes content in blocks',
+    title: '@platform-layout-widgets:widgets.block-layout.title',
+    description: '@platform-layout-widgets:widgets.block-layout.description',
     icon: 'fa-light fa-block',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     groups: [AXPWidgetGroupEnum.FormElement],
     options: {
         canInsert: true,
@@ -17661,7 +17852,7 @@ class AXPFieldsetWidgetDesignerComponent extends AXPLayoutBaseWidgetComponent {
           @if (icon()) {
             <i [class]="icon()" style="margin-inline-end: 0.5em;"></i>
           }
-          {{ title() | axpResolveMultiLanguageString | translate | async }}
+          {{ title() | translate | async }}
         </legend>
       }
       <div class="axp-fieldset-content">
@@ -17680,7 +17871,7 @@ class AXPFieldsetWidgetDesignerComponent extends AXPLayoutBaseWidgetComponent {
         }
       </div>
     </fieldset>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }, { 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: AXPFieldsetWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -17693,7 +17884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           @if (icon()) {
             <i [class]="icon()" style="margin-inline-end: 0.5em;"></i>
           }
-          {{ title() | axpResolveMultiLanguageString | translate | async }}
+          {{ title() | translate | async }}
         </legend>
       }
       <div class="axp-fieldset-content">
@@ -17720,7 +17911,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPWidgetCoreModule,
                         AXPWidgetDesignerRendererDirective,
                         AXPDesignerAddWidgetMiniButtonComponent,
-                        AXPResolveMultiLanguageStringPipe,
                     ],
                     providers: [
                         {
@@ -17762,11 +17952,11 @@ class AXPFieldsetWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFieldsetWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget-view", usesInheritance: true, ngImport: i0, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  @if (shouldShowTitle()) {\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    {{ title() | axpResolveMultiLanguageString | translate | async }}\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n      {{ description() | axpResolveMultiLanguageString | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- Card Style -->\n@case ('card') {\n<div class=\"card\">\n  @if (shouldShowTitle()) {\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      @if (icon()) {\n      <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n      }\n      <div class=\"text-content\">\n        <h3 class=\"title\">{{ title() | axpResolveMultiLanguageString | translate | async }}</h3>\n        @if (description()) {\n        <p class=\"description\">{{ description() | axpResolveMultiLanguageString | translate | async }}</p>\n        }\n      </div>\n    </div>\n    <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n      @if (collapsible()) {\n      <i class=\"fa-solid fa-chevron-down\"></i>\n      }\n    </div>\n  </div>\n  }\n\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</div>\n}\n<!-- Group Line style -->\n@case ('group') {\n<fieldset class=\"group\">\n  @if (shouldShowTitle()) {\n  <legend class=\"legend\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    <h3 class=\"title\">{{ title() | axpResolveMultiLanguageString | translate | async }}</h3>\n    <div class=\"title-line\"></div>\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n      {{ description() | axpResolveMultiLanguageString | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- Container Style -->\n@case ('container') {\n<div class=\"container\">\n  @for (node of children(); track $index) {\n  <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n    [mode]=\"node.mode ?? this.mode\"></ng-container>\n  }\n</div>\n}\n<!-- End of switch-->\n}", styles: [":host{display:block;height:100%;width:100%}:host>.fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host>.fieldset>.legend{display:inline-flex;min-width:0px;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600}:host>.fieldset>.legend .title{margin:0;flex-shrink:0;white-space:nowrap;padding:0}:host>.fieldset>.content{display:grid;gap:1rem}:host>.fieldset>.content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.group{padding:0}:host>.group>.legend{margin-bottom:1rem;display:flex;width:100%;flex-direction:column;gap:.25rem;padding:0}:host>.group>.legend .title{margin:0;width:fit-content;white-space:nowrap;padding:0;font-size:1rem;line-height:1.5rem;font-weight:500}:host>.group>.legend .title-line{margin-top:.25rem;height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host>.group>.content{display:grid;gap:1rem}:host>.group>.content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.card{height:100%;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.625rem 1.25rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:.5rem}:host>.card>.legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host>.card>.legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host>.card>.legend .caption .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host>.card>.content{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem}:host>.container{display:grid;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget-view", usesInheritance: true, ngImport: i0, template: "@switch (look()) {\n  <!-- fieldset Style -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\" (click)=\"toggleCollapse()\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n          }\n          {{ title() | translate | async }}\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Card Style -->\n  @case ('card') {\n    <div class=\"card\">\n      @if (shouldShowTitle()) {\n        <div class=\"legend\" (click)=\"toggleCollapse()\">\n          <div class=\"caption\">\n            @if (icon()) {\n              <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n            }\n            <div class=\"text-content\">\n              <h3 class=\"title\">{{ title() | translate | async }}</h3>\n              @if (description()) {\n                <p class=\"description\">{{ description() | translate | async }}</p>\n              }\n            </div>\n          </div>\n          <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n            @if (collapsible()) {\n              <i class=\"fa-solid fa-chevron-down\"></i>\n            }\n          </div>\n        </div>\n      }\n\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n  <!-- Group Line style -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n          }\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          <div class=\"title-line\"></div>\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Container Style -->\n  @case ('container') {\n    <div class=\"container\">\n      @for (node of children(); track $index) {\n        <ng-container\n          axp-widget-renderer\n          [node]=\"node\"\n          [index]=\"index\"\n          [parentNode]=\"this\"\n          [mode]=\"node.mode ?? this.mode\"\n        ></ng-container>\n      }\n    </div>\n  }\n  <!-- End of switch-->\n}\n", styles: [":host{display:block;height:100%;width:100%}:host>.fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host>.fieldset>.legend{display:inline-flex;min-width:0px;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600}:host>.fieldset>.legend .title{margin:0;flex-shrink:0;white-space:nowrap;padding:0}:host>.fieldset>.content{display:grid;gap:1rem}:host>.fieldset>.content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.group{padding:0}:host>.group>.legend{margin-bottom:1rem;display:flex;width:100%;flex-direction:column;gap:.25rem;padding:0}:host>.group>.legend .title{margin:0;width:fit-content;white-space:nowrap;padding:0;font-size:1rem;line-height:1.5rem;font-weight:500}:host>.group>.legend .title-line{margin-top:.25rem;height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host>.group>.content{display:grid;gap:1rem}:host>.group>.content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.card{height:100%;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.625rem 1.25rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:.5rem}:host>.card>.legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host>.card>.legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host>.card>.legend .caption .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host>.card>.content{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem}:host>.container{display:grid;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXPFieldsetWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-fieldset-widget-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPWidgetCoreModule, AXTranslationModule, AXPResolveMultiLanguageStringPipe], standalone: true, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  @if (shouldShowTitle()) {\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    {{ title() | axpResolveMultiLanguageString | translate | async }}\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n      {{ description() | axpResolveMultiLanguageString | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- Card Style -->\n@case ('card') {\n<div class=\"card\">\n  @if (shouldShowTitle()) {\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      @if (icon()) {\n      <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n      }\n      <div class=\"text-content\">\n        <h3 class=\"title\">{{ title() | axpResolveMultiLanguageString | translate | async }}</h3>\n        @if (description()) {\n        <p class=\"description\">{{ description() | axpResolveMultiLanguageString | translate | async }}</p>\n        }\n      </div>\n    </div>\n    <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n      @if (collapsible()) {\n      <i class=\"fa-solid fa-chevron-down\"></i>\n      }\n    </div>\n  </div>\n  }\n\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</div>\n}\n<!-- Group Line style -->\n@case ('group') {\n<fieldset class=\"group\">\n  @if (shouldShowTitle()) {\n  <legend class=\"legend\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    <h3 class=\"title\">{{ title() | axpResolveMultiLanguageString | translate | async }}</h3>\n    <div class=\"title-line\"></div>\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n      {{ description() | axpResolveMultiLanguageString | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- Container Style -->\n@case ('container') {\n<div class=\"container\">\n  @for (node of children(); track $index) {\n  <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n    [mode]=\"node.mode ?? this.mode\"></ng-container>\n  }\n</div>\n}\n<!-- End of switch-->\n}", styles: [":host{display:block;height:100%;width:100%}:host>.fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host>.fieldset>.legend{display:inline-flex;min-width:0px;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600}:host>.fieldset>.legend .title{margin:0;flex-shrink:0;white-space:nowrap;padding:0}:host>.fieldset>.content{display:grid;gap:1rem}:host>.fieldset>.content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.group{padding:0}:host>.group>.legend{margin-bottom:1rem;display:flex;width:100%;flex-direction:column;gap:.25rem;padding:0}:host>.group>.legend .title{margin:0;width:fit-content;white-space:nowrap;padding:0;font-size:1rem;line-height:1.5rem;font-weight:500}:host>.group>.legend .title-line{margin-top:.25rem;height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host>.group>.content{display:grid;gap:1rem}:host>.group>.content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.card{height:100%;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.625rem 1.25rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:.5rem}:host>.card>.legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host>.card>.legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host>.card>.legend .caption .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host>.card>.content{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem}:host>.container{display:grid;gap:1rem}\n"] }]
+            args: [{ selector: 'axp-fieldset-widget-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPWidgetCoreModule, AXTranslationModule], standalone: true, template: "@switch (look()) {\n  <!-- fieldset Style -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\" (click)=\"toggleCollapse()\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n          }\n          {{ title() | translate | async }}\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Card Style -->\n  @case ('card') {\n    <div class=\"card\">\n      @if (shouldShowTitle()) {\n        <div class=\"legend\" (click)=\"toggleCollapse()\">\n          <div class=\"caption\">\n            @if (icon()) {\n              <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n            }\n            <div class=\"text-content\">\n              <h3 class=\"title\">{{ title() | translate | async }}</h3>\n              @if (description()) {\n                <p class=\"description\">{{ description() | translate | async }}</p>\n              }\n            </div>\n          </div>\n          <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n            @if (collapsible()) {\n              <i class=\"fa-solid fa-chevron-down\"></i>\n            }\n          </div>\n        </div>\n      }\n\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n  <!-- Group Line style -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n          }\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          <div class=\"title-line\"></div>\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Container Style -->\n  @case ('container') {\n    <div class=\"container\">\n      @for (node of children(); track $index) {\n        <ng-container\n          axp-widget-renderer\n          [node]=\"node\"\n          [index]=\"index\"\n          [parentNode]=\"this\"\n          [mode]=\"node.mode ?? this.mode\"\n        ></ng-container>\n      }\n    </div>\n  }\n  <!-- End of switch-->\n}\n", styles: [":host{display:block;height:100%;width:100%}:host>.fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host>.fieldset>.legend{display:inline-flex;min-width:0px;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600}:host>.fieldset>.legend .title{margin:0;flex-shrink:0;white-space:nowrap;padding:0}:host>.fieldset>.content{display:grid;gap:1rem}:host>.fieldset>.content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.group{padding:0}:host>.group>.legend{margin-bottom:1rem;display:flex;width:100%;flex-direction:column;gap:.25rem;padding:0}:host>.group>.legend .title{margin:0;width:fit-content;white-space:nowrap;padding:0;font-size:1rem;line-height:1.5rem;font-weight:500}:host>.group>.legend .title-line{margin-top:.25rem;height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host>.group>.content{display:grid;gap:1rem}:host>.group>.content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.card{height:100%;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.625rem 1.25rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:.5rem}:host>.card>.legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host>.card>.legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host>.card>.legend .caption .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host>.card>.content{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem}:host>.container{display:grid;gap:1rem}\n"] }]
         }] });
 
 var fieldsetWidgetView_component = /*#__PURE__*/Object.freeze({
@@ -17777,10 +17967,11 @@ var fieldsetWidgetView_component = /*#__PURE__*/Object.freeze({
 const AXPFieldsetWidget = {
     name: 'fieldset-layout',
     type: 'container',
-    title: 'Fieldset',
-    description: 'Organizes content in a fieldset container',
+    title: '@platform-layout-widgets:widgets.fieldset-layout.title',
+    description: '@platform-layout-widgets:widgets.fieldset-layout.description',
     icon: 'fa-light fa-object-group',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     groups: [AXPWidgetGroupEnum.FormElement],
     properties: [AXP_NAME_PROPERTY, AXP_TITLE_PROPERTY, AXP_ICON_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY],
     components: {
@@ -17881,7 +18072,7 @@ class AXPFlexWidgetViewComponent extends AXPFlexBaseLayoutWidgetComponent {
         [node]="node"
         [index]="index"
         [parentNode]="this"
-        [mode]="this.mode"
+        [mode]="node.mode ?? this.mode"
       ></ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -17897,7 +18088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         [node]="node"
         [index]="index"
         [parentNode]="this"
-        [mode]="this.mode"
+        [mode]="node.mode ?? this.mode"
       ></ng-container>
     }
   `,
@@ -17920,10 +18111,11 @@ var flexWidgetView_component = /*#__PURE__*/Object.freeze({
 const AXPFlexWidget = {
     name: 'flex-layout',
     type: 'container',
-    title: 'Flex Layout',
-    description: 'Organizes content in flexible layout',
+    title: '@platform-layout-widgets:widgets.flex-layout.title',
+    description: '@platform-layout-widgets:widgets.flex-layout.description',
     icon: 'fa-light fa-box-taped',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     groups: [AXPWidgetGroupEnum.FormElement],
     options: {
         canInsert: true,
@@ -18067,11 +18259,12 @@ var flexItemWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPFlexItemWidget = {
     name: 'flex-item-layout',
-    title: 'Flex Item',
+    title: '@platform-layout-widgets:widgets.flex-item-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     // groups: [AXPWidgetGroupEnum.FormElement],
-    description: 'Flex Item Layout',
+    description: '@platform-layout-widgets:widgets.flex-item-layout.description',
     icon: 'fa-light fa-rectangle-vertical-history',
     properties: [
         AXP_NAME_PROPERTY,
@@ -18163,10 +18356,11 @@ var pageWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPPageWidget = {
     name: 'page-layout',
-    title: 'Page',
-    description: 'Structures the entire page',
+    title: '@platform-layout-widgets:widgets.page-layout.title',
+    description: '@platform-layout-widgets:widgets.page-layout.description',
     icon: 'fa-light fa-page',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SHELL,
     type: 'container',
     properties: [
         AXP_NAME_PROPERTY,
@@ -18490,10 +18684,11 @@ var repeaterWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPRepeaterWidget = {
     name: 'repeater-layout',
-    title: 'Repeater',
-    description: 'Adds repeating form elements',
+    title: '@platform-layout-widgets:widgets.repeater-layout.title',
+    description: '@platform-layout-widgets:widgets.repeater-layout.description',
     icon: 'fa-light fa-table-list',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'container',
     properties: [
@@ -18886,9 +19081,10 @@ var stepWizardWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPStepWizardWidget = {
     name: 'step-wizard',
-    title: 'Step Wizard',
-    icon: 'fa-solid fa-image-user',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    title: '@platform-layout-widgets:widgets.step-wizard.title',
+    icon: 'fa-light fa-image-user',
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     aiDescription: 'Use for multi-step flows (wizard). Present when the user should follow ordered steps; children typically hold step content.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'view',
@@ -19865,10 +20061,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 const AXPTableWidget = {
     name: 'table-layout',
     type: 'container',
-    title: 'Table Layout',
-    description: 'Structures content into rows and cells',
+    title: '@platform-layout-widgets:widgets.table-layout.title',
+    description: '@platform-layout-widgets:widgets.table-layout.description',
     icon: 'fa-light fa-table',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     groups: [AXPWidgetGroupEnum.FormElement],
     options: {
         canInsert: true,
@@ -20283,10 +20480,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 const AXPTableItemWidget = {
     name: 'table-item-layout',
-    title: 'Table Item',
+    title: '@platform-layout-widgets:widgets.table-item-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
-    description: 'Table Item (row/cell) container',
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
+    description: '@platform-layout-widgets:widgets.table-item-layout.description',
     icon: 'fa-light fa-table-cells',
     properties: [
         AXP_NAME_PROPERTY,
@@ -23962,12 +24160,13 @@ var cronJobWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPCronJobWidget = {
     name: 'cron-job',
-    title: 'Cron Job',
+    title: '@platform-layout-widgets:widgets.cron-job.title',
     icon: 'fa-light fa-alarm-clock',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_INPUT,
     aiDescription: 'Cron expression editor and viewer. Use when the answer involves recurring schedules or job timing (not a one-off date picker).',
     type: 'editor',
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.BaseWidget],
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     components: {
         view: {
@@ -24111,10 +24310,11 @@ var metaDataWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPMetaDataWidget = {
     name: 'meta-data-editor',
-    title: 'Meta Data',
+    title: '@platform-layout-widgets:widgets.meta-data-editor.title',
     icon: 'fa-light fa-input-text',
-    description: 'meta data rendered',
+    description: '@platform-layout-widgets:widgets.meta-data-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_COMPOSITE,
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
@@ -24422,10 +24622,11 @@ var numberUnitBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPNumberUnitBoxWidget = {
     name: 'number-unit-editor',
-    title: 'Number Unit Box',
-    description: 'Inputs numeric values',
+    title: '@platform-layout-widgets:widgets.number-unit-editor.title',
+    description: '@platform-layout-widgets:widgets.number-unit-editor.description',
     icon: 'fa-light fa-input-numeric',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_NUMERIC,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     defaultFilterWidgetName: 'number-filter',
@@ -24471,10 +24672,11 @@ const AXPNumberUnitBoxWidget = {
 
 const AXPTableEditorWidget = {
     name: 'table-editor',
-    title: 'Table Editor',
+    title: '@platform-layout-widgets:widgets.table-editor.title',
     icon: 'fa-light fa-input-text',
-    description: 'Inputs single-line text',
+    description: '@platform-layout-widgets:widgets.table-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_COMPOSITE,
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
     properties: [
@@ -25479,13 +25681,13 @@ var imageWidgetView_component = /*#__PURE__*/Object.freeze({
 //#region ----   Image Widget Config   ----
 const AXPImageWidget = {
     name: 'image',
-    title: 'Image',
-    description: 'Simple image viewer/editor that stores a URL or binary',
+    title: '@platform-layout-widgets:widgets.image.title',
+    description: '@platform-layout-widgets:widgets.image.description',
     icon: 'fa-light fa-image',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     aiDescription: 'Use for a single image (URL or embedded). Prefer over plain markdown when aspect ratio, sizing, or binary handling matters.',
     groups: [AXPWidgetGroupEnum.FormElement],
-    aiCatalog: 'include',
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -25657,13 +25859,13 @@ var listToolbarWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPListToolbarWidget = {
     name: 'list-toolbar',
-    title: 'List Toolbar',
-    description: '',
+    title: '@platform-layout-widgets:widgets.list-toolbar.title',
     type: 'view',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_LISTS,
     aiDescription: 'Toolbar for list views: sort, filter, and column toggles. Use next to data-list when the user may refine or reorder rows.',
     groups: [AXPWidgetGroupEnum.UtilityWidget],
-    icon: 'fa-solid fa-square',
+    icon: 'fa-light fa-square',
     properties: [
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
@@ -25702,13 +25904,13 @@ const AXPListToolbarWidget = {
 
 const AXPMapWidget = {
     name: 'map',
-    title: 'Map',
-    description: 'Displays and interacts with maps',
+    title: '@platform-layout-widgets:widgets.map.title',
+    description: '@platform-layout-widgets:widgets.map.description',
     icon: 'fa-light fa-map-location',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_TOOLS,
     aiDescription: 'Use when the answer involves locations, routes, or areas on a map. Pass markers, polygons, or center/zoom via options; suitable for “where”, “near”, or geographic summaries.',
     groups: [AXPWidgetGroupEnum.FormElement],
-    aiCatalog: 'include',
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -25863,7 +26065,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
         [options]="validation.options"
       ></ax-validation-rule>
     }
-  </ax-time-duration>`, isInline: true, 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: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$6.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </ax-time-duration>`, isInline: true, 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: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$6.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "name", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, decorators: [{
             type: Component,
@@ -25929,10 +26131,11 @@ var timeDurationWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTimeDurationWidget = {
     name: 'time-duration',
-    title: 'Time Duration',
-    description: 'Selects a time duration',
+    title: '@platform-layout-widgets:widgets.time-duration.title',
+    description: '@platform-layout-widgets:widgets.time-duration.description',
     icon: 'fa-light fa-clock',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_DATETIME,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'time-duration-filter',
     type: 'editor',
@@ -27203,10 +27406,11 @@ const AXPTimeDurationFilterWidget = {
 
 const AXPDocumentWidget = {
     name: 'document-layout',
-    title: 'Document',
-    description: 'Structures the entire document',
+    title: '@platform-layout-widgets:widgets.document-layout.title',
+    description: '@platform-layout-widgets:widgets.document-layout.description',
     icon: 'fa-light fa-page',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SHELL,
     type: 'container',
     properties: [],
     components: {},
@@ -27219,6 +27423,24 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
         this.showLabel = computed(() => this.options()['showLabel'] ?? true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
         this.badge = computed(() => this.options()['badge'], ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
         this.visible = computed(() => this.options()['visible'], ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.hintText = computed(() => this.options()['hint'], ...(ngDevMode ? [{ debugName: "hintText" }] : /* istanbul ignore next */ []));
+        this.hasHint = computed(() => {
+            const h = this.hintText();
+            if (h == null) {
+                return false;
+            }
+            if (typeof h === 'string') {
+                return h.trim().length > 0;
+            }
+            return true;
+        }, ...(ngDevMode ? [{ debugName: "hasHint" }] : /* istanbul ignore next */ []));
+        this.hintDisplayMode = computed(() => this.options()['hintDisplayMode'] === 'icon' ? 'icon' : 'note', ...(ngDevMode ? [{ debugName: "hintDisplayMode" }] : /* istanbul ignore next */ []));
+        /** Info icon with tooltip (typically next to the label when the label is visible). */
+        this.hintAsIcon = computed(() => this.hasHint() && this.hintDisplayMode() === 'icon', ...(ngDevMode ? [{ debugName: "hintAsIcon" }] : /* istanbul ignore next */ []));
+        /** Visible helper copy under the field (inside `ax-form-field`). */
+        this.hintAsNote = computed(() => this.hasHint() && this.hintDisplayMode() === 'note', ...(ngDevMode ? [{ debugName: "hintAsNote" }] : /* istanbul ignore next */ []));
+        /** Label row needs to show even when label is hidden (e.g. icon-only hint with badge layout). */
+        this.showTopRow = computed(() => this.showLabel() || !!this.badge() || this.hintAsIcon(), ...(ngDevMode ? [{ debugName: "showTopRow" }] : /* istanbul ignore next */ []));
         this.isRequired = computed(() => this.children().some((c) => {
             const validations = c.options?.['validations'];
             return Array.isArray(validations) && validations.some((v) => v.rule === 'required');
@@ -27230,16 +27452,27 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFormFieldWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFormFieldWidgetViewComponent, isStandalone: true, selector: "axp-form-field-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-form-field>
-      @if (showLabel() || badge()) {
-      <div class="ax-flex ax-gap-1 ax-items-center ax-justify-between">
-        @if (showLabel()) {
-          <ax-label [required]="isRequired()">{{ label() | axpResolveMultiLanguageString | translate | async }}</ax-label>
-        }
-        @if (badge()) {
-          <!-- <ax-badge [text]="(badge() | translate | async) ?? ''" color="primary" class="ax-primary-lightest"></ax-badge> -->
-          <span class="ax-text ax-p-1 ax-text-xs ax-rounded-md ">{{ badge() | axpResolveMultiLanguageString | translate | async }}</span>
-        }
-      </div>
+      @if (showTopRow()) {
+        <div class="ax-flex ax-gap-1 ax-items-center ax-justify-between">
+          <div class="ax-flex ax-min-w-0 ax-flex-wrap ax-items-center ax-gap-1 ax-leading-none">
+            @if (showLabel()) {
+              <ax-label [required]="isRequired()" class="ax-inline-flex ax-min-w-0 ax-items-center">{{ label() | translate | async }}</ax-label>
+            }
+            @if (hintAsIcon()) {
+              <i
+                role="button"
+                tabindex="0"
+                class="fa-regular fa-circle-info ax-relative ax-top-px ax-inline-flex ax-h-5 ax-w-5 ax-shrink-0 ax-cursor-help ax-items-center ax-justify-center ax-rounded-full ax-text-xs ax-leading-none ax-text-neutral-500 ax-outline-none ax-transition-[color,background-color] hover:ax-bg-neutral-100 hover:ax-text-neutral-800 focus-visible:ax-outline-2 focus-visible:ax-outline-primary-500 focus-visible:ax-outline-offset-1 ax-mt-[-5px]"
+                [axTooltip]="(hintText()! | translate | async) ?? ''"
+                axTooltipPlacement="top"
+                [attr.aria-label]="(hintText()! | translate | async) ?? ''"
+              ></i>
+            }
+          </div>
+          @if (badge()) {
+            <span class="ax-text ax-p-1 ax-text-xs ax-rounded-md">{{ badge() | translate | async }}</span>
+          }
+        </div>
       }
       @for (node of children(); track $index) {
         <ng-container
@@ -27251,8 +27484,13 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
         >
         </ng-container>
       }
+      @if (hintAsNote()) {
+        <p class="ax-text-xs ax-mt-1 ax-font-normal ax-opacity-75">
+          {{ hintText()! | translate | async }}
+        </p>
+      }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i4$1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { 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: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
@@ -27260,16 +27498,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-form-field-widget-view',
                     template: `
     <ax-form-field>
-      @if (showLabel() || badge()) {
-      <div class="ax-flex ax-gap-1 ax-items-center ax-justify-between">
-        @if (showLabel()) {
-          <ax-label [required]="isRequired()">{{ label() | axpResolveMultiLanguageString | translate | async }}</ax-label>
-        }
-        @if (badge()) {
-          <!-- <ax-badge [text]="(badge() | translate | async) ?? ''" color="primary" class="ax-primary-lightest"></ax-badge> -->
-          <span class="ax-text ax-p-1 ax-text-xs ax-rounded-md ">{{ badge() | axpResolveMultiLanguageString | translate | async }}</span>
-        }
-      </div>
+      @if (showTopRow()) {
+        <div class="ax-flex ax-gap-1 ax-items-center ax-justify-between">
+          <div class="ax-flex ax-min-w-0 ax-flex-wrap ax-items-center ax-gap-1 ax-leading-none">
+            @if (showLabel()) {
+              <ax-label [required]="isRequired()" class="ax-inline-flex ax-min-w-0 ax-items-center">{{ label() | translate | async }}</ax-label>
+            }
+            @if (hintAsIcon()) {
+              <i
+                role="button"
+                tabindex="0"
+                class="fa-regular fa-circle-info ax-relative ax-top-px ax-inline-flex ax-h-5 ax-w-5 ax-shrink-0 ax-cursor-help ax-items-center ax-justify-center ax-rounded-full ax-text-xs ax-leading-none ax-text-neutral-500 ax-outline-none ax-transition-[color,background-color] hover:ax-bg-neutral-100 hover:ax-text-neutral-800 focus-visible:ax-outline-2 focus-visible:ax-outline-primary-500 focus-visible:ax-outline-offset-1 ax-mt-[-5px]"
+                [axTooltip]="(hintText()! | translate | async) ?? ''"
+                axTooltipPlacement="top"
+                [attr.aria-label]="(hintText()! | translate | async) ?? ''"
+              ></i>
+            }
+          </div>
+          @if (badge()) {
+            <span class="ax-text ax-p-1 ax-text-xs ax-rounded-md">{{ badge() | translate | async }}</span>
+          }
+        </div>
       }
       @for (node of children(); track $index) {
         <ng-container
@@ -27281,6 +27530,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         >
         </ng-container>
       }
+      @if (hintAsNote()) {
+        <p class="ax-text-xs ax-mt-1 ax-font-normal ax-opacity-75">
+          {{ hintText()! | translate | async }}
+        </p>
+      }
     </ax-form-field>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27291,7 +27545,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPWidgetCoreModule,
                         AXTranslationModule,
                         AXBadgeModule,
-                        AXPResolveMultiLanguageStringPipe,
+                        AXDecoratorModule,
+                        AXTooltipModule,
                     ],
                     standalone: true,
                 }]
@@ -27309,6 +27564,20 @@ class AXPFormFieldWidgetDesignerComponent extends AXPGridItemBaseLayoutWidgetCom
     constructor() {
         super(...arguments);
         this.label = computed(() => this.options()['label'], ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.hint = computed(() => this.options()['hint'], ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+        this.hasHint = computed(() => {
+            const h = this.hint();
+            if (h == null || h === '') {
+                return false;
+            }
+            if (typeof h === 'string') {
+                return h.trim().length > 0;
+            }
+            return true;
+        }, ...(ngDevMode ? [{ debugName: "hasHint" }] : /* istanbul ignore next */ []));
+        this.hintDisplayMode = computed(() => this.options()['hintDisplayMode'] === 'icon' ? 'icon' : 'note', ...(ngDevMode ? [{ debugName: "hintDisplayMode" }] : /* istanbul ignore next */ []));
+        this.hintAsIcon = computed(() => this.hasHint() && this.hintDisplayMode() === 'icon', ...(ngDevMode ? [{ debugName: "hintAsIcon" }] : /* istanbul ignore next */ []));
+        this.hintAsNote = computed(() => this.hasHint() && this.hintDisplayMode() === 'note', ...(ngDevMode ? [{ debugName: "hintAsNote" }] : /* istanbul ignore next */ []));
     }
     get __class() {
         return this.hostClass();
@@ -27321,7 +27590,12 @@ class AXPFormFieldWidgetDesignerComponent extends AXPGridItemBaseLayoutWidgetCom
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <ax-form-field>
-      <ax-label>{{ label() | axpResolveMultiLanguageString | translate | async }}</ax-label>
+      <div class="ax-flex ax-gap-1 ax-items-center">
+        <ax-label>{{ label() | translate | async }}</ax-label>
+        @if (hintAsIcon()) {
+          <i class="fa-regular fa-circle-info ax-text-sm ax-opacity-75" aria-hidden="true"></i>
+        }
+      </div>
       @for (node of children(); track $index) {
         <ng-container
           axp-widget-designer-renderer
@@ -27334,8 +27608,13 @@ class AXPFormFieldWidgetDesignerComponent extends AXPGridItemBaseLayoutWidgetCom
       } @empty {
         <axp-designer-add-widget-mini-button></axp-designer-add-widget-mini-button>
       }
+      @if (hintAsNote()) {
+        <p class="ax-text-xs ax-mt-1 ax-font-normal ax-opacity-75">
+          {{ hint() | translate | async }}
+        </p>
+      }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }, { 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: AXPFormFieldWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -27343,7 +27622,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-form-field-widget-designer',
                     template: `
     <ax-form-field>
-      <ax-label>{{ label() | axpResolveMultiLanguageString | translate | async }}</ax-label>
+      <div class="ax-flex ax-gap-1 ax-items-center">
+        <ax-label>{{ label() | translate | async }}</ax-label>
+        @if (hintAsIcon()) {
+          <i class="fa-regular fa-circle-info ax-text-sm ax-opacity-75" aria-hidden="true"></i>
+        }
+      </div>
       @for (node of children(); track $index) {
         <ng-container
           axp-widget-designer-renderer
@@ -27356,6 +27640,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       } @empty {
         <axp-designer-add-widget-mini-button></axp-designer-add-widget-mini-button>
       }
+      @if (hintAsNote()) {
+        <p class="ax-text-xs ax-mt-1 ax-font-normal ax-opacity-75">
+          {{ hint() | translate | async }}
+        </p>
+      }
     </ax-form-field>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27367,7 +27656,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPWidgetCoreModule,
                         AXPWidgetDesignerRendererDirective,
                         AXPDesignerAddWidgetMiniButtonComponent,
-                        AXPResolveMultiLanguageStringPipe,
                     ],
                     providers: [
                         {
@@ -27387,14 +27675,37 @@ var formFieldWidgetDesigner_component = /*#__PURE__*/Object.freeze({
     AXPFormFieldWidgetDesignerComponent: AXPFormFieldWidgetDesignerComponent
 });
 
+const AXP_FORM_FIELD_HINT_PROPERTY = createStringProperty({
+    name: 'hint',
+    title: 'Hint',
+    path: 'options.hint',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_FORM_FIELD_HINT_DISPLAY_MODE_PROPERTY = createSelectProperty({
+    name: 'hintDisplayMode',
+    title: 'Hint display',
+    path: 'options.hintDisplayMode',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: 'note',
+    dataSource: [
+        { id: 'note', title: 'Note (below field)' },
+        { id: 'icon', title: 'Icon (tooltip)' },
+    ],
+});
 const AXPFormFieldWidget = {
     name: 'form-field',
-    title: 'Form Field',
+    title: '@platform-layout-widgets:widgets.form-field.title',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_UTILITY,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'container',
     icon: 'fa-light fa-pen-field',
-    properties: [AXP_NAME_PROPERTY, cloneProperty(AXP_LABEL_PROPERTY, { schema: { defaultValue: 'Sample Label' } })],
+    properties: [
+        AXP_NAME_PROPERTY,
+        cloneProperty(AXP_LABEL_PROPERTY, { schema: { defaultValue: 'Sample Label' } }),
+        AXP_FORM_FIELD_HINT_PROPERTY,
+        AXP_FORM_FIELD_HINT_DISPLAY_MODE_PROPERTY,
+    ],
     components: {
         view: {
             component: () => Promise.resolve().then(function () { return formFieldWidgetView_component; }).then((c) => c.AXPFormFieldWidgetViewComponent),
@@ -27885,9 +28196,10 @@ var gridWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPGridWidget = {
     name: 'grid-layout',
-    title: 'Grid Layout',
+    title: '@platform-layout-widgets:widgets.grid-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     groups: [AXPWidgetGroupEnum.FormElement],
     icon: 'fa-light fa-grid',
     properties: [
@@ -28124,9 +28436,10 @@ var gridItemWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPGridItemWidget = {
     name: 'grid-item-layout',
-    title: 'Grid Item',
+    title: '@platform-layout-widgets:widgets.grid-item-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     // groups: [AXPWidgetGroupEnum.FormElement],
     icon: 'fa-light fa-objects-column',
     properties: [
@@ -28153,10 +28466,11 @@ const AXPGridItemWidget = {
 
 const AXPAlertBoxWidget = {
     name: 'alert-box-layout',
-    title: 'Alert Box',
-    description: 'Displays an alert with title and description using ax-alert',
+    title: '@platform-layout-widgets:widgets.alert-box-layout.title',
+    description: '@platform-layout-widgets:widgets.alert-box-layout.description',
     icon: 'fa-light fa-circle-info',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     aiDescription: 'Use for notices: success, warning, danger, or info callouts with title and body. Prefer over plain text when severity or emphasis should be visible.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'view',
@@ -28399,9 +28713,10 @@ var iconWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 const AXPIconWidget = {
     name: 'icon',
-    title: 'Icon',
+    title: '@platform-layout-widgets:widgets.icon.title',
     type: 'view',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_UTILITY,
     // groups: [AXPWidgetGroupEnum.FormElement],
     icon: 'fa-light fa-icons',
     properties: [AXP_NAME_PROPERTY],
@@ -28607,10 +28922,11 @@ var panelWidgetView_component = /*#__PURE__*/Object.freeze({
 const AXPPanelWidget = {
     name: 'panel-layout',
     type: 'container',
-    title: 'Panel Layout',
-    description: 'Organizes content in a collapsible panel',
+    title: '@platform-layout-widgets:widgets.panel-layout.title',
+    description: '@platform-layout-widgets:widgets.panel-layout.description',
     icon: 'fa-light fa-rectangle-list',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     groups: [AXPWidgetGroupEnum.FormElement],
     properties: [
         AXP_NAME_PROPERTY,
@@ -28864,13 +29180,14 @@ var tabsetWidgetDesigner_component = /*#__PURE__*/Object.freeze({
 
 const AXPTabSetWidget = {
     name: 'tabset-layout',
-    title: 'TabSet Layout',
-    description: 'A tab set layout is a widget that displays a tab set',
+    title: '@platform-layout-widgets:widgets.tabset-layout.title',
+    description: '@platform-layout-widgets:widgets.tabset-layout.description',
     type: 'view',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_TABS,
     aiDescription: 'Use to split content into labeled tabs. Pair with tabset-item children; each tab should map to one logical section of the answer.',
     groups: [AXPWidgetGroupEnum.FormElement],
-    icon: 'fa-solid fa-square',
+    icon: 'fa-light fa-square',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     components: {
         view: {
@@ -28951,13 +29268,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 const AXPTabSetItemWidget = {
     name: 'tabset-item',
-    title: 'TabSet Item',
-    description: 'A tab set item is a widget that displays a tab set item',
+    title: '@platform-layout-widgets:widgets.tabset-item.title',
+    description: '@platform-layout-widgets:widgets.tabset-item.description',
     type: 'view',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_TABS,
     aiDescription: 'Single tab panel inside a tabset. Use one item per tab label; put the tab content in the slot or bound child widgets.',
     groups: [AXPWidgetGroupEnum.FormElement],
-    icon: 'fa-solid fa-square',
+    icon: 'fa-light fa-square',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     components: {
         view: {
@@ -28998,10 +29316,11 @@ var textBlockWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTextBlockWidget = {
     name: 'text-block-layout',
-    title: 'Text Block',
-    description: 'Displays text blocks',
+    title: '@platform-layout-widgets:widgets.text-block-layout.title',
+    description: '@platform-layout-widgets:widgets.text-block-layout.description',
     icon: 'fa-light fa-text',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     aiDescription: 'Use for rich text blocks (options.content) when the answer needs structured prose beyond a single paragraph; supports inline formatting from the rich-text renderer.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'view',
@@ -29478,6 +29797,7 @@ var triggerExpressionEditorPopup_component = /*#__PURE__*/Object.freeze({
     AXPTriggerExpressionEditorPopupComponent: AXPTriggerExpressionEditorPopupComponent
 });
 
+//#region ----   Imports   ----
 //#endregion
 //#region ----   Widget Lists (single source of truth)   ----
 /**
@@ -29594,6 +29914,7 @@ const EXTENDED_WIDGETS = [
             name: 'select-filter',
             title: 'Select Filter',
             categories: AXP_WIDGETS_EDITOR_CATEGORY,
+            groups: [AXPWidgetGroupEnum.BaseWidget],
             type: 'filter',
             components: {},
             options: {
@@ -29695,13 +30016,9 @@ function toSerializableWidget(config) {
         ...(config.alias != null ? { alias: config.alias } : {}),
         title: resolveWidgetLabelForAi(config.title) || String(config.name),
         ...(config.icon != null ? { icon: config.icon } : {}),
-        ...(config.description != null
-            ? { description: resolveWidgetLabelForAi(config.description) || undefined }
-            : {}),
-        ...(config.aiDescription != null && config.aiDescription !== ''
-            ? { aiDescription: config.aiDescription }
-            : {}),
-        categories: normalizeWidgetCategories(config.categories).map((c) => ({
+        ...(config.description != null ? { description: resolveWidgetLabelForAi(config.description) || undefined } : {}),
+        ...(config.aiDescription != null && config.aiDescription !== '' ? { aiDescription: config.aiDescription } : {}),
+        categories: normalizeDefinitionCategories(config.categories).map((c) => ({
             name: c.name,
             title: resolveWidgetLabelForAi(c.title) || c.name,
             order: c.order,
@@ -29714,7 +30031,6 @@ function toSerializableWidget(config) {
         ...(config.designer != null ? { designer: config.designer } : {}),
         ...(config.options != null ? { options: config.options } : {}),
         ...(config.defaultFilterWidgetName != null ? { defaultFilterWidgetName: config.defaultFilterWidgetName } : {}),
-        ...(config.aiCatalog != null ? { aiCatalog: config.aiCatalog } : {}),
     };
 }
 function buildUsage(config) {
@@ -29737,7 +30053,7 @@ function buildUsage(config) {
 //#endregion
 //#region ---- Query ----
 /**
- * Read-only catalog of widgets suitable for AI structured rendering (Widgets:GetForAI).
+ * Read-only full widget registry (Widgets:GetForAI). Lists every registered widget.
  */
 class AXPGetWidgetsForAIQuery {
     constructor() {
@@ -29746,18 +30062,13 @@ class AXPGetWidgetsForAIQuery {
     async fetch(input) {
         const name = input?.name?.trim();
         if (!name) {
-            const list = this.registry
-                .all()
-                .filter((w) => isWidgetAiCatalogIncluded(w))
-                .map((w) => ({
+            const list = this.registry.all().map((w) => ({
                 name: String(w.name),
                 title: resolveWidgetLabelForAi(w.title) || String(w.name),
-                ...(w.description != null
-                    ? { description: resolveWidgetLabelForAi(w.description) || undefined }
-                    : {}),
+                ...(w.description != null ? { description: resolveWidgetLabelForAi(w.description) || undefined } : {}),
                 ...(w.aiDescription != null && w.aiDescription !== '' ? { aiDescription: w.aiDescription } : {}),
                 type: w.type,
-                categories: normalizeWidgetCategories(w.categories).map((c) => ({
+                categories: normalizeDefinitionCategories(w.categories).map((c) => ({
                     name: c.name,
                     title: resolveWidgetLabelForAi(c.title) || c.name,
                     order: c.order,
@@ -29767,12 +30078,6 @@ class AXPGetWidgetsForAIQuery {
         }
         try {
             const config = this.registry.resolve(name);
-            if (!isWidgetAiCatalogIncluded(config)) {
-                return {
-                    success: false,
-                    error: `Widget "${name}" is not available for the AI widget catalog.`,
-                };
-            }
             return {
                 success: true,
                 detail: toSerializableWidget(config),