eru-grid 0.0.42 → 0.0.44

package/fesm2022/eru-grid.mjs

@@ -126,6 +126,46 @@ function normalizeDatatype(datatype) {
     const key = String(datatype ?? '');
     return DATATYPE_ALIASES[key] ?? key;
 }
+/** Shown when a value has no colour of its own. */
+const STATUS_PILL_FALLBACK = {
+    background: 'white',
+    border: 'black',
+    text: 'black',
+};
+/**
+ * The colours for a status pill, from the single colour the data model gives it.
+ *
+ * The fill is lightened 90% toward white and the text darkened 30%, with the
+ * border left at full saturation. That is what keeps a pale palette entry
+ * readable: using the raw colour as text on a tint of itself puts same-hue on
+ * same-hue, and the pale half of a palette becomes unreadable.
+ *
+ * Exported from here — rather than living in the grid's status cell where it
+ * started — because eru-studio's status badge and chip list paint the same
+ * values, and three copies of this arithmetic is three ways for one field to
+ * look different depending on which control renders it.
+ */
+function statusPillColors(color) {
+    const hex = String(color ?? '').replace('#', '');
+    const expanded = hex.length === 3 ? hex.split('').map(c => c + c).join('') : hex;
+    if (expanded.length !== 6)
+        return { ...STATUS_PILL_FALLBACK };
+    const value = parseInt(expanded, 16);
+    if (isNaN(value))
+        return { ...STATUS_PILL_FALLBACK };
+    const r = (value >> 16) & 255;
+    const g = (value >> 8) & 255;
+    const b = value & 255;
+    const lighten = 0.9;
+    const darken = 0.3;
+    const lit = (channel) => Math.min(255, Math.round(channel + (255 - channel) * lighten));
+    const dark = (channel) => Math.round(channel * (1 - darken));
+    return {
+        background: `rgb(${lit(r)}, ${lit(g)}, ${lit(b)})`,
+        border: `#${expanded}`,
+        text: `rgb(${dark(r)}, ${dark(g)}, ${dark(b)})`,
+    };
+}
 /** Short month names, for the `MMM` token. */
 const MONTH_SHORT_NAMES = [
     'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
@@ -4632,21 +4672,21 @@ function abbreviateNumber$1(num, system, decimals) {
     };
     if (system === 'lacs') {
         if (abs >= 1e7)
-            return `${sign}${trim(abs / 1e7)}Cr`;
+            return `${sign}${trim(abs / 1e7)} Cr`;
         if (abs >= 1e5)
-            return `${sign}${trim(abs / 1e5)}L`;
+            return `${sign}${trim(abs / 1e5)} L`;
         if (abs >= 1e3)
-            return `${sign}${trim(abs / 1e3)}k`;
+            return `${sign}${trim(abs / 1e3)} k`;
         return `${sign}${trim(abs)}`;
     }
     if (abs >= 1e12)
-        return `${sign}${trim(abs / 1e12)}tn`;
+        return `${sign}${trim(abs / 1e12)} tn`;
     if (abs >= 1e9)
-        return `${sign}${trim(abs / 1e9)}bn`;
+        return `${sign}${trim(abs / 1e9)} bn`;
     if (abs >= 1e6)
-        return `${sign}${trim(abs / 1e6)}mn`;
+        return `${sign}${trim(abs / 1e6)} mn`;
     if (abs >= 1e3)
-        return `${sign}${trim(abs / 1e3)}k`;
+        return `${sign}${trim(abs / 1e3)} k`;
     return `${sign}${trim(abs)}`;
 }
 class CurrencyComponent {
@@ -4870,21 +4910,21 @@ function abbreviateNumber(num, system, decimals) {
     };
     if (system === 'lacs') {
         if (abs >= 1e7)
-            return `${sign}${trim(abs / 1e7)}Cr`;
+            return `${sign}${trim(abs / 1e7)} Cr`;
         if (abs >= 1e5)
-            return `${sign}${trim(abs / 1e5)}L`;
+            return `${sign}${trim(abs / 1e5)} L`;
         if (abs >= 1e3)
-            return `${sign}${trim(abs / 1e3)}k`;
+            return `${sign}${trim(abs / 1e3)} k`;
         return `${sign}${trim(abs)}`;
     }
     if (abs >= 1e12)
-        return `${sign}${trim(abs / 1e12)}tn`;
+        return `${sign}${trim(abs / 1e12)} tn`;
     if (abs >= 1e9)
-        return `${sign}${trim(abs / 1e9)}bn`;
+        return `${sign}${trim(abs / 1e9)} bn`;
     if (abs >= 1e6)
-        return `${sign}${trim(abs / 1e6)}mn`;
+        return `${sign}${trim(abs / 1e6)} mn`;
     if (abs >= 1e3)
-        return `${sign}${trim(abs / 1e3)}k`;
+        return `${sign}${trim(abs / 1e3)} k`;
     return `${sign}${trim(abs)}`;
 }
 class NumberComponent {
@@ -8244,51 +8284,12 @@ class StatusComponent {
         }
     }
     getStatusColor(statusName) {
-        const cfg = this.config();
-        if (!cfg || !cfg.options) {
-            return {
-                background: 'white',
-                border: 'black',
-                text: 'black'
-            };
-        }
-        const options = cfg.options || [];
-        // Find option by name (status value matches option.name)
-        const statusOption = options.find((opt) => {
-            return opt.name === statusName;
-        });
-        if (!statusOption || !statusOption.color) {
-            return {
-                background: 'white',
-                border: 'black',
-                text: 'black'
-            };
-        }
-        // Advanced color manipulation function for rounded rectangle display
-        const manipulateColor = (color) => {
-            // Convert hex to RGB
-            const hex = color.replace('#', '');
-            const bigint = parseInt(hex, 16);
-            const r = (bigint >> 16) & 255;
-            const g = (bigint >> 8) & 255;
-            const b = bigint & 255;
-            // Create lighter background
-            const lightenFactor = 0.9; // 90% lighter
-            const bgR = Math.min(255, Math.round(r + (255 - r) * lightenFactor));
-            const bgG = Math.min(255, Math.round(g + (255 - g) * lightenFactor));
-            const bgB = Math.min(255, Math.round(b + (255 - b) * lightenFactor));
-            // Darken text color
-            const darkenFactor = 0.3; // 30% darker
-            const textR = Math.round(r * (1 - darkenFactor));
-            const textG = Math.round(g * (1 - darkenFactor));
-            const textB = Math.round(b * (1 - darkenFactor));
-            return {
-                background: `rgb(${bgR}, ${bgG}, ${bgB})`,
-                border: color,
-                text: `rgb(${textR}, ${textG}, ${textB})`
-            };
-        };
-        return manipulateColor(statusOption.color);
+        const options = this.config()?.options || [];
+        // Status value matches option.name.
+        const statusOption = options.find((opt) => opt.name === statusName);
+        // statusPillColors returns the neutral fallback for a missing colour, so the
+        // no-option and no-colour cases need no separate handling here.
+        return statusPillColors(statusOption?.color);
     }
     getStatusButtonDisplay(statusName) {
         const cfg = this.config();
@@ -14720,5 +14721,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentComponent, CheckboxComponent, ColumnConstraintsService, CurrencyComponent, CustomVirtualScrollStrategy, DATA_TYPES, DATETIME_FORMATS, DATE_FORMATS, DateComponent, DatetimeComponent, DurationComponent, EmailComponent, EruGridComponent, EruGridService, EruGridStore, INHERITED_FIELD_KEYS, LocationComponent, MATERIAL_MODULES, MATERIAL_PROVIDERS, MONTH_SHORT_NAMES, NumberComponent, PRESET_CONFIG_DEFAULTS, PRESET_MANAGED_FIELDS, PeopleComponent, PhoneComponent, PriorityComponent, ProgressComponent, RatingComponent, SelectComponent, StatusComponent, TagComponent, TextareaComponent, TextboxComponent, ThemeService, ThemeToggleComponent, WebsiteComponent, evaluateRowCondition, formatDateWithPattern, matchColorRange, normalizeDatatype, normalizeDateFormat, normalizeDateTimeFormat, parseDateWithPattern, resolveRowValue };
+export { AttachmentComponent, CheckboxComponent, ColumnConstraintsService, CurrencyComponent, CustomVirtualScrollStrategy, DATA_TYPES, DATETIME_FORMATS, DATE_FORMATS, DateComponent, DatetimeComponent, DurationComponent, EmailComponent, EruGridComponent, EruGridService, EruGridStore, INHERITED_FIELD_KEYS, LocationComponent, MATERIAL_MODULES, MATERIAL_PROVIDERS, MONTH_SHORT_NAMES, NumberComponent, PRESET_CONFIG_DEFAULTS, PRESET_MANAGED_FIELDS, PeopleComponent, PhoneComponent, PriorityComponent, ProgressComponent, RatingComponent, SelectComponent, StatusComponent, TagComponent, TextareaComponent, TextboxComponent, ThemeService, ThemeToggleComponent, WebsiteComponent, evaluateRowCondition, formatDateWithPattern, matchColorRange, normalizeDatatype, normalizeDateFormat, normalizeDateTimeFormat, parseDateWithPattern, resolveRowValue, statusPillColors };
 //# sourceMappingURL=eru-grid.mjs.map