@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.136 → 2.0.0-next.138

package/src/automation/hydraulic-check-valve/hydraulic-check-valve.ts

@@ -0,0 +1,60 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {customElement} from '../../decorator.js';
+import sharedStyle from '../shuffle-button/shuffle-button.css?inline';
+import componentStyle from './hydraulic-check-valve.css?inline';
+import '../../icons/icon-hydraulic-13.js';
+
+/**
+ * `<obc-hydraulic-check-valve>` – Static check valve symbol.
+ *
+ * Renders the check valve symbol in the same thumb-on-track visual style as
+ * the position-selector valve components, sized to a single slot (48px at
+ * regular size). A check valve has no selectable positions, so the component
+ * is display-only and not focusable.
+ *
+ * ## Usage Guidelines
+ * Use alongside `<obc-hydraulic-valve-4-3>` and `<obc-hydraulic-valve-x-2>`
+ * for consistent styling of valves without switchable positions.
+ *
+ * @experimental
+ *
+ * @property ariaLabel - Accessible name for the symbol.
+ * @property vertical - Rotates the symbol 90° counter-clockwise to match a vertical flow path.
+ */
+@customElement('obc-hydraulic-check-valve')
+export class ObcHydraulicCheckValve extends LitElement {
+  @property({type: String}) override ariaLabel = 'Check valve';
+
+  @property({type: Boolean}) vertical = false;
+
+  override render() {
+    return html`
+      <div
+        class=${classMap({shuffle: true, vertical: this.vertical})}
+        role="img"
+        aria-label=${this.ariaLabel}
+      >
+        <div class="window">
+          <div class="track"></div>
+          <div class="thumb selected">
+            <div class="visible-wrapper">
+              <div class="icon-container">
+                <obi-hydraulic-13></obi-hydraulic-13>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static override styles = [unsafeCSS(sharedStyle), unsafeCSS(componentStyle)];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-hydraulic-check-valve': ObcHydraulicCheckValve;
+  }
+}

package/src/automation/hydraulic-valve-4-3/hydraulic-valve-4-3.stories.ts

@@ -0,0 +1,72 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {
+  HydraulicValve43Type,
+  ObcHydraulicValve43,
+} from './hydraulic-valve-4-3.js';
+import './hydraulic-valve-4-3.js';
+import type {PositionSelectedEvent} from '../shuffle-button/shuffle-button-base.js';
+
+const meta: Meta<typeof ObcHydraulicValve43> = {
+  title: 'Automation/Hydraulic Valves/Valve 4-3',
+  tags: ['autodocs', '6.1', 'experimental'],
+  component: 'obc-hydraulic-valve-4-3',
+  args: {
+    type: HydraulicValve43Type.One,
+    selectedPosition: 1,
+    vertical: false,
+  },
+  argTypes: {
+    type: {
+      control: {type: 'select'},
+      options: Object.values(HydraulicValve43Type),
+    },
+    selectedPosition: {
+      control: {type: 'number', min: 0, max: 2, step: 1},
+    },
+  },
+  render: (args) => html`
+    <obc-hydraulic-valve-4-3
+      type=${args.type}
+      .selectedPosition=${args.selectedPosition}
+      ?vertical=${args.vertical}
+      @position-selected=${(event: PositionSelectedEvent) => {
+        (event.target as ObcHydraulicValve43).selectedPosition =
+          event.detail.position;
+      }}
+    ></obc-hydraulic-valve-4-3>
+  `,
+} satisfies Meta<ObcHydraulicValve43>;
+
+export default meta;
+type Story = StoryObj<ObcHydraulicValve43>;
+
+export const Default: Story = {};
+
+export const Type2: Story = {
+  args: {type: HydraulicValve43Type.Two},
+};
+
+export const Type3: Story = {
+  args: {type: HydraulicValve43Type.Three},
+};
+
+export const Type4: Story = {
+  args: {type: HydraulicValve43Type.Four},
+};
+
+export const Type5: Story = {
+  args: {type: HydraulicValve43Type.Five},
+};
+
+export const PositionLeft: Story = {
+  args: {selectedPosition: 0},
+};
+
+export const PositionRight: Story = {
+  args: {selectedPosition: 2},
+};
+
+export const Vertical: Story = {
+  args: {vertical: true},
+};

package/src/automation/hydraulic-valve-4-3/hydraulic-valve-4-3.ts

@@ -0,0 +1,108 @@
+import {html} from 'lit';
+import type {TemplateResult} from 'lit';
+import {property} from 'lit/decorators.js';
+import {customElement} from '../../decorator.js';
+import {ObcShuffleButtonBase} from '../shuffle-button/shuffle-button-base.js';
+import '../../icons/icon-hydraulic-01.js';
+import '../../icons/icon-hydraulic-02.js';
+import '../../icons/icon-hydraulic-05.js';
+import '../../icons/icon-hydraulic-06.js';
+import '../../icons/icon-hydraulic-07.js';
+import '../../icons/icon-hydraulic-08.js';
+import '../../icons/icon-hydraulic-16.js';
+
+/**
+ * Detail payload for the `position-selected` event: the zero-based position
+ * the user requested (0 = left, 1 = center, 2 = right).
+ *
+ * Declared here rather than imported from the base: the wrapper generators
+ * resolve event types in the component's own module only.
+ */
+export interface PositionSelectedDetail {
+  position: number;
+}
+
+/**
+ * Center-position symbol variant of `<obc-hydraulic-valve-4-3>`.
+ * Each value maps to a different center (neutral) position symbol.
+ */
+export enum HydraulicValve43Type {
+  One = '1',
+  Two = '2',
+  Three = '3',
+  Four = '4',
+  Five = '5',
+}
+
+/**
+ * `<obc-hydraulic-valve-4-3>` – Position selector symbol for a 4/3 directional valve.
+ *
+ * Shows the valve's three positions as icon thumbs on a shared track. The
+ * selected position always occupies the fixed center slot; the other position
+ * thumbs keep their logical order and shift to either side, so the component's
+ * total width never changes (five 48px slots at regular size).
+ *
+ * ## Features / Variants
+ * - `type` selects the center-position symbol (five variants).
+ * - `vertical` stacks the positions top to bottom and rotates the symbols to
+ *   match a vertical flow path.
+ * - Controlled selection: clicking an option or pressing arrow keys fires
+ *   `position-selected` with the requested position; the application updates
+ *   `selectedPosition` once the change is confirmed.
+ * - Scales with the component size classes (`obc-component-size-*`).
+ *
+ * ## Usage Guidelines
+ * Use to display and command the position of a 4/3 directional valve. For
+ * two-position valves use `<obc-hydraulic-valve-x-2>`; for a static check
+ * valve symbol use `<obc-hydraulic-check-valve>`. Bind `selectedPosition` to
+ * the position the device reports, not to the last request, so the symbol
+ * never shows a position the valve has not reached.
+ *
+ * ## Events
+ * - `position-selected` – Fired when the user requests a position (click or
+ *   arrow key). Detail: `{position: number}` (0 = left, 1 = center, 2 = right).
+ *
+ * @property type - Center-position symbol variant.
+ * @property ariaLabel - Accessible name for the control.
+ * @fires {CustomEvent<PositionSelectedDetail>} position-selected - Fired when the user requests a position (click or arrow key).
+ * @experimental
+ */
+@customElement('obc-hydraulic-valve-4-3')
+export class ObcHydraulicValve43 extends ObcShuffleButtonBase {
+  @property({type: String}) type: HydraulicValve43Type =
+    HydraulicValve43Type.One;
+
+  @property({type: String}) override ariaLabel = 'Hydraulic 4/3 valve';
+
+  protected override get positionCount(): number {
+    return 3;
+  }
+
+  protected override renderPositionIcon(position: number): TemplateResult {
+    if (position === 0) {
+      return html`<obi-hydraulic-02></obi-hydraulic-02>`;
+    }
+    if (position === 2) {
+      return html`<obi-hydraulic-07></obi-hydraulic-07>`;
+    }
+    switch (this.type) {
+      case HydraulicValve43Type.Two:
+        return html`<obi-hydraulic-16></obi-hydraulic-16>`;
+      case HydraulicValve43Type.Three:
+        return html`<obi-hydraulic-08></obi-hydraulic-08>`;
+      case HydraulicValve43Type.Four:
+        return html`<obi-hydraulic-05></obi-hydraulic-05>`;
+      case HydraulicValve43Type.Five:
+        return html`<obi-hydraulic-06></obi-hydraulic-06>`;
+      case HydraulicValve43Type.One:
+      default:
+        return html`<obi-hydraulic-01></obi-hydraulic-01>`;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-hydraulic-valve-4-3': ObcHydraulicValve43;
+  }
+}

package/src/automation/hydraulic-valve-x-2/hydraulic-valve-x-2.stories.ts

@@ -0,0 +1,60 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {
+  HydraulicValveX2Type,
+  ObcHydraulicValveX2,
+} from './hydraulic-valve-x-2.js';
+import './hydraulic-valve-x-2.js';
+import type {PositionSelectedEvent} from '../shuffle-button/shuffle-button-base.js';
+
+const meta: Meta<typeof ObcHydraulicValveX2> = {
+  title: 'Automation/Hydraulic Valves/Valve X-2',
+  tags: ['autodocs', '6.1', 'experimental'],
+  component: 'obc-hydraulic-valve-x-2',
+  args: {
+    type: HydraulicValveX2Type.TwoTwo,
+    selectedPosition: 1,
+    vertical: false,
+  },
+  argTypes: {
+    type: {
+      control: {type: 'select'},
+      options: Object.values(HydraulicValveX2Type),
+    },
+    selectedPosition: {
+      control: {type: 'number', min: 0, max: 1, step: 1},
+    },
+  },
+  render: (args) => html`
+    <obc-hydraulic-valve-x-2
+      type=${args.type}
+      .selectedPosition=${args.selectedPosition}
+      ?vertical=${args.vertical}
+      @position-selected=${(event: PositionSelectedEvent) => {
+        (event.target as ObcHydraulicValveX2).selectedPosition =
+          event.detail.position;
+      }}
+    ></obc-hydraulic-valve-x-2>
+  `,
+} satisfies Meta<ObcHydraulicValveX2>;
+
+export default meta;
+type Story = StoryObj<ObcHydraulicValveX2>;
+
+export const Default: Story = {};
+
+export const TypeThreeTwo: Story = {
+  args: {type: HydraulicValveX2Type.ThreeTwo},
+};
+
+export const TypeFourTwo: Story = {
+  args: {type: HydraulicValveX2Type.FourTwo},
+};
+
+export const PositionFirst: Story = {
+  args: {selectedPosition: 0},
+};
+
+export const Vertical: Story = {
+  args: {vertical: true},
+};

package/src/automation/hydraulic-valve-x-2/hydraulic-valve-x-2.ts

@@ -0,0 +1,101 @@
+import {html} from 'lit';
+import type {TemplateResult} from 'lit';
+import {property} from 'lit/decorators.js';
+import {customElement} from '../../decorator.js';
+import {ObcShuffleButtonBase} from '../shuffle-button/shuffle-button-base.js';
+import '../../icons/icon-hydraulic-01.js';
+import '../../icons/icon-hydraulic-02.js';
+import '../../icons/icon-hydraulic-07.js';
+import '../../icons/icon-hydraulic-10.js';
+import '../../icons/icon-hydraulic-11.js';
+
+/**
+ * Detail payload for the `position-selected` event: the zero-based position
+ * the user requested (0 = first, 1 = second).
+ *
+ * Declared here rather than imported from the base: the wrapper generators
+ * resolve event types in the component's own module only.
+ */
+export interface PositionSelectedDetail {
+  position: number;
+}
+
+/**
+ * Port/position configuration of `<obc-hydraulic-valve-x-2>`:
+ * `2/2`, `3/2` or `4/2` (ports/positions). Each value maps to its own pair of
+ * position symbols.
+ */
+export enum HydraulicValveX2Type {
+  TwoTwo = '2/2',
+  ThreeTwo = '3/2',
+  FourTwo = '4/2',
+}
+
+/**
+ * `<obc-hydraulic-valve-x-2>` – Position selector symbol for a two-position valve.
+ *
+ * Shows the valve's two positions as icon thumbs on a shared track. The
+ * selected position always occupies the fixed center slot; the option thumb
+ * sits to its left or right depending on logical order, and an empty spacer
+ * slot keeps the total width constant (three 48px slots at regular size).
+ *
+ * ## Features / Variants
+ * - `type` selects the port/position configuration: `2/2`, `3/2` or `4/2`.
+ * - `vertical` stacks the positions top to bottom and rotates the symbols to
+ *   match a vertical flow path.
+ * - Controlled selection: clicking the option or pressing arrow keys fires
+ *   `position-selected`; the application updates `selectedPosition` once the
+ *   change is confirmed.
+ * - Scales with the component size classes (`obc-component-size-*`).
+ *
+ * ## Usage Guidelines
+ * Use to display and command the position of a two-position valve. For 4/3
+ * directional valves use `<obc-hydraulic-valve-4-3>`; for a static check
+ * valve symbol use `<obc-hydraulic-check-valve>`. Bind `selectedPosition` to
+ * the position the device reports, not to the last request, so the symbol
+ * never shows a position the valve has not reached.
+ *
+ * ## Events
+ * - `position-selected` – Fired when the user requests a position (click or
+ *   arrow key). Detail: `{position: number}` (0 = first, 1 = second).
+ *
+ * @property type - Port/position configuration.
+ * @property ariaLabel - Accessible name for the control.
+ * @fires {CustomEvent<PositionSelectedDetail>} position-selected - Fired when the user requests a position (click or arrow key).
+ * @experimental
+ */
+@customElement('obc-hydraulic-valve-x-2')
+export class ObcHydraulicValveX2 extends ObcShuffleButtonBase {
+  @property({type: String}) type: HydraulicValveX2Type =
+    HydraulicValveX2Type.TwoTwo;
+
+  @property({type: String}) override ariaLabel = 'Hydraulic valve';
+
+  protected override get positionCount(): number {
+    return 2;
+  }
+
+  protected override renderPositionIcon(position: number): TemplateResult {
+    switch (this.type) {
+      case HydraulicValveX2Type.ThreeTwo:
+        return position === 0
+          ? html`<obi-hydraulic-11></obi-hydraulic-11>`
+          : html`<obi-hydraulic-10></obi-hydraulic-10>`;
+      case HydraulicValveX2Type.FourTwo:
+        return position === 0
+          ? html`<obi-hydraulic-02></obi-hydraulic-02>`
+          : html`<obi-hydraulic-07></obi-hydraulic-07>`;
+      case HydraulicValveX2Type.TwoTwo:
+      default:
+        return position === 0
+          ? html`<obi-hydraulic-02></obi-hydraulic-02>`
+          : html`<obi-hydraulic-01></obi-hydraulic-01>`;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-hydraulic-valve-x-2': ObcHydraulicValveX2;
+  }
+}

package/src/automation/shuffle-button/shuffle-button-base.ts

@@ -0,0 +1,170 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import type {PropertyValues, TemplateResult} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import componentStyle from './shuffle-button.css?inline';
+import {
+  clampPosition,
+  shuffleSlotCount,
+  shuffleWindowOffset,
+} from './shuffle-layout.js';
+
+/**
+ * Detail payload for the `position-selected` event dispatched by
+ * shuffle-button components. `position` is the zero-based position the user
+ * requested.
+ */
+export interface PositionSelectedDetail {
+  position: number;
+}
+
+/**
+ * The `position-selected` event dispatched by shuffle-button components.
+ */
+export type PositionSelectedEvent = CustomEvent<PositionSelectedDetail>;
+
+/**
+ * Base class for shuffle-button selectors: a control whose selected thumb
+ * always occupies the fixed center slot of a (2·n−1)-slot row (or column when
+ * `vertical`). Option thumbs keep their logical order and redistribute to
+ * either side of the selected thumb; empty spacer slots absorb the remaining
+ * length so the total size never changes.
+ *
+ * ## Controlled selection
+ * Clicking an option or pressing an arrow key only fires `position-selected`.
+ * The host application sets `selectedPosition` once the device confirms the
+ * change, so the control never shows a position the device has not reached.
+ *
+ * ## Keyboard
+ * Follows the WAI-ARIA radio group pattern
+ * (https://www.w3.org/WAI/ARIA/apg/patterns/radio/): `role="radiogroup"` with
+ * one `role="radio"` thumb per position, a single tab stop on the selected
+ * thumb, and Left/Up and Right/Down moving to the previous/next position with
+ * wrap-around. Departures: arrow keys request the position rather than moving
+ * the checked state (controlled selection above), and focus follows the thumb
+ * only once the host confirms it. Space/Enter on a focused thumb request it
+ * through the native button click. Home/End are out of scope.
+ *
+ * Subclasses define `positionCount` and `renderPositionIcon()` and carry the
+ * `@fires position-selected` tag: the manifest and the framework wrappers read
+ * events from the registered element, not from this base.
+ *
+ * Not declared `abstract`: the wrapper generators wrap every `LitElement`
+ * subclass and pass its constructor as a concrete `Constructor<T>`, so the
+ * default implementations below stand in for abstract members (same as
+ * `ObcAbstractAutomationButton`).
+ *
+ * @property selectedPosition - Zero-based index of the currently selected position. Out-of-range values are clamped.
+ * @property vertical - Lays the control out vertically: positions stack top to bottom and the position symbols rotate 90° counter-clockwise to match a vertical flow path.
+ * @property ariaLabel - Accessible name for the radio group (the control is icon-only). Concrete components override the default with a device-specific name.
+ */
+export class ObcShuffleButtonBase extends LitElement {
+  @property({type: Number}) selectedPosition = 1;
+
+  @property({type: Boolean}) vertical = false;
+
+  @property({type: String}) override ariaLabel = 'Position selector';
+
+  @state() private suppressHover = false;
+
+  protected get positionCount(): number {
+    return 1;
+  }
+
+  protected renderPositionIcon(_position: number): TemplateResult {
+    return html``;
+  }
+
+  override render() {
+    const count = this.positionCount;
+    const selected = clampPosition(count, this.selectedPosition);
+    return html`
+      <div
+        class=${classMap({shuffle: true, vertical: this.vertical})}
+        role="radiogroup"
+        aria-label=${this.ariaLabel}
+        aria-orientation=${this.vertical ? 'vertical' : 'horizontal'}
+        style="--_shuffle-slot-count: ${shuffleSlotCount(
+          count
+        )}; --_shuffle-window-offset: ${shuffleWindowOffset(
+          count,
+          selected
+        )};${this.suppressHover ? ' --obc-can-hover: 0;' : ''}"
+        @keydown=${this.handleKeydown}
+        @pointermove=${this.restoreHover}
+      >
+        <div class="window">
+          <div class="track"></div>
+          ${Array.from({length: count}, (_, position) =>
+            this.renderThumb(position, selected)
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderThumb(position: number, selected: number) {
+    const isSelected = position === selected;
+    return html`
+      <button
+        class=${classMap({thumb: true, selected: isSelected})}
+        type="button"
+        role="radio"
+        aria-checked=${isSelected}
+        tabindex=${isSelected ? 0 : -1}
+        @click=${() => this.requestPosition(position)}
+      >
+        <div class="visible-wrapper">
+          <div class="icon-container">${this.renderPositionIcon(position)}</div>
+        </div>
+      </button>
+    `;
+  }
+
+  private requestPosition(position: number) {
+    if (position === clampPosition(this.positionCount, this.selectedPosition)) {
+      return;
+    }
+    // Browsers keep :hover on the thumb that shuffles away from under a
+    // stationary pointer; mute hover feedback until the pointer really moves.
+    this.suppressHover = true;
+    const event: PositionSelectedEvent = new CustomEvent('position-selected', {
+      detail: {position},
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(event);
+  }
+
+  private restoreHover() {
+    this.suppressHover = false;
+  }
+
+  private handleKeydown(event: KeyboardEvent) {
+    let delta: number;
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      delta = 1;
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      delta = -1;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    const count = this.positionCount;
+    const selected = clampPosition(count, this.selectedPosition);
+    this.requestPosition((selected + delta + count) % count);
+  }
+
+  protected override updated(changed: PropertyValues) {
+    if (
+      changed.has('selectedPosition') &&
+      this.shadowRoot?.activeElement instanceof HTMLElement
+    ) {
+      this.shadowRoot
+        .querySelector<HTMLButtonElement>('button.thumb.selected')
+        ?.focus();
+    }
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}