@masterteam/client-components 0.0.59 → 0.0.60

package/fesm2022/masterteam-client-components-client-list.mjs

@@ -8,6 +8,7 @@ import { Button } from '@masterteam/components/button';
 import { RuntimeActionRunner, resolveActionLabel } from '@masterteam/components/runtime-action';
 import { HttpClient } from '@angular/common/http';
 import { switchMap, of, map, Observable, share, take } from 'rxjs';
+import { resolveLocalizedLabel, isSectionKey, EntitiesPreview } from '@masterteam/components/entities';
 import { Table, TableExportService, TableGroupingController, TableValueResolver, TableCaption } from '@masterteam/components/table';
 import * as i2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
@@ -15,7 +16,6 @@ import { Card } from '@masterteam/components/card';
 import { Icon } from '@masterteam/icons';
 import { ConfirmationService } from '@masterteam/components/confirmation';
 import { MTDateFormatPipe } from '@masterteam/components';
-import { EntitiesPreview } from '@masterteam/components/entities';
 import * as i3 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
 import { DashboardViewer } from '@masterteam/dashboard-builder';
@@ -190,6 +190,7 @@ class ClientListStateService {
             configuration: column.configuration ?? null,
         }));
         const propertyMaps = this.createPropertyMaps(response.catalog);
+        const lang = this.resolveActiveLang();
         const rows = (response.records ?? []).map((record) => {
             const row = {
                 Id: record.id,
@@ -197,7 +198,7 @@ class ClientListStateService {
             };
             columns.forEach((column) => {
                 const property = this.resolvePropertyMeta(column.key, propertyMaps);
-                row[column.key] = this.toEntityData(column.key, record.values?.[property?.key ?? column.key], property, column.viewType, column.label, column.configuration, property?.configuration, record.id, column.order ?? property?.order, propertyMaps.nestedByOwnerKey.get(property?.key ?? column.key));
+                row[column.key] = this.toEntityData(column.key, record.values?.[property?.key ?? column.key], property, column.viewType, column.label, column.configuration, property?.configuration, record.id, column.order ?? property?.order, propertyMaps.nestedByOwnerKey.get(property?.key ?? column.key), lang);
             });
             return row;
         });
@@ -329,13 +330,14 @@ class ClientListStateService {
         const records = this.orderRecords(data?.records ?? [], data?.projectionMeta?.groups ?? []);
         const catalogProperties = data?.catalog?.properties ?? [];
         const propertyMaps = this.createPropertyMaps(data?.catalog);
+        const lang = this.resolveActiveLang();
         const descriptors = this.buildCardDescriptors(data?.projectionMeta?.displayOrder ?? [], data?.projectionMeta?.columns ?? [], propertyMaps);
         return records.map((record) => {
             const schema = data?.schemas?.find((item) => item.id === record.schemaId);
             const propertyDescriptors = descriptors.length
                 ? descriptors
                 : this.buildFallbackCardDescriptors(record, catalogProperties);
-            const entities = propertyDescriptors.map((propertyDescriptor) => this.toEntityData(propertyDescriptor.projectionKey, record.values?.[propertyDescriptor.recordValueKey], propertyDescriptor.property, propertyDescriptor.viewType, propertyDescriptor.label, propertyDescriptor.configuration, propertyDescriptor.propertyConfiguration, record.id, propertyDescriptor.order, propertyMaps.nestedByOwnerKey.get(propertyDescriptor.recordValueKey)));
+            const entities = propertyDescriptors.map((propertyDescriptor) => this.toEntityData(propertyDescriptor.projectionKey, record.values?.[propertyDescriptor.recordValueKey], propertyDescriptor.property, propertyDescriptor.viewType, propertyDescriptor.label, propertyDescriptor.configuration, propertyDescriptor.propertyConfiguration, record.id, propertyDescriptor.order, propertyMaps.nestedByOwnerKey.get(propertyDescriptor.recordValueKey), lang));
             const statusColor = this.resolveCardStatusColor(entities);
             const normalizedEntities = statusColor
                 ? this.applyCardProgressColor(entities, statusColor)
@@ -388,14 +390,29 @@ class ClientListStateService {
         return (response.schemas?.find((item) => item.id === recordSchemaId) ??
             response.schemas?.[0]);
     }
-    toEntityData(projectionKey, cell, property, viewType, label, configuration, propertyConfiguration, recordId, order, nestedProperties) {
+    toEntityData(projectionKey, cell, property, viewType, label, configuration, propertyConfiguration, recordId, order, nestedProperties, lang) {
         const resolvedViewType = (viewType ?? 'Text');
+        // Custom label override saved on the display config (localized).
+        const customLabel = resolveLocalizedLabel(configuration?.label, lang);
+        // Section markers are layout-only: no value, heading from the label config.
+        if (resolvedViewType === 'Section') {
+            return {
+                id: recordId,
+                key: projectionKey,
+                normalizedKey: projectionKey,
+                name: customLabel,
+                value: '',
+                viewType: 'Section',
+                order: order ?? property?.order,
+                configuration: configuration,
+            };
+        }
         return {
             id: recordId,
             propertyId: property?.id,
             key: property?.key ?? projectionKey,
             normalizedKey: property?.normalizedKey ?? projectionKey,
-            name: label ?? property?.label ?? projectionKey,
+            name: customLabel || label || property?.label || projectionKey,
             rawValue: cell?.raw === null || cell?.raw === undefined
                 ? undefined
                 : String(cell.raw),
@@ -409,6 +426,12 @@ class ClientListStateService {
             comparison: cell?.comparison,
         };
     }
+    /** Active UI language for resolving localized display labels. */
+    resolveActiveLang() {
+        if (typeof document === 'undefined')
+            return 'en';
+        return document.documentElement.lang || 'en';
+    }
     createPropertyMaps(catalog) {
         const properties = catalog?.properties ?? [];
         return {
@@ -424,6 +447,19 @@ class ClientListStateService {
     buildCardDescriptors(displayOrder, columns, propertyMaps) {
         if (displayOrder?.length) {
             return displayOrder.map((item) => {
+                // Section markers carry a synthetic key with no backing property.
+                if (isSectionKey(item.propertyKey)) {
+                    return {
+                        projectionKey: item.propertyKey,
+                        recordValueKey: item.propertyKey,
+                        property: undefined,
+                        label: undefined,
+                        viewType: 'Section',
+                        order: item.order,
+                        configuration: item.configuration ?? null,
+                        propertyConfiguration: null,
+                    };
+                }
                 const property = this.resolvePropertyMeta(item.propertyKey, propertyMaps);
                 return {
                     projectionKey: item.propertyKey,
@@ -829,7 +865,10 @@ class ClientListCardsView {
         const sampleCard = this.cardsState().cards[0];
         if (!sampleCard?.entities?.length)
             return [];
-        return sampleCard.entities.map((entity) => {
+        // Section markers are card-layout only — never table columns.
+        return sampleCard.entities
+            .filter((entity) => entity.viewType !== 'Section')
+            .map((entity) => {
             const raw = entity;
             const key = (typeof raw['key'] === 'string' && raw['key']) ||
                 (typeof raw['normalizedKey'] === 'string' && raw['normalizedKey']) ||
@@ -860,6 +899,8 @@ class ClientListCardsView {
             }
             : { Id: card.id, [CLIENT_LIST_RECORD_STATE_KEY]: card.state ?? null };
         for (const entity of card.entities ?? []) {
+            if (entity.viewType === 'Section')
+                continue;
             const e = entity;
             const key = (typeof e['key'] === 'string' && e['key']) ||
                 (typeof e['normalizedKey'] === 'string' && e['normalizedKey']) ||