@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.111 → 2.0.0-next.113

package/src/navigation-instruments/readout/readout-formatters.spec.ts

@@ -0,0 +1,229 @@
+import {describe, it, expect} from 'vitest';
+import {
+  assertReadoutValueType,
+  resolveReadoutNumericValue,
+  resolveReadoutTextValue,
+  isReadoutValueType,
+  ReadoutValueType,
+} from './readout-formatters.js';
+
+describe('assertReadoutValueType', () => {
+  it('accepts a number when valueType is number', () => {
+    expect(() =>
+      assertReadoutValueType('obc-readout', 12.4, ReadoutValueType.number)
+    ).not.toThrow();
+  });
+
+  it('accepts null when valueType is number', () => {
+    expect(() =>
+      assertReadoutValueType('obc-readout', null, ReadoutValueType.number)
+    ).not.toThrow();
+  });
+
+  // HTML attributes are always strings, so `<obc-readout value="12.4">` must
+  // keep working under the default valueType.
+  it('accepts a numeric-looking string when valueType is number', () => {
+    expect(() =>
+      assertReadoutValueType('obc-readout', '12.4', ReadoutValueType.number)
+    ).not.toThrow();
+  });
+
+  it('accepts a negative numeric string when valueType is number', () => {
+    expect(() =>
+      assertReadoutValueType('obc-readout', '-12.4', ReadoutValueType.number)
+    ).not.toThrow();
+  });
+
+  // `value="${maybeUndefined}"` is a common template shape, and Number('') is
+  // 0 — a silently wrong reading, which is worse than a dash.
+  it('accepts a blank string when valueType is number', () => {
+    expect(() =>
+      assertReadoutValueType('obc-readout', '', ReadoutValueType.number)
+    ).not.toThrow();
+    expect(() =>
+      assertReadoutValueType('obc-readout', '   ', ReadoutValueType.number)
+    ).not.toThrow();
+  });
+
+  it('throws for text when valueType is number', () => {
+    expect(() =>
+      assertReadoutValueType('obc-readout', 'Auto', ReadoutValueType.number)
+    ).toThrow(TypeError);
+  });
+
+  it('names the offending tag and value in the message', () => {
+    expect(() =>
+      assertReadoutValueType(
+        'obc-readout-list-item',
+        'Thermo On',
+        ReadoutValueType.number
+      )
+    ).toThrow(/obc-readout-list-item.*Thermo On.*valueType="text"/s);
+  });
+
+  it('throws for a partially numeric string when valueType is number', () => {
+    expect(() =>
+      assertReadoutValueType('obc-readout', '12.4 kn', ReadoutValueType.number)
+    ).toThrow(TypeError);
+  });
+
+  it('never throws when valueType is text', () => {
+    expect(() =>
+      assertReadoutValueType('obc-readout', 'Auto', ReadoutValueType.text)
+    ).not.toThrow();
+    expect(() =>
+      assertReadoutValueType('obc-readout', 12.4, ReadoutValueType.text)
+    ).not.toThrow();
+  });
+
+  // An attribute carries an unchecked string, so a typo matches neither mode.
+  // Without this it falls through every check and silently renders a dash.
+  it('throws for an unrecognised valueType', () => {
+    expect(() =>
+      assertReadoutValueType(
+        'obc-readout',
+        'Auto',
+        'strng' as unknown as ReadoutValueType
+      )
+    ).toThrow(/valueType must be "number" or "text".*"strng"/s);
+  });
+
+  it('throws for an unrecognised valueType even with a numeric value', () => {
+    expect(() =>
+      assertReadoutValueType(
+        'obc-readout',
+        12.4,
+        'STRING' as unknown as ReadoutValueType
+      )
+    ).toThrow(TypeError);
+  });
+
+  // undefined/null mean "use the default", so they must still enforce the
+  // number contract rather than skipping validation entirely.
+  it('treats an unset valueType as number', () => {
+    expect(() =>
+      assertReadoutValueType(
+        'obc-readout',
+        'Auto',
+        undefined as unknown as ReadoutValueType
+      )
+    ).toThrow(TypeError);
+    expect(() =>
+      assertReadoutValueType(
+        'obc-readout',
+        12.4,
+        undefined as unknown as ReadoutValueType
+      )
+    ).not.toThrow();
+  });
+});
+
+describe('isReadoutValueType', () => {
+  it('accepts the supported values', () => {
+    expect(isReadoutValueType('number')).toBe(true);
+    expect(isReadoutValueType('text')).toBe(true);
+  });
+
+  it('rejects anything else', () => {
+    // `string` names the JS type rather than the mode, and is the likely
+    // mistake for anyone reaching for the TypeScript word.
+    expect(isReadoutValueType('string')).toBe(false);
+    expect(isReadoutValueType('strng')).toBe(false);
+    expect(isReadoutValueType('Number')).toBe(false);
+    expect(isReadoutValueType('')).toBe(false);
+    expect(isReadoutValueType(undefined)).toBe(false);
+    expect(isReadoutValueType(null)).toBe(false);
+    expect(isReadoutValueType(0)).toBe(false);
+  });
+});
+
+describe('resolveReadoutNumericValue', () => {
+  it('passes a number through unchanged', () => {
+    expect(resolveReadoutNumericValue(12.4, ReadoutValueType.number)).toBe(
+      12.4
+    );
+  });
+
+  it('parses a numeric string', () => {
+    expect(resolveReadoutNumericValue('12.4', ReadoutValueType.number)).toBe(
+      12.4
+    );
+  });
+
+  it('is undefined for null, undefined and blank strings', () => {
+    expect(
+      resolveReadoutNumericValue(null, ReadoutValueType.number)
+    ).toBeUndefined();
+    expect(
+      resolveReadoutNumericValue(undefined, ReadoutValueType.number)
+    ).toBeUndefined();
+    expect(
+      resolveReadoutNumericValue('', ReadoutValueType.number)
+    ).toBeUndefined();
+    expect(
+      resolveReadoutNumericValue('  ', ReadoutValueType.number)
+    ).toBeUndefined();
+  });
+
+  it('is undefined for non-numeric text', () => {
+    expect(
+      resolveReadoutNumericValue('Auto', ReadoutValueType.number)
+    ).toBeUndefined();
+  });
+
+  // Text rows must contribute nothing to obc-readout-list's shared reserver.
+  it('is undefined in text mode even for a numeric value', () => {
+    expect(
+      resolveReadoutNumericValue(12.4, ReadoutValueType.text)
+    ).toBeUndefined();
+    expect(
+      resolveReadoutNumericValue('12.4', ReadoutValueType.text)
+    ).toBeUndefined();
+  });
+
+  // Pre-existing behaviour, deliberately preserved: NaN reaches the formatter.
+  it('passes NaN through in number mode', () => {
+    expect(
+      resolveReadoutNumericValue(Number.NaN, ReadoutValueType.number)
+    ).toBeNaN();
+  });
+});
+
+describe('resolveReadoutTextValue', () => {
+  it('returns the text verbatim in text mode', () => {
+    expect(resolveReadoutTextValue('Thermo On', ReadoutValueType.text)).toBe(
+      'Thermo On'
+    );
+  });
+
+  // The reason a converter was rejected: it would have parsed this to 1.5.
+  it('preserves trailing zeros in text mode', () => {
+    expect(resolveReadoutTextValue('1.50', ReadoutValueType.text)).toBe('1.50');
+  });
+
+  it('coerces a number to text in text mode', () => {
+    expect(resolveReadoutTextValue(12.4, ReadoutValueType.text)).toBe('12.4');
+  });
+
+  it('is undefined for null, undefined and blank strings', () => {
+    expect(
+      resolveReadoutTextValue(null, ReadoutValueType.text)
+    ).toBeUndefined();
+    expect(
+      resolveReadoutTextValue(undefined, ReadoutValueType.text)
+    ).toBeUndefined();
+    expect(resolveReadoutTextValue('', ReadoutValueType.text)).toBeUndefined();
+    expect(
+      resolveReadoutTextValue('   ', ReadoutValueType.text)
+    ).toBeUndefined();
+  });
+
+  it('is undefined in number mode', () => {
+    expect(
+      resolveReadoutTextValue('12.4', ReadoutValueType.number)
+    ).toBeUndefined();
+    expect(
+      resolveReadoutTextValue(12.4, ReadoutValueType.number)
+    ).toBeUndefined();
+  });
+});

package/src/navigation-instruments/readout/readout-formatters.ts

@@ -4,6 +4,111 @@ export type ReadoutNumericFormatOptions = {
   fractionDigits: number;
 };
 
+/**
+ * How a readout's `value` is interpreted.
+ * - `number`: formatted via `fractionDigits` / `maxDigits`.
+ * - `text`: rendered verbatim, with the numeric format options ignored.
+ */
+export enum ReadoutValueType {
+  number = 'number',
+  text = 'text',
+}
+
+const READOUT_VALUE_TYPES: readonly string[] = Object.values(ReadoutValueType);
+
+/** Whether `value` is one of the supported {@link ReadoutValueType} values. */
+export function isReadoutValueType(value: unknown): value is ReadoutValueType {
+  return typeof value === 'string' && READOUT_VALUE_TYPES.includes(value);
+}
+
+function isBlank(value: string): boolean {
+  return value.trim() === '';
+}
+
+/**
+ * Throws when `valueType` is not a supported value, or when `value` is text but
+ * `valueType` is `number`.
+ *
+ * `valueType` is validated first because an attribute carries an unchecked
+ * string: a typo such as `valuetype="strng"` matches neither mode, so every
+ * mode check falls through and the readout silently renders the unavailable
+ * dash — the opposite of the loud failure this contract exists to give.
+ * `undefined`/`null` are allowed and mean "use the default".
+ *
+ * Attributes are always strings, so a numeric-looking string (`value="10.12"`)
+ * is accepted and parsed. Blank strings resolve to the unavailable dash rather
+ * than throwing — `value="${maybeUndefined}"` is a common template shape, and
+ * `Number('')` is `0`, a silently wrong reading.
+ */
+export function assertReadoutValueType(
+  tagName: string,
+  value: number | string | null | undefined,
+  valueType: ReadoutValueType
+): void {
+  // `undefined`/`null` mean "use the default", matching how the components and
+  // the resolvers treat an unset `valueType`.
+  const resolved = valueType ?? ReadoutValueType.number;
+  if (!isReadoutValueType(resolved)) {
+    throw new TypeError(
+      `<${tagName}>: valueType must be ` +
+        `${READOUT_VALUE_TYPES.map((t) => `"${t}"`).join(' or ')} ` +
+        `(got ${JSON.stringify(valueType)}).`
+    );
+  }
+  if (
+    resolved !== ReadoutValueType.number ||
+    typeof value !== 'string' ||
+    isBlank(value)
+  ) {
+    return;
+  }
+  if (Number.isFinite(Number(value))) {
+    return;
+  }
+  throw new TypeError(
+    `<${tagName}>: value must be a number when valueType is "number" ` +
+      `(got ${JSON.stringify(value)}). Set valueType="text" to render text.`
+  );
+}
+
+/** The value as a number, or `undefined` when it is text / unavailable. */
+export function resolveReadoutNumericValue(
+  value: number | string | null | undefined,
+  valueType: ReadoutValueType
+): number | undefined {
+  if (
+    valueType === ReadoutValueType.text ||
+    value === null ||
+    value === undefined
+  ) {
+    return undefined;
+  }
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (isBlank(value)) {
+    return undefined;
+  }
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+/** The value as display text, or `undefined` when not in text mode / blank. */
+export function resolveReadoutTextValue(
+  value: number | string | null | undefined,
+  valueType: ReadoutValueType
+): string | undefined {
+  if (
+    valueType !== ReadoutValueType.text ||
+    value === null ||
+    value === undefined
+  ) {
+    return undefined;
+  }
+  const text = typeof value === 'number' ? String(value) : value;
+  return isBlank(text) ? undefined : text;
+}
+
 function dashedGenerator({
   showZeroPadding,
   minValueLength,

package/src/navigation-instruments/readout/readout.stories.ts

@@ -20,6 +20,7 @@ import {
   type ReadoutAdviceOptions,
   type ReadoutReserverOptions,
   type ReadoutSourceOptions,
+  ReadoutValueType,
 } from './readout.js';
 import {
   type AlertFrameConfig,
@@ -36,7 +37,8 @@ type ReadoutStoryArgs = {
   unit: string;
   src: string;
   hasValue: boolean;
-  value: number;
+  value: number | string;
+  valueType: ReadoutValueType;
   off: boolean;
   hasSetpoint: boolean;
   setpoint: number;
@@ -90,7 +92,8 @@ type ReadoutConfig = {
   unit?: string;
   src?: string;
   hasValue?: boolean;
-  value?: number | null;
+  value?: number | string | null;
+  valueType?: ReadoutValueType;
   off?: boolean;
   hasSetpoint?: boolean;
   setpoint?: number;
@@ -159,6 +162,7 @@ function renderReadout(config: ReadoutConfig) {
       .src=${config.src}
       .hasValue=${config.hasValue ?? true}
       .value=${config.value ?? null}
+      .valueType=${config.valueType ?? ReadoutValueType.number}
       .off=${config.off ?? false}
       .hasSetpoint=${config.hasSetpoint ?? false}
       .setpoint=${config.setpoint}
@@ -241,6 +245,7 @@ const defaultArgs: ReadoutStoryArgs = {
   src: '',
   hasValue: true,
   value: 123,
+  valueType: ReadoutValueType.number,
   off: false,
   hasSetpoint: false,
   setpoint: 120,
@@ -306,6 +311,7 @@ const meta = {
       src: args.src,
       hasValue: args.hasValue,
       value: args.value,
+      valueType: args.valueType,
       off: args.off,
       hasSetpoint: args.hasSetpoint,
       setpoint: args.setpoint,
@@ -322,7 +328,16 @@ const meta = {
     hasValue: {name: 'Has Value', table: {category: 'Data'}},
     value: {
       name: 'Value',
-      control: {type: 'number'},
+      // Text control (not number) so both value types are exercisable. Under
+      // valueType=number a numeric string resolves back to a number; entering
+      // non-numeric text there throws, which is the intended contract.
+      control: {type: 'text'},
+      table: {category: 'Data'},
+    },
+    valueType: {
+      name: 'Value Type',
+      control: {type: 'inline-radio'},
+      options: Object.values(ReadoutValueType),
       table: {category: 'Data'},
     },
     off: {name: 'Off', table: {category: 'Data'}},
@@ -1153,6 +1168,141 @@ export const DebugOverlay: StoryObj<
   `,
 };
 
+/**
+ * **Text values** — `valueType="text"` renders `value` verbatim instead of
+ * formatting it as a number, for readings that are states rather than
+ * quantities ("Auto", "Thermo On", "Standby").
+ *
+ * The numeric format options (`fractionDigits`, `maxDigits`, `hintedZeros`) are
+ * ignored in this mode; an explicit `spaceReserver` still applies. Passing text
+ * while `valueType` is `number` throws a `TypeError` rather than rendering
+ * `NaN` — a numeric-looking string such as `"12.4"` is still accepted and
+ * parsed, so plain-HTML `value="12.4"` keeps working.
+ */
+export const TextValue: Story = {
+  render: () =>
+    renderShowcase([
+      {
+        title: 'Text Value — Vertical',
+        columns: 3,
+        cases: [
+          {
+            label: 'text',
+            config: {
+              label: 'Mode',
+              unit: '',
+              value: 'Auto',
+              valueType: ReadoutValueType.text,
+            },
+          },
+          {
+            label: 'text + source',
+            config: {
+              label: 'Thruster',
+              unit: '',
+              value: 'Standby',
+              valueType: ReadoutValueType.text,
+              src: 'CTRL',
+            },
+          },
+          {
+            label: 'text + stacked meta',
+            config: {
+              label: 'Status',
+              unit: '',
+              value: 'Normal',
+              valueType: ReadoutValueType.text,
+              options: {stacking: ReadoutStacking.stacked},
+            },
+          },
+        ],
+      },
+      {
+        title: 'Text Value — Horizontal',
+        columns: 3,
+        cases: [
+          {
+            label: 'text',
+            config: {
+              label: 'Mode',
+              unit: '',
+              value: 'Auto',
+              valueType: ReadoutValueType.text,
+              options: {direction: ReadoutDirection.horizontal},
+            },
+          },
+          {
+            label: 'text + source',
+            config: {
+              label: 'Thruster',
+              unit: '',
+              value: 'Standby',
+              valueType: ReadoutValueType.text,
+              src: 'CTRL',
+              options: {direction: ReadoutDirection.horizontal},
+            },
+          },
+          {
+            label: 'numeric (contrast)',
+            config: {
+              label: 'SOG',
+              unit: 'kn',
+              value: 12.4,
+              options: {
+                direction: ReadoutDirection.horizontal,
+                fractionDigits: 1,
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: 'Value Resolution — Sizes and Edge Cases',
+        columns: 4,
+        cases: [
+          {
+            label: 'verbatim "1.50" (trailing zero kept)',
+            config: {
+              label: 'Bearing',
+              unit: '',
+              value: '1.50',
+              valueType: ReadoutValueType.text,
+              options: {fractionDigits: 1},
+            },
+          },
+          {
+            label: 'null in text mode (dash)',
+            config: {
+              label: 'Mode',
+              unit: '',
+              value: null,
+              valueType: ReadoutValueType.text,
+            },
+          },
+          {
+            label: 'numeric string in number mode → 12.4',
+            config: {
+              label: 'SOG',
+              unit: 'kn',
+              value: '12.4',
+              options: {fractionDigits: 1},
+            },
+          },
+          {
+            label: 'text + degree (hasDegree honoured)',
+            config: {
+              label: 'Mode',
+              unit: '',
+              value: 'Auto',
+              valueType: ReadoutValueType.text,
+              options: {hasDegree: true},
+            },
+          },
+        ],
+      },
+    ]),
+};
+
 export const TestCases: Story = {
   render: () => {
     return html` <style>
@@ -1174,6 +1324,20 @@ export const TestCases: Story = {
           .value=${123}
           .unit=${'kn'}
         ></obc-readout>
+        <obc-readout
+          .size=${ReadoutSize.small}
+          .direction=${ReadoutDirection.horizontal}
+          .value=${'Thermo On'}
+          .valueType=${ReadoutValueType.text}
+          .label=${'Operating mode'}
+        ></obc-readout>
+        <obc-readout
+          .size=${ReadoutSize.small}
+          .direction=${ReadoutDirection.horizontal}
+          .value=${'Normal'}
+          .valueType=${ReadoutValueType.text}
+          .label=${'Status'}
+        ></obc-readout>
       </div>`;
   },
 };

package/src/navigation-instruments/readout/readout.ts

@@ -25,7 +25,12 @@ import {
   type ReadoutSrcOptions,
 } from '../readout-list-item/readout-list-item.js';
 import {Priority} from '../types.js';
-import {type ReadoutNumericFormatOptions} from './readout-formatters.js';
+import {
+  assertReadoutValueType,
+  resolveReadoutNumericValue,
+  ReadoutValueType,
+  type ReadoutNumericFormatOptions,
+} from './readout-formatters.js';
 import {
   isDisplayedAtSetpoint,
   readoutNumericFormatOptions,
@@ -58,6 +63,7 @@ import '../../icons/icon-drop-down-google.js';
 // purpose: the two components are layout variants of the same primitives +
 // per-block options API and may merge in a future release.
 export {ObcTextboxFontWeight} from '../../components/textbox/textbox.js';
+export {ReadoutValueType} from './readout-formatters.js';
 export type {
   ReadoutBlockState,
   ReadoutValueOptions,
@@ -202,6 +208,8 @@ export interface ReadoutSourceOptions extends ReadoutSrcOptions {
  *   `flyout` interactivity via `srcOptions.interaction`.
  * - **Formatting:** shared `fractionDigits`, width reservation via
  *   `maxDigits` and per-segment `hintedZeros`; a `null` value renders a dash.
+ * - **Text values:** `valueType="text"` renders `value` verbatim (e.g.
+ *   `"Auto"`) instead of formatting it as a number.
  *
  * ### Usage Guidelines
  * Use for stand-alone instrument readouts and readouts embedded in
@@ -242,7 +250,18 @@ export class ObcReadout extends LitElement {
    * value block at full size, so the layout does not shift when data arrives.
    */
   @property({type: Boolean, attribute: false}) hasValue = true;
-  @property({type: Number}) value: number | null = null;
+  /**
+   * The value; `null` renders a dash. A number by default, or text when
+   * {@link valueType} is `text`.
+   */
+  @property({type: String}) value: number | string | null = null;
+  /**
+   * How {@link value} is interpreted. `number` (default) formats it via
+   * `fractionDigits`; `text` renders it verbatim and ignores the numeric
+   * format options. Passing text while this is `number` throws.
+   */
+  @property({type: String}) valueType: ReadoutValueType =
+    ReadoutValueType.number;
   /** Render the value as `offText` (e.g. equipment powered down). Affects the value only. */
   @property({type: Boolean}) off = false;
   /** Text shown in place of the value when `off` is true. @availableWhen off==true */
@@ -267,7 +286,17 @@ export class ObcReadout extends LitElement {
   @property({type: Boolean}) hasDegree = false;
   /** @availableWhen hasDegree==false */
   @property({type: Boolean}) hasDegreeSpacer = false;
+  /**
+   * Also formats the numeric setpoint / advice blocks, which stay numeric
+   * even when the value is text.
+   * @availableWhen valueType==number || hasSetpoint==true || hasAdvice==true
+   */
   @property({type: Number}) fractionDigits = 0;
+  /**
+   * Also formats the numeric setpoint / advice blocks, which stay numeric
+   * even when the value is text.
+   * @availableWhen valueType==number || hasSetpoint==true || hasAdvice==true
+   */
   @property({type: Number}) maxDigits = 0;
   @property({type: String}) dataQuality?: ReadoutDataQuality;
   // `boolean | …` (not `false | …`): the generated Angular wrapper widens a
@@ -361,8 +390,10 @@ export class ObcReadout extends LitElement {
     if (!this.hasSetpoint) {
       return false;
     }
+    // A text value never compares equal to a setpoint, so flip-flop / pop-up
+    // stay dormant for `valueType="text"`.
     return isDisplayedAtSetpoint(
-      this.value,
+      resolveReadoutNumericValue(this.value, this.valueType) ?? null,
       this.setpoint,
       this.numericFormatOptions(this.resolvedMaxDigits)
     );
@@ -489,7 +520,9 @@ export class ObcReadout extends LitElement {
 
   private renderBlock(config: {
     variant: ReadoutBlockVariant;
-    value: number | null | undefined;
+    value: number | string | null | undefined;
+    /** Only the value block is ever text; setpoint / advice stay numeric. */
+    valueType?: ReadoutValueType;
     valueSize: ObcTextboxSize;
     enhanced: boolean;
     weight: ObcTextboxFontWeight;
@@ -518,6 +551,7 @@ export class ObcReadout extends LitElement {
         exportparts="block, block-content, block-text, block-icon, degree"
         .variant=${config.variant}
         .value=${config.value ?? null}
+        .valueType=${config.valueType ?? ReadoutValueType.number}
         .size=${this.resolvedSize}
         .valueSize=${config.valueSize}
         .enhanced=${config.enhanced}
@@ -676,6 +710,7 @@ export class ObcReadout extends LitElement {
         ${this.renderBlock({
           variant: ReadoutBlockVariant.value,
           value: this.value,
+          valueType: this.valueType,
           valueSize: this.valueSize,
           enhanced: this.rowEnhanced,
           weight: this.valueWeight,
@@ -1017,6 +1052,7 @@ export class ObcReadout extends LitElement {
         : html`${this.renderBlock({
             variant: ReadoutBlockVariant.value,
             value: this.value,
+            valueType: this.valueType,
             valueSize: this.primarySize,
             enhanced: false,
             weight: this.valueWeight,
@@ -1089,6 +1125,18 @@ export class ObcReadout extends LitElement {
     `;
   }
 
+  protected override willUpdate(changed: Map<string, unknown>): void {
+    super.willUpdate(changed);
+    // Validated on EVERY update, deliberately NOT gated on `value`/`valueType`
+    // appearing in `changed`. When this assertion throws, Lit's `performUpdate`
+    // catch calls `__markUpdated()`, which clears the changed-properties map. A
+    // later update driven by any OTHER property — inside `obc-readout-list`,
+    // `align()` writing the shared reservers — would then see no `value` in
+    // `changed`, skip the check, and render the invalid value as a plain dash:
+    // exactly the silent failure this assertion exists to prevent.
+    assertReadoutValueType('obc-readout', this.value, this.valueType);
+  }
+
   override updated(changed: Map<string, unknown>): void {
     super.updated(changed);