eru-grid 0.0.55 → 0.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eru-grid",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "peerDependencies": {
     "@angular/common": "^21.1.2",
     "@angular/core": "^21.1.2",

package/types/eru-grid.d.ts

@@ -370,6 +370,7 @@ interface Field {
     cell_page_id?: string;
     cell_style?: CellTextStyle;
     cell_style_secondary?: CellTextStyle;
+    cell_style_tertiary?: CellTextStyle;
     is_pii?: boolean;
     is_ephi?: boolean;
     to_encrypt?: boolean;
@@ -1099,6 +1100,16 @@ declare function parseCellDate(value: any, pattern?: string, keepTime?: boolean)
  * 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.
+ */
+declare function toStatusOptionsField(field: Field | null | undefined): Field | null;
 declare function formatCellValue(value: any, field: Field | null | undefined): string;
 /**
  * Read a field's value off a row, tolerating both shapes the grid is handed:
@@ -2972,20 +2983,64 @@ declare class ChipListComponent implements OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipListComponent, "eru-chip-list", never, { "labels": { "alias": "labels"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "availableWidth": { "alias": "availableWidth"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+interface RatingConfig {
+    startValue?: number;
+    endValue?: number;
+    emojiValue?: 'star' | 'smile' | 'heart';
+}
+declare class RatingComponent {
+    value: _angular_core.InputSignal<number>;
+    config: _angular_core.InputSignal<RatingConfig>;
+    isEditable: _angular_core.InputSignal<boolean>;
+    isActive: _angular_core.InputSignal<boolean>;
+    valueChange: EventEmitter<number>;
+    editModeChange: EventEmitter<boolean>;
+    currentValue: _angular_core.WritableSignal<number>;
+    hoverRating: _angular_core.WritableSignal<number>;
+    constructor();
+    getRatingStars: _angular_core.Signal<number[]>;
+    getEmoji(star: number): string;
+    onActivate(): void;
+    setRating(value: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RatingComponent, "eru-rating", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "isEditable": { "alias": "isEditable"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "editModeChange": "editModeChange"; }, never, never, true, never>;
+}
+
 interface CompositePart {
     name: string;
     label: string;
     text: string;
+    /** The part's own column, so a self-drawing datatype can be given its config. */
+    field: Field | null;
+    /** Unformatted, for the controls — they format and colour their own value. */
+    value: any;
+    /** The datatype to draw, or '' when this part stays as formatted text. */
+    render: string;
+    /** True for a figure, so the slot aligns it the way its own column would. */
+    numeric: boolean;
+    /**
+     * The part's position in `composite_fields`, kept because empty parts are
+     * dropped from the render. Styling by the RENDERED position meant a null
+     * secondary promoted the third part into the second's style — a green
+     * tertiary line turning red the moment its neighbour had no value.
+     */
+    slot: number;
 }
 /**
  * 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.
  */
 declare class CompositeComponent {
     row: _angular_core.InputSignal<any>;
@@ -2999,12 +3054,57 @@ declare class CompositeComponent {
     readonly labelPosition: _angular_core.Signal<"none" | "left" | "right">;
     readonly primaryCss: _angular_core.Signal<Record<string, string>>;
     readonly secondaryCss: _angular_core.Signal<Record<string, string>>;
+    /**
+     * 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.
+     */
+    readonly tertiaryCss: _angular_core.Signal<Record<string, string>>;
+    /**
+     * 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: number): Record<string, string>;
     /**
      * 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
      * is configured still shows its own value instead of going blank.
      */
     readonly parts: _angular_core.Signal<CompositePart[]>;
+    /**
+     * 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.
+     */
+    private static readonly SELF_DRAWN;
+    /**
+     * 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.
+     */
+    private static withRowSymbol;
+    /** Figures are right-aligned by their own cell, so a composed one is too. */
+    private static isNumeric;
+    private static selfDrawnDatatype;
+    /**
+     * 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: Field | null): Field | null;
+    /** Rating takes a shape of its own rather than the raw Field. */
+    ratingConfig(field: Field | null): RatingConfig;
+    /** Controls want their own types; a row value can arrive as anything. */
+    asNumber(value: any): number;
+    asText(value: any): string | null;
+    asList(value: any): string[] | null;
     onDrilldown(event: Event, part: CompositePart): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompositeComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CompositeComponent, "eru-composite", never, { "row": { "alias": "row"; "required": false; "isSignal": true; }; "column": { "alias": "column"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "isDrillable": { "alias": "isDrillable"; "required": false; "isSignal": true; }; }, { "drilldownClick": "drilldownClick"; }, never, never, true, never>;
@@ -3624,29 +3724,6 @@ declare class ProgressComponent implements OnInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressComponent, "eru-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "isEditable": { "alias": "isEditable"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; "isDrillable": { "alias": "isDrillable"; "required": false; "isSignal": true; }; "columnWidth": { "alias": "columnWidth"; "required": false; "isSignal": true; }; "fieldSize": { "alias": "fieldSize"; "required": false; "isSignal": true; }; "eruGridStore": { "alias": "eruGridStore"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "blur": "blur"; "focus": "focus"; "drilldownClick": "drilldownClick"; "editModeChange": "editModeChange"; }, never, never, true, never>;
 }
 
-interface RatingConfig {
-    startValue?: number;
-    endValue?: number;
-    emojiValue?: 'star' | 'smile' | 'heart';
-}
-declare class RatingComponent {
-    value: _angular_core.InputSignal<number>;
-    config: _angular_core.InputSignal<RatingConfig>;
-    isEditable: _angular_core.InputSignal<boolean>;
-    isActive: _angular_core.InputSignal<boolean>;
-    valueChange: EventEmitter<number>;
-    editModeChange: EventEmitter<boolean>;
-    currentValue: _angular_core.WritableSignal<number>;
-    hoverRating: _angular_core.WritableSignal<number>;
-    constructor();
-    getRatingStars: _angular_core.Signal<number[]>;
-    getEmoji(star: number): string;
-    onActivate(): void;
-    setRating(value: number): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RatingComponent, "eru-rating", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "isEditable": { "alias": "isEditable"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "editModeChange": "editModeChange"; }, never, never, true, never>;
-}
-
 declare class SelectComponent implements OnInit, AfterViewInit {
     private el;
     selectContainer: ElementRef<HTMLElement>;
@@ -4062,5 +4139,5 @@ declare class ThemeToggleComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemeToggleComponent, "eru-theme-toggle", never, {}, {}, never, never, true, never>;
 }
 
-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 };
 export type { ActionClick, AggregationFunction, AttachmentConfig, BoardCardContext, CellFormatRule, CellRender, CellRuleOperator, CellStatRef, CellStatVerb, CellTemplateContext, CellTextStyle, CellValueChange, ChipListItem, ColorRangeBand, ColumnReorder, ColumnResize, ColumnStatRequest, ColumnWidthConstraints, CompositePart, CurrencyValidationResult, DataTypes, Drilldown, DurationValue, DynamicDataRequest, EmailValidationResult, ExcelDownloadPayload, ExcelDownloadRequest, ExcelPivotConfig, Field, GridAction, GridConfiguration, GridFeatures, GridMode, GridPreset, GridStyles, GridTokens, GroupItem$1 as GroupItem, LocationConfig, LocationValidationResult, NumberValidationResult, ParsedColorValue, PeopleOption, PersonCardContext, PivotColumnGroupState, PivotColumnHeader, PivotColumnKind, PivotConfiguration, PivotHeaderStructure, PivotMetadata, PivotResult, PivotRow, PivotRowKind, RatingConfig, Row, RowDataRequest, RowDataResponse, RowGrandTotal, RowGroup, ServerValidationNotice, StatusPillColors, TagPillColors, TextareaValidationResult, TextboxValidationResult, Theme, WebsiteValidationResult };