@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.66 → 2.0.0-next.68

package/src/components/number-input-field/number-input-format.spec.ts

@@ -2,6 +2,7 @@ import {describe, it, expect} from 'vitest';
 import {
   formatNumberForDisplay,
   getLocaleNumberSeparators,
+  isAllowedIntermediateInput,
   parseNumberInput,
   removeGroupingFromDisplay,
   valuesEqual,
@@ -22,6 +23,17 @@ describe('parseNumberInput', () => {
     expect(parseNumberInput('10,')).toBe(10);
   });
 
+  it('parses grouped numbers with mixed separators', () => {
+    expect(parseNumberInput('1,234.5')).toBe(1234.5);
+    expect(parseNumberInput('1.234,5')).toBe(1234.5);
+    expect(parseNumberInput('1 234,5')).toBe(1234.5);
+    expect(parseNumberInput("1'234.5")).toBe(1234.5);
+  });
+
+  it('parses grouped integers', () => {
+    expect(parseNumberInput('1,234,567')).toBe(1234567);
+  });
+
   it('returns NaN for sign-only input', () => {
     expect(Number.isNaN(parseNumberInput('-'))).toBe(true);
     expect(Number.isNaN(parseNumberInput('+'))).toBe(true);
@@ -153,3 +165,53 @@ describe('valuesEqual', () => {
     expect(valuesEqual(1, 2)).toBe(false);
   });
 });
+
+describe('isAllowedIntermediateInput', () => {
+  const enUsOptions = {decimalSeparator: '.', groupSeparator: ','};
+
+  it('allows empty string', () => {
+    expect(isAllowedIntermediateInput('', enUsOptions)).toBe(true);
+  });
+
+  it('allows digits', () => {
+    expect(isAllowedIntermediateInput('123', enUsOptions)).toBe(true);
+  });
+
+  it('allows leading sign', () => {
+    expect(isAllowedIntermediateInput('-', enUsOptions)).toBe(true);
+    expect(isAllowedIntermediateInput('+12.5', enUsOptions)).toBe(true);
+  });
+
+  it('allows trailing decimal separator', () => {
+    expect(isAllowedIntermediateInput('10.', enUsOptions)).toBe(true);
+    expect(isAllowedIntermediateInput(',5', enUsOptions)).toBe(true);
+  });
+
+  it('allows grouped numbers with default separators', () => {
+    expect(isAllowedIntermediateInput('1,234.5', enUsOptions)).toBe(true);
+  });
+
+  it('rejects letters', () => {
+    expect(isAllowedIntermediateInput('12a')).toBe(false);
+    expect(isAllowedIntermediateInput('e')).toBe(false);
+  });
+
+  it('rejects symbols outside the allowed set', () => {
+    expect(isAllowedIntermediateInput('12!')).toBe(false);
+    expect(isAllowedIntermediateInput('12$')).toBe(false);
+  });
+
+  it('rejects sign in non-leading position', () => {
+    expect(isAllowedIntermediateInput('1-2')).toBe(false);
+  });
+
+  it('honours custom decimal separator', () => {
+    const opts = {decimalSeparator: ',', groupSeparator: ' '};
+    expect(isAllowedIntermediateInput('1 234,5', opts)).toBe(true);
+    expect(isAllowedIntermediateInput('1,234.5', opts)).toBe(false);
+  });
+
+  it('allows whitespace', () => {
+    expect(isAllowedIntermediateInput(' 12 ')).toBe(true);
+  });
+});

package/src/components/number-input-field/number-input-format.ts

@@ -26,12 +26,69 @@ export function parseNumberInput(display: string): number {
     return NaN;
   }
 
-  const normalized = trimmed.replace(',', '.');
+  // Drop whitespace and apostrophe grouping that may appear in pasted or
+  // locale-formatted numbers (e.g. `1 234`, `1'234`).
+  let normalized = trimmed.replace(/[\s']/g, '');
+
+  const commaCount = (normalized.match(/,/g) ?? []).length;
+  const dotCount = (normalized.match(/\./g) ?? []).length;
+
+  if (commaCount > 0 && dotCount > 0) {
+    // Both separators present: the right-most one is the decimal separator,
+    // the other is a grouping separator.
+    const decimalSeparator =
+      normalized.lastIndexOf(',') > normalized.lastIndexOf('.') ? ',' : '.';
+    const groupSeparator = decimalSeparator === ',' ? '.' : ',';
+    normalized = normalized.split(groupSeparator).join('');
+    normalized = normalized.replace(decimalSeparator, '.');
+  } else if (commaCount > 1) {
+    // Multiple commas without a dot can only be grouping separators.
+    normalized = normalized.split(',').join('');
+  } else if (commaCount === 1) {
+    // A single comma is treated as the decimal separator.
+    normalized = normalized.replace(',', '.');
+  } else if (dotCount > 1) {
+    // Multiple dots without a comma can only be grouping separators.
+    normalized = normalized.split('.').join('');
+  }
 
   const n = Number(normalized);
   return Number.isFinite(n) ? n : NaN;
 }
 
+function escapeRegex(value: string): string {
+  return value.replace(/[-.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Permissive per-keystroke validator used to reject non-numeric characters
+ * before they reach the input. Allows half-typed states like `10.`, `-`, `,5`,
+ * `1,234.`; final correctness is enforced by `parseNumberInput` at commit.
+ *
+ * Accepts: optional leading sign, digits, the active decimal separator,
+ * the active group separator, and whitespace.
+ */
+export function isAllowedIntermediateInput(
+  value: string,
+  options: NumberInputFormatOptions = {}
+): boolean {
+  if (value === '') return true;
+
+  const localeSeparators = getLocaleNumberSeparators();
+  const decimalSeparator =
+    options.decimalSeparator ?? localeSeparators.decimalSeparator;
+  const groupSeparator =
+    options.groupSeparator ?? localeSeparators.groupSeparator;
+
+  const allowedChars = new Set<string>([decimalSeparator]);
+  if (groupSeparator) {
+    allowedChars.add(groupSeparator);
+  }
+  const allowedClass = [...allowedChars].map(escapeRegex).join('') + '0-9 \\t';
+  const pattern = new RegExp(`^[+\\-]?[${allowedClass}]*$`);
+  return pattern.test(value);
+}
+
 function clampFractionDigits(
   minFractionDigits: number | undefined,
   maxFractionDigits: number | undefined
@@ -110,7 +167,7 @@ export function removeGroupingFromDisplay(
     return display;
   }
 
-  const escaped = groupSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const escaped = escapeRegex(groupSeparator);
   return display.replace(new RegExp(escaped, 'g'), '');
 }
 

package/src/components/stepper-box/stepper-box.css

@@ -41,9 +41,3 @@
 :host([disabled]) .helper-text {
   color: var(--element-disabled-color);
 }
-
-:host([disabled]) .field-wrapper.has-unit-slot .unit-slot {
-  color: var(--on-normal-disabled-color);
-  border-color: var(--normal-disabled-border-color);
-  background: var(--normal-disabled-background-color);
-}

package/src/components/stepper-box/stepper-box.ts

@@ -36,22 +36,15 @@ export enum ObcStepperBoxType {
  *   - `up-down`: Uses up and down chevron icons for vertical adjustment.
  *   - `left-right`: Uses left and right chevron icons for horizontal adjustment.
  * - **Value Display:**
- *   - Optional unit label via the `unit` slot.
+ *   - Optional unit label via the `unit` property.
  * - **Helper Text:**
  *   - When `helperText` is set, displays additional helper or status text below the control.
  * - **Icon Buttons:**
  *   - Both increment and decrement actions are triggered by icon buttons, with icons adapting to the selected type.
- * - **Customizable Layout:**
- *   - Supports flexible content via the `unit` slot.
  *
  * ### Usage Guidelines
  * Use `obc-stepper-box` for scenarios where users need to adjust a value in discrete steps, such as quantity pickers, setting numeric parameters, or cycling through options. It is ideal when you want to prevent invalid input and provide a clear, touch-friendly interface for value changes.
  *
- * ### Slots
- * | Slot Name      | Renders When...           | Purpose                                 |
- * |--------------- |--------------------------|-----------------------------------------|
- * | unit           | If provided               | Unit label (e.g., "km", "%").           |
- *
  * ### Events
  * - `down` – Fired when the decrement (left or down) button is clicked.
  * - `up` – Fired when the increment (right or up) button is clicked.
@@ -63,12 +56,9 @@ export enum ObcStepperBoxType {
  *
  * **Example:**
  * ```
- * <obc-stepper-box type="up-down" .value=${5} helperText="Set weight">
- *   <div slot="unit">kg</div>
- * </obc-stepper-box>
+ * <obc-stepper-box type="up-down" value="5" unit="kg" helperText="Set weight"></obc-stepper-box>
  * ```
  *
- * @slot unit - Unit label (e.g., "km", "%")
  * @fires down {CustomEvent<{value: number}>} Fired when the decrement (left or down) button is clicked
  * @fires up {CustomEvent<{value: number}>} Fired when the increment (right or up) button is clicked
  * @fires input {CustomEvent<{value: string}>} Fired when the user types in the number input field
@@ -119,7 +109,7 @@ export class ObcStepperBox extends LitElement {
   @property({type: Number}) stepDown = 1;
 
   /**
-   * Unit text displayed inside the field. Overridden by the `unit` slot if assigned.
+   * Unit text displayed inside the field.
    */
   @property({type: String}) unit = '';
 

package/src/components/toggle-button-group/toggle-button-group.ts

@@ -47,6 +47,10 @@ export type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{
  * - **External control mode:** When `externalControl` is true, the group emits selection events but does not
  *   update its own `value` property, allowing parent components to manage state (useful for form libraries or
  *   custom state management).
+ * - **Empty selection mode:** When `allowEmptySelection` is true, a `value` that does not match any enabled
+ *   option leaves the group with no option selected, instead of defaulting to the first enabled option. Use
+ *   this when a selection may legitimately be absent (e.g. unset, loading, or error states) so the UI does not
+ *   imply a choice the user has not made.
  * - **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual
  *   options can also be disabled independently while the group remains enabled.
  * - **Divider management:** Automatically shows visual dividers between options and hides the divider after
@@ -177,6 +181,17 @@ export class ObcToggleButtonGroup extends LitElement {
    */
   @property({type: Boolean}) externalControl = false;
 
+  /**
+   * If true, a `value` that does not match any enabled option leaves the group with no option selected
+   * instead of defaulting to the first enabled option.
+   *
+   * This also applies when the currently selected option becomes disabled: the group clears its selection
+   * rather than falling back to another option.
+   *
+   * Defaults to false (the first enabled option is selected when the value does not match).
+   */
+  @property({type: Boolean}) allowEmptySelection = false;
+
   /**
    * Disables the entire toggle button group and all contained options when true.
    *
@@ -233,8 +248,12 @@ export class ObcToggleButtonGroup extends LitElement {
         this.setNoDivider();
         return;
       }
-      const fallback = this.getFirstSelectableOption();
-      newValue = fallback?.value || '';
+      if (this.allowEmptySelection) {
+        newValue = '';
+      } else {
+        const fallback = this.getFirstSelectableOption();
+        newValue = fallback?.value || '';
+      }
     }
 
     this.value = newValue;
@@ -333,9 +352,13 @@ export class ObcToggleButtonGroup extends LitElement {
     });
 
     if (!this.value || !this.getOptionByValue(this.value)) {
-      const firstSelectable = this.getFirstSelectableOption();
-      if (firstSelectable) {
-        this.updateSelection(firstSelectable.value, false);
+      if (this.allowEmptySelection) {
+        this.updateSelection('', false);
+      } else {
+        const firstSelectable = this.getFirstSelectableOption();
+        if (firstSelectable) {
+          this.updateSelection(firstSelectable.value, false);
+        }
       }
     } else {
       this.updateSelection(this.value, false);
@@ -349,6 +372,10 @@ export class ObcToggleButtonGroup extends LitElement {
   private handleOptionDisabledChange() {
     const currentOption = this.getOptionByValue(this.value);
     if (currentOption?.disabled && this.hasAnyEnabledOption()) {
+      if (this.allowEmptySelection) {
+        this.updateSelection('');
+        return;
+      }
       const firstSelectable = this.getFirstSelectableOption();
       if (firstSelectable) {
         this.updateSelection(firstSelectable.value);
@@ -412,6 +439,10 @@ export class ObcToggleButtonGroup extends LitElement {
 
     const currentOption = this.getOptionByValue(this.value);
     if (currentOption?.disabled && this.hasAnyEnabledOption()) {
+      if (this.allowEmptySelection) {
+        this.updateSelection('');
+        return;
+      }
       const firstSelectable = this.getFirstSelectableOption();
       if (firstSelectable) {
         this.updateSelection(firstSelectable.value);

package/src/components/toggle-button-group/toggle-button.stories.ts

@@ -52,6 +52,9 @@ const meta: Meta<typeof ObcToggleButtonGroup> = {
     large: {
       control: {type: 'boolean'},
     },
+    allowEmptySelection: {
+      control: {type: 'boolean'},
+    },
   },
   render: (args) =>
     html` <div
@@ -483,3 +486,31 @@ export const ExternalControlActivatedDemo: Story = {
     </div>
   `,
 };
+
+export const EmptySelectionWhenUnmatched: Story = {
+  args: {
+    type: ObcToggleButtonOptionType.text,
+    variant: ObcToggleButtonOptionVariant.regular,
+    value: 'none',
+    allowEmptySelection: true,
+  },
+  render: (args) => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <p>
+        With <code>allowEmptySelection</code> enabled, a value that does not
+        match any option (here <code>"none"</code>) leaves the group with no
+        option selected instead of defaulting to the first option.
+      </p>
+      <obc-toggle-button-group
+        value="${args.value}"
+        variant="${args.variant}"
+        type="${args.type}"
+        .allowEmptySelection="${args.allowEmptySelection}"
+      >
+        <obc-toggle-button-option value="1">Option 1</obc-toggle-button-option>
+        <obc-toggle-button-option value="2">Option 2</obc-toggle-button-option>
+        <obc-toggle-button-option value="3">Option 3</obc-toggle-button-option>
+      </obc-toggle-button-group>
+    </div>
+  `,
+};

package/src/integration-systems/integration-fleet-button/integration-fleet-button.css

@@ -138,6 +138,10 @@
       gap: 8px;
       align-self: stretch;
 
+      &:not(.show-alerts) {
+        display: none;
+      }
+
       .alert-icon {
         width: 24px;
         height: 24px;

package/src/integration-systems/integration-fleet-button/integration-fleet-button.stories.ts

@@ -17,6 +17,7 @@ const meta: Meta<typeof ObcIntegrationFleetButton> = {
     ],
     alertTopic: 'Navigation alert',
     alerts: {alarm: 1, warning: 5, caution: 2},
+    showAlerts: true,
   },
   parameters: {
     backgrounds: {
@@ -32,6 +33,7 @@ const meta: Meta<typeof ObcIntegrationFleetButton> = {
       .alertTopic=${args.alertTopic}
       .alerts=${args.alerts}
       .selected=${args.selected}
+      .showAlerts=${args.showAlerts}
     >
       <obi-placeholder slot="alert-topic-icon"></obi-placeholder>
     </obc-integration-fleet-button>
@@ -66,3 +68,10 @@ export const SelectedNoAlerts: Story = {
     alerts: {alarm: 0, warning: 0, caution: 0},
   },
 };
+
+export const HideAlerts: Story = {
+  args: {
+    selected: false,
+    showAlerts: false,
+  },
+};

package/src/integration-systems/integration-fleet-button/integration-fleet-button.ts

@@ -2,6 +2,7 @@ import {LitElement, html, unsafeCSS} from 'lit';
 import {customElement} from '../../decorator.js';
 import compentStyle from './integration-fleet-button.css?inline';
 import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 import {msg} from '@lit/localize';
 import '../../components/badge/badge.js';
 
@@ -24,6 +25,7 @@ export class ObcIntegrationFleetButton extends LitElement {
     warning: number;
     caution: number;
   } = {alarm: 0, warning: 0, caution: 0};
+  @property({type: Boolean}) showAlerts: boolean = false;
 
   override render() {
     const hasAlert =
@@ -47,7 +49,14 @@ export class ObcIntegrationFleetButton extends LitElement {
                 </div>`
             )}
           </div>
-          <div class="alerts ${hasAlert ? 'has-alert' : 'no-alert'}">
+          <div
+            class=${classMap({
+              alerts: true,
+              'has-alert': hasAlert,
+              'no-alert': !hasAlert,
+              'show-alerts': this.showAlerts,
+            })}
+          >
             <div class="alert-icon ">
               <slot name="alert-topic-icon"></slot>
             </div>

package/src/navigation-instruments/graph-mini/graph-mini.css

@@ -27,7 +27,8 @@
   position: absolute;
   width: 4px;
   height: 4px;
-  right: -3px;
+  right: -3.5px;
+  bottom: 0;
   border-radius: 50%;
   background: var(--element-neutral-color);
   border: 1px solid var(--border-silhouette-color);

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

@@ -19,13 +19,22 @@ type Story = StoryObj<ObcGraphMini>;
 
 export const Primary: Story = {};
 
+export const WithRange: Story = {
+  args: {
+    minY: -10,
+    maxY: 10,
+  },
+};
+
 export const Realtime: Story = {
   tags: ['skip-test'],
   args: {
     data: [
       Array.from({length: 60}, (_, i) => i),
-      Array.from({length: 60}, (_, i) => Math.sin((i / 60) * 2 * Math.PI)),
+      Array.from({length: 60}, (_, i) => Math.sin((i / 60 / 5) * 2 * Math.PI)),
     ],
+    minY: -1.1,
+    maxY: 1.1,
   },
   play: async ({canvasElement}) => {
     const graph = canvasElement.querySelector('obc-graph-mini') as ObcGraphMini;
@@ -35,10 +44,9 @@ export const Realtime: Story = {
 
     let i = graph.data[0].length;
     setInterval(() => {
-      console.log('updating', i);
       const data = graph.data;
       const x = [...data[0], i];
-      const y = [...data[1], Math.sin((i / 60) * 2 * Math.PI)];
+      const y = [...data[1], Math.sin((i / 60 / 5) * 2 * Math.PI)];
       x.shift();
       y.shift();
       const newData: [number[], number[]] = [x, y];

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

@@ -36,8 +36,8 @@ export class ObcGraphMini extends LitElement {
 
   override firstUpdated() {
     const opts = {
-      width: 48,
-      height: 48,
+      width: 32,
+      height: 32,
       scales: {
         x: {time: false, show: false},
         y: {
@@ -61,7 +61,7 @@ export class ObcGraphMini extends LitElement {
         {},
         {
           stroke: this.getCssColor('--element-neutral-color'),
-          width: 2,
+          width: 1,
           points: {show: false},
         },
       ],
@@ -83,7 +83,7 @@ export class ObcGraphMini extends LitElement {
     }
     const stroke = this.getCssColor('--element-neutral-color');
     // @ts-expect-error - stroke is not a property of the Series interface
-    this.uplot.setSeries(1, {stroke: stroke, width: 2, points: {show: false}});
+    this.uplot.setSeries(1, {stroke: stroke, width: 1, points: {show: false}});
   }
 
   private updateY() {
@@ -107,7 +107,9 @@ export class ObcGraphMini extends LitElement {
   override render() {
     return html`
       <div class="chart-container">
-        <div id="chart"><div id="dot" style="bottom: ${this.y}px; "></div></div>
+        <div id="chart">
+          <div id="dot" style="transform: translateY(${-this.y}px);"></div>
+        </div>
       </div>
     `;
   }

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

@@ -0,0 +1,55 @@
+.chart-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+#dot {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  right: -3px;
+  bottom: -3px;
+  border-radius: 50%;
+  background: var(--element-neutral-color);
+  border: 1px solid var(--border-silhouette-color);
+  z-index: 1;
+}
+
+.enhanced #dot {
+  background: var(--element-neutral-enhanced-color);
+}
+
+.medium #dot {
+  width: 6px;
+  height: 6px;
+  right: -4px;
+  bottom: -4px;
+}
+
+.large #dot {
+  width: 8px;
+  height: 8px;
+  right: -5px;
+  bottom: -5px;
+}
+
+#zero-line {
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  bottom: -0.5px;
+  background: var(--element-disabled-color);
+  border-radius: 2px;
+}

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

@@ -0,0 +1,116 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {
+  ObcIndicatorGraph,
+  ObcIndicatorGraphPriority,
+  ObcIndicatorGraphSize,
+} from './indicator-graph.js';
+import './indicator-graph.js';
+import {widthDecorator} from '../../storybook-util.js';
+const meta: Meta<typeof ObcIndicatorGraph> = {
+  title: 'Bars and Graphs/Indicator Graph',
+  tags: ['6.0', 'autodocs'],
+  component: 'obc-indicator-graph',
+  decorators: [widthDecorator],
+  args: {
+    data: [
+      Array.from({length: 30}, (_, i) => i),
+      Array.from({length: 30}, (_, i) => 2 + Math.sin((i / 30) * 2 * Math.PI)),
+    ],
+    width: 400,
+    height: 400,
+  },
+  argTypes: {
+    width: {control: {type: 'range', min: 100, max: 1000, step: 1}},
+    height: {control: {type: 'range', min: 100, max: 1000, step: 1}},
+  },
+} satisfies Meta<ObcIndicatorGraph>;
+
+export default meta;
+type Story = StoryObj<ObcIndicatorGraph>;
+
+export const Primary: Story = {};
+
+export const WithRange: Story = {
+  args: {
+    layout: {
+      size: ObcIndicatorGraphSize.medium,
+      priority: ObcIndicatorGraphPriority.regular,
+      y: {min: -10, max: 10},
+    },
+  },
+};
+
+export const Enhanced: Story = {
+  args: {
+    layout: {
+      size: ObcIndicatorGraphSize.medium,
+      priority: ObcIndicatorGraphPriority.enhanced,
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    layout: {
+      size: ObcIndicatorGraphSize.small,
+    },
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    layout: {
+      size: ObcIndicatorGraphSize.medium,
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    layout: {
+      size: ObcIndicatorGraphSize.large,
+    },
+  },
+};
+
+export const Realtime: Story = {
+  tags: ['skip-test'],
+  args: {
+    data: [
+      Array.from({length: 60}, (_, i) => i),
+      Array.from(
+        {length: 60},
+        (_, i) => 2 + Math.sin((i / 60 / 5) * 2 * Math.PI)
+      ),
+    ],
+    layout: {
+      size: ObcIndicatorGraphSize.medium,
+      priority: ObcIndicatorGraphPriority.regular,
+      y: {max: 4},
+    },
+  },
+  play: async ({canvasElement}) => {
+    const graph = canvasElement.querySelector(
+      'obc-indicator-graph'
+    ) as ObcIndicatorGraph;
+    if (!graph) {
+      throw new Error('Graph not found');
+    }
+
+    let i = graph.data[0].length;
+    const intervalId = setInterval(() => {
+      if (!graph.isConnected) {
+        clearInterval(intervalId);
+        return;
+      }
+      const data = graph.data;
+      const x = [...data[0], i];
+      const y = [...data[1], 2 + Math.sin((i / 60 / 5) * 2 * Math.PI)];
+      x.shift();
+      y.shift();
+      const newData: [number[], number[]] = [x, y];
+      graph.data = newData;
+      i++;
+    }, 1000 / 60);
+  },
+};