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

package/src/components/alert-menu-item/alert-menu-item.stories.ts

@@ -3,7 +3,11 @@ import {html, nothing} from 'lit';
 import './alert-menu-item.js';
 import '../../icons/icon-engine.js';
 import '../alert-icon/alert-icon.js';
-import {ObcAlertMenuItem, ObcAlertMenuItemStatus} from './alert-menu-item.js';
+import {
+  ObcAlertMenuItem,
+  ObcAlertMenuItemActionState,
+  ObcAlertMenuItemStatus,
+} from './alert-menu-item.js';
 
 const meta: Meta<ObcAlertMenuItem> = {
   title: 'Application Components/Alerts/Alert Menu Item',
@@ -17,6 +21,9 @@ const meta: Meta<ObcAlertMenuItem> = {
     status: ObcAlertMenuItemStatus.Unacknowledged,
     hasIcon: false,
     shelved: false,
+    secondaryActionLabel: '',
+    primaryActionState: ObcAlertMenuItemActionState.Enabled,
+    secondaryActionState: ObcAlertMenuItemActionState.Enabled,
   },
   render: (args) => html`
     <obc-alert-menu-item
@@ -27,6 +34,9 @@ const meta: Meta<ObcAlertMenuItem> = {
       .shelved=${args.shelved}
       .hasIcon=${args.hasIcon}
       .status=${args.status}
+      .secondaryActionLabel=${args.secondaryActionLabel}
+      .primaryActionState=${args.primaryActionState}
+      .secondaryActionState=${args.secondaryActionState}
     >
       <obc-alert-icon slot="alert-icon" type="alarm" active></obc-alert-icon>
       ${args.hasIcon ? html`<obi-engine slot="icon"></obi-engine>` : nothing}
@@ -43,6 +53,15 @@ const meta: Meta<ObcAlertMenuItem> = {
     },
     hasIcon: {control: 'boolean'},
     shelved: {control: 'boolean'},
+    secondaryActionLabel: {control: 'text'},
+    primaryActionState: {
+      control: 'select',
+      options: Object.values(ObcAlertMenuItemActionState),
+    },
+    secondaryActionState: {
+      control: 'select',
+      options: Object.values(ObcAlertMenuItemActionState),
+    },
   },
 };
 
@@ -83,3 +102,23 @@ export const NoAckWarning: Story = {
     status: ObcAlertMenuItemStatus.NoAckWarning,
   },
 };
+
+export const WithSecondaryAction: Story = {
+  args: {
+    secondaryActionLabel: 'Mute',
+  },
+};
+
+export const SecondaryActionDisabled: Story = {
+  args: {
+    secondaryActionLabel: 'Mute',
+    secondaryActionState: ObcAlertMenuItemActionState.Disabled,
+  },
+};
+
+export const PrimaryActionNone: Story = {
+  args: {
+    secondaryActionLabel: 'Mute',
+    primaryActionState: ObcAlertMenuItemActionState.None,
+  },
+};

package/src/components/alert-menu-item/alert-menu-item.ts

@@ -20,6 +20,18 @@ export enum ObcAlertMenuItemStatus {
   Rectified = 'rectified',
 }
 
+/**
+ * Appearance of an alert menu item action.
+ * - `enabled`: Action is shown and interactive (default).
+ * - `disabled`: Action is shown but cannot be triggered.
+ * - `none`: Action is removed and takes no space.
+ */
+export enum ObcAlertMenuItemActionState {
+  Enabled = 'enabled',
+  Disabled = 'disabled',
+  None = 'none',
+}
+
 /**
  * `<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.
  *
@@ -33,7 +45,8 @@ export enum ObcAlertMenuItemStatus {
  * - **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary "shelved" icon appears if the alert is shelved.
  * - **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.
  * - **Expandable:** Can be toggled open/closed for additional details (via click).
- * - **Action Button:** Displays an "ACK" button for unacknowledged alerts; triggers an event when clicked.
+ * - **Action Buttons:** Displays an "ACK" button for unacknowledged alerts and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.
+ *   - Each action's appearance is controlled independently via `primaryActionState` / `secondaryActionState` (`enabled`, `disabled`, or `none`).
  * - **Animated Intro:** Optional animation when the item appears.
  * - **Size Options:** Supports single-line or multi-line layouts (see `size` property).
  *
@@ -44,6 +57,8 @@ export enum ObcAlertMenuItemStatus {
  * - Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.
  * - Use the `icon` slot for a source/system icon if needed.
  * - Only show the "ACK" action for alerts that require acknowledgment.
+ * - Provide `secondaryActionLabel` to add a second action alongside ACK.
+ * - Use `primaryActionState` / `secondaryActionState` to temporarily disable an action (`disabled`) or remove it without leaving a gap (`none`).
  * - Use the `shelved` property to indicate alerts that are temporarily deferred.
  *
  * ### Slots
@@ -54,6 +69,7 @@ export enum ObcAlertMenuItemStatus {
  *
  * ### Events
  * - **ack-click** – Fired when the ACK action button is clicked.
+ * - **ack-secondary-click** – Fired when the secondary action button is clicked.
  * - **item-click** – Fired when the alert menu item is clicked (toggles open/closed).
  *
  * ### Best Practices
@@ -81,6 +97,7 @@ export enum ObcAlertMenuItemStatus {
  * @slot icon - Optional secondary icon (e.g., source/system).
  *
  * @fires ack-click {CustomEvent<void>} Fired when the ACK action button is clicked.
+ * @fires ack-secondary-click {CustomEvent<void>} Fired when the secondary action button is clicked.
  * @fires item-click {CustomEvent<void>} Fired when the alert menu item is clicked.
  */
 @customElement('obc-alert-menu-item')
@@ -146,10 +163,51 @@ export class ObcAlertMenuItem extends LitElement {
    */
   @property({type: Boolean}) animateIntro = false;
 
+  /**
+   * The label for the secondary action button.
+   * Unlike the primary (ACK) action, the secondary label is not derived from
+   * `status`; it must be provided explicitly. The secondary action is only
+   * shown when a non-empty label is set and `secondaryActionState` is not
+   * `none`.
+   */
+  @property({type: String}) secondaryActionLabel = '';
+
+  /**
+   * Controls the appearance of the primary (ACK) action.
+   * See {@link ObcAlertMenuItemActionState} for the available states.
+   */
+  @property({type: String}) primaryActionState: ObcAlertMenuItemActionState =
+    ObcAlertMenuItemActionState.Enabled;
+
+  /**
+   * Controls the appearance of the secondary action.
+   * See {@link ObcAlertMenuItemActionState} for the available states.
+   */
+  @property({type: String}) secondaryActionState: ObcAlertMenuItemActionState =
+    ObcAlertMenuItemActionState.None;
+
   private get primaryActionLabel() {
+    if (this.primaryActionState === ObcAlertMenuItemActionState.None) {
+      return '';
+    }
     return this.status === ObcAlertMenuItemStatus.Unacknowledged ? 'ACK' : '';
   }
 
+  private get secondaryActionLabelToShow() {
+    if (this.secondaryActionState === ObcAlertMenuItemActionState.None) {
+      return '';
+    }
+    return this.secondaryActionLabel;
+  }
+
+  private get primaryActionDisabled() {
+    return this.primaryActionState === ObcAlertMenuItemActionState.Disabled;
+  }
+
+  private get secondaryActionDisabled() {
+    return this.secondaryActionState === ObcAlertMenuItemActionState.Disabled;
+  }
+
   private get hasTrailingIcon() {
     // True when we need the action container but don't have an ACK button
     return this.status !== ObcAlertMenuItemStatus.Unacknowledged;
@@ -164,6 +222,10 @@ export class ObcAlertMenuItem extends LitElement {
     this.dispatchEvent(new CustomEvent('ack-click'));
   }
 
+  private handleSecondaryActionClick() {
+    this.dispatchEvent(new CustomEvent('ack-secondary-click'));
+  }
+
   override render() {
     return html`
       <obc-message-menu-item
@@ -172,6 +234,9 @@ export class ObcAlertMenuItem extends LitElement {
         .day=${this.day}
         .time=${this.time}
         .primaryActionLabel=${this.primaryActionLabel}
+        .secondaryActionLabel=${this.secondaryActionLabelToShow}
+        .enablePrimaryAction=${!this.primaryActionDisabled}
+        .enableSecondaryAction=${!this.secondaryActionDisabled}
         .size=${this.size}
         .open=${this.open}
         .hasSecondaryIcon=${this.hasIcon}
@@ -181,6 +246,7 @@ export class ObcAlertMenuItem extends LitElement {
         hasPrimaryIcon
         @message-click=${this.handleMessageClick}
         @primary-action-click=${this.handleActionClick}
+        @secondary-action-click=${this.handleSecondaryActionClick}
       >
         <slot name="alert-icon" slot="primary-icon"></slot>
         <slot name="title" slot="title">${this.title}</slot>

package/src/components/message-menu-item/message-menu-item.stories.ts

@@ -36,6 +36,8 @@ const meta: Meta<ObcMessageMenuItem> = {
     time: {control: 'text'},
     primaryActionLabel: {control: 'text'},
     secondaryActionLabel: {control: 'text'},
+    enablePrimaryAction: {control: 'boolean'},
+    enableSecondaryAction: {control: 'boolean'},
     // Icon slots
     hasPrimaryIcon: {control: 'boolean'},
     hasSecondaryIcon: {control: 'boolean'},
@@ -57,6 +59,8 @@ const meta: Meta<ObcMessageMenuItem> = {
     time: '',
     primaryActionLabel: '',
     secondaryActionLabel: '',
+    enablePrimaryAction: true,
+    enableSecondaryAction: true,
     hasPrimaryIcon: false,
     hasSecondaryIcon: false,
     hasTrailingIcon: false,
@@ -75,6 +79,8 @@ const meta: Meta<ObcMessageMenuItem> = {
         .time=${args.time}
         .primaryActionLabel=${args.primaryActionLabel}
         .secondaryActionLabel=${args.secondaryActionLabel}
+        .enablePrimaryAction=${args.enablePrimaryAction}
+        .enableSecondaryAction=${args.enableSecondaryAction}
         .hasPrimaryIcon=${args.hasPrimaryIcon}
         .hasSecondaryIcon=${args.hasSecondaryIcon}
         .hasTrailingIcon=${args.hasTrailingIcon}
@@ -259,6 +265,18 @@ export const HorizontalWithTwoActions: Story = {
   },
 };
 
+export const HorizontalWithOneDisabledAction: Story = {
+  args: {
+    size: ObcMessageMenuItemSize.DoubleLine,
+    hasPrimaryIcon: true,
+    day: 'Yesterday',
+    time: '09:12:34',
+    primaryActionLabel: 'Action',
+    secondaryActionLabel: 'Action 2',
+    enableSecondaryAction: false,
+  },
+};
+
 export const HorizontalWithTrailingIcon: Story = {
   args: {
     size: ObcMessageMenuItemSize.DoubleLine,

package/src/components/message-menu-item/message-menu-item.ts

@@ -37,6 +37,7 @@ export enum ObcMessageMenuItemSize {
  *
  * - **Actions:**
  *   - Supports up to two action buttons via `primaryActionLabel` and `secondaryActionLabel`.
+ *   - Each action can be independently disabled by setting `enablePrimaryAction` or `enableSecondaryAction` to `false`.
  *   - In vertical layout, action buttons expand to full width.
  *
  * - **Timestamp:**
@@ -52,6 +53,7 @@ export enum ObcMessageMenuItemSize {
  * - Use `stackVertical=true` when actions need more prominence or when space is narrow.
  * - Enable `enhancedIcon` to highlight important or priority messages.
  * - Use `isShelved` to indicate messages that have been temporarily set aside.
+ * - Set `enablePrimaryAction` / `enableSecondaryAction` to `false` when an action is temporarily unavailable (e.g. awaiting a precondition) rather than removing the button.
  *
  * ## Slots
  *
@@ -134,6 +136,8 @@ export class ObcMessageMenuItem extends LitElement {
   @property({type: String}) time = '';
   @property({type: String}) primaryActionLabel = '';
   @property({type: String}) secondaryActionLabel = '';
+  @property({type: Boolean, attribute: false}) enablePrimaryAction = true;
+  @property({type: Boolean, attribute: false}) enableSecondaryAction = true;
 
   // Visibility properties for icons (slots)
   @property({type: Boolean}) hasPrimaryIcon = false;
@@ -281,6 +285,7 @@ export class ObcMessageMenuItem extends LitElement {
                     variant="normal"
                     .fullWidth=${this.isVertical}
                     @click=${this.handleSecondaryActionClick}
+                    ?disabled=${!this.enableSecondaryAction}
                   >
                     ${this.secondaryActionLabel}
                   </obc-button>`
@@ -290,6 +295,7 @@ export class ObcMessageMenuItem extends LitElement {
                     variant="normal"
                     .fullWidth=${this.isVertical}
                     @click=${this.handlePrimaryActionClick}
+                    ?disabled=${!this.enablePrimaryAction}
                   >
                     ${this.hasActionLabelSlot
                       ? html`<slot name="action-label"></slot>`