@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.110 → 2.0.0-next.112

package/src/automation/indicator-battery/indicator-battery.stories.ts

@@ -0,0 +1,94 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {
+  ObcIndicatorBattery,
+  IndicatorBatteryVariant,
+  IndicatorBatteryValue,
+} from './indicator-battery.js';
+import './indicator-battery.js';
+import {IndicatorDirection} from '../indicator-shared/linear-indicator.js';
+
+const meta = {
+  title: 'Automation/Indicators/Indicator Battery',
+  component: 'obc-indicator-battery',
+  tags: ['autodocs', '6.0'],
+  args: {
+    direction: IndicatorDirection.vertical,
+    variant: IndicatorBatteryVariant.bar,
+    value: IndicatorBatteryValue.regular,
+    level: 40,
+    data: [60, 52, 58, 45, 50, 42, 44, 40],
+    hasIcon: false,
+  },
+  argTypes: {
+    direction: {
+      control: 'radio',
+      options: Object.values(IndicatorDirection),
+    },
+    variant: {
+      control: 'radio',
+      options: Object.values(IndicatorBatteryVariant),
+    },
+    value: {
+      control: 'radio',
+      options: Object.values(IndicatorBatteryValue),
+    },
+    level: {control: {type: 'range', min: 0, max: 100}},
+  },
+  render: (args) => html`
+    <obc-indicator-battery
+      .direction=${args.direction}
+      .variant=${args.variant}
+      .value=${args.value}
+      .level=${args.level}
+      .data=${args.data}
+      .hasIcon=${args.hasIcon}
+    ></obc-indicator-battery>
+  `,
+} satisfies Meta<Partial<ObcIndicatorBattery>>;
+
+export default meta;
+type Story = StoryObj<Partial<ObcIndicatorBattery>>;
+
+export const Default: Story = {};
+
+export const BarHorizontal: Story = {
+  args: {direction: IndicatorDirection.horizontal},
+};
+
+export const TrendVertical: Story = {
+  args: {variant: IndicatorBatteryVariant.trend},
+};
+
+export const TrendHorizontal: Story = {
+  args: {
+    variant: IndicatorBatteryVariant.trend,
+    direction: IndicatorDirection.horizontal,
+  },
+};
+
+export const Enhanced: Story = {
+  args: {value: IndicatorBatteryValue.enhanced},
+};
+
+export const Categorical: Story = {
+  args: {value: IndicatorBatteryValue.categorical},
+};
+
+export const TrendEnhanced: Story = {
+  args: {
+    variant: IndicatorBatteryVariant.trend,
+    value: IndicatorBatteryValue.enhanced,
+  },
+};
+
+export const TrendCategorical: Story = {
+  args: {
+    variant: IndicatorBatteryVariant.trend,
+    value: IndicatorBatteryValue.categorical,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {hasIcon: true},
+};

package/src/automation/indicator-battery/indicator-battery.ts

@@ -0,0 +1,149 @@
+import {LitElement, html, unsafeCSS, nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+import componentStyle from './indicator-battery.css?inline';
+import {customElement} from '../../decorator.js';
+import '../../icons/icon-energy-battery.js';
+import {
+  IndicatorDirection,
+  LinearIndicatorScheme,
+  Rect,
+  renderLinearBar,
+  renderTrendGraph,
+} from '../indicator-shared/linear-indicator.js';
+
+export enum IndicatorBatteryVariant {
+  bar = 'bar',
+  trend = 'trend',
+}
+
+export enum IndicatorBatteryValue {
+  regular = 'regular',
+  enhanced = 'enhanced',
+  categorical = 'categorical',
+}
+
+const HORIZONTAL_SHELL: Rect = {x: 6, y: 8, width: 36, height: 32};
+const VERTICAL_SHELL: Rect = {x: 8, y: 6, width: 32, height: 36};
+const HORIZONTAL_BAR: Rect = {x: 9, y: 11, width: 30, height: 26};
+const VERTICAL_BAR: Rect = {x: 11, y: 9, width: 26, height: 30};
+const HORIZONTAL_TREND: Rect = {x: 8, y: 10, width: 32, height: 28};
+const VERTICAL_TREND: Rect = {x: 10, y: 8, width: 28, height: 32};
+
+const HORIZONTAL_TIP_PATH =
+  'M42 18 H44 A2 2 0 0 1 46 20 V28 A2 2 0 0 1 44 30 H42 Z';
+const VERTICAL_TIP_PATH = 'M18 6 V4 A2 2 0 0 1 20 2 H28 A2 2 0 0 1 30 4 V6 Z';
+
+/**
+ * Compact 48×48 battery charge indicator.
+ *
+ * ## Features / Variants
+ * - `variant`: `bar` (bottom-up percentage fill) or `trend` (history graph
+ *   with a current-value micro-bar)
+ * - `direction`: `vertical` or `horizontal` battery shell
+ * - `value`: color scheme — `regular`, `enhanced` or `categorical`
+ * - `level`: current charge 0–100 (%), drives the fill and micro-bar
+ * - `data`: history samples 0–100 (%) drawn as the trend graph
+ * - `hasIcon`: centered icon overlay (bar variant only)
+ *
+ * ## Usage Guidelines
+ * Use as an at-a-glance charge indicator in dashboards and lists. For a
+ * full-featured tank/battery cell with readouts, badges and setpoints, use
+ * `obc-automation-tank` (type `battery`) instead.
+ *
+ * ## Best Practices / Constraints
+ * - `level` and `data` values are clamped to 0–100; values outside that
+ *   range are pinned to the nearest bound.
+ * - The `trend` variant needs at least two `data` samples to draw a line;
+ *   with fewer it shows only the current-value micro-bar.
+ * - The `icon` slot renders only in the `bar` variant; it is ignored in
+ *   `trend`.
+ * - Display-only: the root SVG is `aria-hidden`; convey battery state to
+ *   assistive tech through adjacent text if it is not otherwise available.
+ *
+ * ## Slots
+ * | Slot   | Condition                     | Purpose                        |
+ * | ------ | ----------------------------- | ------------------------------ |
+ * | `icon` | `hasIcon` and `variant='bar'` | Icon overlay (`obi-*` element) |
+ *
+ * @slot icon - Centered icon overlay, defaults to `obi-energy-battery`
+ */
+@customElement('obc-indicator-battery')
+export class ObcIndicatorBattery extends LitElement {
+  @property({type: String, reflect: true}) direction: IndicatorDirection =
+    IndicatorDirection.vertical;
+  @property({type: String, reflect: true}) variant: IndicatorBatteryVariant =
+    IndicatorBatteryVariant.bar;
+  @property({type: String, reflect: true}) value: IndicatorBatteryValue =
+    IndicatorBatteryValue.regular;
+  /** Current charge, 0-100 (%) */
+  @property({type: Number}) level = 0;
+  /** History samples, 0-100 (%) each, oldest first */
+  @property({type: Array}) data: number[] = [];
+  @property({type: Boolean}) hasIcon = false;
+
+  private get scheme(): LinearIndicatorScheme {
+    switch (this.value) {
+      case IndicatorBatteryValue.enhanced:
+        return LinearIndicatorScheme.enhanced;
+      case IndicatorBatteryValue.categorical:
+        return LinearIndicatorScheme.categorical;
+      default:
+        return LinearIndicatorScheme.regular;
+    }
+  }
+
+  override render() {
+    const horizontal = this.direction === IndicatorDirection.horizontal;
+    const trend = this.variant === IndicatorBatteryVariant.trend;
+    const shell = horizontal ? HORIZONTAL_SHELL : VERTICAL_SHELL;
+    const barRect = horizontal
+      ? trend
+        ? HORIZONTAL_TREND
+        : HORIZONTAL_BAR
+      : trend
+        ? VERTICAL_TREND
+        : VERTICAL_BAR;
+    const showIcon =
+      this.hasIcon && this.variant === IndicatorBatteryVariant.bar;
+    return html`
+      <svg viewBox="0 0 48 48" aria-hidden="true">
+        <path
+          class="tip"
+          d=${horizontal ? HORIZONTAL_TIP_PATH : VERTICAL_TIP_PATH}
+        />
+        <rect
+          class="shell"
+          x=${shell.x}
+          y=${shell.y}
+          width=${shell.width}
+          height=${shell.height}
+          rx="4"
+        />
+        ${this.variant === IndicatorBatteryVariant.trend
+          ? renderTrendGraph(
+              barRect,
+              this.data,
+              this.level,
+              this.scheme,
+              'battery'
+            )
+          : renderLinearBar(barRect, this.level, this.scheme, 'battery')}
+      </svg>
+      ${showIcon
+        ? html`<div class="icon-wrapper">
+            <slot name="icon">
+              <obi-energy-battery usecsscolor></obi-energy-battery>
+            </slot>
+          </div>`
+        : nothing}
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-indicator-battery': ObcIndicatorBattery;
+  }
+}

package/src/automation/indicator-engine/indicator-engine.css

@@ -0,0 +1,35 @@
+:host {
+  display: block;
+  width: 48px;
+  height: 48px;
+}
+
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.frame {
+  fill: var(--instrument-frame-primary-color);
+  stroke: var(--instrument-frame-tertiary-color);
+}
+
+.rail {
+  fill: var(--instrument-frame-tertiary-color);
+}
+
+.cylinder {
+  fill: var(--instrument-frame-tertiary-color);
+  stroke: var(--instrument-frame-tertiary-color);
+}
+
+:host([value="regular"]) .cylinder {
+  fill: var(--automation-device-secondary-color);
+  stroke: var(--element-neutral-color);
+}
+
+:host([value="enhanced"]) .cylinder {
+  fill: var(--base-blue-300);
+  stroke: var(--element-neutral-enhanced-color);
+}

package/src/automation/indicator-engine/indicator-engine.stories.ts

@@ -0,0 +1,48 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {ObcIndicatorEngine, IndicatorEngineValue} from './indicator-engine.js';
+import './indicator-engine.js';
+import {IndicatorDirection} from '../indicator-shared/linear-indicator.js';
+
+const meta = {
+  title: 'Automation/Indicators/Indicator Engine',
+  component: 'obc-indicator-engine',
+  tags: ['autodocs', '6.0'],
+  args: {
+    value: IndicatorEngineValue.static,
+    direction: IndicatorDirection.vertical,
+  },
+  argTypes: {
+    value: {
+      control: 'radio',
+      options: Object.values(IndicatorEngineValue),
+    },
+    direction: {
+      control: 'radio',
+      options: Object.values(IndicatorDirection),
+    },
+  },
+  render: (args) => html`
+    <obc-indicator-engine
+      .value=${args.value}
+      .direction=${args.direction}
+    ></obc-indicator-engine>
+  `,
+} satisfies Meta<Partial<ObcIndicatorEngine>>;
+
+export default meta;
+type Story = StoryObj<Partial<ObcIndicatorEngine>>;
+
+export const Default: Story = {};
+
+export const Horizontal: Story = {
+  args: {direction: IndicatorDirection.horizontal},
+};
+
+export const Regular: Story = {
+  args: {value: IndicatorEngineValue.regular},
+};
+
+export const Enhanced: Story = {
+  args: {value: IndicatorEngineValue.enhanced},
+};

package/src/automation/indicator-engine/indicator-engine.ts

@@ -0,0 +1,78 @@
+import {LitElement, html, svg, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import componentStyle from './indicator-engine.css?inline';
+import {customElement} from '../../decorator.js';
+import {IndicatorDirection} from '../indicator-shared/linear-indicator.js';
+
+export enum IndicatorEngineValue {
+  static = 'static',
+  regular = 'regular',
+  enhanced = 'enhanced',
+}
+
+const CYLINDER_RADIUS = 3;
+const HORIZONTAL_CYLINDER_CENTERS = [12, 20, 28, 36];
+const VERTICAL_CYLINDER_CENTERS = [12, 20, 28, 36];
+
+/**
+ * Compact 48×48 engine indicator glyph.
+ *
+ * ## Features / Variants
+ * - `direction`: `vertical` (upright block with side rails) or `horizontal`
+ *   (lying block on a base rail)
+ * - `value`: cylinder color — `static`, `regular` or `enhanced`
+ *
+ * ## Usage Guidelines
+ * Use as a static engine presence/state glyph in dashboards and lists.
+ * It carries no numeric value; pair it with readouts or other indicators
+ * when quantities must be shown.
+ */
+@customElement('obc-indicator-engine')
+export class ObcIndicatorEngine extends LitElement {
+  @property({type: String, reflect: true}) value: IndicatorEngineValue =
+    IndicatorEngineValue.static;
+  @property({type: String, reflect: true}) direction: IndicatorDirection =
+    IndicatorDirection.vertical;
+
+  private renderHorizontal() {
+    return svg`
+      <rect class="rail" x="6" y="38" width="36" height="4" rx="2" />
+      <rect class="frame" x="6" y="12" width="36" height="24" rx="4" />
+      <rect class="rail" x="9" y="24" width="30" height="1" rx="0.5" />
+      ${HORIZONTAL_CYLINDER_CENTERS.map(
+        (cx) =>
+          svg`<circle class="cylinder" cx=${cx} cy="18" r=${CYLINDER_RADIUS} />`
+      )}
+    `;
+  }
+
+  private renderVertical() {
+    return svg`
+      <rect class="frame" x="12" y="6" width="24" height="36" rx="4" />
+      <rect class="rail" x="16" y="10" width="1" height="28" rx="0.5" />
+      <rect class="rail" x="31" y="10" width="1" height="28" rx="0.5" />
+      ${VERTICAL_CYLINDER_CENTERS.map(
+        (cy) =>
+          svg`<circle class="cylinder" cx="24" cy=${cy} r=${CYLINDER_RADIUS} />`
+      )}
+    `;
+  }
+
+  override render() {
+    return html`
+      <svg viewBox="0 0 48 48" aria-hidden="true">
+        ${this.direction === IndicatorDirection.horizontal
+          ? this.renderHorizontal()
+          : this.renderVertical()}
+      </svg>
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-indicator-engine': ObcIndicatorEngine;
+  }
+}

package/src/automation/indicator-generator/indicator-generator-geometry.spec.ts

@@ -0,0 +1,62 @@
+import {describe, it, expect} from 'vitest';
+import {
+  arcPath,
+  progressSweep,
+  polarPoint,
+} from './indicator-generator-geometry.js';
+
+describe('progressSweep', () => {
+  it('is 0 at level 0', () => {
+    expect(progressSweep(0)).toBe(0);
+  });
+
+  it('is 360 at level 100', () => {
+    expect(progressSweep(100)).toBe(360);
+  });
+
+  it('interpolates linearly', () => {
+    expect(progressSweep(50)).toBeCloseTo(180);
+  });
+
+  it('clamps out-of-range levels', () => {
+    expect(progressSweep(150)).toBe(360);
+    expect(progressSweep(-10)).toBe(0);
+  });
+});
+
+describe('polarPoint', () => {
+  it('maps angle 0 to the top of the circle', () => {
+    expect(polarPoint(24, 24, 18, 0)).toEqual({x: 24, y: 6});
+  });
+
+  it('maps angle 90 to the right of the circle', () => {
+    expect(polarPoint(24, 24, 18, 90)).toEqual({x: 42, y: 24});
+  });
+
+  it('maps angle 180 to the bottom of the circle', () => {
+    expect(polarPoint(24, 24, 18, 180)).toEqual({x: 24, y: 42});
+  });
+});
+
+describe('arcPath', () => {
+  it('returns empty string for zero or negative sweep', () => {
+    expect(arcPath(24, 24, 18, 0, 0)).toBe('');
+    expect(arcPath(24, 24, 18, 90, 45)).toBe('');
+  });
+
+  it('uses a single arc segment for sweeps up to 180', () => {
+    const d = arcPath(24, 24, 18, 0, 90);
+    expect(d.startsWith('M')).toBe(true);
+    expect((d.match(/A/g) ?? []).length).toBe(1);
+  });
+
+  it('splits sweeps above 180 into two arc segments', () => {
+    const d = arcPath(24, 24, 18, 0, 270);
+    expect((d.match(/A/g) ?? []).length).toBe(2);
+  });
+
+  it('starts at the start angle', () => {
+    const d = arcPath(24, 24, 18, 0, 90);
+    expect(d.startsWith('M 24 6')).toBe(true);
+  });
+});

package/src/automation/indicator-generator/indicator-generator-geometry.ts

@@ -0,0 +1,63 @@
+export const BUTTON_SILHOUETTE_RADIUS = 18.5;
+export const DISC_RADIUS = 17.5;
+export const FILLED_DISC_RADIUS = 18.5;
+export const BAR_SILHOUETTE_RADIUS = 19.5;
+export const BAR_SILHOUETTE_STROKE_WIDTH = 3;
+export const BAR_OUTLINE_RADIUS = 16.5;
+export const DOUBLE_BAR_OUTLINE_RADIUS = 17.5;
+export const OUTLINE_STROKE_WIDTH = 3;
+export const BAR_TRACK_RADIUS = 18;
+export const BAR_TRACK_STROKE_WIDTH = 4;
+export const DOUBLE_BAR_OUTER_RADIUS = 22;
+export const DOUBLE_BAR_OUTER_STROKE_WIDTH = 4;
+export const DOUBLE_BAR_INNER_RADIUS = 18;
+export const DOUBLE_BAR_INNER_STROKE_WIDTH = 2;
+
+export function clampPercent(value: number): number {
+  if (Number.isNaN(value)) return 0;
+  return Math.min(100, Math.max(0, value));
+}
+
+/** Sweep (deg) of the progress arc, clockwise from 12 o'clock. */
+export function progressSweep(level: number): number {
+  return (360 * clampPercent(level)) / 100;
+}
+
+/** Point on a circle; angle in degrees clockwise from 12 o'clock. */
+export function polarPoint(
+  cx: number,
+  cy: number,
+  radius: number,
+  angleDeg: number
+): {x: number; y: number} {
+  const rad = (angleDeg * Math.PI) / 180;
+  return {
+    x: Math.round((cx + radius * Math.sin(rad)) * 1000) / 1000,
+    y: Math.round((cy - radius * Math.cos(rad)) * 1000) / 1000,
+  };
+}
+
+/**
+ * Circular arc path from startAngle to endAngle (deg, clockwise from
+ * 12 o'clock), meant to be stroked. Sweeps above 180° are split into two
+ * arc segments; non-positive sweeps yield an empty string. Full circles
+ * (sweep 360) should be drawn with a `<circle>` element instead.
+ */
+export function arcPath(
+  cx: number,
+  cy: number,
+  radius: number,
+  startAngleDeg: number,
+  endAngleDeg: number
+): string {
+  const sweep = endAngleDeg - startAngleDeg;
+  if (sweep <= 0) return '';
+  const start = polarPoint(cx, cy, radius, startAngleDeg);
+  if (sweep > 180) {
+    const mid = polarPoint(cx, cy, radius, startAngleDeg + sweep / 2);
+    const end = polarPoint(cx, cy, radius, endAngleDeg);
+    return `M ${start.x} ${start.y} A ${radius} ${radius} 0 0 1 ${mid.x} ${mid.y} A ${radius} ${radius} 0 0 1 ${end.x} ${end.y}`;
+  }
+  const end = polarPoint(cx, cy, radius, endAngleDeg);
+  return `M ${start.x} ${start.y} A ${radius} ${radius} 0 0 1 ${end.x} ${end.y}`;
+}

package/src/automation/indicator-generator/indicator-generator.css

@@ -0,0 +1,111 @@
+:host {
+  display: block;
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+
+:host([variant="double-bar"]) {
+  width: 56px;
+  height: 56px;
+}
+
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.silhouette {
+  fill: var(--instrument-frame-primary-color);
+  stroke: var(--border-silhouette-color);
+}
+
+.silhouette-ring {
+  fill: none;
+  stroke: var(--border-silhouette-color);
+}
+
+.disc {
+  fill: var(--instrument-frame-primary-color);
+  stroke: var(--instrument-frame-tertiary-color);
+}
+
+:host([value="off"]) .disc {
+  fill: var(--automation-button-off-background-color);
+  stroke: var(--automation-button-off-border-color);
+}
+
+:host([value="filled"]) .disc {
+  stroke: var(--element-neutral-color);
+}
+
+:host([value="filled"][variant="double-bar"]) .disc {
+  fill: var(--element-neutral-color);
+  stroke: var(--element-neutral-color);
+}
+
+:host([value="enhanced"]) .disc {
+  fill: var(--element-neutral-enhanced-color);
+  stroke: var(--base-blue-600);
+}
+
+:host([value="categorical"]) .disc {
+  fill: var(--base-teal-400);
+  stroke: var(--base-teal-500);
+}
+
+.outline {
+  fill: none;
+  stroke: var(--border-silhouette-color);
+}
+
+.ring-track {
+  fill: none;
+  stroke: var(--border-divider-color);
+}
+
+.ring-progress {
+  fill: none;
+  stroke: var(--element-neutral-color);
+}
+
+:host([value="enhanced"]) .ring-progress {
+  stroke: var(--element-neutral-enhanced-color);
+}
+
+:host([value="categorical"]) .ring-progress {
+  stroke: var(--base-teal-400);
+}
+
+.icon-wrapper {
+  position: absolute;
+  inset: 12px;
+  color: var(--element-neutral-color);
+  pointer-events: none;
+}
+
+:host([variant="double-bar"]) .icon-wrapper {
+  inset: 16px;
+}
+
+:host([value="off"]) .icon-wrapper {
+  color: var(--instrument-frame-tertiary-color);
+}
+
+:host([value="filled"]) .icon-wrapper,
+:host([value="enhanced"]) .icon-wrapper,
+:host([value="categorical"]) .icon-wrapper {
+  color: var(--instrument-frame-primary-color);
+}
+
+.icon-wrapper ::slotted(*),
+.default-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.default-icon path {
+  fill: currentColor;
+}