@acorex-platform/framework-client 0.0.46 → 0.0.49

package/fesm2022/acorex-platform-framework-client-layout-widget-core.mjs

@@ -3,7 +3,7 @@ import { InjectionToken, signal, computed, effect, untracked, Injectable, inject
 import { AXPContextStore, AXPDeviceService, AXPExpressionEvaluatorService, AXPDebugService, FORM_DIRTY_TRACE_NS, OVERLAY_WIDGET_SETTLE_TRACE_NS } from '@acorex-platform/framework-client/core';
 import { AXPPageStatus, AXPWidgetStatus, AXP_WIDGET_TOKEN, AXP_WIDGET_COLUMN_TOKEN, layoutProfileMediumFromRenderMode, resolveLayoutProfile, createStringProperty, createBooleanProperty, createSelectProperty, createNumberProperty, cloneProperty } from '@acorex-platform/framework-shared/widget-core';
 import { cloneDeep, set, get, isEqual, isNil, isUndefined, isObjectLike, merge, sum, isEmpty, isString } from 'lodash-es';
-import { AXPWidgetsList, isSelectionValueEqual, isFormValueEqual, runtimeQueryPayloadData, runtimeQueryCollectionData, extractValue, getSmart, summarizeFormContextDirtyDiff, AXPWidgetsCatalog } from '@acorex-platform/framework-shared/core';
+import { AXPWidgetsList, isSelectionValueEqual, isFormValueEqual, runtimeQueryPayloadData, runtimeQueryCollectionData, extractValue, axpGridItemPlacementClassMap, getSmart, summarizeFormContextDirtyDiff, AXPWidgetsCatalog } from '@acorex-platform/framework-shared/core';
 import { ENTITY_GET_BY_ID_DEFAULT } from '@acorex-platform/framework-shared/runtime';
 export { AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_ACTION_SUB_CONTROLS, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_DATA, AXP_WIDGETS_ADVANCE_SUB_INPUT, AXP_WIDGETS_ADVANCE_SUB_MEDIA, AXP_WIDGETS_ADVANCE_SUB_TOOLS, AXP_WIDGETS_AI_CATEGORY, AXP_WIDGETS_CATEGORIES, AXP_WIDGETS_EDITOR_CATEGORY, AXP_WIDGETS_EDITOR_SUB_CHOICE, AXP_WIDGETS_EDITOR_SUB_COMPOSITE, AXP_WIDGETS_EDITOR_SUB_CONFIG, AXP_WIDGETS_EDITOR_SUB_DATETIME, AXP_WIDGETS_EDITOR_SUB_NUMERIC, AXP_WIDGETS_EDITOR_SUB_RICH, AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS, AXP_WIDGETS_EDITOR_SUB_VISUAL, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_LAYOUT_SUB_GRID, AXP_WIDGETS_LAYOUT_SUB_LISTS, AXP_WIDGETS_LAYOUT_SUB_SHELL, AXP_WIDGETS_LAYOUT_SUB_SURFACES, AXP_WIDGETS_LAYOUT_SUB_TABS, AXP_WIDGETS_LAYOUT_SUB_UTILITY, normalizeWidgetCategories } from '@acorex-platform/framework-shared/runtime';
 import { convertArrayToDataSource, AXDataSource, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES } from '@acorex/cdk/common';
@@ -1891,6 +1891,7 @@ class AXPGridBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent
         this.hostGridClass = computed(() => {
             const cls = {
                 ...this.inlineClass(),
+                '@container': true,
                 'grid': true,
             };
             const g = this.resolvedGrid();
@@ -1917,9 +1918,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             type: Injectable
         }] });
 
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
 class AXPGridItemBaseLayoutWidgetComponent extends AXPFlexBaseLayoutWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ----- Computed Properties -----
         this.gridItem = computed(() => this.options(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "gridItem" }] : /* istanbul ignore next */ []));
         this.hostGridItemStyle = computed(() => {
@@ -1933,26 +1938,11 @@ class AXPGridItemBaseLayoutWidgetComponent extends AXPFlexBaseLayoutWidgetCompon
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hostGridItemStyle" }] : /* istanbul ignore next */ []));
         this.hostGridItemClass = computed(() => {
-            const cls = { ...this.hostFlexClass() };
             const g = this.gridItem();
-            // Mobile-first: full width on small screens so items stack vertically and don't overflow
-            cls['col-span-12'] = true;
-            // Large screens: apply defined placement so multi-column layout works on desktop
-            if (g?.colSpan)
-                cls[`lg:col-span-${g.colSpan}`] = true;
-            if (g?.colStart)
-                cls[`lg:col-start-${g.colStart}`] = true;
-            if (g?.colEnd)
-                cls[`lg:col-end-${g.colEnd}`] = true;
-            if (g?.rowSpan)
-                cls[`lg:row-span-${g.rowSpan}`] = true;
-            if (g?.rowStart)
-                cls[`lg:row-start-${g.rowStart}`] = true;
-            if (g?.rowEnd)
-                cls[`lg:row-end-${g.rowEnd}`] = true;
-            if (g?.order != null)
-                cls[`lg:order-${g.order}`] = true;
-            return cls;
+            return {
+                ...this.hostFlexClass(),
+                ...axpGridItemPlacementClassMap(g),
+            };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hostGridItemClass" }] : /* istanbul ignore next */ []));
         this.hostClass = computed(() => this.hostGridItemClass(), /* @ts-ignore */