@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.69 → 2.0.0-next.71

package/src/components/textbox/textbox.css

@@ -0,0 +1,100 @@
+:host {
+  display: inline-block;
+  line-height: 0;
+}
+
+.wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  width: fit-content;
+  --height: 24px;
+  --padding: 4px;
+  font-family: var(--font-family-main);
+  letter-spacing: var(--global-typography-generic-l-letter-spacing);
+}
+
+/* The inner-wrapper is the box: its height (--height) is the full textbox
+   height, padding included. The content is sized to the cap height and
+   vertically centered, which leaves the padding as equal space above and
+   below. In engines that support text-box-trim the content box collapses to
+   the cap height exactly; in Firefox (no text-box-trim) the content keeps its
+   natural line box, so align-items:center + overflow:hidden crops it to the
+   same height instead. No padding here – the centering provides it.
+   (A small top padding could be added later to nudge the text up in Firefox.) */
+.inner-wrapper {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: var(--alignment-justify, flex-end);
+  height: var(--height);
+  overflow: hidden;
+}
+
+/* The spacer must share the content's exact font metrics so the width it
+   reserves equals the rendered content width. font-size-adjust scales the
+   font, so it has to match too. */
+.content,
+.length-spacer {
+  font-size: calc(var(--height) - 2 * var(--padding));
+  font-size-adjust: cap-height 1;
+  white-space: nowrap;
+}
+
+.content {
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+}
+
+.wrapper.size-xs .inner-wrapper {
+  --height: 16px;
+}
+
+.wrapper.size-s .inner-wrapper {
+  --height: 20px;
+}
+
+.wrapper.size-m .inner-wrapper {
+  --height: 24px;
+}
+
+.wrapper.size-l .inner-wrapper {
+  --height: 32px;
+}
+
+.wrapper.size-xl .inner-wrapper {
+  --height: 40px;
+}
+
+.wrapper.font-weight-regular {
+  font-weight: var(--global-typography-generic-l-font-weight-regular);
+}
+
+.wrapper.font-weight-semibold {
+  font-weight: var(--global-typography-generic-l-font-weight-medium);
+}
+
+.wrapper.font-weight-bold {
+  font-weight: var(--global-typography-generic-l-font-weight-bold);
+}
+
+.wrapper.alignment-left {
+  --alignment-justify: flex-start;
+}
+
+.wrapper.alignment-center {
+  --alignment-justify: center;
+}
+
+.wrapper.alignment-right {
+  --alignment-justify: flex-end;
+}
+
+/* Reserves the box width from the `length` slot without occupying vertical
+   space. Acts as a minimum width so the box does not resize as visible
+   text changes. */
+.length-spacer {
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  overflow: hidden;
+}

package/src/components/textbox/textbox.stories.ts

@@ -0,0 +1,165 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {
+  ObcTextbox,
+  ObcTextboxAlignment,
+  ObcTextboxFontWeight,
+  ObcTextboxSize,
+} from './textbox.js';
+import './textbox.js';
+import {html} from 'lit';
+
+interface TextboxStoryArgs extends Partial<ObcTextbox> {
+  content: string;
+  length: string;
+}
+
+const meta: Meta<TextboxStoryArgs> = {
+  title: 'Building Blocks/Textbox',
+  tags: ['autodocs', '6.0'],
+  component: 'obc-textbox',
+  args: {
+    size: ObcTextboxSize.m,
+    fontWeight: ObcTextboxFontWeight.regular,
+    alignment: ObcTextboxAlignment.Right,
+    content: '123 ABC',
+    length: '1234567 ABC',
+  },
+  argTypes: {
+    size: {
+      control: {type: 'radio'},
+      options: Object.values(ObcTextboxSize),
+    },
+    fontWeight: {
+      control: {type: 'radio'},
+      options: Object.values(ObcTextboxFontWeight),
+    },
+    alignment: {
+      control: {type: 'radio'},
+      options: Object.values(ObcTextboxAlignment),
+    },
+  },
+  render: (args) => html`
+    <obc-textbox
+      .size=${args.size}
+      .fontWeight=${args.fontWeight}
+      .alignment=${args.alignment}
+    >
+      <div>${args.content}</div>
+      <div slot="length">${args.length}</div>
+    </obc-textbox>
+  `,
+};
+
+export default meta;
+type Story = StoryObj<TextboxStoryArgs>;
+
+const labelStyle =
+  'font-size: 12px; color: var(--element-neutral-color, #777);';
+const captionStyle =
+  'font-size: 11px; font-style: italic; max-width: 520px; color: var(--element-neutral-color, #777);';
+const boxOutline = 'outline: 1px solid var(--border-outline-color);';
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => html`
+    <div
+      style="display: flex; flex-direction: column; align-items: flex-start; gap: 16px;"
+    >
+      ${Object.values(ObcTextboxSize).map(
+        (size) => html`
+          <obc-textbox .size=${size}>
+            <div>${size.toUpperCase()} – 123 ABC</div>
+          </obc-textbox>
+        `
+      )}
+    </div>
+  `,
+};
+
+export const FontWeights: Story = {
+  render: () => html`
+    <div
+      style="display: flex; flex-direction: column; align-items: flex-start; gap: 16px;"
+    >
+      ${Object.values(ObcTextboxFontWeight).map(
+        (fontWeight) => html`
+          <obc-textbox .fontWeight=${fontWeight}>
+            <div>${fontWeight} – 123 ABC</div>
+          </obc-textbox>
+        `
+      )}
+    </div>
+  `,
+};
+
+export const Alignments: Story = {
+  render: (args) => html`
+    <div
+      style="display: flex; flex-direction: column; align-items: flex-start; gap: 16px;"
+    >
+      <div style=${captionStyle}>
+        Alignment positions the content within the box when the box is wider
+        than the content. The width is determined by whichever is wider: the
+        visible content or the reserved length slot.
+      </div>
+      ${Object.values(ObcTextboxAlignment).map(
+        (alignment) => html`
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <div style="${labelStyle} width: 56px;">${alignment}</div>
+            <obc-textbox
+              .size=${args.size}
+              .fontWeight=${args.fontWeight}
+              .alignment=${alignment}
+              style=${boxOutline}
+            >
+              <div>${args.content}</div>
+              <div slot="length">${args.length}</div>
+            </obc-textbox>
+          </div>
+        `
+      )}
+    </div>
+  `,
+};
+
+export const ReserveSpace: Story = {
+  args: {
+    content: '5',
+    length: '00000',
+  },
+  render: (args) => html`
+    <div
+      style="display: flex; flex-direction: column; align-items: flex-start; gap: 16px;"
+    >
+      <div style=${captionStyle}>
+        Content placed in the length slot reserves width invisibly, so the box
+        keeps the size of the longest expected value (here "${args.length}")
+        even when the visible content is shorter.
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <div style="${labelStyle} width: 104px;">no length slot</div>
+        <obc-textbox
+          .size=${args.size}
+          .fontWeight=${args.fontWeight}
+          .alignment=${args.alignment}
+          style=${boxOutline}
+        >
+          <div>${args.content}</div>
+        </obc-textbox>
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <div style="${labelStyle} width: 104px;">length: ${args.length}</div>
+        <obc-textbox
+          .size=${args.size}
+          .fontWeight=${args.fontWeight}
+          .alignment=${args.alignment}
+          style=${boxOutline}
+        >
+          <div>${args.content}</div>
+          <div slot="length">${args.length}</div>
+        </obc-textbox>
+      </div>
+    </div>
+  `,
+};

package/src/components/textbox/textbox.ts

@@ -0,0 +1,103 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement} from '../../decorator.js';
+import componentStyle from './textbox.css?inline';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+
+export enum ObcTextboxAlignment {
+  Left = 'left',
+  Center = 'center',
+  Right = 'right',
+}
+
+export enum ObcTextboxSize {
+  xs = 'xs',
+  s = 's',
+  m = 'm',
+  l = 'l',
+  xl = 'xl',
+}
+
+export enum ObcTextboxFontWeight {
+  regular = 'regular',
+  semibold = 'semibold',
+  bold = 'bold',
+}
+
+/**
+ * `<obc-textbox>` – A text container that renders inline text at a
+ * precise, cap-height-trimmed size with configurable alignment and reservable
+ * width.
+ *
+ * Use it to present short, read-only strings – such as values, labels, or
+ * units – where vertical metrics must line up exactly across rows and the
+ * horizontal footprint should stay stable while the text changes (for example
+ * a numeric value that updates frequently). Synonyms: text container, value
+ * box, label box.
+ *
+ * ## Features / Variants
+ * - **Size:** `xs`, `s`, `m` (default), `l`, `xl` – each maps to a fixed box
+ *   height (16 / 20 / 24 / 32 / 40 px) with 4px padding above and below, giving
+ *   cap heights of 8 / 12 / 16 / 24 / 32 px so text aligns to a predictable
+ *   grid.
+ * - **Font weight:** `regular` (default), `semibold`, `bold`.
+ * - **Alignment:** `left`, `center`, `right` (default) – positions the text
+ *   within the box's width when the box is wider than the content.
+ * - **Reserved width:** content placed in the `length` slot reserves a minimum
+ *   width invisibly, so the box does not resize as the visible text changes.
+ *   The box always shows all content – it never crops.
+ *
+ * ## Usage Guidelines
+ * - Pass the longest expected string to the `length` slot (e.g. `"888.8"` or
+ *   `"Wind speed"`) so the box reserves space and does not jump in width as the
+ *   visible value updates.
+ * - This is a display primitive for static text – use an input component for
+ *   editable values.
+ *
+ * ## Slots
+ * | Slot      | Renders when…      | Purpose                                              |
+ * |-----------|--------------------|------------------------------------------------------|
+ * | (default) | Always             | The visible text content.                            |
+ * | `length`  | Always (invisible) | Reserves a minimum width based on its content width. |
+ *
+ * @slot - The visible text content.
+ * @slot length - Reserves a minimum width based on its content width.
+ */
+@customElement('obc-textbox')
+export class ObcTextbox extends LitElement {
+  @property({type: String}) alignment: ObcTextboxAlignment =
+    ObcTextboxAlignment.Right;
+  @property({type: String}) size: ObcTextboxSize = ObcTextboxSize.m;
+  @property({type: String}) fontWeight: ObcTextboxFontWeight =
+    ObcTextboxFontWeight.regular;
+
+  override render() {
+    return html`
+      <div
+        class=${classMap({
+          wrapper: true,
+          [`alignment-${this.alignment}`]: true,
+          [`size-${this.size}`]: true,
+          [`font-weight-${this.fontWeight}`]: true,
+        })}
+      >
+        <div class="inner-wrapper">
+          <div class="content">
+            <slot></slot>
+          </div>
+        </div>
+        <div class="length-spacer" aria-hidden="true">
+          <slot name="length"></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-textbox': ObcTextbox;
+  }
+}

package/src/navigation-instruments/indicator-graph/indicator-graph.stories.ts

@@ -30,6 +30,14 @@ type Story = StoryObj<ObcIndicatorGraph>;
 
 export const Primary: Story = {};
 
+export const NoZeroLine: Story = {
+  args: {
+    layout: {
+      y: {showZeroLine: false},
+    },
+  },
+};
+
 export const WithRange: Story = {
   args: {
     layout: {
@@ -114,3 +122,15 @@ export const Realtime: Story = {
     }, 1000 / 60);
   },
 };
+
+export const BelowZero: Story = {
+  args: {
+    data: [
+      Array.from({length: 30}, (_, i) => i),
+      Array.from({length: 30}, (_, i) => -2 - Math.sin((i / 30) * 2 * Math.PI)),
+    ],
+    layout: {
+      y: {min: -10, max: 0},
+    },
+  },
+};

package/src/navigation-instruments/indicator-graph/indicator-graph.ts

@@ -15,10 +15,11 @@ export enum ObcIndicatorGraphPriority {
   enhanced = 'enhanced',
 }
 
+// showZeroLine is defaulted to true
 export interface ObcIndicatorGraphLayout {
   size?: ObcIndicatorGraphSize;
   priority?: ObcIndicatorGraphPriority;
-  y?: {min?: number; max?: number};
+  y?: {min?: number; max?: number; showZeroLine?: boolean};
 }
 
 /**
@@ -39,10 +40,10 @@ export class ObcIndicatorGraph extends LitElement {
   private chart!: HTMLDivElement;
 
   @state()
-  private y: number = 24;
+  private y: number | undefined = undefined;
 
   @state()
-  private zeroLineY: number = 0;
+  private zeroLineY: number | undefined = undefined;
 
   private uplot: uPlot | null = null;
   private resizeObserver: ResizeObserver | null = null;
@@ -115,7 +116,7 @@ export class ObcIndicatorGraph extends LitElement {
     const {min: minY, max: maxY} = this.layout.y ?? {};
     const range = maxY ?? initMax - (minY ?? initMin);
     let min = minY ?? initMin - range * 0.1;
-    if (minY === undefined) {
+    if (minY === undefined && this.layout.y?.showZeroLine !== false) {
       min = Math.min(0, min);
     }
     return [min, maxY ?? initMax + range * 0.1] as [number, number];
@@ -169,7 +170,11 @@ export class ObcIndicatorGraph extends LitElement {
     const lastY = this.data[1][this.data[1].length - 1];
     // @ts-expect-error - valToPct is not a property of the Scale interface
     const yRatio = this.uplot.scales.y.valToPct(lastY);
-    this.y = yRatio * this.chart.clientHeight;
+    if (yRatio < 0 || yRatio > 1) {
+      this.y = undefined;
+    } else {
+      this.y = yRatio * this.chart.clientHeight;
+    }
     this.updateZeroLine();
   }
 
@@ -179,6 +184,10 @@ export class ObcIndicatorGraph extends LitElement {
     }
     // @ts-expect-error - valToPct is not a property of the Scale interface
     const yRatio = this.uplot.scales.y.valToPct(0);
+    if (yRatio < 0 || yRatio > 1) {
+      this.zeroLineY = undefined;
+      return;
+    }
     this.zeroLineY = yRatio * this.chart.clientHeight;
   }
 
@@ -198,15 +207,15 @@ export class ObcIndicatorGraph extends LitElement {
       >
         <div
           id="zero-line"
-          style="transform: translateY(${-this.zeroLineY}px);
-          display: ${this.zeroLineY > -0.5 ? 'block' : 'none'};
+          style="transform: translateY(${-(this.zeroLineY ?? 0)}px);
+          display: ${this.zeroLineY !== undefined ? 'block' : 'none'};
           "
         ></div>
         <div
           id="dot"
-          style="transform: translateY(${-this.y}px);
-        display: ${this.y > -0.5 ? 'block' : 'none'};
-        "
+          style="transform: translateY(${-(this.y ?? 0)}px);
+          display: ${this.y !== undefined ? 'block' : 'none'};
+          "
         ></div>
       </div>
     `;