@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.72 → 2.0.0-next.74

package/src/components/toggle-button-vertical-group/toggle-button-vertical-group.ts

@@ -37,6 +37,10 @@ export type ObcToggleButtonVerticalGroupValueChangeEvent = CustomEvent<{
  * - **Layout behavior:**
  *   - By default, the group stretches to fill available container width, with options stacked vertically.
  *   - When `hugWidth` is true, the group shrinks to fit its content width instead of expanding.
+ * - **Empty selection mode:** When `allowEmptySelection` is true, a `value` that does not match any enabled
+ *   option leaves the group with no option selected, instead of defaulting to the first enabled option. Use
+ *   this when a selection may legitimately be absent (e.g. unset, loading, or error states) so the UI does not
+ *   imply a choice the user has not made.
  * - **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual
  *   options can also be disabled independently while the group remains enabled.
  * - **Divider management:** Automatically shows visual dividers between options and hides the divider after
@@ -128,6 +132,17 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
    */
   @property({type: Boolean}) hugWidth = false;
 
+  /**
+   * If true, a `value` that does not match any enabled option leaves the group with no option selected
+   * instead of defaulting to the first enabled option.
+   *
+   * This also applies when the currently selected option becomes disabled: the group clears its selection
+   * rather than falling back to another option.
+   *
+   * Defaults to false (the first enabled option is selected when the value does not match).
+   */
+  @property({type: Boolean}) allowEmptySelection = false;
+
   /**
    * Disables the entire group and all contained options.
    *
@@ -186,8 +201,12 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
         this.updateDividers();
         return;
       }
-      const fallback = this.getFirstSelectableOption();
-      newValue = fallback?.value || '';
+      if (this.allowEmptySelection) {
+        newValue = '';
+      } else {
+        const fallback = this.getFirstSelectableOption();
+        newValue = fallback?.value || '';
+      }
     }
 
     this.value = newValue;
@@ -253,9 +272,13 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
     });
 
     if (!this.value || !this.getOptionByValue(this.value)) {
-      const firstSelectable = this.getFirstSelectableOption();
-      if (firstSelectable) {
-        this.updateSelection(firstSelectable.value, false);
+      if (this.allowEmptySelection) {
+        this.updateSelection('', false);
+      } else {
+        const firstSelectable = this.getFirstSelectableOption();
+        if (firstSelectable) {
+          this.updateSelection(firstSelectable.value, false);
+        }
       }
     } else {
       this.updateSelection(this.value, false);
@@ -265,6 +288,10 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
   private handleOptionDisabledChange() {
     const currentOption = this.getOptionByValue(this.value);
     if (currentOption?.disabled && this.hasAnyEnabledOption()) {
+      if (this.allowEmptySelection) {
+        this.updateSelection('');
+        return;
+      }
       const firstSelectable = this.getFirstSelectableOption();
       if (firstSelectable) {
         this.updateSelection(firstSelectable.value);
@@ -303,6 +330,10 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
 
     const currentOption = this.getOptionByValue(this.value);
     if (currentOption?.disabled && this.hasAnyEnabledOption()) {
+      if (this.allowEmptySelection) {
+        this.updateSelection('');
+        return;
+      }
       const firstSelectable = this.getFirstSelectableOption();
       if (firstSelectable) {
         this.updateSelection(firstSelectable.value);

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

@@ -2,11 +2,16 @@
   box-sizing: border-box;
 }
 
+:host {
+  display: block;
+}
+
 .wrapper {
   @mixin style style=integration-normal noClick=true;
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 100%;
   background: var(--container-global-color);
   border-radius: var(
     --app-components-integration-system-dropdown-menu-border-radius
@@ -31,6 +36,9 @@
   border-top: 1px solid var(--border-divider-color);
   background: var(--container-global-color);
   border-radius: 12px;
+  &.hidden {
+    display: none;
+  }
 }
 
 .content-area {
@@ -40,6 +48,9 @@
   gap: 8px;
   align-self: stretch;
   border-radius: 8px;
+  &.hidden {
+    display: none;
+  }
 }
 
 .footer-container slot[name="buttons"]::slotted(*) {
@@ -56,7 +67,8 @@
   gap: var(--app-components-integration-system-menu-action-spacing);
 }
 
-.buttons-slot {
+.buttons-slot,
+.content-slot {
   display: contents;
 }
 
@@ -68,13 +80,14 @@
   min-height: 0;
   flex: 1;
   border-radius: 8px;
-  &.hidealarmlist {
+  &.hidden {
     display: none;
   }
 }
 
 .alertlist {
   width: 100%;
+  height: 100%;
 }
 
 .leading-icon {

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

@@ -102,31 +102,46 @@ const renderAlarms = () => html`
   </obc-alert-menu-item>
 `;
 
+const renderButtons = () => html`
+  <obc-button slot="buttons" ?fullWidth=${true}>Action 1</obc-button>
+  <obc-button slot="buttons" ?fullWidth=${true}>Ac. 2</obc-button>
+  <obc-button slot="buttons" ?fullWidth=${true}>Action number 3</obc-button>
+`;
+
+const renderContent = () => html`
+  <div slot="content" style="padding: 16px;">
+    <p style="margin: 0;">Content area</p>
+  </div>
+`;
+
 const meta: Meta<ObcIntegrationVesselMenu> = {
   title: 'Integration Systems/Integration Vessel Menu',
   component: 'obc-integration-vessel-menu',
   tags: ['alpha'],
-  args: {hideAlarmList: false},
+  args: {hasActions: true, hasAlertList: true, hasContent: true},
   argTypes: {
-    hideAlarmList: {
+    hasActions: {
+      control: 'boolean',
+    },
+    hasAlertList: {
+      control: 'boolean',
+    },
+    hasContent: {
       control: 'boolean',
     },
   },
   parameters: {
     layout: 'centered',
   },
-  decorators: [
-    (story) => html`
-      <div style="height: 400px; display: flex;">${story()}</div>
-    `,
-  ],
 };
 
 export default meta;
 type Story = StoryObj<ObcIntegrationVesselMenu>;
 
 interface IntegrationVesselMenuArgs {
-  hideAlarmList: boolean;
+  hasActions: boolean;
+  hasAlertList: boolean;
+  hasContent: boolean;
 }
 
 type IntegrationVesselMenuTemplate = (
@@ -134,69 +149,23 @@ type IntegrationVesselMenuTemplate = (
 ) => ReturnType<typeof html>;
 
 const template: IntegrationVesselMenuTemplate = (args) => html`
-  <obc-integration-vessel-menu .hideAlarmList=${args.hideAlarmList}>
-    <div slot="content" style="padding: 24px;">
-      <div style="width: 496px; height: 256;">
-        <p>Content area</p>
-      </div>
-    </div>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 1 clicked')}
-      ?fullWidth=${true}
-    >
-      <div>Action 1</div>
-    </obc-button>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 2 clicked')}
-      ?fullWidth=${true}
-    >
-      Ac. 2
-    </obc-button>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 3 clicked')}
-      ?fullWidth=${true}
-    >
-      Action number 3
-    </obc-button>
-
-    ${renderAlarms()}
-  </obc-integration-vessel-menu>
-`;
-
-const templateWithoutAlarms: IntegrationVesselMenuTemplate = (args) => html`
-  <obc-integration-vessel-menu .hideAlarmList=${args.hideAlarmList}>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 1 clicked')}
-      ?fullWidth=${true}
-    >
-      Action 1
-    </obc-button>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 2 clicked')}
-      ?fullWidth=${true}
-    >
-      Ac. 2
-    </obc-button>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 3 clicked')}
-      ?fullWidth=${true}
-    >
-      Action number 3
-    </obc-button>
-    <div slot="content" style="padding: 24px;">
-      <p>Add content here</p>
-    </div>
+  <obc-integration-vessel-menu
+    style="width: 400px;"
+    .hasActions=${args.hasActions}
+    .hasAlertList=${args.hasAlertList}
+    .hasContent=${args.hasContent}
+  >
+    ${renderButtons()} ${renderContent()} ${renderAlarms()}
   </obc-integration-vessel-menu>
 `;
 
 const templateWrappedButtons: IntegrationVesselMenuTemplate = (args) => html`
-  <obc-integration-vessel-menu .hideAlarmList=${args.hideAlarmList}>
+  <obc-integration-vessel-menu
+    style="width: 600px; height: 400px;"
+    .hasActions=${args.hasActions}
+    .hasAlertList=${args.hasAlertList}
+    .hasContent=${args.hasContent}
+  >
     <div slot="buttons">
       <div style="display: contents;">
         <obc-button ?fullWidth=${true}>Open</obc-button>
@@ -218,15 +187,76 @@ export const Default: Story = {
   render: template,
 };
 
-export const WithoutAlarms: Story = {
-  render: templateWithoutAlarms,
+export const NoActions: Story = {
+  render: template,
+  args: {hasActions: false},
+};
+
+export const NoContent: Story = {
+  render: template,
+  args: {hasContent: false},
+};
+
+export const NoAlertList: Story = {
+  render: template,
+  args: {hasAlertList: false},
 };
 
-export const WithoutAlarmsHideEmptyAlarmList: Story = {
-  render: templateWithoutAlarms,
-  args: {hideAlarmList: true},
+// Recommended bounded usage: the consumer caps the menu by setting a height on
+// the host element. The menu fills that height and the alert list scrolls within
+// the remaining space automatically — no per-slot sizing required.
+const templateConstrained: IntegrationVesselMenuTemplate = (args) => html`
+  <obc-integration-vessel-menu
+    style="width: 400px; height: 500px;"
+    .hasActions=${args.hasActions}
+    .hasAlertList=${args.hasAlertList}
+    .hasContent=${args.hasContent}
+  >
+    ${renderButtons()} ${renderContent()} ${renderAlarms()}
+  </obc-integration-vessel-menu>
+`;
+
+export const Constrained: Story = {
+  render: templateConstrained,
+};
+
+// Without consumer bounding, tall content grows the whole menu unbounded.
+const templateLongContent: IntegrationVesselMenuTemplate = (args) => html`
+  <obc-integration-vessel-menu
+    style="width: 400px;"
+    .hasActions=${args.hasActions}
+    .hasAlertList=${args.hasAlertList}
+    .hasContent=${args.hasContent}
+  >
+    ${renderButtons()}
+    <div slot="content" style="padding: 16px;">
+      <div style="height: 600px;">
+        <p style="margin: 0;">Tall content with no height cap</p>
+      </div>
+    </div>
+  </obc-integration-vessel-menu>
+`;
+
+export const LongContentOverflow: Story = {
+  render: templateLongContent,
+  args: {hasAlertList: false},
 };
 
 export const WithButtonsWrappedInDivWithoutStyling: Story = {
   render: templateWrappedButtons,
 };
+
+const templateNoAlerts: IntegrationVesselMenuTemplate = (args) => html`
+  <obc-integration-vessel-menu
+    style="width: 400px;"
+    .hasActions=${args.hasActions}
+    .hasAlertList=${args.hasAlertList}
+    .hasContent=${args.hasContent}
+  >
+    ${renderButtons()} ${renderContent()}
+  </obc-integration-vessel-menu>
+`;
+
+export const NoAlerts: Story = {
+  render: templateNoAlerts,
+};

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

@@ -7,11 +7,32 @@ 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 '../../icons/icon-unacknowledged.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.
  *
+ * ## Sizing
+ *
+ * The menu hugs its content and never reserves more space than its slotted
+ * sections need; it deliberately does not impose a height of its own. Sizing is
+ * owned by the consumer, since only the consumer knows how large the menu may
+ * grow in a given layout.
+ *
+ * From a web components perspective, drive the size from the host element and
+ * the slotted light-DOM nodes — not from component properties:
+ *
+ * - **Bound the whole menu** by giving the host element a definite `height`. The
+ *   menu fills that height and the alert list scrolls within the remaining space
+ *   while the footer and content keep their size. This is the recommended
+ *   approach. (A `max-height` alone will not bound the list — the internal
+ *   scroll needs a definite height to resolve against.)
+ * - **Size sections independently** (advanced) by sizing the slotted nodes
+ *   directly — e.g. a fixed-height `content` element, or a capped, scrollable
+ *   wrapper around the `alarms` items.
+ * - **Leave it unbounded** to let the menu grow with its content.
+ *
  * @slot buttons - Buttons shown in the footer.
  * @slot content - Main content shown in the content area.
  * @slot alarms - Alarm items rendered inside the alert list.
@@ -19,30 +40,43 @@ import '../../building-blocks/alert-list/alert-list.js';
 
 @customElement('obc-integration-vessel-menu')
 export class ObcIntegrationVesselMenu extends LitElement {
-  /** Hide the alarm list, ensuring it doesn't take space (display: none). */
-  @property({type: Boolean}) hideAlarmList = false;
+  @property({type: Boolean, attribute: false}) hasActions = true;
+  @property({type: Boolean, attribute: false}) hasAlertList = true;
+  @property({type: Boolean, attribute: false}) hasContent = true;
 
   protected override render() {
     return html`
-      <div
-        class=${classMap({
-          wrapper: true,
-        })}
-      >
-        <div class="footer-container">
+      <div class="wrapper">
+        <div
+          class=${classMap({
+            'footer-container': true,
+            hidden: !this.hasActions,
+          })}
+        >
           <slot name="buttons" class="buttons-slot"></slot>
         </div>
-        <div class="content-area">
-          <slot name="content"></slot>
+        <div
+          class=${classMap({
+            'content-area': true,
+            hidden: !this.hasContent,
+          })}
+        >
+          <slot name="content" class="content-slot"></slot>
         </div>
         <div
           class=${classMap({
             'content-container': true,
-            hidealarmlist: this.hideAlarmList,
+            hidden: !this.hasAlertList,
           })}
         >
           <obc-alert-list class="alertlist"
             ><slot name="alarms"></slot>
+            <div slot="empty-icon">
+              <obi-unacknowledged></obi-unacknowledged>
+            </div>
+            <div slot="empty-title">
+              <span>No alerts</span>
+            </div>
           </obc-alert-list>
         </div>
       </div>