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

package/src/automation/shuffle-button/shuffle-button.css

@@ -0,0 +1,136 @@
+:host {
+  display: inline-block;
+}
+
+/* ---- Slot grid ----
+ * The box is (2n-1) touch-target slots; the selected thumb always sits in the
+ * center slot, so the box never changes size with the selection. */
+.shuffle {
+  --shuffle-slot-size: var(--global-size-spacing-touch-target-min);
+  --_shuffle-slot-count: 1;
+  --_shuffle-window-offset: 0;
+  position: relative; /* containing block for the sliding .window */
+  width: calc(var(--_shuffle-slot-count) * var(--shuffle-slot-size));
+  height: var(--shuffle-slot-size);
+}
+
+.shuffle.vertical {
+  width: var(--shuffle-slot-size);
+  height: calc(var(--_shuffle-slot-count) * var(--shuffle-slot-size));
+}
+
+/* The window holds the n thumbs in logical order and slides by whole slots so
+ * the selected one lands in the center; the box above stays put. */
+.window {
+  position: absolute; /* slides inside the fixed-size .shuffle box */
+  top: 0;
+  left: 0;
+  display: flex;
+  transform: translateX(
+    calc(var(--_shuffle-window-offset) * var(--shuffle-slot-size))
+  );
+  transition: transform 100ms ease-out; /* TODO(designer): Figma is WIP and specifies no motion */
+}
+
+.shuffle.vertical .window {
+  flex-direction: column;
+  transform: translateY(
+    calc(var(--_shuffle-window-offset) * var(--shuffle-slot-size))
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .window {
+    transition: none;
+  }
+}
+
+/* The track is inset to the visual target height so it aligns with the thumbs'
+ * visible wrappers, not with the touch slots. */
+.track {
+  @mixin style style=indent noClick=true;
+  position: absolute;
+  inset: calc(
+      (
+          var(--shuffle-slot-size) -
+            var(--global-size-spacing-visual-target-min)
+        ) /
+        2
+    )
+    0;
+  border-radius: var(--global-border-radius-border-radius-base);
+  box-sizing: border-box; /* the mixin border must not grow the track past the slots */
+}
+
+.shuffle.vertical .track {
+  inset: 0
+    calc(
+      (
+          var(--shuffle-slot-size) -
+            var(--global-size-spacing-visual-target-min)
+        ) /
+        2
+    );
+}
+
+/* ---- Thumbs ----
+ * Two-layer pattern: the button is the touch target and focus-ring layer, the
+ * .visible-wrapper is the visual target. */
+.thumb {
+  position: relative;
+  width: var(--shuffle-slot-size);
+  height: var(--shuffle-slot-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0; /* a slot never shrinks below the touch target */
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.thumb {
+  @mixin style style=flat visibleWrapperClass=.visible-wrapper;
+}
+
+.visible-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: var(--global-size-spacing-visual-target-min);
+  box-sizing: border-box;
+  border-radius: var(--global-border-radius-border-radius-base);
+  color: var(--automation-device-secondary-color);
+}
+
+.thumb.selected {
+  cursor: default; /* clicking the selected position is a no-op */
+}
+
+.thumb.selected .visible-wrapper {
+  background-color: var(--automation-pipe-primary-color);
+  border: 1px solid var(--automation-pipe-tertiary-color);
+  color: var(--automation-device-tertiary-color);
+}
+
+.shuffle.vertical .visible-wrapper {
+  width: var(--global-size-spacing-visual-target-min);
+  height: 100%;
+}
+
+.icon-container {
+  width: var(--global-size-spacing-icon-icon-size-regular);
+  height: var(--global-size-spacing-icon-icon-size-regular);
+}
+
+.shuffle.vertical .icon-container {
+  transform: rotate(-90deg); /* symbols are drawn for horizontal flow */
+}
+
+.icon-container > * {
+  width: 100%;
+  height: 100%;
+}

package/src/automation/shuffle-button/shuffle-layout.spec.ts

@@ -0,0 +1,44 @@
+import {describe, expect, it} from 'vitest';
+import {
+  clampPosition,
+  shuffleSlotCount,
+  shuffleWindowOffset,
+} from './shuffle-layout.js';
+
+describe('shuffleSlotCount', () => {
+  it('is 2n-1 so the selected thumb can sit center with all options on one side', () => {
+    expect(shuffleSlotCount(1)).toBe(1);
+    expect(shuffleSlotCount(2)).toBe(3);
+    expect(shuffleSlotCount(3)).toBe(5);
+  });
+});
+
+describe('clampPosition', () => {
+  it('passes through valid positions', () => {
+    expect(clampPosition(3, 0)).toBe(0);
+    expect(clampPosition(3, 2)).toBe(2);
+  });
+  it('clamps out-of-range and rounds non-integers', () => {
+    expect(clampPosition(3, -1)).toBe(0);
+    expect(clampPosition(3, 7)).toBe(2);
+    expect(clampPosition(3, 1.4)).toBe(1);
+  });
+  it('falls back to position 0 for NaN', () => {
+    expect(clampPosition(3, Number.NaN)).toBe(0);
+  });
+});
+
+describe('shuffleWindowOffset', () => {
+  it('offsets the window so the selected thumb lands in the center slot', () => {
+    expect(shuffleWindowOffset(3, 0)).toBe(2);
+    expect(shuffleWindowOffset(3, 1)).toBe(1);
+    expect(shuffleWindowOffset(3, 2)).toBe(0);
+    expect(shuffleWindowOffset(2, 0)).toBe(1);
+    expect(shuffleWindowOffset(2, 1)).toBe(0);
+    expect(shuffleWindowOffset(1, 0)).toBe(0);
+  });
+  it('clamps invalid selections', () => {
+    expect(shuffleWindowOffset(3, 9)).toBe(0);
+    expect(shuffleWindowOffset(3, -4)).toBe(2);
+  });
+});

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

@@ -0,0 +1,21 @@
+/**
+ * Pure layout math for the shuffle-button mechanism: a selector whose selected
+ * thumb always occupies the fixed center slot of a (2n-1)-slot row while the
+ * remaining option thumbs keep their logical order on either side.
+ */
+
+export function clampPosition(positionCount: number, position: number): number {
+  const rounded = Number.isNaN(position) ? 0 : Math.round(position);
+  return Math.min(Math.max(rounded, 0), positionCount - 1);
+}
+
+export function shuffleSlotCount(positionCount: number): number {
+  return 2 * positionCount - 1;
+}
+
+export function shuffleWindowOffset(
+  positionCount: number,
+  selectedPosition: number
+): number {
+  return positionCount - 1 - clampPosition(positionCount, selectedPosition);
+}

package/src/components/alert-subsystem-counter/alert-subsystem-counter.css

@@ -0,0 +1,82 @@
+:host {
+  display: block;
+}
+
+.frame {
+  box-sizing: border-box; /* the host width is the frame width, border included */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--container-section-color);
+  border: 1px solid var(--border-outline-color);
+}
+
+.frame.orientation-vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.leading-container {
+  display: flex;
+  flex: 1 0 0; /* takes the width the badges leave over, so the label can truncate */
+  align-items: center;
+  gap: 4px;
+  min-width: 0; /* lets the label shrink below its text width */
+}
+
+.icon {
+  flex-shrink: 0;
+  width: var(--global-size-spacing-icon-icon-size-regular);
+  height: var(--global-size-spacing-icon-icon-size-regular);
+  color: var(--on-indent-neutral-color);
+}
+
+.icon.no-icon {
+  display: none; /* collapses the flex gap too, so an iconless counter has no leading hole */
+}
+
+.label {
+  @mixin font-body;
+  flex: 1 0 0;
+  min-width: 0; /* required for text-overflow to kick in inside a flex item */
+  padding-left: 4px;
+  color: var(--element-inactive-color);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.frame.has-alert .label {
+  @mixin font-body-active;
+  color: var(--on-indent-active-color);
+}
+
+.trailing-container {
+  display: flex;
+  flex-shrink: 0; /* badges keep their size; the label is what gives way */
+  align-items: center;
+  gap: 4px;
+}
+
+.frame.orientation-horizontal .trailing-container {
+  justify-content: flex-end;
+}
+
+.frame.orientation-vertical .trailing-container {
+  align-self: flex-start; /* hugs its content under the label instead of stretching across the frame */
+}
+
+.frame:not(.has-alert) .trailing-container {
+  justify-content: center;
+  /* same row height as the large badges it stands in for */
+  height: var(--ui-components-badge-min-size-large);
+  padding: 0 8px;
+}
+
+.empty {
+  @mixin font-label;
+  color: var(--element-inactive-color);
+  white-space: nowrap;
+}

package/src/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts

@@ -0,0 +1,308 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html, nothing, type TemplateResult} from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {
+  ObcAlertSubsystemCounter,
+  ObcAlertSubsystemCounterOrientation,
+} from './alert-subsystem-counter.js';
+import './alert-subsystem-counter.js';
+import '../badge/badge.js';
+import {BadgeType, BadgeVariant} from '../badge/badge.js';
+import '../../icons/icon-placeholder.js';
+
+const badges = html`
+  <obc-badge slot="badges" size="large" type="alarm" .number=${9}></obc-badge>
+  <obc-badge slot="badges" size="large" type="warning" .number=${4}></obc-badge>
+  <obc-badge slot="badges" size="large" type="caution" .number=${2}></obc-badge>
+`;
+
+const levelBadges = html`
+  <obc-badge
+    slot="badges"
+    size="large"
+    type=${BadgeType.levelCritical}
+    .number=${1}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type=${BadgeType.levelHigh}
+    .number=${9}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type=${BadgeType.levelMedium}
+    .number=${4}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type=${BadgeType.levelLow}
+    .number=${2}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type=${BadgeType.levelDiagnostic}
+    .number=${7}
+  ></obc-badge>
+`;
+
+const iconBadges = html`
+  <obc-badge
+    slot="badges"
+    size="large"
+    type="alarm"
+    variant=${BadgeVariant.flat}
+    showIcon
+    .number=${9}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type="warning"
+    variant=${BadgeVariant.flat}
+    showIcon
+    .number=${4}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type="caution"
+    variant=${BadgeVariant.flat}
+    showIcon
+    .number=${2}
+  ></obc-badge>
+`;
+
+type CounterArgs = Pick<
+  ObcAlertSubsystemCounter,
+  'label' | 'orientation' | 'hasAlert' | 'emptyText'
+>;
+
+// `emptyText` is gated on `hasAlert==false`, so Storybook drops it from the
+// args while `hasAlert` is on; attribute bindings with `ifDefined` leave the
+// element's own default in place instead of writing `undefined` into it.
+const renderCounter = (
+  args: CounterArgs,
+  options: {width?: string; withIcon?: boolean; badges?: TemplateResult} = {}
+) =>
+  html`<div style="width:${options.width ?? '191px'}">
+    <obc-alert-subsystem-counter
+      label=${ifDefined(args.label)}
+      .orientation=${args.orientation}
+      .hasAlert=${args.hasAlert}
+      emptytext=${ifDefined(args.emptyText)}
+    >
+      ${options.withIcon === false
+        ? nothing
+        : html`<obi-placeholder slot="icon"></obi-placeholder>`}
+      ${options.badges ?? badges}
+    </obc-alert-subsystem-counter>
+  </div>`;
+
+const meta: Meta<typeof ObcAlertSubsystemCounter> = {
+  title: 'Application Components/Alerts/Alert Subsystem Counter',
+  tags: ['6.0', 'beta'],
+  component: 'obc-alert-subsystem-counter',
+  args: {
+    label: 'Label',
+    orientation: ObcAlertSubsystemCounterOrientation.Horizontal,
+    hasAlert: true,
+    emptyText: 'No alerts',
+  },
+  argTypes: {
+    orientation: {
+      control: {type: 'inline-radio'},
+      options: Object.values(ObcAlertSubsystemCounterOrientation),
+    },
+    hasAlert: {control: {type: 'boolean'}},
+    label: {control: {type: 'text'}},
+    emptyText: {control: {type: 'text'}},
+  },
+  render: (args) => renderCounter(args),
+} satisfies Meta<ObcAlertSubsystemCounter>;
+
+export default meta;
+type Story = StoryObj<ObcAlertSubsystemCounter>;
+
+export const Default: Story = {};
+
+export const Abbreviation: Story = {
+  args: {label: 'ABC'},
+  render: (args) => renderCounter(args, {width: '172px'}),
+};
+
+export const NoAlerts: Story = {
+  args: {hasAlert: false},
+};
+
+export const Vertical: Story = {
+  args: {orientation: ObcAlertSubsystemCounterOrientation.Vertical},
+};
+
+export const VerticalNoAlerts: Story = {
+  args: {
+    orientation: ObcAlertSubsystemCounterOrientation.Vertical,
+    hasAlert: false,
+  },
+};
+
+export const AbbreviationVertical: Story = {
+  args: {
+    label: 'ABC',
+    orientation: ObcAlertSubsystemCounterOrientation.Vertical,
+  },
+  render: (args) => renderCounter(args, {width: 'fit-content'}),
+};
+
+export const WithoutIcon: Story = {
+  render: (args) => renderCounter(args, {withIcon: false}),
+};
+
+export const LongLabel: Story = {
+  args: {label: 'Auxiliary cooling water system'},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The label is the only element that gives way: it truncates with an ellipsis while the icon and badges keep their size.',
+      },
+    },
+  },
+};
+
+export const LevelSeverities: Story = {
+  render: (args) =>
+    renderCounter(args, {width: 'fit-content', badges: levelBadges}),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The badge `type` accepts the whole `AlertType` vocabulary, including the `level-*` family. Slot them highest severity first, in `ALERT_SEVERITY_PRIORITY` order.',
+      },
+    },
+  },
+};
+
+export const WithBadgeIcons: Story = {
+  render: (args) =>
+    renderCounter(args, {width: 'fit-content', badges: iconBadges}),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Any `obc-badge` configuration works in the `badges` slot — here the `flat` variant with `showIcon` so each count carries its severity symbol.',
+      },
+    },
+  },
+};
+
+type OverviewEntry = {
+  label: string;
+  hasAlert: boolean;
+  badges?: TemplateResult;
+  withIcon?: boolean;
+};
+
+const overview: OverviewEntry[] = [
+  {
+    label: 'Propulsion',
+    hasAlert: true,
+    badges: html`<obc-badge
+        slot="badges"
+        size="large"
+        type="alarm"
+        .number=${2}
+      ></obc-badge>
+      <obc-badge
+        slot="badges"
+        size="large"
+        type="warning"
+        .number=${1}
+      ></obc-badge>`,
+  },
+  {label: 'Navigation', hasAlert: false},
+  {
+    label: 'Power',
+    hasAlert: true,
+    badges: html`<obc-badge
+      slot="badges"
+      size="large"
+      type="caution"
+      .number=${3}
+    ></obc-badge>`,
+  },
+  {
+    label: 'HVAC',
+    hasAlert: true,
+    badges: html`<obc-badge
+        slot="badges"
+        size="large"
+        type=${BadgeType.levelHigh}
+        .number=${9}
+      ></obc-badge>
+      <obc-badge
+        slot="badges"
+        size="large"
+        type=${BadgeType.levelMedium}
+        .number=${4}
+      ></obc-badge>
+      <obc-badge
+        slot="badges"
+        size="large"
+        type=${BadgeType.levelLow}
+        .number=${2}
+      ></obc-badge>`,
+  },
+  {label: 'Cargo', hasAlert: false, withIcon: false},
+  {
+    label: 'Fire detection',
+    hasAlert: true,
+    withIcon: false,
+    badges: html`<obc-badge
+      slot="badges"
+      size="large"
+      type="alarm"
+      .number=${12}
+    ></obc-badge>`,
+  },
+];
+
+export const Overview: Story = {
+  render: (args) =>
+    html`<div
+      style="display:grid;grid-template-columns:repeat(2, 240px);gap:8px"
+    >
+      ${overview.map((entry) =>
+        renderCounter(
+          {...args, label: entry.label, hasAlert: entry.hasAlert},
+          {width: '240px', withIcon: entry.withIcon, badges: entry.badges}
+        )
+      )}
+    </div>`,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A status overview composes one counter per subsystem in a grid. Counters with and without alerts, with and without icons, and with different badge families share one row height.',
+      },
+    },
+  },
+};
+
+export const OverviewVertical: Story = {
+  args: {orientation: ObcAlertSubsystemCounterOrientation.Vertical},
+  render: (args) =>
+    html`<div
+      style="display:grid;grid-template-columns:repeat(3, 120px);gap:8px;align-items:stretch"
+    >
+      ${overview.map((entry) =>
+        renderCounter(
+          {...args, label: entry.label, hasAlert: entry.hasAlert},
+          {width: '120px', withIcon: entry.withIcon, badges: entry.badges}
+        )
+      )}
+    </div>`,
+};