@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.50 → 2.0.0-next.53

package/src/components/icon-button/icon-button.ts

@@ -9,6 +9,7 @@ import {customElement} from '../../decorator.js';
  * - `normal`: Standard appearance for most use cases.
  * - `raised`: Adds elevation/shadow for prominence.
  * - `flat`: Minimal, backgroundless style for subtle actions.
+ * - `integration`: For use in Integration Bar components
  */
 export enum IconButtonVariant {
   normal = 'normal',
@@ -29,6 +30,7 @@ export enum IconButtonVariant {
  *   - `normal` (default): Standard appearance for most use cases.
  *   - `raised`: Adds elevation/shadow for prominence.
  *   - `flat`: Minimal, backgroundless style for subtle actions.
+ *   - `integration`: For use in Integration Bar components
  * - **Progress Indicator:**
  *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.
  * - **Label Support:**

package/src/components/sequence-item/sequence-item.css

@@ -57,7 +57,7 @@
       .title-row,
       .meta-row {
         padding: var(
-            --global-size-spacing-list-item-menu-padding-horizonal-list-item
+            --global-size-spacing-nav-item-and-menus-padding-horizonal-list-item
           )
           0;
       }
@@ -137,7 +137,9 @@
 
   .title-row {
     display: flex;
-    gap: var(--global-size-spacing-list-item-menu-padding-horizonal-list-item);
+    gap: var(
+      --global-size-spacing-nav-item-and-menus-padding-horizonal-list-item
+    );
     justify-content: space-between;
     align-items: flex-start;
   }
@@ -186,7 +188,7 @@
     @mixin font-instrument-value-small-neutral;
     display: flex;
     flex-direction: column;
-    gap: var(--alert-components-badge-label-spacing);
+    gap: var(--ui-components-badge-label-spacing);
   }
 
   /* === Label Variants === */

package/src/components/sequence-loading-spinner/sequence-loading-spinner.css

@@ -103,8 +103,8 @@
       background: conic-gradient(
         from 0deg,
         var(--element-neutral-enhanced-color) 0deg,
-        var(--element-neutral-enhanced-color) var(--spinner-progress-deg),
-        transparent var(--spinner-progress-deg),
+        var(--element-neutral-enhanced-color) var(--spinner-progress-deg, 0deg),
+        transparent var(--spinner-progress-deg, 0deg),
         transparent 360deg
       );
     }
@@ -120,7 +120,7 @@
     }
 
     .cap-end {
-      transform: translate(-50%, -50%) rotate(var(--spinner-progress-deg))
+      transform: translate(-50%, -50%) rotate(var(--spinner-progress-deg, 0deg))
         translateY(calc(-1 * var(--spinner-radius)));
     }
   }

package/src/components/tab-item/tab-item.css

@@ -111,7 +111,7 @@
 
   .divider {
     width: 1px;
-    height: var(--menu-navigation-components-tab-item-divider-height);
+    height: var(--menu-navigation-components-tab-action-button-divider-height);
     flex-shrink: 0;
     color: var(--border-divider-color);
     fill: var(--border-divider-color);
@@ -124,7 +124,7 @@
     position: absolute;
     left: 0;
     width: 1px;
-    height: var(--menu-navigation-components-tab-item-divider-height);
+    height: var(--menu-navigation-components-tab-action-button-divider-height);
     background: var(--border-divider-color);
   }
 

package/src/components/table/table.css

@@ -10,7 +10,7 @@
 .grid-container {
   display: grid;
   height: 100%;
-  grid-template-columns: repeat(var(--grid-columns), auto);
+  grid-template-columns: repeat(var(--grid-columns, 1), auto);
   align-content: start;
   grid-template-rows: min-content min-content 1fr;
 
@@ -20,7 +20,7 @@
         --selection-column-width,
         var(--menu-navigation-components-table-item-touch-target-size)
       )
-      repeat(var(--grid-columns-rest), minmax(0, 1fr));
+      repeat(var(--grid-columns-rest, 1), minmax(0, 1fr));
   }
 
   .grid-header {

package/src/components/toggle-button-option/toggle-button-option.css

@@ -5,9 +5,7 @@
 .wrapper {
   height: var(--ui-components-button-touch-target-size);
   width: 100%;
-  min-width: var(
-    --ui-components-icon-toggle-button-horizontal-item-touch-target-size
-  );
+  min-width: var(--ui-components-toggle-button-touch-target-size);
   min-height: var(
     --ui-components-toggle-button-toggle-button-item-touch-target-size
   );

package/src/integration-systems/integration-app-bar/integration-app-bar.stories.ts

@@ -7,7 +7,7 @@ import {html} from 'lit';
 
 const meta: Meta<typeof ObcIntegrationAppBar> = {
   title: 'Integration Systems/App Bar',
-  tags: ['6.0'],
+  tags: ['alpha'],
   component: 'obc-integration-app-bar',
   args: {},
   render: () => html`

package/src/integration-systems/integration-bar/integration-bar.css

@@ -0,0 +1,86 @@
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.wrapper {
+  display: flex;
+  padding: 0 var(--app-components-integration-system-topbar-margin-global);
+  justify-content: space-between;
+  align-items: center;
+  background: var(--integration-container-global-color);
+  box-shadow: var(--shadow-flat-x) var(--shadow-flat-y) var(--shadow-flat-blur)
+    var(--shadow-flat-spread) var(--shadow-flat-color);
+}
+
+.content-container {
+  display: flex;
+  flex: 1;
+}
+
+.fleet-vessel-container {
+  display: flex;
+  align-items: flex-start;
+  flex: 1 1 auto;
+}
+
+.fleet-button {
+  flex: initial;
+}
+
+.vessel-container {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.integration-buttons-slot::slotted(obc-integration-button) {
+  flex: 1;
+}
+
+.hug-buttons-slot::slotted(obc-integration-button) {
+  flex: 0 1 auto;
+}
+
+.home-button,
+.link-button {
+  width: var(--app-components-integration-system-icon-button-touch-target);
+  height: var(--app-components-integration-system-icon-button-touch-target);
+  justify-content: center;
+  align-items: center;
+  gap: 14px;
+  flex: initial;
+}
+
+.right-content-container {
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  flex: initial;
+}
+
+.right-content-container.buttons-on-bar {
+  border-left: var(
+      --app-components-integration-system-navigation-item-horizontal-stroke-weight-right,
+      1px
+    )
+    solid
+    var(
+      --integration-beta-flat-enabled-border-color,
+      var(--integration-border-outline)
+    );
+}
+
+.right-side-system-menu-container {
+  position: absolute;
+  position-anchor: --settings-menu-anchor;
+  top: anchor(bottom);
+  justify-self: anchor-center;
+}
+
+.vessel-button-placeholder {
+  flex: 1 1 auto;
+}

package/src/integration-systems/integration-bar/integration-bar.stories.ts

@@ -0,0 +1,479 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {ObcIntegrationBar} from './integration-bar.js';
+import './integration-bar.js';
+import {html, nothing} from 'lit';
+import '../../components/dropdown-button/dropdown-button.js';
+import '../../components/clock/clock.js';
+import '../integration-vessel-menu/integration-vessel-menu.js';
+import {
+  IntegrationButtonType,
+  IntegrationButtonVariant,
+} from '../integration-button/integration-button.js';
+
+function makeStringShorter(str: string, maxLength: number): string {
+  if (str.length <= maxLength) {
+    return str;
+  }
+  return str.slice(0, maxLength);
+}
+
+function getIntegrationnButtonType(hug: boolean, rich: boolean) {
+  if (hug) {
+    return IntegrationButtonType.hug;
+  } else if (rich) {
+    return IntegrationButtonType.rich;
+  } else {
+    return IntegrationButtonType.regular;
+  }
+}
+
+function getColorForButton(color: string): string {
+  return `--integration-on-selected-active-color: var(--base-${color}-600); --integration-on-selected-neutral-color: var(--base-${color}-500); --integration-selected-enabled-background-color: var(--base-${color}-100); --integration-selected-enabled-border-color: var(--base-${color}-100); --integration-selected-hover-background-color: var(--base-${color}-100); --integration-selected-hover-border-color: var(--base-${color}-100);`;
+}
+
+const readouts = [
+  {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
+  {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
+];
+
+type IntegrationBarStoryArgs = ObcIntegrationBar & {
+  date: string;
+  showDate: boolean;
+  showTimezone: boolean;
+  timeZoneOffsetHours: number;
+  clockMinimizeBreakpointPx: number;
+  showVesselIntegrationMenu: boolean;
+  hug: boolean;
+  rich: boolean;
+  makeLabelNamesShort: boolean;
+  containerWidthPx: number;
+  showStatus: boolean;
+  showIntegrationMenu: boolean;
+  customSelectedColors: boolean;
+};
+
+function renderIntegrationButtons({
+  onIntegrationButtonClick,
+  shortNames,
+  hug,
+  rich,
+  shouldShowDividerRight,
+  showStatus,
+  showIntegrationMenu,
+  customSelectedColors,
+}: {
+  onIntegrationButtonClick: (event: Event, buttonIndex: number) => void;
+  shortNames: boolean;
+  hug: boolean;
+  rich: boolean;
+  shouldShowDividerRight: (buttonIndex: number) => boolean;
+  showStatus: boolean;
+  showIntegrationMenu: boolean;
+  customSelectedColors: boolean;
+}) {
+  const slotName = hug ? 'hug-buttons' : 'integration-buttons';
+  const buttonType = getIntegrationnButtonType(hug, rich);
+  const button1styling = customSelectedColors ? getColorForButton('cyan') : '';
+  const button2styling = customSelectedColors
+    ? getColorForButton('indigo')
+    : '';
+  const button3styling = customSelectedColors ? getColorForButton('teal') : '';
+  const button4styling = customSelectedColors
+    ? getColorForButton('purple')
+    : '';
+
+  return html`
+    <obc-integration-button
+      hasLeadingIcon
+      style=${button1styling}
+      .variant=${IntegrationButtonVariant.flat}
+      .type=${buttonType}
+      .readouts=${readouts}
+      .hasStatus=${showStatus}
+      ?selected=${false}
+      ?activated=${false}
+      ?dividerRight=${shouldShowDividerRight(0)}
+      @click=${(e: Event) => onIntegrationButtonClick(e, 0)}
+      slot=${slotName}
+    >
+      <obi-ship slot="leading-icon"></obi-ship>
+      <span slot="label"
+        >${shortNames ? makeStringShorter('Boat', 2) : 'Boat'}</span
+      >
+      <div slot="info-label">Info Label</div>
+      <div slot="info-status">Info Status</div>
+      <div slot="status">Status</div>
+      ${showIntegrationMenu
+        ? html`<obc-integration-vessel-menu
+            slot="integration-vessel-menu"
+            numberOfButtons="2"
+            @button1-click=${() => console.log('Boat Button 1 clicked')}
+            @button2-click=${() => console.log('Boat Button 2 clicked')}
+            ><span slot="title">Boat</span
+            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
+            <div slot="button-1-label">Select</div>
+            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
+            <div slot="button-2-label">Dismiss</div>
+            <div slot="content" style="padding: 24px;">
+              <p>Boat is working just fine.</p>
+            </div></obc-integration-vessel-menu
+          >`
+        : nothing}
+    </obc-integration-button>
+    <obc-integration-button
+      hasLeadingIcon
+      style=${button2styling}
+      .variant=${IntegrationButtonVariant.flat}
+      .type=${buttonType}
+      .readouts=${readouts}
+      .hasStatus=${showStatus}
+      ?selected=${false}
+      ?activated=${false}
+      ?dividerRight=${shouldShowDividerRight(1)}
+      @click=${(e: Event) => onIntegrationButtonClick(e, 1)}
+      slot=${slotName}
+    >
+      <obi-ship slot="leading-icon"></obi-ship>
+      <span slot="label"
+        >${shortNames ? makeStringShorter('Space Ship', 2) : 'Space Ship'}</span
+      >
+      <div slot="info-label">Info Label</div>
+      <div slot="info-status">Info Status</div>
+      <div slot="status">Status</div>
+      ${showIntegrationMenu
+        ? html`<obc-integration-vessel-menu
+            slot="integration-vessel-menu"
+            numberOfButtons="2"
+            @button1-click=${() => console.log('Space Ship Button 1 clicked')}
+            @button2-click=${() => console.log('Space Ship Button 2 clicked')}
+            ><span slot="title">Space Ship</span
+            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
+            <div slot="button-1-label">Select</div>
+            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
+            <div slot="button-2-label">Dismiss</div>
+            <div slot="content" style="padding: 24px;">
+              <p>Space Ship is working just fine.</p>
+            </div></obc-integration-vessel-menu
+          >`
+        : nothing}
+    </obc-integration-button>
+    <obc-integration-button
+      hasLeadingIcon
+      style=${button3styling}
+      .variant=${IntegrationButtonVariant.flat}
+      .type=${buttonType}
+      .readouts=${readouts}
+      .hasStatus=${showStatus}
+      ?selected=${false}
+      ?activated=${true}
+      ?dividerRight=${shouldShowDividerRight(2)}
+      @click=${(e: Event) => onIntegrationButtonClick(e, 2)}
+      slot=${slotName}
+    >
+      <obi-ship slot="leading-icon"></obi-ship>
+      <span slot="label"
+        >${shortNames ? makeStringShorter('Vessel', 2) : 'Vessel'}</span
+      >
+      <div slot="info-label">Info Label</div>
+      <div slot="info-status">Info Status</div>
+      <div slot="status">Status</div>
+      ${showIntegrationMenu
+        ? html`<obc-integration-vessel-menu
+            slot="integration-vessel-menu"
+            numberOfButtons="2"
+            @button1-click=${() => console.log('Vessel Button 1 clicked')}
+            @button2-click=${() => console.log('Vessel Button 2 clicked')}
+            ><span slot="title">Vessel</span
+            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
+            <div slot="button-1-label">Select</div>
+            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
+            <div slot="button-2-label">Dismiss</div>
+            <div slot="content" style="padding: 24px;">
+              <p>Vessel is working just fine.</p>
+            </div></obc-integration-vessel-menu
+          >`
+        : nothing}
+    </obc-integration-button>
+    <obc-integration-button
+      hasLeadingIcon
+      style=${button4styling}
+      .variant=${IntegrationButtonVariant.flat}
+      .type=${buttonType}
+      .readouts=${readouts}
+      .hasStatus=${showStatus}
+      ?selected=${true}
+      ?activated=${false}
+      ?dividerRight=${shouldShowDividerRight(3)}
+      @click=${(e: Event) => onIntegrationButtonClick(e, 3)}
+      slot=${slotName}
+    >
+      <obi-ship slot="leading-icon"></obi-ship>
+      <span slot="label"
+        >${shortNames ? makeStringShorter('Last', 2) : 'Last'}</span
+      >
+      <div slot="info-label">Info Label</div>
+      <div slot="info-status">Info Status</div>
+      <div slot="status">Status</div>
+      ${showIntegrationMenu
+        ? html`<obc-integration-vessel-menu
+            slot="integration-vessel-menu"
+            numberOfButtons="2"
+            @button1-click=${() => console.log('Last Button 1 clicked')}
+            @button2-click=${() => console.log('Last Button 2 clicked')}
+            ><span slot="title">Last</span
+            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
+            <div slot="button-1-label">Select</div>
+            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
+            <div slot="button-2-label">Dismiss</div>
+            <div slot="content" style="padding: 24px;">
+              <p>Last is working just fine.</p>
+            </div></obc-integration-vessel-menu
+          >`
+        : nothing}
+    </obc-integration-button>
+  `;
+}
+
+const meta: Meta<IntegrationBarStoryArgs> = {
+  title: 'Integration Systems/Integration Bar',
+  tags: ['alpha'],
+  component: 'obc-integration-bar',
+  globals: {
+    viewport: {value: 'desktop'},
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    containerWidthPx: 1200,
+    showClock: true,
+    date: '2021-01-01T11:11:11.111Z',
+    clockMinimizeBreakpointPx: 600,
+    showDate: false,
+    showTimezone: false,
+    timeZoneOffsetHours: 1,
+    hideHomeButton: false,
+    hug: false,
+    rich: false,
+    showLinkButton: false,
+    linkButtonActivated: false,
+    showUserButton: true,
+    userButtonActivated: false,
+    showDimmingButton: true,
+    dimmingButtonActivated: false,
+    showSystemButton: true,
+    systemButtonActivated: false,
+    showScreenButton: true,
+    screenButtonActivated: false,
+    showNotificationButton: true,
+    notificationButtonActivated: false,
+    showAlertButton: true,
+    alertButtonActivated: false,
+    showVesselIntegrationMenu: false,
+    showStatus: false,
+    fleetButtonSelected: false,
+    fleetButtonActivated: false,
+    fleetButtonLabel: 'Fleet',
+    makeLabelNamesShort: false,
+    showIntegrationMenu: false,
+    customSelectedColors: false,
+  },
+  argTypes: {
+    containerWidthPx: {
+      control: {type: 'number'},
+    },
+    showDate: {
+      control: {type: 'boolean'},
+    },
+    showVesselIntegrationMenu: {
+      control: {type: 'boolean'},
+    },
+    hug: {
+      control: {type: 'boolean'},
+    },
+    rich: {
+      control: {type: 'boolean'},
+    },
+    showIntegrationMenu: {
+      control: {type: 'boolean'},
+    },
+    customSelectedColors: {
+      control: {type: 'boolean'},
+    },
+  },
+  render: (args) => {
+    type IntegrationButtonElement = HTMLElement & {
+      activated: boolean;
+      selected: boolean;
+      dividerRight: boolean;
+    };
+
+    const integrationButtonCount = 4;
+    // Track click phase for each button (0: both false, 1: activated true, 2: selected true)
+    const buttonStates: Map<number, number> = new Map([
+      [0, 0], // button 1
+      [1, 0], // button 2
+      [2, 1], // button 3 (currently activated=true)
+      [3, 2], // button 4 (currently selected=true)
+    ]);
+
+    const isActivatedOrSelected = (phase: number): boolean => {
+      return phase === 1 || phase === 2;
+    };
+
+    const shouldShowDividerRight = (buttonIndex: number): boolean => {
+      if (buttonIndex >= integrationButtonCount - 1) {
+        return false;
+      }
+      const currentPhase = buttonStates.get(buttonIndex) ?? 0;
+      const rightPhase = buttonStates.get(buttonIndex + 1) ?? 0;
+
+      return (
+        !isActivatedOrSelected(currentPhase) &&
+        !isActivatedOrSelected(rightPhase)
+      );
+    };
+
+    const updateIntegrationButtonDividers = (
+      button: IntegrationButtonElement
+    ) => {
+      const integrationBar = button.closest('obc-integration-bar');
+      if (!integrationBar) {
+        return;
+      }
+
+      const integrationButtons = Array.from(
+        integrationBar.querySelectorAll<IntegrationButtonElement>(
+          'obc-integration-button[slot="integration-buttons"], obc-integration-button[slot="hug-buttons"]'
+        )
+      );
+
+      integrationButtons.forEach((integrationButton, index) => {
+        integrationButton.dividerRight = shouldShowDividerRight(index);
+      });
+    };
+
+    const onIntegrationButtonClick = (event: Event, buttonIndex: number) => {
+      const button = event.currentTarget as IntegrationButtonElement;
+      let phase = buttonStates.get(buttonIndex) ?? 0;
+
+      // Cycle: 0 → 1 → 2 → 0
+      phase = (phase + 1) % 3;
+      buttonStates.set(buttonIndex, phase);
+
+      const isActivated = phase === 1;
+      const isSelected = phase === 2;
+
+      button.activated = isActivated;
+      button.selected = isSelected;
+      updateIntegrationButtonDividers(button);
+    };
+
+    const onFleetButtonClick = (event: Event) => {
+      const integrationBar = event.currentTarget as ObcIntegrationBar;
+      if (integrationBar.fleetButtonActivated == true) {
+        integrationBar.fleetButtonActivated = false;
+        integrationBar.fleetButtonSelected = true;
+      } else if (integrationBar.fleetButtonSelected == true) {
+        integrationBar.fleetButtonSelected = false;
+        integrationBar.fleetButtonActivated = false;
+      } else {
+        integrationBar.fleetButtonActivated = true;
+      }
+    };
+
+    const wrapperStyle = args.showIntegrationMenu
+      ? 'width: 100%; min-height: 400px; overflow-x: auto; overflow-y: visible;'
+      : 'width: 100%; overflow-x: auto;';
+
+    return html` <div style=${wrapperStyle}>
+      <div style=${`width: ${args.containerWidthPx}px;`}>
+        <obc-integration-bar
+          showFleetButton=${true}
+          style="width: 100%;"
+          @fleet-button-click=${onFleetButtonClick}
+          .hideHomeButton=${args.hideHomeButton}
+          .showLinkButton=${args.showLinkButton}
+          .linkButtonActivated=${args.linkButtonActivated}
+          .showClock=${args.showClock}
+          .showUserButton=${args.showUserButton}
+          .userButtonActivated=${args.userButtonActivated}
+          .showDimmingButton=${args.showDimmingButton}
+          .dimmingButtonActivated=${args.dimmingButtonActivated}
+          .showSystemButton=${args.showSystemButton}
+          .systemButtonActivated=${args.systemButtonActivated}
+          .showAlertButton=${args.showAlertButton}
+          .alertButtonActivated=${args.alertButtonActivated}
+          .showScreenButton=${args.showScreenButton}
+          .screenButtonActivated=${args.screenButtonActivated}
+          .showNotificationButton=${args.showNotificationButton}
+          .notificationButtonActivated=${args.notificationButtonActivated}
+          .fleetButtonSelected=${args.fleetButtonSelected}
+          .fleetButtonActivated=${args.fleetButtonActivated}
+          .fleetButtonLabel=${args.fleetButtonLabel}
+        >
+          <obc-clock
+            integrationBarMode
+            .date=${args.date}
+            .showDate=${args.showDate}
+            slot="clock"
+            .showTimezone=${args.showTimezone}
+            .timeZoneOffsetHours=${args.timeZoneOffsetHours}
+            .blinkOnlyBreakpointPx=${args.clockMinimizeBreakpointPx}
+          ></obc-clock>
+
+          ${renderIntegrationButtons({
+            onIntegrationButtonClick,
+            shortNames: args.makeLabelNamesShort,
+            hug: args.hug,
+            rich: args.rich,
+            shouldShowDividerRight,
+            showStatus: args.showStatus,
+            showIntegrationMenu: args.showIntegrationMenu,
+            customSelectedColors: args.customSelectedColors,
+          })}
+        </obc-integration-bar>
+      </div>
+    </div>`;
+  },
+} satisfies Meta<IntegrationBarStoryArgs>;
+
+export default meta;
+type Story = StoryObj<IntegrationBarStoryArgs>;
+
+export const Primary: Story = {
+  args: {},
+};
+
+export const WithStatus: Story = {
+  args: {
+    showStatus: true,
+  },
+};
+
+export const Hug: Story = {
+  args: {
+    hug: true,
+    makeLabelNamesShort: true,
+  },
+};
+
+export const Rich: Story = {
+  args: {
+    makeLabelNamesShort: false,
+    rich: true,
+    containerWidthPx: 1920,
+  },
+};
+
+export const WithIntegrationMenu: Story = {
+  args: {
+    showIntegrationMenu: true,
+  },
+};
+
+export const CustomSelectedColors: Story = {
+  args: {
+    customSelectedColors: true,
+  },
+};