eru-grid 0.0.55 → 0.0.56

package/fesm2022/eru-grid.mjs

@@ -1163,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 '';
@@ -11165,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" }] : []));
@@ -11186,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
@@ -11200,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"
@@ -11209,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;
@@ -11225,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,
@@ -11681,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);
@@ -13402,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' },
@@ -17124,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, 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 };
+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