eru-grid 0.0.54 → 0.0.56

package/fesm2022/eru-grid.mjs

@@ -194,9 +194,23 @@ const SELF_COLOURED_DATATYPES = new Set(['status', 'priority', 'tag', 'progress'
  */
 const ACTION_COLUMN_MIN_WIDTH = 56;
 const SEEDED_FIELD_KEYS = [
-    'dynamic_number', 'display_number_as', 'symbol_field', 'date_format', 'label',
+    'dynamic_number', 'display_number_as', 'symbol_field', 'date_format',
     'storage_name', 'folder_name', 'default_upload',
 ];
+/**
+ * Keys the model seeds only until the design panel overrides them EXPLICITLY,
+ * tracked by a companion flag rather than by "does the column hold a value".
+ *
+ * `label` is the case that forced this: it is in SEEDED_FIELD_KEYS' spirit —
+ * the model's label is the default and a grid may shorten it — but a column
+ * never arrives without one, so the seeded test ("column already has a value,
+ * leave it alone") was true from the first render and the model's label never
+ * reached a mapped column. A query-derived column kept showing its raw result
+ * key as the heading.
+ */
+const EXPLICITLY_OVERRIDDEN_FIELD_KEYS = {
+    label: 'label_overridden',
+};
 /**
  * Datatype aliases the data model emits that mean an existing DataTypes value.
  *
@@ -1149,6 +1163,30 @@ function parseCellDate(value, pattern, keepTime = false) {
  * the interactive cell's job, and a composite that tried to host those would be
  * a layout engine. A column needing that is a `page` cell.
  */
+/**
+ * A status field with its `open_status` / `close_status` lists flattened into
+ * the `options` array the status control actually reads for its colours.
+ *
+ * Shared rather than done at the call site: the status cell has always built
+ * this, and a composite part handed the raw field instead rendered every pill
+ * in the neutral fallback — the colour lives on the option, and without the
+ * flattened list there is no option to match the value against.
+ */
+function toStatusOptionsField(field) {
+    if (!field || normalizeDatatype(field.datatype) !== 'status')
+        return null;
+    const combined = [...(field.open_status || []), ...(field.close_status || [])];
+    return {
+        ...field,
+        options: combined.map((status) => ({
+            name: status?.name,
+            color: status?.color || '',
+            df: status?.df || false,
+        })),
+        open_status: field.open_status || [],
+        close_status: field.close_status || [],
+    };
+}
 function formatCellValue(value, field) {
     if (value === null || value === undefined || value === '')
         return '';
@@ -4077,33 +4115,34 @@ class EruGridStore {
         }
         return this.rows();
     }, ...(ngDevMode ? [{ debugName: "displayData" }] : []));
+    // The frozen grand total is the row the transform appended (or prepended) to
+    // the pivot data, so it is only there when the transform actually produced
+    // one. It skips totalling an empty result, so `data` can be [] with the
+    // grand-total config still on; indexing it then yields undefined and the
+    // frozen-row template renders a row that has no `_rowKey`. Read the row
+    // positionally but keep it only when it really is the grand total.
+    frozenGrandTotalRow = computed(() => {
+        if (!this.isPivotMode() || !this.pivotResult())
+            return null;
+        const config = this.configuration().config;
+        if (!config?.enableGrandTotal || !config?.freezeGrandTotal)
+            return null;
+        const data = this.pivotResult().data;
+        const row = config?.grandTotalPosition === 'before' ? data[0] : data[data.length - 1];
+        return row?._isGrandTotal ? row : null;
+    }, ...(ngDevMode ? [{ debugName: "frozenGrandTotalRow" }] : []));
     // Type-safe accessors for specific modes
     pivotGrandTotalData = computed(() => {
-        let pd = [];
-        if (this.isPivotMode() && this.pivotResult()) {
-            if (this.configuration().config?.enableGrandTotal) {
-                if (this.configuration().config?.freezeGrandTotal) {
-                    if (this.configuration().config?.grandTotalPosition === 'before') {
-                        pd = [this.pivotResult().data[0]];
-                    }
-                    else {
-                        pd = [this.pivotResult().data[this.pivotResult().data.length - 1]];
-                    }
-                }
-            }
-        }
-        return pd;
+        const row = this.frozenGrandTotalRow();
+        return row ? [row] : [];
     }, ...(ngDevMode ? [{ debugName: "pivotGrandTotalData" }] : []));
     // Type-safe accessors for specific modes
     pivotDisplayData = computed(() => {
         if (this.isPivotMode() && this.pivotResult()) {
-            if (this.configuration().config?.enableGrandTotal && this.configuration().config?.freezeGrandTotal) {
-                if (this.configuration().config?.grandTotalPosition === 'before') {
-                    return this.pivotResult().data.slice(1);
-                }
-                else {
-                    return this.pivotResult().data;
-                }
+            // Only drop the leading row when it is the frozen grand total that the
+            // header renders separately, never a real data row.
+            if (this.frozenGrandTotalRow() && this.configuration().config?.grandTotalPosition === 'before') {
+                return this.pivotResult().data.slice(1);
             }
             return this.pivotResult().data;
         }
@@ -4502,6 +4541,56 @@ class EruGridStore {
         const rows = this.rows().map(row => row.entity_id === rowId ? { ...row, ...updates } : row);
         this._rows.set(rows);
     }
+    /**
+     * Merge field values into the record with this id, wherever the grid is
+     * holding it — the flat row list AND the per-group buckets a board fills.
+     *
+     * For a consumer that edits a record somewhere else on the page and needs the
+     * grid to agree without refetching. `updateRow` is not enough on two counts:
+     * it only looks at `_rows`, so a grouped/board grid keeps the stale copy, and
+     * it replaces top-level row keys rather than merging into `entity_data`,
+     * where an entity-backed row keeps its fields.
+     *
+     * Unknown ids are ignored, so a caller can announce a change blindly.
+     */
+    patchRecord(entityId, fields) {
+        if (!entityId || !fields)
+            return;
+        const entries = Object.entries(fields);
+        if (entries.length === 0)
+            return;
+        const patch = (row) => {
+            if (!row || row.entity_id !== entityId)
+                return row;
+            const next = { ...row };
+            if (next.entity_data && typeof next.entity_data === 'object') {
+                next.entity_data = { ...next.entity_data, ...fields };
+            }
+            // An array-sourced row carries its fields at the top level instead. Only
+            // keys the row already has are touched, so this never invents columns.
+            for (const [key, value] of entries) {
+                if (key !== 'entity_data' && Object.prototype.hasOwnProperty.call(next, key)) {
+                    next[key] = value;
+                }
+            }
+            return next;
+        };
+        const holdsRecord = (rows) => rows.some(row => row?.entity_id === entityId);
+        if (holdsRecord(this._rows())) {
+            this._rows.set(this._rows().map(patch));
+        }
+        this._groupRows.update(current => {
+            let touched = false;
+            const next = new Map(current);
+            current.forEach((rows, groupId) => {
+                if (!holdsRecord(rows))
+                    return;
+                next.set(groupId, rows.map(patch));
+                touched = true;
+            });
+            return touched ? next : current;
+        });
+    }
     // Selection methods
     selectRow(rowId) {
         const selectedRowIds = new Set(this.selectedRowIds());
@@ -11100,11 +11189,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Several of the row's own columns rendered as one cell — a name over an email,
  * an amount over a date.
  *
- * View-only, and text-only, by design. Each part is formatted by its OWN
- * field's rules (`formatCellValue`), so a currency part keeps its symbol and
- * decimals and a date part keeps its pattern; the composite itself decides only
- * arrangement and emphasis. Editing stays on the underlying columns, which are
+ * View-only by design: editing stays on the underlying columns, which are
  * usually hidden once composed.
+ *
+ * A part whose datatype has a visual form of its own — a rating, a progress
+ * bar, a status pill, tags, a priority, people, a checkbox — is drawn with that
+ * control rather than as text, since "4" and "75" tell a reader far less than
+ * four stars and a bar. Everything else is formatted by its OWN field's rules
+ * (`formatCellValue`), so a currency part keeps its symbol and decimals and a
+ * date part keeps its pattern — wrapping those in a control would render the
+ * same string in a heavier box. The composite itself decides only arrangement
+ * and emphasis.
  */
 class CompositeComponent {
     row = input(null, ...(ngDevMode ? [{ debugName: "row" }] : []));
@@ -11121,6 +11216,25 @@ class CompositeComponent {
     }, ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
     primaryCss = computed(() => cellTextStyleToCss(this.column()?.cell_style), ...(ngDevMode ? [{ debugName: "primaryCss" }] : []));
     secondaryCss = computed(() => cellTextStyleToCss(this.column()?.cell_style_secondary ?? DEFAULT_SECONDARY_STYLE), ...(ngDevMode ? [{ debugName: "secondaryCss" }] : []));
+    /**
+     * The third part and any beyond it.
+     *
+     * Falls back to the secondary style when unset, so every composite authored
+     * before this existed keeps the look it had — three parts sharing one style
+     * is precisely what this is for, not what it breaks.
+     */
+    tertiaryCss = computed(() => cellTextStyleToCss(this.column()?.cell_style_tertiary
+        ?? this.column()?.cell_style_secondary
+        ?? DEFAULT_SECONDARY_STYLE), ...(ngDevMode ? [{ debugName: "tertiaryCss" }] : []));
+    /**
+     * Primary, secondary, then tertiary for the rest — keyed on the part's
+     * configured slot, never on where it ended up after empty parts were dropped.
+     */
+    cssForSlot(slot) {
+        if (slot === 0)
+            return this.primaryCss();
+        return slot === 1 ? this.secondaryCss() : this.tertiaryCss();
+    }
     /**
      * Falls back to the composite column itself when `composite_fields` is unset
      * or names nothing that exists, so a column switched to `composite` before it
@@ -11135,7 +11249,8 @@ class CompositeComponent {
         const row = this.row();
         const labels = column.composite_labels || [];
         const parts = names.map((name, index) => {
-            const field = byName.get(name);
+            const field = byName.get(name) ?? null;
+            const value = readRowValue(row, name);
             // Blank means no label for THIS part, never the field's own label as a
             // fallback: a composite is usually built from columns whose labels are
             // what the header already says, so falling back printed "Upload Date"
@@ -11144,15 +11259,98 @@ class CompositeComponent {
             return {
                 name,
                 label: String(labels[index] ?? '').trim(),
-                text: formatCellValue(readRowValue(row, name), field),
+                text: formatCellValue(value, CompositeComponent.withRowSymbol(field, row)),
+                field,
+                value,
+                numeric: CompositeComponent.isNumeric(field),
+                render: CompositeComponent.selfDrawnDatatype(field),
+                slot: index,
             };
         });
-        const populated = parts.filter(part => part.text !== '');
+        // A drawn part counts as populated even with an empty formatted string: an
+        // unrated row still shows its empty stars, and a 0% bar is a real reading.
+        const populated = parts.filter(part => part.text !== '' || part.render !== '');
         if (populated.length > 0)
             return populated;
-        const own = formatCellValue(readRowValue(row, column.name), column);
-        return own === '' ? [] : [{ name: column.name, label: column.label, text: own }];
+        const own = formatCellValue(readRowValue(row, column.name), CompositeComponent.withRowSymbol(column, row));
+        return own === '' ? [] : [{
+                name: column.name,
+                label: column.label,
+                text: own,
+                numeric: CompositeComponent.isNumeric(column),
+                field: column,
+                value: readRowValue(row, column.name),
+                render: '',
+                slot: 0,
+            }];
     }, ...(ngDevMode ? [{ debugName: "parts" }] : []));
+    /**
+     * Datatypes drawn with their own control instead of as text.
+     *
+     * The test is "does this type carry meaning a string cannot" — stars, a bar,
+     * a coloured pill, chips, avatars, a tick. A currency or a date is already
+     * fully said by `formatCellValue`, so it stays text.
+     */
+    static SELF_DRAWN = new Set([
+        'rating', 'progress', 'status', 'tag', 'priority', 'people', 'checkbox',
+    ]);
+    /**
+     * The field with this ROW's currency symbol resolved onto it.
+     *
+     * `formatCellValue` only knows the column's static `symbol`, but a
+     * multi-currency column names a sibling column in `symbol_field` and takes
+     * the symbol from each record — which is how the currency CELL renders it
+     * (it is handed the row for exactly this). Without it a composed currency
+     * part lost its symbol and read as a bare number.
+     */
+    static withRowSymbol(field, row) {
+        const symbolField = String(field?.symbol_field || '').trim();
+        if (!field || !symbolField)
+            return field;
+        const raw = readRowValue(row, symbolField);
+        const symbol = raw === null || raw === undefined ? '' : String(raw).trim();
+        return symbol ? { ...field, symbol } : field;
+    }
+    /** Figures are right-aligned by their own cell, so a composed one is too. */
+    static isNumeric(field) {
+        const datatype = effectiveValueDatatype(field ?? undefined);
+        return datatype === 'currency' || datatype === 'number';
+    }
+    static selfDrawnDatatype(field) {
+        const datatype = normalizeDatatype(field?.datatype ?? '');
+        return CompositeComponent.SELF_DRAWN.has(datatype) ? datatype : '';
+    }
+    /**
+     * A status part needs its option colours flattened the same way the status
+     * CELL does, or every pill renders in the neutral fallback.
+     */
+    statusConfig(field) {
+        return toStatusOptionsField(field);
+    }
+    /** Rating takes a shape of its own rather than the raw Field. */
+    ratingConfig(field) {
+        const config = field;
+        return {
+            startValue: config?.start_value || 1,
+            endValue: config?.end_value || 5,
+            emojiValue: config?.emoji_value || 'star',
+        };
+    }
+    /** Controls want their own types; a row value can arrive as anything. */
+    asNumber(value) {
+        const n = Number(value);
+        return Number.isFinite(n) ? n : 0;
+    }
+    asText(value) {
+        return value === null || value === undefined ? null : String(value);
+    }
+    asList(value) {
+        if (Array.isArray(value))
+            return value.map(v => String(v));
+        if (value === null || value === undefined || value === '')
+            return null;
+        return String(value).split(',').map(v => v.trim()).filter(Boolean);
+    }
     onDrilldown(event, part) {
         if (!this.isDrillable())
             return;
@@ -11160,11 +11358,20 @@ class CompositeComponent {
         this.drilldownClick.emit(part.text);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CompositeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CompositeComponent, isStandalone: true, selector: "eru-composite", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drilldownClick: "drilldownClick" }, ngImport: i0, template: "<div class=\"eru-composite\" [class.eru-composite--inline]=\"inline()\"\n  [class.eru-composite--labelled]=\"labelPosition() !== 'none'\">\n  @for (part of parts(); track part.name; let first = $first; let last = $last) {\n  <span class=\"eru-composite__slot\">\n    @if (labelPosition() === 'left' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"secondaryCss()\">{{ part.label }}</span>\n    }\n    <span class=\"eru-composite__part\" [class.eru-composite__part--secondary]=\"!first\"\n      [class.eru-composite__part--drillable]=\"isDrillable() && first\" [ngStyle]=\"first ? primaryCss() : secondaryCss()\"\n      [title]=\"part.text\" (click)=\"onDrilldown($event, part)\">{{ part.text }}</span>\n    @if (labelPosition() === 'right' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"secondaryCss()\">{{ part.label }}</span>\n    }\n  </span>\n  @if (inline() && !last && separator()) {\n  <span class=\"eru-composite__sep\" [ngStyle]=\"secondaryCss()\">{{ separator() }}</span>\n  }\n  }\n</div>\n", styles: [".eru-composite{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;width:100%;height:100%;line-height:1.3;box-sizing:border-box;padding:0 var(--grid-cell-inset-x, 8px)}.eru-composite--inline{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:4px}.eru-composite__part{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eru-composite__part--drillable{color:var(--grid-primary);cursor:pointer;text-decoration:underline}.eru-composite__sep{flex:0 0 auto}.eru-composite__part--secondary{line-height:1.15}.eru-composite__slot{display:contents}.eru-composite--labelled .eru-composite__slot{display:inline-flex;align-items:baseline;gap:4px;min-width:0}.eru-composite__label{flex:0 0 auto;white-space:nowrap;opacity:.75}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CompositeComponent, isStandalone: true, selector: "eru-composite", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drilldownClick: "drilldownClick" }, ngImport: i0, template: "<div class=\"eru-composite\" [class.eru-composite--inline]=\"inline()\"\n  [class.eru-composite--labelled]=\"labelPosition() !== 'none'\">\n  @for (part of parts(); track part.name; let first = $first; let last = $last) {\n  <span class=\"eru-composite__slot\">\n    @if (labelPosition() === 'left' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"cssForSlot(part.slot)\">{{ part.label }}</span>\n    }\n    @if (part.render) {\n    <!-- A datatype that draws itself. Rendered read-only with pointer events\n         off (see .eru-composite__control): a composite is a view, so a rating\n         here must not take a click that would edit the underlying column. The\n         secondary slot scales the control down so the primary still leads. -->\n    <span class=\"eru-composite__control\" [ngClass]=\"'eru-composite__control--' + part.render\"\n      [class.eru-composite__control--secondary]=\"part.slot > 0\">\n      @switch (part.render) {\n      @case ('rating') {\n      <eru-rating [value]=\"asNumber(part.value)\" [config]=\"ratingConfig(part.field)\" [isEditable]=\"false\"></eru-rating>\n      }\n      @case ('progress') {\n      <eru-progress [value]=\"asNumber(part.value)\" [config]=\"part.field\" [isEditable]=\"false\"></eru-progress>\n      }\n      @case ('status') {\n      <eru-status [value]=\"asText(part.value)\" [config]=\"statusConfig(part.field)\" [isEditable]=\"false\"></eru-status>\n      }\n      @case ('tag') {\n      <eru-tag [value]=\"asList(part.value)\" [config]=\"part.field\" [isEditable]=\"false\"></eru-tag>\n      }\n      @case ('priority') {\n      <eru-priority [value]=\"asText(part.value)\" [config]=\"part.field\" [isEditable]=\"false\"></eru-priority>\n      }\n      @case ('people') {\n      <eru-people [value]=\"asList(part.value)\" [config]=\"part.field\" [isEditable]=\"false\"></eru-people>\n      }\n      @case ('checkbox') {\n      <eru-checkbox [value]=\"part.value\" [config]=\"part.field\" [isEditable]=\"false\"></eru-checkbox>\n      }\n      }\n    </span>\n    } @else {\n    <span class=\"eru-composite__part\" [class.eru-composite__part--secondary]=\"part.slot > 0\"\n      [class.eru-composite__part--numeric]=\"part.numeric\"\n      [class.eru-composite__part--drillable]=\"isDrillable() && part.slot === 0\" [ngStyle]=\"cssForSlot(part.slot)\"\n      [title]=\"part.text\" (click)=\"onDrilldown($event, part)\">{{ part.text }}</span>\n    }\n    @if (labelPosition() === 'right' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"cssForSlot(part.slot)\">{{ part.label }}</span>\n    }\n  </span>\n  @if (inline() && !last && separator()) {\n  <span class=\"eru-composite__sep\" [ngStyle]=\"secondaryCss()\">{{ separator() }}</span>\n  }\n  }\n</div>\n", styles: [".eru-composite{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;width:100%;height:100%;line-height:1.3;box-sizing:border-box;padding:0 var(--grid-cell-inset-x, 8px)}.eru-composite--inline{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:4px}.eru-composite__part{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eru-composite__part--drillable{color:var(--grid-primary);cursor:pointer;text-decoration:underline}.eru-composite__sep{flex:0 0 auto}.eru-composite__part--secondary{line-height:1.15}.eru-composite__slot{display:contents}.eru-composite--labelled .eru-composite__slot{display:inline-flex;align-items:baseline;gap:4px;min-width:0}.eru-composite__label{flex:0 0 auto;white-space:nowrap;opacity:.75}.eru-composite__control{display:inline-flex;align-items:center;justify-content:flex-start;min-width:0;pointer-events:none}.eru-composite__control--progress{display:flex;width:100%}.eru-composite__control--progress>eru-progress{display:block;flex:1 1 auto;width:100%;min-width:0}.eru-composite--inline .eru-composite__control--progress{width:auto;min-width:72px}.eru-composite__control>*{margin-left:0;margin-right:0}.eru-composite__control--status .status-display,.eru-composite__control--status .status-dot-display{margin:0}.eru-composite__control--tag .tag-display,.eru-composite__control--priority .priority-display{padding:0}.eru-composite__control--progress .progress-view-container{padding:0;max-height:none}.eru-composite__control--secondary{transform:scale(.78);transform-origin:left center;margin-right:-22%}.eru-composite:not(.eru-composite--inline) .eru-composite__part--numeric{text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RatingComponent, selector: "eru-rating", inputs: ["value", "config", "isEditable", "isActive"], outputs: ["valueChange", "editModeChange"] }, { kind: "component", type: ProgressComponent, selector: "eru-progress", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: StatusComponent, selector: "eru-status", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: TagComponent, selector: "eru-tag", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange", "newTagAdded"] }, { kind: "component", type: PriorityComponent, selector: "eru-priority", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: PeopleComponent, selector: "eru-people", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "eruGridStore", "personCardTemplate"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: CheckboxComponent, selector: "eru-checkbox", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "label"], outputs: ["valueChange", "change", "blur", "focus", "drilldownClick", "editModeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CompositeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eru-composite', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eru-composite\" [class.eru-composite--inline]=\"inline()\"\n  [class.eru-composite--labelled]=\"labelPosition() !== 'none'\">\n  @for (part of parts(); track part.name; let first = $first; let last = $last) {\n  <span class=\"eru-composite__slot\">\n    @if (labelPosition() === 'left' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"secondaryCss()\">{{ part.label }}</span>\n    }\n    <span class=\"eru-composite__part\" [class.eru-composite__part--secondary]=\"!first\"\n      [class.eru-composite__part--drillable]=\"isDrillable() && first\" [ngStyle]=\"first ? primaryCss() : secondaryCss()\"\n      [title]=\"part.text\" (click)=\"onDrilldown($event, part)\">{{ part.text }}</span>\n    @if (labelPosition() === 'right' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"secondaryCss()\">{{ part.label }}</span>\n    }\n  </span>\n  @if (inline() && !last && separator()) {\n  <span class=\"eru-composite__sep\" [ngStyle]=\"secondaryCss()\">{{ separator() }}</span>\n  }\n  }\n</div>\n", styles: [".eru-composite{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;width:100%;height:100%;line-height:1.3;box-sizing:border-box;padding:0 var(--grid-cell-inset-x, 8px)}.eru-composite--inline{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:4px}.eru-composite__part{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eru-composite__part--drillable{color:var(--grid-primary);cursor:pointer;text-decoration:underline}.eru-composite__sep{flex:0 0 auto}.eru-composite__part--secondary{line-height:1.15}.eru-composite__slot{display:contents}.eru-composite--labelled .eru-composite__slot{display:inline-flex;align-items:baseline;gap:4px;min-width:0}.eru-composite__label{flex:0 0 auto;white-space:nowrap;opacity:.75}\n"] }]
+            args: [{ selector: 'eru-composite', standalone: true, imports: [
+                        CommonModule,
+                        RatingComponent,
+                        ProgressComponent,
+                        StatusComponent,
+                        TagComponent,
+                        PriorityComponent,
+                        PeopleComponent,
+                        CheckboxComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eru-composite\" [class.eru-composite--inline]=\"inline()\"\n  [class.eru-composite--labelled]=\"labelPosition() !== 'none'\">\n  @for (part of parts(); track part.name; let first = $first; let last = $last) {\n  <span class=\"eru-composite__slot\">\n    @if (labelPosition() === 'left' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"cssForSlot(part.slot)\">{{ part.label }}</span>\n    }\n    @if (part.render) {\n    <!-- A datatype that draws itself. Rendered read-only with pointer events\n         off (see .eru-composite__control): a composite is a view, so a rating\n         here must not take a click that would edit the underlying column. The\n         secondary slot scales the control down so the primary still leads. -->\n    <span class=\"eru-composite__control\" [ngClass]=\"'eru-composite__control--' + part.render\"\n      [class.eru-composite__control--secondary]=\"part.slot > 0\">\n      @switch (part.render) {\n      @case ('rating') {\n      <eru-rating [value]=\"asNumber(part.value)\" [config]=\"ratingConfig(part.field)\" [isEditable]=\"false\"></eru-rating>\n      }\n      @case ('progress') {\n      <eru-progress [value]=\"asNumber(part.value)\" [config]=\"part.field\" [isEditable]=\"false\"></eru-progress>\n      }\n      @case ('status') {\n      <eru-status [value]=\"asText(part.value)\" [config]=\"statusConfig(part.field)\" [isEditable]=\"false\"></eru-status>\n      }\n      @case ('tag') {\n      <eru-tag [value]=\"asList(part.value)\" [config]=\"part.field\" [isEditable]=\"false\"></eru-tag>\n      }\n      @case ('priority') {\n      <eru-priority [value]=\"asText(part.value)\" [config]=\"part.field\" [isEditable]=\"false\"></eru-priority>\n      }\n      @case ('people') {\n      <eru-people [value]=\"asList(part.value)\" [config]=\"part.field\" [isEditable]=\"false\"></eru-people>\n      }\n      @case ('checkbox') {\n      <eru-checkbox [value]=\"part.value\" [config]=\"part.field\" [isEditable]=\"false\"></eru-checkbox>\n      }\n      }\n    </span>\n    } @else {\n    <span class=\"eru-composite__part\" [class.eru-composite__part--secondary]=\"part.slot > 0\"\n      [class.eru-composite__part--numeric]=\"part.numeric\"\n      [class.eru-composite__part--drillable]=\"isDrillable() && part.slot === 0\" [ngStyle]=\"cssForSlot(part.slot)\"\n      [title]=\"part.text\" (click)=\"onDrilldown($event, part)\">{{ part.text }}</span>\n    }\n    @if (labelPosition() === 'right' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"cssForSlot(part.slot)\">{{ part.label }}</span>\n    }\n  </span>\n  @if (inline() && !last && separator()) {\n  <span class=\"eru-composite__sep\" [ngStyle]=\"secondaryCss()\">{{ separator() }}</span>\n  }\n  }\n</div>\n", styles: [".eru-composite{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;width:100%;height:100%;line-height:1.3;box-sizing:border-box;padding:0 var(--grid-cell-inset-x, 8px)}.eru-composite--inline{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:4px}.eru-composite__part{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eru-composite__part--drillable{color:var(--grid-primary);cursor:pointer;text-decoration:underline}.eru-composite__sep{flex:0 0 auto}.eru-composite__part--secondary{line-height:1.15}.eru-composite__slot{display:contents}.eru-composite--labelled .eru-composite__slot{display:inline-flex;align-items:baseline;gap:4px;min-width:0}.eru-composite__label{flex:0 0 auto;white-space:nowrap;opacity:.75}.eru-composite__control{display:inline-flex;align-items:center;justify-content:flex-start;min-width:0;pointer-events:none}.eru-composite__control--progress{display:flex;width:100%}.eru-composite__control--progress>eru-progress{display:block;flex:1 1 auto;width:100%;min-width:0}.eru-composite--inline .eru-composite__control--progress{width:auto;min-width:72px}.eru-composite__control>*{margin-left:0;margin-right:0}.eru-composite__control--status .status-display,.eru-composite__control--status .status-dot-display{margin:0}.eru-composite__control--tag .tag-display,.eru-composite__control--priority .priority-display{padding:0}.eru-composite__control--progress .progress-view-container{padding:0;max-height:none}.eru-composite__control--secondary{transform:scale(.78);transform-origin:left center;margin-right:-22%}.eru-composite:not(.eru-composite--inline) .eru-composite__part--numeric{text-align:right}\n"] }]
         }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], isDrillable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDrillable", required: false }] }], drilldownClick: [{ type: i0.Output, args: ["drilldownClick"] }] } });
 const DEFAULT_SECONDARY_STYLE = {
     font_size: 11,
@@ -11616,32 +11823,9 @@ class DataCellComponent {
     onSelectDrilldown(value) {
         this.handleDrilldown(value);
     }
-    // Status component handlers
-    getStatusConfig = computed(() => {
-        const config = this.columnCellConfiguration();
-        if (!config || config.datatype !== 'status') {
-            return null;
-        }
-        // Combine open and close status
-        const combinedStatus = [
-            ...(config.open_status || []),
-            ...(config.close_status || [])
-        ];
-        // Transform to Field format with options array
-        // Each option should have 'name' and 'color' properties
-        const options = combinedStatus.map((status) => ({
-            name: status.name,
-            color: status.color || '',
-            df: status.df || false
-        }));
-        // Return Field object with combined options and preserved open/close arrays
-        return {
-            ...config,
-            options: options,
-            open_status: config.open_status || [],
-            close_status: config.close_status || []
-        };
-    }, ...(ngDevMode ? [{ debugName: "getStatusConfig" }] : []));
+    // Status component handlers. The flattening lives in the model so a composed
+    // status part builds the same config from the same definition.
+    getStatusConfig = computed(() => toStatusOptionsField(this.columnCellConfiguration()), ...(ngDevMode ? [{ debugName: "getStatusConfig" }] : []));
     onStatusBlur(value) {
         this.currentValue.set(value);
         this.eruGridStore().setActiveCell(null);
@@ -13337,6 +13521,14 @@ const COMPOSITE_FIELDS = [
         showWhen: f => f.composite_label_position === 'left' || f.composite_label_position === 'right',
     },
     { key: 'cell_style_secondary', label: 'Secondary value style', control: 'text_style' },
+    {
+        // Only once a third part exists: on a two-part composite the control would
+        // style nothing, and the panel already runs long.
+        key: 'cell_style_tertiary',
+        label: 'Third value style',
+        control: 'text_style',
+        showWhen: f => (f.composite_fields || []).filter(Boolean).length > 2,
+    },
 ];
 const PAGE_CELL_FIELDS = [
     { key: 'cell_page_id', label: 'Cell page', control: 'text' },
@@ -13756,9 +13948,13 @@ class ColumnDesignPanelComponent {
      * drift apart: a key that is inherited is always locked, and vice versa.
      *
      * SEEDED_FIELD_KEYS are the exception the resolver makes too: the model seeds
-     * them, this grid may then override them, so they stay editable here.
+     * them, this grid may then override them, so they stay editable here. So are
+     * EXPLICITLY_OVERRIDDEN_FIELD_KEYS, seeded the same way but tracked by a flag
+     * — `label` among them, which must stay typeable for the flag to ever be set.
      */
-    static INHERITED_KEYS = new Set(INHERITED_FIELD_KEYS.filter(k => !SEEDED_FIELD_KEYS.includes(k) && k !== 'datatype'));
+    static INHERITED_KEYS = new Set(INHERITED_FIELD_KEYS.filter(k => !SEEDED_FIELD_KEYS.includes(k) &&
+        !EXPLICITLY_OVERRIDDEN_FIELD_KEYS[k] &&
+        k !== 'datatype'));
     isInherited(key) {
         return this.isEntityMapped() && ColumnDesignPanelComponent.INHERITED_KEYS.has(key);
     }
@@ -14045,6 +14241,20 @@ class ColumnDesignPanelComponent {
         this.gridStore.updateColumnMeta(name, { [key]: value });
     }
     onText(key, value) {
+        // A typed heading is the author's, and stops the mapped field's label from
+        // seeding it on the next resolve; clearing the box hands the column back to
+        // the data model rather than pinning it to an empty header.
+        const flag = EXPLICITLY_OVERRIDDEN_FIELD_KEYS[key];
+        if (flag) {
+            const name = this.gridStore.selectedDesignColumn();
+            if (!name)
+                return;
+            const typed = String(value ?? '').trim();
+            this.gridStore.updateColumnMeta(name, typed
+                ? { [key]: value, [flag]: true }
+                : { [key]: null, [flag]: null });
+            return;
+        }
         this.patch(key, value);
     }
     onNumber(key, value) {
@@ -15789,7 +15999,7 @@ class EruGridComponent {
         }
     }
     trackByPivotRowFn(index, pivotRow) {
-        return pivotRow._rowKey || `pivot-row-${index}`;
+        return pivotRow?._rowKey || `pivot-row-${index}`;
     }
     trackByRowFn(index, row) {
         // Use both entity_id and index to ensure uniqueness even with duplicate entity_ids
@@ -16121,6 +16331,11 @@ class EruGridComponent {
      * including an explicit `false` on a checkbox — wins from then on. Without the
      * column in hand there is no way to tell "not set" from "set to the opposite",
      * so an override was overwritten on every resolve.
+     *
+     * EXPLICITLY_OVERRIDDEN_FIELD_KEYS work the same way but ask a companion flag
+     * instead, for keys a column always holds a value for — `label`, whose
+     * "already set" was true from the first render, so the model's label never
+     * won and a mapped column kept its raw result key as the heading.
      */
     buildMappedColumnPatch(meta, col) {
         const patch = {};
@@ -16132,6 +16347,9 @@ class EruGridComponent {
                 continue;
             if (seeded.has(k) && !isUnset(col?.[k]))
                 continue;
+            const overrideFlag = EXPLICITLY_OVERRIDDEN_FIELD_KEYS[k];
+            if (overrideFlag && col?.[overrideFlag])
+                continue;
             patch[k] = v;
         }
         // setColumns() stores the canonical datatype ('r_status' -> 'status'), so a
@@ -17033,5 +17251,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_COLUMN_MIN_WIDTH, AttachmentComponent, CELL_RULE_OPERATORS, CheckboxComponent, ChipListComponent, ColumnConstraintsService, CompositeComponent, CurrencyComponent, CustomVirtualScrollStrategy, DATA_TYPES, DATETIME_FORMATS, DATE_FORMATS, DateComponent, DatetimeComponent, DurationComponent, EmailComponent, EruGridComponent, EruGridService, EruGridStore, GRID_COLOR_TOKENS, INHERITED_FIELD_KEYS, LocationComponent, MATERIAL_MODULES, MATERIAL_PROVIDERS, MONTH_SHORT_NAMES, NumberComponent, NumericInputDirective, PRESENTATION_DATATYPES, PRESET_CONFIG_DEFAULTS, PRESET_MANAGED_FIELDS, PeopleComponent, PhoneComponent, PriorityComponent, ProgressComponent, RatingComponent, SEEDED_FIELD_KEYS, SELF_COLOURED_DATATYPES, SelectComponent, StatusComponent, TagComponent, TextareaComponent, TextboxComponent, ThemeService, ThemeToggleComponent, WebsiteComponent, abbreviateNumber, abbreviationScaleFor, cellRuleBarPercent, cellRuleMatches, cellRuleToCss, cellStatAlias, cellTextStyleToCss, collectColumnStatRequests, columnCellRules, composeColorValue, effectiveValueDatatype, evaluateRowCondition, formatCellValue, formatDateTimeWithPattern, formatDateWithPattern, formatNumberValue, hasOwnCellRules, matchCellRule, matchColorRange, normalizeCellRender, normalizeDatatype, normalizeDateFormat, normalizeDateTimeFormat, parseCellDate, parseCellDateTime, parseColorValue, parseDateWithPattern, readRowValue, resolveColumnRules, resolveRowValue, resolveStatValue, rowSelectionKey, statusPillColors, tagPillColors, toDateOnlyString, toDateTimeString };
+export { ACTION_COLUMN_MIN_WIDTH, AttachmentComponent, CELL_RULE_OPERATORS, CheckboxComponent, ChipListComponent, ColumnConstraintsService, CompositeComponent, CurrencyComponent, CustomVirtualScrollStrategy, DATA_TYPES, DATETIME_FORMATS, DATE_FORMATS, DateComponent, DatetimeComponent, DurationComponent, EXPLICITLY_OVERRIDDEN_FIELD_KEYS, EmailComponent, EruGridComponent, EruGridService, EruGridStore, GRID_COLOR_TOKENS, INHERITED_FIELD_KEYS, LocationComponent, MATERIAL_MODULES, MATERIAL_PROVIDERS, MONTH_SHORT_NAMES, NumberComponent, NumericInputDirective, PRESENTATION_DATATYPES, PRESET_CONFIG_DEFAULTS, PRESET_MANAGED_FIELDS, PeopleComponent, PhoneComponent, PriorityComponent, ProgressComponent, RatingComponent, SEEDED_FIELD_KEYS, SELF_COLOURED_DATATYPES, SelectComponent, StatusComponent, TagComponent, TextareaComponent, TextboxComponent, ThemeService, ThemeToggleComponent, WebsiteComponent, abbreviateNumber, abbreviationScaleFor, cellRuleBarPercent, cellRuleMatches, cellRuleToCss, cellStatAlias, cellTextStyleToCss, collectColumnStatRequests, columnCellRules, composeColorValue, effectiveValueDatatype, evaluateRowCondition, formatCellValue, formatDateTimeWithPattern, formatDateWithPattern, formatNumberValue, hasOwnCellRules, matchCellRule, matchColorRange, normalizeCellRender, normalizeDatatype, normalizeDateFormat, normalizeDateTimeFormat, parseCellDate, parseCellDateTime, parseColorValue, parseDateWithPattern, readRowValue, resolveColumnRules, resolveRowValue, resolveStatValue, rowSelectionKey, statusPillColors, tagPillColors, toDateOnlyString, toDateTimeString, toStatusOptionsField };
 //# sourceMappingURL=eru-grid.mjs.map