@oicl/openbridge-webcomponents 2.0.0-next.88 → 2.0.0-next.89

package/dist/building-blocks/readout-block/readout-block.css.js

@@ -0,0 +1,229 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+/* ---------- Readout building block (advice / setpoint / value) ---------- */
+
+.block {
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+/* Number + its (setpoint/advice) degree glyph, hugging with no gap — the
+   \`.block\` gap only separates the icon from this group. */
+
+.block-content {
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+.block-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: inherit;
+  /* Centre the icon against the block's text rather than bottom-aligning it (the
+     block is flex-end). Matters for the value block, whose text is taller than
+     the icon, so the value icon lines up with the number like the smaller
+     setpoint/advice icons do. */
+  align-self: center;
+}
+
+.block-icon obi-input-right,
+.block-icon obi-notification-advice,
+.block-icon ::slotted(*) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.hinted-zero {
+  color: var(--obc-readout-block-hinted-color, var(--element-inactive-color));
+}
+
+/* ---------- Text colours (overridable via custom properties) ----------
+ * obc-textbox does not set its own colour, so it inherits these. */
+
+.block-value {
+  color: var(--obc-readout-block-value-color, var(--element-neutral-color));
+}
+
+.block-value.tone-enhanced {
+  color: var(
+    --obc-readout-block-value-enhanced-color,
+    var(--element-neutral-enhanced-color)
+  );
+}
+
+/* The setpoint shares the value's colour state: neutral by default, enhanced
+   (blue) only when the row is enhanced — never a blue setpoint next to a grey
+   value. \`--instrument-enhanced-secondary-color\` is the same #2d548b as the
+   value's \`--element-neutral-enhanced-color\`. */
+
+.block-setpoint {
+  color: var(--obc-readout-block-setpoint-color, var(--element-neutral-color));
+  /* Flip-flop emphasis + pop-up fade animate at 100ms. */
+  transition:
+    opacity 100ms ease,
+    color 100ms ease;
+}
+
+.block-setpoint.tone-enhanced {
+  color: var(
+    --obc-readout-block-setpoint-enhanced-color,
+    var(--instrument-enhanced-secondary-color)
+  );
+}
+
+/* Pop-up: fade the setpoint out once value === setpoint, keeping its space so
+   the value stays column-aligned. */
+
+.block-setpoint.is-hiding {
+  opacity: 0;
+}
+
+.block-setpoint.is-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* Touching / focus state: the setpoint triangle takes the marker's focus look — a
+   pale fill (--base-blue-100) with a dark 1px edge (--element-neutral-enhanced),
+   mirroring \`svghelpers/setpoint.ts\` focus (fill base-blue-100 + 2px stroke).
+   The glyph icon is \`fill: currentColor\` and can't take a CSS \`stroke\`, so the
+   edge is layered drop-shadows. The setpoint number keeps its normal, readable
+   colour. */
+
+.block-setpoint.touching {
+  --_touching-outline: var(
+    --obc-readout-block-setpoint-touching-outline-color,
+    var(--element-neutral-enhanced-color)
+  );
+}
+
+.block-setpoint.touching .block-icon {
+  color: var(--obc-readout-block-setpoint-touching-color, var(--base-blue-100));
+  filter: drop-shadow(1px 0 0 var(--_touching-outline))
+    drop-shadow(-1px 0 0 var(--_touching-outline))
+    drop-shadow(0 1px 0 var(--_touching-outline))
+    drop-shadow(0 -1px 0 var(--_touching-outline));
+}
+
+.block-advice {
+  color: var(--obc-readout-block-advice-color, var(--element-neutral-color));
+}
+
+/* ---------- Per-block data quality ----------
+ * Uses \`outline\` (not \`border\`) so the chip never shifts the block's width — the
+ * value stays column-aligned across rows. */
+
+.block.data-low-integrity,
+.block.data-invalid {
+  outline: 1px solid;
+  border-radius: var(--global-border-radius-border-radius-check);
+}
+
+.block.data-low-integrity {
+  background: var(--alert-low-integrity-background-color);
+  outline-color: var(--alert-low-integrity-border-color);
+}
+
+.block.data-invalid {
+  background: var(--alert-invalid-background-color);
+  outline-color: var(--alert-invalid-border-color);
+}
+
+/* ---------- Degree column ----------
+ * A cap-height \`°\` column whose width scales with the number size; it inherits
+ * the block's colour. */
+
+.degree-column {
+  flex: none;
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  inline-size: var(--_obc-readout-block-degree-width, 0);
+  overflow: clip;
+}
+
+.degree-column.degree-inherit {
+  color: inherit;
+}
+
+.degree-column.degree-xs {
+  --_obc-readout-block-degree-width: var(
+    --global-typography-instrument-value-small-degree-unit-width
+  );
+}
+
+.degree-column.degree-s {
+  --_obc-readout-block-degree-width: var(
+    --global-typography-instrument-value-regular-degree-unit-width
+  );
+}
+
+.degree-column.degree-m {
+  --_obc-readout-block-degree-width: var(
+    --global-typography-instrument-value-medium-degree-unit-width
+  );
+}
+
+.degree-column.degree-l,
+.degree-column.degree-xl {
+  --_obc-readout-block-degree-width: var(
+    --global-typography-instrument-value-large-degree-unit-width
+  );
+}
+
+/* ---------- Size tiers ----------
+ * Public small/medium/large map to the design token regular/medium/large
+ * tiers. */
+
+.block.size-small {
+  gap: var(--instrument-components-readout-new-general-regular-icon-gap);
+}
+
+.size-small .block-icon {
+  inline-size: var(
+    --instrument-components-readout-new-general-regular-icon-size
+  );
+  block-size: var(
+    --instrument-components-readout-new-general-regular-icon-size
+  );
+}
+
+.block.size-medium {
+  gap: var(--instrument-components-readout-new-general-medium-icon-gap);
+}
+
+.size-medium .block-icon {
+  inline-size: var(
+    --instrument-components-readout-new-general-medium-icon-size
+  );
+  block-size: var(--instrument-components-readout-new-general-medium-icon-size);
+}
+
+.block.size-large {
+  gap: var(--instrument-components-readout-new-general-large-icon-gap);
+}
+
+.size-large .block-icon {
+  inline-size: var(--instrument-components-readout-new-general-large-icon-size);
+  block-size: var(--instrument-components-readout-new-general-large-icon-size);
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=readout-block.css.js.map

package/dist/building-blocks/readout-block/readout-block.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readout-block.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/building-blocks/readout-block/readout-block.d.ts

@@ -0,0 +1,146 @@
+import { LitElement } from 'lit';
+import { ObcTextboxSize, ObcTextboxFontWeight, ObcTextboxAlignment } from '../../components/textbox/textbox.js';
+import { AlertFrameConfig } from '../../components/alert-frame/alert-frame.js';
+import '../../components/textbox/textbox.js';
+import '../../icons/icon-input-right.js';
+import '../../icons/icon-notification-advice.js';
+export { ObcTextboxSize, ObcTextboxFontWeight, ObcTextboxAlignment, } from '../../components/textbox/textbox.js';
+/**
+ * Semantic variant of the block. Drives the default marker icon and the
+ * colour token; the layout is identical across variants.
+ * - `value`: the primary reading (no default marker icon).
+ * - `setpoint`: a setpoint reference (default `input-right` marker).
+ * - `advice`: an advisory reference (default `notification-advice` marker).
+ */
+export declare enum ReadoutBlockVariant {
+    value = "value",
+    setpoint = "setpoint",
+    advice = "advice"
+}
+/**
+ * Density tier of the block — drives icon size, the icon↔number gap, and the
+ * degree-column width tier. The number typography size is controlled
+ * independently via {@link ObcReadoutBlock.valueSize} so a parent can de-emphasise
+ * one block relative to another within the same tier.
+ */
+export declare enum ReadoutBlockSize {
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+/**
+ * Per-block measurement quality, rendered as a non-shifting outline chip.
+ * - `low-integrity`: the value is suspect.
+ * - `invalid`: the value is invalid.
+ */
+export declare enum ReadoutBlockDataQuality {
+    lowIntegrity = "low-integrity",
+    invalid = "invalid"
+}
+/**
+ * Pop-up fade phase for a setpoint block. Driven by the parent's setpoint
+ * interaction state machine; only meaningful for `role="setpoint"`.
+ */
+export declare enum ReadoutBlockHidePhase {
+    none = "none",
+    hiding = "hiding",
+    hidden = "hidden"
+}
+/**
+ * `<obc-readout-block>` – the most atomic readout primitive: a single
+ * cap-height-aligned, width-reservable numeric segment (value / setpoint /
+ * advice).
+ *
+ * It renders one `obc-textbox` number with optional hinted leading zeros, a
+ * reservable width, an optional leading marker icon (via the `icon` slot or the
+ * role default), an optional trailing degree glyph, an `off`/unavailable text
+ * state, per-block data-quality and an optional per-block alert frame.
+ *
+ * This is a building block used inside `obc-readout-list-item` (and, in a future
+ * refactor, inside `obc-readout`); it is not normally used on its own. Colour is
+ * inherited from the host context (the parent sets the role colour), so the
+ * block stays neutral until placed.
+ *
+ * @experimental Pilot for the new primitives + per-block options Readout API; the
+ * API may change in a future release.
+ *
+ * @slot icon - Replaces the role's default marker icon.
+ *
+ * @csspart block - The block container (carries role / tone / data-quality).
+ * @csspart block-content - The number + degree group.
+ * @csspart block-text - The `obc-textbox` rendering the number.
+ * @csspart block-icon - The leading marker-icon container.
+ * @csspart degree - The trailing degree-glyph column.
+ */
+export declare class ObcReadoutBlock extends LitElement {
+    /** Semantic variant (value / setpoint / advice). */
+    variant: ReadoutBlockVariant;
+    /** The numeric value; `null`/`undefined` renders a dash. */
+    value: number | null;
+    /** Density tier — icon size, gap, degree tier. */
+    size: ReadoutBlockSize;
+    /**
+     * Resolved number-typography size. When unset it is derived from `size`
+     * (small→s, medium→m, large→l), so a parent that de-emphasises a block (e.g.
+     * a secondary setpoint) can pass a smaller size without changing the tier.
+     */
+    valueSize?: ObcTextboxSize;
+    /** Accent (in-command) colour tone. */
+    enhanced: boolean;
+    /** Number font weight (regular / semibold / bold); colour is independent. */
+    weight: ObcTextboxFontWeight;
+    /** Render the trailing cap-height degree glyph (`°`). */
+    hasDegree: boolean;
+    /** Show the leading marker-icon container (always on for setpoint/advice). */
+    hasIcon: boolean;
+    /** Number of fraction digits. */
+    fractionDigits: number;
+    /** Integer digits to reserve / hint (independent of `fractionDigits`). */
+    maxDigits: number;
+    /** Render muted leading zeros filling the integer part to `maxDigits`. */
+    hintedZeros: boolean;
+    /** Explicit longest string to reserve width for (e.g. `"0000.0"`). */
+    spaceReserver?: string;
+    /** Render `offText` instead of a number (e.g. equipment powered down). */
+    off: boolean;
+    /** Text shown when `off` is true. */
+    offText: string;
+    /** Text alignment of the number within its reserved width. */
+    alignment: ObcTextboxAlignment;
+    /** Per-block measurement quality (outline chip). */
+    dataQuality?: ReadoutBlockDataQuality;
+    /** Per-block alert frame; nests inside any parent alert frame. */
+    alert: boolean | AlertFrameConfig;
+    /** Setpoint focus (touch) state — only meaningful for `role="setpoint"`. */
+    touching: boolean;
+    /** Setpoint pop-up fade phase — only meaningful for `role="setpoint"`. */
+    hidePhase: ReadoutBlockHidePhase;
+    private hasAssignedIcon;
+    private get resolvedValueSize();
+    private get numericFormatOptions();
+    /** Widest possible value string for width reservation (e.g. `"000.0"`). */
+    private get reserverText();
+    /**
+     * Effective width reserver: the wider of the explicit `spaceReserver` and the
+     * `maxDigits`/`fractionDigits`-derived reserve, so an explicit reserver can
+     * never reserve *less* than the formatted value needs. Under tabular-nums the
+     * rendered width is proportional to character count, so "wider" compares length.
+     */
+    private widerReserver;
+    private dataQualityClasses;
+    private onIconSlotChange;
+    private renderIcon;
+    /**
+     * A cap-height `°` column whose width scales with the number size. Inherits the
+     * block's colour.
+     */
+    private renderDegreeGlyph;
+    render(): import('lit-html').HTMLTemplateResult;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-readout-block': ObcReadoutBlock;
+    }
+}
+//# sourceMappingURL=readout-block.d.ts.map

package/dist/building-blocks/readout-block/readout-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"readout-block.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/readout-block/readout-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgD,MAAM,KAAK,CAAC;AAK9E,OAAO,qCAAqC,CAAC;AAC7C,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AAMjD,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,6CAA6C,CAAC;AAGrD,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,qCAAqC,CAAC;AAE7C;;;;;;GAMG;AACH,oBAAY,mBAAmB;IAC7B,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED;;;;;GAKG;AACH,oBAAY,gBAAgB;IAC1B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;GAIG;AACH,oBAAY,uBAAuB;IACjC,YAAY,kBAAkB;IAC9B,OAAO,YAAY;CACpB;AAED;;;GAGG;AACH,oBAAY,qBAAqB;IAC/B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,oDAAoD;IAC1B,OAAO,EAAE,mBAAmB,CAC1B;IAE5B,4DAA4D;IAClC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEtD,kDAAkD;IACxB,IAAI,EAAE,gBAAgB,CAA0B;IAE1E;;;;OAIG;IACuB,SAAS,CAAC,EAAE,cAAc,CAAC;IAErD,uCAAuC;IACZ,QAAQ,UAAS;IAE5C,6EAA6E;IACnD,MAAM,EAAE,oBAAoB,CACvB;IAE/B,yDAAyD;IAC9B,SAAS,UAAS;IAE7C,8EAA8E;IACnD,OAAO,UAAS;IAE3C,iCAAiC;IACP,cAAc,SAAK;IAE7C,0EAA0E;IAChD,SAAS,SAAK;IAExC,0EAA0E;IAC/C,WAAW,UAAS;IAE/C,sEAAsE;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEjD,0EAA0E;IAC/C,GAAG,UAAS;IAEvC,qCAAqC;IACX,OAAO,SAAS;IAE1C,8DAA8D;IACpC,SAAS,EAAE,mBAAmB,CAC5B;IAE5B,oDAAoD;IAC1B,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAKhE,kEAAkE;IACxC,KAAK,EAAE,OAAO,GAAG,gBAAgB,CAAS;IAEpE,4EAA4E;IACjD,QAAQ,UAAS;IAE5C,0EAA0E;IAChD,SAAS,EAAE,qBAAqB,CAC7B;IAEpB,OAAO,CAAC,eAAe,CAAS;IAEzC,OAAO,KAAK,iBAAiB,GAY5B;IAED,OAAO,KAAK,oBAAoB,GAM/B;IAED,2EAA2E;IAC3E,OAAO,KAAK,YAAY,GASvB;IAED;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,gBAAgB,CAMtB;IAEF,OAAO,CAAC,UAAU;IAsBlB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAiBhB,MAAM;IAiEf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/building-blocks/readout-block/readout-block.js

@@ -0,0 +1,273 @@
+import { unsafeCSS, LitElement, nothing, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import componentStyle from "./readout-block.css.js";
+import { customElement } from "../../decorator.js";
+import { ObcTextboxFontWeight, ObcTextboxAlignment, ObcTextboxSize } from "../../components/textbox/textbox.js";
+import "../../icons/icon-input-right.js";
+import "../../icons/icon-notification-advice.js";
+import { formatNumericValue, readoutFormattedInteger } from "../../navigation-instruments/readout/readout-formatters.js";
+import { wrapWithAlertFrame } from "../../components/alert-frame/alert-frame.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ReadoutBlockVariant = /* @__PURE__ */ ((ReadoutBlockVariant2) => {
+  ReadoutBlockVariant2["value"] = "value";
+  ReadoutBlockVariant2["setpoint"] = "setpoint";
+  ReadoutBlockVariant2["advice"] = "advice";
+  return ReadoutBlockVariant2;
+})(ReadoutBlockVariant || {});
+var ReadoutBlockSize = /* @__PURE__ */ ((ReadoutBlockSize2) => {
+  ReadoutBlockSize2["small"] = "small";
+  ReadoutBlockSize2["medium"] = "medium";
+  ReadoutBlockSize2["large"] = "large";
+  return ReadoutBlockSize2;
+})(ReadoutBlockSize || {});
+var ReadoutBlockDataQuality = /* @__PURE__ */ ((ReadoutBlockDataQuality2) => {
+  ReadoutBlockDataQuality2["lowIntegrity"] = "low-integrity";
+  ReadoutBlockDataQuality2["invalid"] = "invalid";
+  return ReadoutBlockDataQuality2;
+})(ReadoutBlockDataQuality || {});
+var ReadoutBlockHidePhase = /* @__PURE__ */ ((ReadoutBlockHidePhase2) => {
+  ReadoutBlockHidePhase2["none"] = "none";
+  ReadoutBlockHidePhase2["hiding"] = "hiding";
+  ReadoutBlockHidePhase2["hidden"] = "hidden";
+  return ReadoutBlockHidePhase2;
+})(ReadoutBlockHidePhase || {});
+let ObcReadoutBlock = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "value";
+    this.value = null;
+    this.size = "small";
+    this.enhanced = false;
+    this.weight = ObcTextboxFontWeight.regular;
+    this.hasDegree = false;
+    this.hasIcon = false;
+    this.fractionDigits = 0;
+    this.maxDigits = 0;
+    this.hintedZeros = false;
+    this.off = false;
+    this.offText = "OFF";
+    this.alignment = ObcTextboxAlignment.Right;
+    this.alert = false;
+    this.touching = false;
+    this.hidePhase = "none";
+    this.hasAssignedIcon = false;
+    this.onIconSlotChange = (event) => {
+      this.hasAssignedIcon = event.target.assignedElements({ flatten: true }).length > 0;
+    };
+  }
+  get resolvedValueSize() {
+    if (this.valueSize) {
+      return this.valueSize;
+    }
+    switch (this.size) {
+      case "large":
+        return ObcTextboxSize.l;
+      case "medium":
+        return ObcTextboxSize.m;
+      default:
+        return ObcTextboxSize.s;
+    }
+  }
+  get numericFormatOptions() {
+    return {
+      showZeroPadding: false,
+      minValueLength: this.maxDigits,
+      fractionDigits: this.fractionDigits
+    };
+  }
+  /** Widest possible value string for width reservation (e.g. `"000.0"`). */
+  get reserverText() {
+    const maxDigits = this.maxDigits;
+    if (maxDigits <= 0) {
+      return "";
+    }
+    const integer = "0".repeat(Math.max(maxDigits, 1));
+    return this.fractionDigits > 0 ? `${integer}.${"0".repeat(this.fractionDigits)}` : integer;
+  }
+  /**
+   * Effective width reserver: the wider of the explicit `spaceReserver` and the
+   * `maxDigits`/`fractionDigits`-derived reserve, so an explicit reserver can
+   * never reserve *less* than the formatted value needs. Under tabular-nums the
+   * rendered width is proportional to character count, so "wider" compares length.
+   */
+  widerReserver(explicit, derived) {
+    if (!explicit) {
+      return derived;
+    }
+    if (!derived) {
+      return explicit;
+    }
+    return explicit.length >= derived.length ? explicit : derived;
+  }
+  dataQualityClasses() {
+    return {
+      "data-low-integrity": this.dataQuality === "low-integrity",
+      "data-invalid": this.dataQuality === "invalid"
+      /* invalid */
+    };
+  }
+  renderIcon() {
+    const showIcon = this.variant !== "value" || this.hasIcon;
+    if (!showIcon) {
+      return nothing;
+    }
+    let fallback = nothing;
+    if (this.variant === "setpoint") {
+      fallback = html`<obi-input-right></obi-input-right>`;
+    } else if (this.variant === "advice") {
+      fallback = html`<obi-notification-advice></obi-notification-advice>`;
+    }
+    return html`<span class="block-icon" part="block-icon" aria-hidden="true">
+      <slot name="icon" @slotchange=${this.onIconSlotChange}></slot>
+      ${this.hasAssignedIcon ? nothing : fallback}
+    </span>`;
+  }
+  /**
+   * A cap-height `°` column whose width scales with the number size. Inherits the
+   * block's colour.
+   */
+  renderDegreeGlyph(size) {
+    return html`
+      <span
+        class=${classMap({
+      "degree-column": true,
+      [`degree-${size}`]: true,
+      "degree-inherit": true
+    })}
+        part="degree"
+      >
+        <obc-textbox class="degree-glyph" .size=${size} alignment="center"
+          >°</obc-textbox
+        >
+      </span>
+    `;
+  }
+  render() {
+    const valueSize = this.resolvedValueSize;
+    const formatOptions = this.numericFormatOptions;
+    const valueForFormat = this.value ?? void 0;
+    const text = this.off ? this.offText : formatNumericValue(valueForFormat, formatOptions);
+    const hintCount = this.off || !this.hintedZeros || valueForFormat === void 0 || valueForFormat < 0 ? 0 : Math.max(this.maxDigits - readoutFormattedInteger(text), 0);
+    const hinted = hintCount > 0 ? "0".repeat(hintCount) : "";
+    const reserver = this.hintedZeros ? this.reserverText : this.widerReserver(this.spaceReserver, this.reserverText);
+    const block = html`
+      <div
+        class=${classMap({
+      block: true,
+      [`block-${this.variant}`]: true,
+      [`size-${this.size}`]: true,
+      "tone-enhanced": this.enhanced,
+      touching: this.touching,
+      "is-hiding": this.hidePhase === "hiding",
+      "is-hidden": this.hidePhase === "hidden",
+      ...this.dataQualityClasses()
+    })}
+        part="block block-${this.variant}"
+      >
+        ${this.renderIcon()}
+        <span class="block-content" part="block-content">
+          <obc-textbox
+            class="block-text"
+            part="block-text"
+            .size=${valueSize}
+            .fontWeight=${this.weight}
+            .alignment=${this.alignment}
+            .tabularNums=${true}
+          >
+            ${hinted ? html`<span class="hinted-zero" aria-hidden="true"
+                  >${hinted}</span
+                >` : nothing}${text}
+            ${reserver ? html`<span slot="length">${reserver}</span>` : nothing}
+          </obc-textbox>
+          ${this.hasDegree ? this.renderDegreeGlyph(valueSize) : nothing}
+        </span>
+      </div>
+    `;
+    return wrapWithAlertFrame(this.alert ?? false, block);
+  }
+};
+ObcReadoutBlock.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutBlock.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcReadoutBlock.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutBlock.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutBlock.prototype, "valueSize", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcReadoutBlock.prototype, "enhanced", 2);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutBlock.prototype, "weight", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcReadoutBlock.prototype, "hasDegree", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcReadoutBlock.prototype, "hasIcon", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcReadoutBlock.prototype, "fractionDigits", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcReadoutBlock.prototype, "maxDigits", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcReadoutBlock.prototype, "hintedZeros", 2);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutBlock.prototype, "spaceReserver", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcReadoutBlock.prototype, "off", 2);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutBlock.prototype, "offText", 2);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutBlock.prototype, "alignment", 2);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutBlock.prototype, "dataQuality", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcReadoutBlock.prototype, "alert", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcReadoutBlock.prototype, "touching", 2);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutBlock.prototype, "hidePhase", 2);
+__decorateClass([
+  state()
+], ObcReadoutBlock.prototype, "hasAssignedIcon", 2);
+ObcReadoutBlock = __decorateClass([
+  customElement("obc-readout-block")
+], ObcReadoutBlock);
+export {
+  ObcReadoutBlock,
+  ObcTextboxAlignment,
+  ObcTextboxFontWeight,
+  ObcTextboxSize,
+  ReadoutBlockDataQuality,
+  ReadoutBlockHidePhase,
+  ReadoutBlockSize,
+  ReadoutBlockVariant
+};
+//# sourceMappingURL=readout-block.js.map