@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.49 → 2.0.0-next.52

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.stories.ts

@@ -0,0 +1,180 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import type {ObcIntegrationVesselMenu} from './integration-vessel-menu.js';
+import './integration-vessel-menu.js';
+import '../../icons/icon-placeholder.js';
+import {ObcAlertMenuItemStatus} from '../../components/alert-menu-item/alert-menu-item.js';
+import '../../components/alert-menu-item/alert-menu-item.js';
+import '../../icons/icon-caution-color-iec.js';
+
+const handleAck = (event: Event) => {
+  const alertItem = event.currentTarget as HTMLElement;
+  const alertParent = alertItem.parentElement;
+  if (alertParent) {
+    alertParent.removeChild(alertItem);
+  }
+};
+
+const renderAlarms = () => html`
+  <obc-alert-menu-item
+    slot="alarms"
+    .status=${ObcAlertMenuItemStatus.Unacknowledged}
+    title="CPA/TCPA Alert"
+    description="Risk of collision with vessel MV NORDIC at CPA 0.2nm"
+    time="09:12:34"
+    @ack-click=${handleAck}
+    data-testid="engine-temperature-high-1"
+  >
+    <obc-alert-icon slot="alert-icon" type="alarm" active></obc-alert-icon>
+  </obc-alert-menu-item>
+  <obc-alert-menu-item
+    slot="alarms"
+    .status=${ObcAlertMenuItemStatus.NoAckAlarm}
+    title="Off Track Deviation"
+    description="Vessel has deviated from planned route by 0.5nm"
+    time="09:13:22"
+  >
+    <obc-alert-icon slot="alert-icon" type="alarm" active></obc-alert-icon>
+  </obc-alert-menu-item>
+  <obc-alert-menu-item
+    slot="alarms"
+    .status=${ObcAlertMenuItemStatus.Unacknowledged}
+    title="Main Engine Overload"
+    description="Port main engine load exceeds 95% of MCR"
+    time="09:14:05"
+    data-testid="engine-temperature-high-2"
+    @ack-click=${handleAck}
+  >
+    <obc-alert-icon slot="alert-icon" type="alarm" active></obc-alert-icon>
+  </obc-alert-menu-item>
+
+  <obc-alert-menu-item
+    slot="alarms"
+    .status=${ObcAlertMenuItemStatus.NoAckWarning}
+    title="Depth Below Keel"
+    description="Under keel clearance below safety margin: 2.5m"
+    time="09:15:10"
+  >
+    <obc-alert-icon slot="alert-icon" type="warning" active></obc-alert-icon>
+  </obc-alert-menu-item>
+  <obc-alert-menu-item
+    slot="alarms"
+    .status=${ObcAlertMenuItemStatus.NoAckWarning}
+    title="Wind Speed High"
+    description="True wind speed 35kts exceeds operational limit"
+    time="09:16:00"
+  >
+    <obc-alert-icon slot="alert-icon" type="warning" active></obc-alert-icon>
+  </obc-alert-menu-item>
+  <obc-alert-menu-item
+    slot="alarms"
+    .status=${ObcAlertMenuItemStatus.NoAckWarning}
+    title="ECDIS Primary GPS Lost"
+    description="Position source switched to secondary GPS"
+    time="09:16:45"
+  >
+    <obc-alert-icon slot="alert-icon" type="warning" active></obc-alert-icon>
+  </obc-alert-menu-item>
+
+  <obc-alert-menu-item
+    slot="alarms"
+    .status=${ObcAlertMenuItemStatus.Caution}
+    title="Fuel Oil Temperature"
+    description="HFO temperature approaching lower limit: 115°C"
+    time="09:17:20"
+  >
+    <obi-caution-color-iec
+      useCssColor
+      slot="alert-icon"
+    ></obi-caution-color-iec>
+  </obc-alert-menu-item>
+  <obc-alert-menu-item
+    slot="alarms"
+    .status=${ObcAlertMenuItemStatus.Caution}
+    title="Ballast Tank Level"
+    description="No. 3 Port ballast tank level below recommended trim: 45%"
+    time="09:17:45"
+  >
+    <obi-caution-color-iec
+      useCssColor
+      slot="alert-icon"
+    ></obi-caution-color-iec>
+  </obc-alert-menu-item>
+`;
+
+const meta: Meta<ObcIntegrationVesselMenu> = {
+  title: 'Integration Systems/Integration Vessel Menu',
+  component: 'obc-integration-vessel-menu',
+  tags: ['alpha'],
+  args: {numberOfButtons: 3},
+  argTypes: {
+    numberOfButtons: {
+      control: 'number',
+      min: 0,
+      max: 3,
+      step: 1,
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (story) => html`
+      <div style="height: 400px; display: flex;">${story()}</div>
+    `,
+  ],
+};
+
+export default meta;
+type Story = StoryObj<ObcIntegrationVesselMenu>;
+
+interface IntegrationVesselMenuArgs {
+  numberOfButtons: number;
+}
+
+type IntegrationVesselMenuTemplate = (
+  args: IntegrationVesselMenuArgs
+) => ReturnType<typeof html>;
+
+const template: IntegrationVesselMenuTemplate = (args) => html`
+  <obc-integration-vessel-menu
+    .numberOfButtons=${args.numberOfButtons}
+    @button-1-click=${() => console.log('Button 1 clicked')}
+    @button-2-click=${() => console.log('Button 2 clicked')}
+    @button-3-click=${() => console.log('Button 3 clicked')}
+  >
+    <div slot="content" style="padding: 24px;">
+      <div style="width: 496px; height: 256;">
+        <p>Content area</p>
+      </div>
+    </div>
+    <obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
+    <div slot="button-1-label">Action 1</div>
+    <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
+    <div slot="button-2-label">Ac. 2</div>
+    <obi-placeholder slot="button-3-leading-icon"></obi-placeholder>
+    <div slot="button-3-label">Action number 3</div>
+    ${renderAlarms()}
+  </obc-integration-vessel-menu>
+`;
+
+const templateWithoutAlarms: IntegrationVesselMenuTemplate = (args) => html`
+  <obc-integration-vessel-menu
+    .numberOfButtons=${args.numberOfButtons}
+    @button-1-click=${() => console.log('Button 1 clicked')}
+    @button-2-click=${() => console.log('Button 2 clicked')}
+    @button-3-click=${() => console.log('Button 3 clicked')}
+  >
+    <div slot="content" style="padding: 24px;">
+      <p>Add content here</p>
+    </div>
+  </obc-integration-vessel-menu>
+`;
+
+export const Default: Story = {
+  render: template,
+};
+
+export const WithoutAlarms: Story = {
+  render: templateWithoutAlarms,
+};

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts

@@ -0,0 +1,83 @@
+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 componentStyle from './integration-vessel-menu.css?inline';
+
+import '../../components/button/button.js';
+import '../../components/icon-button/icon-button.js';
+import '../../icons/icon-placeholder.js';
+import '../../building-blocks/alert-list/alert-list.js';
+
+/**
+ * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.
+ *
+ * @slot leading-icon - Icon shown in the header.
+ * @slot title - Header title text.
+ * @slot button-1-leading-icon - Leading icon for the first button.
+ * @slot button-1-label - Label for the first button.
+ * @slot button-2-leading-icon - Leading icon for the second button.
+ * @slot button-2-label - Label for the second button.
+ * @slot button-3-leading-icon - Leading icon for the third button.
+ * @slot button-3-label - Label for the third button.
+ * @slot content - Main content shown in the content area.
+ * @slot alarms - Alarm items rendered inside the alert list.
+ *
+ * @property {number} numberOfButtons - Number of buttons to render (up to 3).
+ *
+ * @fires button1-click - Fired when the first button is clicked.
+ * @fires button2-click - Fired when the second button is clicked.
+ * @fires button3-click - Fired when the third button is clicked.
+ */
+
+@customElement('obc-integration-vessel-menu')
+export class ObcIntegrationVesselMenu extends LitElement {
+  @property({type: Number}) numberOfButtons = 3;
+
+  private renderButtons() {
+    return html`${Array.from({length: this.numberOfButtons}, (_, i) => {
+      const buttonNum = i + 1;
+      return html`<obc-button
+        @click=${() =>
+          this.dispatchEvent(new CustomEvent(`button${buttonNum}-click`))}
+        ?showLeadingIcon=${true}
+        ?fullWidth=${true}
+        class="button"
+      >
+        <slot
+          name="button-${buttonNum}-leading-icon"
+          slot="leading-icon"
+        ></slot>
+        <slot name="button-${buttonNum}-label"></slot>
+      </obc-button>`;
+    })}`;
+  }
+
+  protected override render() {
+    return html`
+      <div
+        class=${classMap({
+          wrapper: true,
+        })}
+      >
+        <div class="footer-container">${this.renderButtons()}</div>
+        <div class="content-area">
+          <slot name="content"></slot>
+        </div>
+        <div class="content-container">
+          <obc-alert-list class="alert-list"
+            ><slot name="alarms"> </slot>
+          </obc-alert-list>
+        </div>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-integration-vessel-menu': ObcIntegrationVesselMenu;
+  }
+}

package/src/integration-systems/integration-vessel-selector/integration-vessel-selector.css

@@ -10,14 +10,26 @@
   background: var(--integration-container-global-color);
   height: 100%;
   width: 100%;
+}
+
+.wrapper .fleet-wrapper,
+.wrapper .vessel-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+}
 
-  .fleet-wrapper,
-  .vessel-wrapper {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: stretch;
-    padding: 4px;
-  }
+.wrapper .fleet-wrapper {
+  padding: 4px 0;
+}
+
+.wrapper .vessel-wrapper {
+  padding: 0px 4px;
+}
+
+.wrapper .topbar-wrapper {
+  display: flex;
+  width: 100%;
 }

package/src/integration-systems/integration-vessel-selector/integration-vessel-selector.stories.ts

@@ -1,13 +1,18 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {ObcIntegrationVesselSelector} from './integration-vessel-selector.js';
 import './integration-vessel-selector.js';
+import '../integration-bar/integration-bar.js';
 import '../integration-button/integration-button.js';
 import '../../icons/icon-placeholder.js';
 import {html} from 'lit';
+import {
+  IntegrationButtonType,
+  IntegrationButtonVariant,
+} from '../integration-button/integration-button.js';
 
 const meta: Meta<typeof ObcIntegrationVesselSelector> = {
   title: 'Integration Systems/Integration Vessel Selector',
-  tags: ['6.0'],
+  tags: ['alpha'],
   component: 'obc-integration-vessel-selector',
   args: {},
   parameters: {
@@ -22,14 +27,49 @@ export const Primary: Story = {
   render: () => html`
     <obc-integration-vessel-selector
       style="width: 320px; display: block; height: 100vh;"
+      hasFleet
     >
       <obc-integration-button
+        slot="fleet"
         hasLeadingIcon
         hasTrailingIcon
         .readouts=${[
           {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
           {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
         ]}
+        type=${IntegrationButtonType.rich}
+      >
+        <obi-placeholder slot="leading-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+        <div slot="label">Fleet</div>
+        <div slot="status">Status</div>
+        <div slot="info-label">Info Label</div>
+        <div slot="info-status">Info Status</div>
+      </obc-integration-button>
+      <obc-integration-button
+        hasLeadingIcon
+        .readouts=${[
+          {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
+          {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
+        ]}
+        variant=${IntegrationButtonVariant.flat}
+      >
+        <obi-placeholder slot="leading-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+        <div slot="label">Label</div>
+        <div slot="status">Status</div>
+        <div slot="info-label">Info Label</div>
+        <div slot="info-status">Info Status</div>
+      </obc-integration-button>
+      <obc-integration-button
+        hasLeadingIcon
+        .readouts=${[
+          {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
+          {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
+        ]}
+        variant=${IntegrationButtonVariant.flat}
       >
         <obi-placeholder slot="leading-icon"></obi-placeholder>
         <obi-placeholder slot="trailing-icon"></obi-placeholder>
@@ -41,12 +81,11 @@ export const Primary: Story = {
       </obc-integration-button>
       <obc-integration-button
         hasLeadingIcon
-        hasTrailingIcon
         .readouts=${[
           {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
           {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
         ]}
-        selected
+        variant=${IntegrationButtonVariant.flat}
       >
         <obi-placeholder slot="leading-icon"></obi-placeholder>
         <obi-placeholder slot="trailing-icon"></obi-placeholder>
@@ -56,14 +95,78 @@ export const Primary: Story = {
         <div slot="info-label">Info Label</div>
         <div slot="info-status">Info Status</div>
       </obc-integration-button>
+    </obc-integration-vessel-selector>
+  `,
+};
+
+export const Rich: Story = {
+  render: () => html`
+    <obc-integration-vessel-selector
+      style="width: 320px; display: block; height: 100vh;"
+      hasFleet
+    >
       <obc-integration-button
+        slot="fleet"
         hasLeadingIcon
         hasTrailingIcon
+        .readouts=${[
+          {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
+          {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
+        ]}
+        type=${IntegrationButtonType.rich}
+      >
+        <obi-placeholder slot="leading-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+        <div slot="label">Fleet</div>
+        <div slot="status">Status</div>
+        <div slot="info-label">Info Label</div>
+        <div slot="info-status">Info Status</div>
+      </obc-integration-button>
+      <obc-integration-button
+        hasLeadingIcon
+        .readouts=${[
+          {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
+          {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
+        ]}
+        variant=${IntegrationButtonVariant.flat}
+        type=${IntegrationButtonType.rich}
+        dividerBottom
+      >
+        <obi-placeholder slot="leading-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+        <div slot="label">Label</div>
+        <div slot="status">Status</div>
+        <div slot="info-label">Info Label</div>
+        <div slot="info-status">Info Status</div>
+      </obc-integration-button>
+      <obc-integration-button
+        hasLeadingIcon
+        .readouts=${[
+          {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
+          {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
+        ]}
+        variant=${IntegrationButtonVariant.flat}
+        type=${IntegrationButtonType.rich}
         dividerBottom
+      >
+        <obi-placeholder slot="leading-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+        <div slot="label">Label</div>
+        <div slot="status">Status</div>
+        <div slot="info-label">Info Label</div>
+        <div slot="info-status">Info Status</div>
+      </obc-integration-button>
+      <obc-integration-button
+        hasLeadingIcon
         .readouts=${[
           {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
           {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
         ]}
+        variant=${IntegrationButtonVariant.flat}
+        type=${IntegrationButtonType.rich}
       >
         <obi-placeholder slot="leading-icon"></obi-placeholder>
         <obi-placeholder slot="trailing-icon"></obi-placeholder>
@@ -73,13 +176,94 @@ export const Primary: Story = {
         <div slot="info-label">Info Label</div>
         <div slot="info-status">Info Status</div>
       </obc-integration-button>
+    </obc-integration-vessel-selector>
+  `,
+};
+
+export const WithTopbar: Story = {
+  render: () => html`
+    <obc-integration-vessel-selector
+      style="width: 320px; display: block; height: 100vh;"
+      hasFleet
+      hasTopbar=${true}
+    >
+      <obc-integration-bar
+        slot="topbar"
+        .showClock=${true}
+        .showUserButton=${true}
+        .showDimmingButton=${true}
+        .showSystemButton=${false}
+        .showAlertButton=${true}
+        .showScreenButton=${false}
+        .showNotificationButton=${false}
+      >
+        <obc-clock
+          integrationBarMode
+          .date=${'2021-01-01T11:11:11.111Z'}
+          .showDate=${false}
+          slot="clock"
+          .showTimezone=${false}
+          .timeZoneOffsetHours=${1}
+          .blinkOnlyBreakpointPx=${600}
+        ></obc-clock>
+      </obc-integration-bar>
       <obc-integration-button
+        slot="fleet"
         hasLeadingIcon
         hasTrailingIcon
         .readouts=${[
           {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
           {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
         ]}
+        type=${IntegrationButtonType.rich}
+      >
+        <obi-placeholder slot="leading-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+        <div slot="label">Fleet</div>
+        <div slot="status">Status</div>
+        <div slot="info-label">Info Label</div>
+        <div slot="info-status">Info Status</div>
+      </obc-integration-button>
+      <obc-integration-button
+        hasLeadingIcon
+        .readouts=${[
+          {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
+          {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
+        ]}
+        variant=${IntegrationButtonVariant.flat}
+      >
+        <obi-placeholder slot="leading-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+        <div slot="label">Label</div>
+        <div slot="status">Status</div>
+        <div slot="info-label">Info Label</div>
+        <div slot="info-status">Info Status</div>
+      </obc-integration-button>
+      <obc-integration-button
+        hasLeadingIcon
+        .readouts=${[
+          {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
+          {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
+        ]}
+        variant=${IntegrationButtonVariant.flat}
+      >
+        <obi-placeholder slot="leading-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon"></obi-placeholder>
+        <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+        <div slot="label">Label</div>
+        <div slot="status">Status</div>
+        <div slot="info-label">Info Label</div>
+        <div slot="info-status">Info Status</div>
+      </obc-integration-button>
+      <obc-integration-button
+        hasLeadingIcon
+        .readouts=${[
+          {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
+          {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
+        ]}
+        variant=${IntegrationButtonVariant.flat}
       >
         <obi-placeholder slot="leading-icon"></obi-placeholder>
         <obi-placeholder slot="trailing-icon"></obi-placeholder>

package/src/integration-systems/integration-vessel-selector/integration-vessel-selector.ts

@@ -8,14 +8,19 @@ import {property} from 'lit/decorators.js';
  *
  * @slot - The vessel to select.
  * @slot fleet - The fleet of vessels.
+ * @slot topbar - The top bar, displayed when `hasTopbar` is true.
  */
 @customElement('obc-integration-vessel-selector')
 export class ObcIntegrationVesselSelector extends LitElement {
+  @property({type: Boolean}) hasTopbar = false;
   @property({type: Boolean}) hasFleet = false;
 
   override render() {
     return html`
       <div class="wrapper">
+        ${this.hasTopbar
+          ? html`<div class="topbar-wrapper"><slot name="topbar"></slot></div>`
+          : nothing}
         ${this.hasFleet
           ? html`<div class="fleet-wrapper">
               <slot name="fleet"></slot>

package/src/mixins/alert.css

@@ -27,35 +27,6 @@
   }
 }
 
-@define-mixin alert-critical $wrapperClass {
-  &:focus {
-    outline: none;
-  }
-
-  & $(wrapperClass) {
-    border: 1px solid var(--critical-enabled-border-color);
-    background: var(--critical-enabled-background-color);
-  }
-
-  &:hover $(wrapperClass) {
-    border-color: var(--critical-hover-border-color);
-    background-color: var(--critical-hover-background-color);
-  }
-
-  &:active $(wrapperClass) {
-    border-color: var(--critical-pressed-border-color);
-    background-color: var(--critical-pressed-background-color);
-  }
-
-  &:focus-visible $(wrapperClass) {
-    background-color: var(--critical-focused-background-color);
-    border-color: var(--critical-focused-border-color);
-    outline-color: var(--border-outline-color);
-    outline-width: 4px;
-    outline-style: solid;
-  }
-}
-
 @define-mixin alert-caution $wrapperClass {
   &:focus {
     outline: none;