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

package/custom-elements.json

@@ -39931,7 +39931,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.\n\nPresents a concise summary of an alert or message, including status, title, description, and optional icons. Designed for use in alert menus, notification drawers, or similar lists where users need to review and acknowledge alerts efficiently.\n\n### Features\n- **Status Variants:** Supports multiple alert states via the `status` property:\n  - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.\n  - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.\n  - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.\n- **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary \"shelved\" icon appears if the alert is shelved.\n- **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.\n- **Expandable:** Can be toggled open/closed for additional details (via click).\n- **Action Button:** Displays an \"ACK\" button for unacknowledged alerts; triggers an event when clicked.\n- **Animated Intro:** Optional animation when the item appears.\n- **Size Options:** Supports single-line or multi-line layouts (see `size` property).\n\n### Usage Guidelines\nUse `obc-alert-menu-item` to represent individual alerts or notifications in a menu, list, or notification center. Ideal for scenarios where users need to quickly scan, identify, and acknowledge alerts. The component is best suited for transient or actionable notifications rather than persistent banners.\n\n- Use the `status` property to reflect the current state of the alert.\n- Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.\n- Use the `icon` slot for a source/system icon if needed.\n- Only show the \"ACK\" action for alerts that require acknowledgment.\n- Use the `shelved` property to indicate alerts that are temporarily deferred.\n\n### Slots\n| Slot Name     | Renders When...                | Purpose                                              |\n|---------------|-------------------------------|------------------------------------------------------|\n| alert-icon    | Always                        | Main alert icon representing the alert type.         |\n| icon          | If `hasIcon` is true          | Secondary icon (e.g., system/source of alert).       |\n\n### Events\n- **ack-click** – Fired when the ACK action button is clicked.\n- **item-click** – Fired when the alert menu item is clicked (toggles open/closed).\n\n### Best Practices\n- Only display the ACK action for alerts that require acknowledgment.\n- Use concise titles and descriptions for quick scanning.\n- For grouped alerts, ensure each item has a unique status and icon as appropriate.\n- Avoid overloading with too many icons; use secondary and tertiary icons only when necessary.\n- Follow standard notification design guidelines: keep actionable items prominent, and use color/iconography to indicate severity or status.\n\n**Example:**\n```\n<obc-alert-menu-item\n  status=\"unacknowledged\"\n  title=\"Engine Temperature High\"\n  description=\"Port main engine temperature exceeds normal operating range\"\n  time=\"14:30\"\n  hasIcon\n>\n  <obc-alert-icon slot=\"alert-icon\" type=\"alarm\" active></obc-alert-icon>\n  <obi-engine slot=\"icon\"></obi-engine>\n</obc-alert-menu-item>\n```",
+          "description": "`<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.\n\nPresents a concise summary of an alert or message, including status, title, description, and optional icons. Designed for use in alert menus, notification drawers, or similar lists where users need to review and acknowledge alerts efficiently.\n\n### Features\n- **Status Variants:** Supports multiple alert states via the `status` property:\n  - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.\n  - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.\n  - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.\n- **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary \"shelved\" icon appears if the alert is shelved.\n- **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.\n- **Expandable:** Can be toggled open/closed for additional details (via click).\n- **Action Buttons:** Displays an \"ACK\" button for unacknowledged alerts and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.\n  - Each action's appearance is controlled independently via `primaryActionState` / `secondaryActionState` (`enabled`, `disabled`, or `none`).\n- **Animated Intro:** Optional animation when the item appears.\n- **Size Options:** Supports single-line or multi-line layouts (see `size` property).\n\n### Usage Guidelines\nUse `obc-alert-menu-item` to represent individual alerts or notifications in a menu, list, or notification center. Ideal for scenarios where users need to quickly scan, identify, and acknowledge alerts. The component is best suited for transient or actionable notifications rather than persistent banners.\n\n- Use the `status` property to reflect the current state of the alert.\n- Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.\n- Use the `icon` slot for a source/system icon if needed.\n- Only show the \"ACK\" action for alerts that require acknowledgment.\n- Provide `secondaryActionLabel` to add a second action alongside ACK.\n- Use `primaryActionState` / `secondaryActionState` to temporarily disable an action (`disabled`) or remove it without leaving a gap (`none`).\n- Use the `shelved` property to indicate alerts that are temporarily deferred.\n\n### Slots\n| Slot Name     | Renders When...                | Purpose                                              |\n|---------------|-------------------------------|------------------------------------------------------|\n| alert-icon    | Always                        | Main alert icon representing the alert type.         |\n| icon          | If `hasIcon` is true          | Secondary icon (e.g., system/source of alert).       |\n\n### Events\n- **ack-click** – Fired when the ACK action button is clicked.\n- **ack-secondary-click** – Fired when the secondary action button is clicked.\n- **item-click** – Fired when the alert menu item is clicked (toggles open/closed).\n\n### Best Practices\n- Only display the ACK action for alerts that require acknowledgment.\n- Use concise titles and descriptions for quick scanning.\n- For grouped alerts, ensure each item has a unique status and icon as appropriate.\n- Avoid overloading with too many icons; use secondary and tertiary icons only when necessary.\n- Follow standard notification design guidelines: keep actionable items prominent, and use color/iconography to indicate severity or status.\n\n**Example:**\n```\n<obc-alert-menu-item\n  status=\"unacknowledged\"\n  title=\"Engine Temperature High\"\n  description=\"Port main engine temperature exceeds normal operating range\"\n  time=\"14:30\"\n  hasIcon\n>\n  <obc-alert-icon slot=\"alert-icon\" type=\"alarm\" active></obc-alert-icon>\n  <obi-engine slot=\"icon\"></obi-engine>\n</obc-alert-menu-item>\n```",
           "name": "ObcAlertMenuItem",
           "slots": [
             {
@@ -40041,12 +40041,58 @@
               "description": "Whether to animate the item's appearance (intro animation).",
               "attribute": "animateIntro"
             },
+            {
+              "kind": "field",
+              "name": "secondaryActionLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label for the secondary action button.\nUnlike the primary (ACK) action, the secondary label is not derived from\n`status`; it must be provided explicitly. The secondary action is only\nshown when a non-empty label is set and `secondaryActionState` is not\n`none`.",
+              "attribute": "secondaryActionLabel"
+            },
+            {
+              "kind": "field",
+              "name": "primaryActionState",
+              "type": {
+                "text": "ObcAlertMenuItemActionState"
+              },
+              "description": "Controls the appearance of the primary (ACK) action.\nSee ObcAlertMenuItemActionState for the available states.",
+              "attribute": "primaryActionState"
+            },
+            {
+              "kind": "field",
+              "name": "secondaryActionState",
+              "type": {
+                "text": "ObcAlertMenuItemActionState"
+              },
+              "description": "Controls the appearance of the secondary action.\nSee ObcAlertMenuItemActionState for the available states.",
+              "attribute": "secondaryActionState"
+            },
             {
               "kind": "field",
               "name": "primaryActionLabel",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "secondaryActionLabelToShow",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "primaryActionDisabled",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "secondaryActionDisabled",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "hasTrailingIcon",
@@ -40062,6 +40108,11 @@
               "kind": "method",
               "name": "handleActionClick",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSecondaryActionClick",
+              "privacy": "private"
             }
           ],
           "events": [
@@ -40078,6 +40129,13 @@
                 "text": "CustomEvent"
               },
               "description": "{CustomEvent<void>} Fired when the ACK action button is clicked."
+            },
+            {
+              "name": "ack-secondary-click",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "{CustomEvent<void>} Fired when the secondary action button is clicked."
             }
           ],
           "attributes": [
@@ -40165,6 +40223,31 @@
               "default": "false",
               "description": "Whether to animate the item's appearance (intro animation).",
               "fieldName": "animateIntro"
+            },
+            {
+              "name": "secondaryActionLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label for the secondary action button.\nUnlike the primary (ACK) action, the secondary label is not derived from\n`status`; it must be provided explicitly. The secondary action is only\nshown when a non-empty label is set and `secondaryActionState` is not\n`none`.",
+              "fieldName": "secondaryActionLabel"
+            },
+            {
+              "name": "primaryActionState",
+              "type": {
+                "text": "ObcAlertMenuItemActionState"
+              },
+              "description": "Controls the appearance of the primary (ACK) action.\nSee ObcAlertMenuItemActionState for the available states.",
+              "fieldName": "primaryActionState"
+            },
+            {
+              "name": "secondaryActionState",
+              "type": {
+                "text": "ObcAlertMenuItemActionState"
+              },
+              "description": "Controls the appearance of the secondary action.\nSee ObcAlertMenuItemActionState for the available states.",
+              "fieldName": "secondaryActionState"
             }
           ],
           "superclass": {
@@ -49918,7 +50001,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-message-menu-item>` – An expandable message or notification item for use in message lists, notification panels, or alert menus.\n\nDisplays a concise message row with optional icons, title, description, timestamp, and action buttons. Clicking the item expands it to reveal the full content. Designed for scannable lists where users may need to quickly review and act on individual messages.\n\n## Features\n\n- **Size Variants:**\n  - `single-line`: Compact layout with title and description on one line (default).\n  - `double-line`: Two-line layout with title on top and description below.\n  - When clicked, both variants expand to show full multi-line content.\n\n- **Stack Direction:**\n  - `stackVertical=false` (default): Action buttons appear inline to the right of the content.\n  - `stackVertical=true`: Action buttons appear below the content, spanning full width.\n\n- **Icon Options:**\n  - Primary and secondary icon slots for visual context or status indicators.\n  - Enhanced icon mode (`enhancedIcon`) increases icon size for emphasis.\n  - Trailing icon slot (horizontal layout only) for additional actions.\n  - Shelved state (`isShelved`) displays a shelf icon automatically.\n\n- **Actions:**\n  - Supports up to two action buttons via `primaryActionLabel` and `secondaryActionLabel`.\n  - In vertical layout, action buttons expand to full width.\n\n- **Timestamp:**\n  - Optional day and time display via `day` and `time` properties.\n\n## Usage Guidelines\n\nUse `obc-message-menu-item` to present individual notifications, alerts, or messages within a scrollable list. Ideal for scenarios where users need to quickly scan items, expand for details, or take immediate action.\n\n- Use `single-line` for high-density lists where space is limited.\n- Use `double-line` when the description needs more visibility in the collapsed state.\n- Keep `stackVertical=false` (default) when actions should be quickly accessible inline.\n- Use `stackVertical=true` when actions need more prominence or when space is narrow.\n- Enable `enhancedIcon` to highlight important or priority messages.\n- Use `isShelved` to indicate messages that have been temporarily set aside.\n\n## Slots\n\nText content for `title`, `description`, and `action-label` supports both props (for plain text) and slots (for rich HTML like `CO<sub>2</sub>`).\nTo use a slot, set the corresponding `has*Slot` prop to `true`.\n\n| Slot Name        | Enabled By               | Purpose                                           |\n|------------------|--------------------------|---------------------------------------------------|\n| `title`          | `hasTitleSlot=true`      | Message title. Use slot for rich HTML.            |\n| `description`    | `hasDescriptionSlot=true`| Message description. Use slot for rich HTML.      |\n| `action-label`   | `hasActionLabelSlot=true`| Primary action button label. Use slot for rich HTML. |\n| `primary-icon`   | `hasPrimaryIcon=true`    | Main icon representing message type or status.    |\n| `secondary-icon` | `hasSecondaryIcon=true`  | Additional icon for secondary status or context.  |\n| `trailing-icon`  | `hasTrailingIcon=true` (horizontal only) | Icon button after action buttons. |\n\n## Events\n\n- `message-click` – Fired when the message item is clicked. Detail includes `{ open: boolean }`.\n- `primary-action-click` – Fired when the primary action button is clicked.\n- `secondary-action-click` – Fired when the secondary action button is clicked.\n\n## Example\n\nUsing props (simple text):\n```html\n<obc-message-menu-item\n  size=\"double-line\"\n  title=\"System Update\"\n  description=\"A new update is available for installation.\"\n  day=\"Yesterday\"\n  time=\"14:32\"\n  primaryActionLabel=\"Install\"\n  hasPrimaryIcon\n>\n  <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n</obc-message-menu-item>\n```\n\nUsing slots (rich HTML):\n```html\n<obc-message-menu-item\n  size=\"double-line\"\n  day=\"Yesterday\"\n  time=\"14:32\"\n  hasPrimaryIcon\n  hasTitleSlot\n  hasDescriptionSlot\n  hasActionLabelSlot\n>\n  <span slot=\"title\">High CO<sub>2</sub> level</span>\n  <span slot=\"description\">CO<sub>2</sub> concentration exceeds safe limits.</span>\n  <span slot=\"action-label\">Acknowledge</span>\n  <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n</obc-message-menu-item>\n```",
+          "description": "`<obc-message-menu-item>` – An expandable message or notification item for use in message lists, notification panels, or alert menus.\n\nDisplays a concise message row with optional icons, title, description, timestamp, and action buttons. Clicking the item expands it to reveal the full content. Designed for scannable lists where users may need to quickly review and act on individual messages.\n\n## Features\n\n- **Size Variants:**\n  - `single-line`: Compact layout with title and description on one line (default).\n  - `double-line`: Two-line layout with title on top and description below.\n  - When clicked, both variants expand to show full multi-line content.\n\n- **Stack Direction:**\n  - `stackVertical=false` (default): Action buttons appear inline to the right of the content.\n  - `stackVertical=true`: Action buttons appear below the content, spanning full width.\n\n- **Icon Options:**\n  - Primary and secondary icon slots for visual context or status indicators.\n  - Enhanced icon mode (`enhancedIcon`) increases icon size for emphasis.\n  - Trailing icon slot (horizontal layout only) for additional actions.\n  - Shelved state (`isShelved`) displays a shelf icon automatically.\n\n- **Actions:**\n  - Supports up to two action buttons via `primaryActionLabel` and `secondaryActionLabel`.\n  - Each action can be independently disabled by setting `enablePrimaryAction` or `enableSecondaryAction` to `false`.\n  - In vertical layout, action buttons expand to full width.\n\n- **Timestamp:**\n  - Optional day and time display via `day` and `time` properties.\n\n## Usage Guidelines\n\nUse `obc-message-menu-item` to present individual notifications, alerts, or messages within a scrollable list. Ideal for scenarios where users need to quickly scan items, expand for details, or take immediate action.\n\n- Use `single-line` for high-density lists where space is limited.\n- Use `double-line` when the description needs more visibility in the collapsed state.\n- Keep `stackVertical=false` (default) when actions should be quickly accessible inline.\n- Use `stackVertical=true` when actions need more prominence or when space is narrow.\n- Enable `enhancedIcon` to highlight important or priority messages.\n- Use `isShelved` to indicate messages that have been temporarily set aside.\n- Set `enablePrimaryAction` / `enableSecondaryAction` to `false` when an action is temporarily unavailable (e.g. awaiting a precondition) rather than removing the button.\n\n## Slots\n\nText content for `title`, `description`, and `action-label` supports both props (for plain text) and slots (for rich HTML like `CO<sub>2</sub>`).\nTo use a slot, set the corresponding `has*Slot` prop to `true`.\n\n| Slot Name        | Enabled By               | Purpose                                           |\n|------------------|--------------------------|---------------------------------------------------|\n| `title`          | `hasTitleSlot=true`      | Message title. Use slot for rich HTML.            |\n| `description`    | `hasDescriptionSlot=true`| Message description. Use slot for rich HTML.      |\n| `action-label`   | `hasActionLabelSlot=true`| Primary action button label. Use slot for rich HTML. |\n| `primary-icon`   | `hasPrimaryIcon=true`    | Main icon representing message type or status.    |\n| `secondary-icon` | `hasSecondaryIcon=true`  | Additional icon for secondary status or context.  |\n| `trailing-icon`  | `hasTrailingIcon=true` (horizontal only) | Icon button after action buttons. |\n\n## Events\n\n- `message-click` – Fired when the message item is clicked. Detail includes `{ open: boolean }`.\n- `primary-action-click` – Fired when the primary action button is clicked.\n- `secondary-action-click` – Fired when the secondary action button is clicked.\n\n## Example\n\nUsing props (simple text):\n```html\n<obc-message-menu-item\n  size=\"double-line\"\n  title=\"System Update\"\n  description=\"A new update is available for installation.\"\n  day=\"Yesterday\"\n  time=\"14:32\"\n  primaryActionLabel=\"Install\"\n  hasPrimaryIcon\n>\n  <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n</obc-message-menu-item>\n```\n\nUsing slots (rich HTML):\n```html\n<obc-message-menu-item\n  size=\"double-line\"\n  day=\"Yesterday\"\n  time=\"14:32\"\n  hasPrimaryIcon\n  hasTitleSlot\n  hasDescriptionSlot\n  hasActionLabelSlot\n>\n  <span slot=\"title\">High CO<sub>2</sub> level</span>\n  <span slot=\"description\">CO<sub>2</sub> concentration exceeds safe limits.</span>\n  <span slot=\"action-label\">Acknowledge</span>\n  <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n</obc-message-menu-item>\n```",
           "name": "ObcMessageMenuItem",
           "slots": [
             {
@@ -50036,6 +50119,22 @@
               "default": "''",
               "attribute": "secondaryActionLabel"
             },
+            {
+              "kind": "field",
+              "name": "enablePrimaryAction",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "enableSecondaryAction",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
             {
               "kind": "field",
               "name": "hasPrimaryIcon",

package/dist/components/alert-menu-item/alert-menu-item.d.ts

@@ -13,6 +13,17 @@ export declare enum ObcAlertMenuItemStatus {
     NoAckWarning = "no-ack-warning",
     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 declare 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.
  *
@@ -26,7 +37,8 @@ export declare 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).
  *
@@ -37,6 +49,8 @@ export declare 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
@@ -47,6 +61,7 @@ export declare 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
@@ -74,6 +89,7 @@ export declare 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.
  */
 export declare class ObcAlertMenuItem extends LitElement {
@@ -126,10 +142,32 @@ export declare class ObcAlertMenuItem extends LitElement {
      * Whether to animate the item's appearance (intro animation).
      */
     animateIntro: boolean;
+    /**
+     * 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`.
+     */
+    secondaryActionLabel: string;
+    /**
+     * Controls the appearance of the primary (ACK) action.
+     * See {@link ObcAlertMenuItemActionState} for the available states.
+     */
+    primaryActionState: ObcAlertMenuItemActionState;
+    /**
+     * Controls the appearance of the secondary action.
+     * See {@link ObcAlertMenuItemActionState} for the available states.
+     */
+    secondaryActionState: ObcAlertMenuItemActionState;
     private get primaryActionLabel();
+    private get secondaryActionLabelToShow();
+    private get primaryActionDisabled();
+    private get secondaryActionDisabled();
     private get hasTrailingIcon();
     private handleMessageClick;
     private handleActionClick;
+    private handleSecondaryActionClick;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/components/alert-menu-item/alert-menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,2CAA2C,CAAC;AACnD,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAC,sBAAsB,EAAC,MAAM,2CAA2C,CAAC;AAGjF,oBAAY,sBAAsB;IAChC,cAAc,mBAAmB;IACjC,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,UAAU,iBAAiB;IAC3B,YAAY,mBAAmB;IAC/B,SAAS,cAAc;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;OAGG;IACuC,OAAO,UAAS;IAE1D;;OAEG;IACgC,KAAK,SAAM;IAE9C;;OAEG;IACuB,WAAW,SAAM;IAE3C;;OAEG;IACuB,GAAG,SAAM;IAEnC;;OAEG;IACuB,IAAI,SAAM;IAEpC;;;;;OAKG;IACsC,MAAM,yBACP;IAExC;;;OAGG;IACwB,IAAI,UAAS;IAExC;;;;;OAKG;IACuB,IAAI,EAAE,sBAAsB,CAClB;IAEpC;;OAEG;IACwB,YAAY,UAAS;IAEhD,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,eAAe,GAG1B;IAED,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,iBAAiB;IAIhB,MAAM;IA8Cf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"alert-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,2CAA2C,CAAC;AACnD,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAC,sBAAsB,EAAC,MAAM,2CAA2C,CAAC;AAGjF,oBAAY,sBAAsB;IAChC,cAAc,mBAAmB;IACjC,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,UAAU,iBAAiB;IAC3B,YAAY,mBAAmB;IAC/B,SAAS,cAAc;CACxB;AAED;;;;;GAKG;AACH,oBAAY,2BAA2B;IACrC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;OAGG;IACuC,OAAO,UAAS;IAE1D;;OAEG;IACgC,KAAK,SAAM;IAE9C;;OAEG;IACuB,WAAW,SAAM;IAE3C;;OAEG;IACuB,GAAG,SAAM;IAEnC;;OAEG;IACuB,IAAI,SAAM;IAEpC;;;;;OAKG;IACsC,MAAM,yBACP;IAExC;;;OAGG;IACwB,IAAI,UAAS;IAExC;;;;;OAKG;IACuB,IAAI,EAAE,sBAAsB,CAClB;IAEpC;;OAEG;IACwB,YAAY,UAAS;IAEhD;;;;;;OAMG;IACuB,oBAAoB,SAAM;IAEpD;;;OAGG;IACuB,kBAAkB,EAAE,2BAA2B,CACnC;IAEtC;;;OAGG;IACuB,oBAAoB,EAAE,2BAA2B,CACxC;IAEnC,OAAO,KAAK,kBAAkB,GAK7B;IAED,OAAO,KAAK,0BAA0B,GAKrC;IAED,OAAO,KAAK,qBAAqB,GAEhC;IAED,OAAO,KAAK,uBAAuB,GAElC;IAED,OAAO,KAAK,eAAe,GAG1B;IAED,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,0BAA0B;IAIzB,MAAM;IAkDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/alert-menu-item/alert-menu-item.js

@@ -27,6 +27,12 @@ var ObcAlertMenuItemStatus = /* @__PURE__ */ ((ObcAlertMenuItemStatus2) => {
   ObcAlertMenuItemStatus2["Rectified"] = "rectified";
   return ObcAlertMenuItemStatus2;
 })(ObcAlertMenuItemStatus || {});
+var ObcAlertMenuItemActionState = /* @__PURE__ */ ((ObcAlertMenuItemActionState2) => {
+  ObcAlertMenuItemActionState2["Enabled"] = "enabled";
+  ObcAlertMenuItemActionState2["Disabled"] = "disabled";
+  ObcAlertMenuItemActionState2["None"] = "none";
+  return ObcAlertMenuItemActionState2;
+})(ObcAlertMenuItemActionState || {});
 let ObcAlertMenuItem = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -40,10 +46,28 @@ let ObcAlertMenuItem = class extends LitElement {
     this.open = false;
     this.size = ObcMessageMenuItemSize.SingleLine;
     this.animateIntro = false;
+    this.secondaryActionLabel = "";
+    this.primaryActionState = "enabled";
+    this.secondaryActionState = "none";
   }
   get primaryActionLabel() {
+    if (this.primaryActionState === "none") {
+      return "";
+    }
     return this.status === "unacknowledged" ? "ACK" : "";
   }
+  get secondaryActionLabelToShow() {
+    if (this.secondaryActionState === "none") {
+      return "";
+    }
+    return this.secondaryActionLabel;
+  }
+  get primaryActionDisabled() {
+    return this.primaryActionState === "disabled";
+  }
+  get secondaryActionDisabled() {
+    return this.secondaryActionState === "disabled";
+  }
   get hasTrailingIcon() {
     return this.status !== "unacknowledged";
   }
@@ -54,6 +78,9 @@ let ObcAlertMenuItem = class extends LitElement {
   handleActionClick() {
     this.dispatchEvent(new CustomEvent("ack-click"));
   }
+  handleSecondaryActionClick() {
+    this.dispatchEvent(new CustomEvent("ack-secondary-click"));
+  }
   render() {
     return html`
       <obc-message-menu-item
@@ -62,6 +89,9 @@ let ObcAlertMenuItem = class 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}
@@ -71,6 +101,7 @@ let ObcAlertMenuItem = class 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>
@@ -127,11 +158,21 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcAlertMenuItem.prototype, "animateIntro", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertMenuItem.prototype, "secondaryActionLabel", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertMenuItem.prototype, "primaryActionState", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertMenuItem.prototype, "secondaryActionState", 2);
 ObcAlertMenuItem = __decorateClass([
   customElement("obc-alert-menu-item")
 ], ObcAlertMenuItem);
 export {
   ObcAlertMenuItem,
+  ObcAlertMenuItemActionState,
   ObcAlertMenuItemStatus
 };
 //# sourceMappingURL=alert-menu-item.js.map

package/dist/components/alert-menu-item/alert-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-menu-item.js","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {choose} from 'lit/directives/choose.js';\n\nimport compentStyle from './alert-menu-item.css?inline';\nimport '../message-menu-item/message-menu-item.js';\nimport '../alert-icon/alert-icon.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-alarm-noack-iec.js';\nimport '../../icons/icon-warning-noack-iec.js';\nimport {ObcMessageMenuItemSize} from '../message-menu-item/message-menu-item.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcAlertMenuItemStatus {\n  Unacknowledged = 'unacknowledged',\n  Caution = 'caution',\n  Acknowledged = 'acknowledged',\n  NoAckAlarm = 'no-ack-alarm',\n  NoAckWarning = 'no-ack-warning',\n  Rectified = 'rectified',\n}\n\n/**\n * `<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.\n *\n * Presents a concise summary of an alert or message, including status, title, description, and optional icons. Designed for use in alert menus, notification drawers, or similar lists where users need to review and acknowledge alerts efficiently.\n *\n * ### Features\n * - **Status Variants:** Supports multiple alert states via the `status` property:\n *   - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.\n *   - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.\n *   - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.\n * - **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary \"shelved\" icon appears if the alert is shelved.\n * - **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.\n * - **Expandable:** Can be toggled open/closed for additional details (via click).\n * - **Action Button:** Displays an \"ACK\" button for unacknowledged alerts; triggers an event when clicked.\n * - **Animated Intro:** Optional animation when the item appears.\n * - **Size Options:** Supports single-line or multi-line layouts (see `size` property).\n *\n * ### Usage Guidelines\n * Use `obc-alert-menu-item` to represent individual alerts or notifications in a menu, list, or notification center. Ideal for scenarios where users need to quickly scan, identify, and acknowledge alerts. The component is best suited for transient or actionable notifications rather than persistent banners.\n *\n * - Use the `status` property to reflect the current state of the alert.\n * - Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.\n * - Use the `icon` slot for a source/system icon if needed.\n * - Only show the \"ACK\" action for alerts that require acknowledgment.\n * - Use the `shelved` property to indicate alerts that are temporarily deferred.\n *\n * ### Slots\n * | Slot Name     | Renders When...                | Purpose                                              |\n * |---------------|-------------------------------|------------------------------------------------------|\n * | alert-icon    | Always                        | Main alert icon representing the alert type.         |\n * | icon          | If `hasIcon` is true          | Secondary icon (e.g., system/source of alert).       |\n *\n * ### Events\n * - **ack-click** – Fired when the ACK action button is clicked.\n * - **item-click** – Fired when the alert menu item is clicked (toggles open/closed).\n *\n * ### Best Practices\n * - Only display the ACK action for alerts that require acknowledgment.\n * - Use concise titles and descriptions for quick scanning.\n * - For grouped alerts, ensure each item has a unique status and icon as appropriate.\n * - Avoid overloading with too many icons; use secondary and tertiary icons only when necessary.\n * - Follow standard notification design guidelines: keep actionable items prominent, and use color/iconography to indicate severity or status.\n *\n * **Example:**\n * ```\n * <obc-alert-menu-item\n *   status=\"unacknowledged\"\n *   title=\"Engine Temperature High\"\n *   description=\"Port main engine temperature exceeds normal operating range\"\n *   time=\"14:30\"\n *   hasIcon\n * >\n *   <obc-alert-icon slot=\"alert-icon\" type=\"alarm\" active></obc-alert-icon>\n *   <obi-engine slot=\"icon\"></obi-engine>\n * </obc-alert-menu-item>\n * ```\n *\n * @slot alert-icon - The main alert icon representing the alert type.\n * @slot icon - Optional secondary icon (e.g., source/system).\n *\n * @fires ack-click {CustomEvent<void>} Fired when the ACK action button is clicked.\n * @fires item-click {CustomEvent<void>} Fired when the alert menu item is clicked.\n */\n@customElement('obc-alert-menu-item')\nexport class ObcAlertMenuItem extends LitElement {\n  /**\n   * Whether to display a secondary icon (e.g., system/source) in the item.\n   * When true, the `icon` slot is rendered.\n   */\n  @property({type: Boolean}) hasIcon = false;\n\n  /**\n   * Indicates if the alert is shelved (temporarily deferred).\n   * When true, a tertiary icon is shown to represent the shelved state.\n   */\n  @property({type: Boolean, reflect: true}) shelved = false;\n\n  /**\n   * The title of the alert.\n   */\n  @property({type: String}) override title = '';\n\n  /**\n   * The description of the alert.\n   */\n  @property({type: String}) description = '';\n\n  /**\n   * The day label for the alert (e.g., \"Yesterday\").\n   */\n  @property({type: String}) day = '';\n\n  /**\n   * The time label for the alert (e.g., \"14:30\").\n   */\n  @property({type: String}) time = '';\n\n  /**\n   * The current status of the alert item.\n   * Determines visual style, icon, and action button visibility.\n   * Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified'.\n   * Default is 'unacknowledged'.\n   */\n  @property({type: String, reflect: true}) status =\n    ObcAlertMenuItemStatus.Unacknowledged;\n\n  /**\n   * Whether the item is expanded/open to show additional details.\n   * Toggled by clicking the item.\n   */\n  @property({type: Boolean}) open = false;\n\n  /**\n   * Layout size of the menu item.\n   * Controls whether content is single-line or multi-line.\n   * Possible values: 'single-line', 'multi-line'.\n   * Default is 'single-line'.\n   */\n  @property({type: String}) size: ObcMessageMenuItemSize =\n    ObcMessageMenuItemSize.SingleLine;\n\n  /**\n   * Whether to animate the item's appearance (intro animation).\n   */\n  @property({type: Boolean}) animateIntro = false;\n\n  private get primaryActionLabel() {\n    return this.status === ObcAlertMenuItemStatus.Unacknowledged ? 'ACK' : '';\n  }\n\n  private get hasTrailingIcon() {\n    // True when we need the action container but don't have an ACK button\n    return this.status !== ObcAlertMenuItemStatus.Unacknowledged;\n  }\n\n  private handleMessageClick() {\n    this.dispatchEvent(new CustomEvent('item-click'));\n    this.open = !this.open;\n  }\n\n  private handleActionClick() {\n    this.dispatchEvent(new CustomEvent('ack-click'));\n  }\n\n  override render() {\n    return html`\n      <obc-message-menu-item\n        .title=${this.title}\n        .description=${this.description}\n        .day=${this.day}\n        .time=${this.time}\n        .primaryActionLabel=${this.primaryActionLabel}\n        .size=${this.size}\n        .open=${this.open}\n        .hasSecondaryIcon=${this.hasIcon}\n        .isShelved=${this.shelved}\n        .hasTrailingIcon=${this.hasTrailingIcon}\n        enhancedIcon\n        hasPrimaryIcon\n        @message-click=${this.handleMessageClick}\n        @primary-action-click=${this.handleActionClick}\n      >\n        <slot name=\"alert-icon\" slot=\"primary-icon\"></slot>\n        <slot name=\"title\" slot=\"title\">${this.title}</slot>\n        <slot name=\"description\" slot=\"description\">${this.description}</slot>\n        ${this.hasIcon\n          ? html`<slot name=\"icon\" slot=\"secondary-icon\"></slot>`\n          : nothing}\n        ${choose(this.status, [\n          [\n            ObcAlertMenuItemStatus.NoAckAlarm,\n            () =>\n              html`<obi-alarm-noack-iec\n                slot=\"trailing-icon\"\n                useCssColor\n              ></obi-alarm-noack-iec>`,\n          ],\n          [\n            ObcAlertMenuItemStatus.NoAckWarning,\n            () =>\n              html`<obi-warning-noack-iec\n                slot=\"trailing-icon\"\n                useCssColor\n              ></obi-warning-noack-iec>`,\n          ],\n        ])}\n      </obc-message-menu-item>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ob-alert-menu-item': ObcAlertMenuItem;\n  }\n}\n"],"names":["ObcAlertMenuItemStatus"],"mappings":"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"}
+{"version":3,"file":"alert-menu-item.js","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {choose} from 'lit/directives/choose.js';\n\nimport compentStyle from './alert-menu-item.css?inline';\nimport '../message-menu-item/message-menu-item.js';\nimport '../alert-icon/alert-icon.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-alarm-noack-iec.js';\nimport '../../icons/icon-warning-noack-iec.js';\nimport {ObcMessageMenuItemSize} from '../message-menu-item/message-menu-item.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcAlertMenuItemStatus {\n  Unacknowledged = 'unacknowledged',\n  Caution = 'caution',\n  Acknowledged = 'acknowledged',\n  NoAckAlarm = 'no-ack-alarm',\n  NoAckWarning = 'no-ack-warning',\n  Rectified = 'rectified',\n}\n\n/**\n * Appearance of an alert menu item action.\n * - `enabled`: Action is shown and interactive (default).\n * - `disabled`: Action is shown but cannot be triggered.\n * - `none`: Action is removed and takes no space.\n */\nexport enum ObcAlertMenuItemActionState {\n  Enabled = 'enabled',\n  Disabled = 'disabled',\n  None = 'none',\n}\n\n/**\n * `<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.\n *\n * Presents a concise summary of an alert or message, including status, title, description, and optional icons. Designed for use in alert menus, notification drawers, or similar lists where users need to review and acknowledge alerts efficiently.\n *\n * ### Features\n * - **Status Variants:** Supports multiple alert states via the `status` property:\n *   - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.\n *   - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.\n *   - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.\n * - **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary \"shelved\" icon appears if the alert is shelved.\n * - **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.\n * - **Expandable:** Can be toggled open/closed for additional details (via click).\n * - **Action Buttons:** Displays an \"ACK\" button for unacknowledged alerts and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.\n *   - Each action's appearance is controlled independently via `primaryActionState` / `secondaryActionState` (`enabled`, `disabled`, or `none`).\n * - **Animated Intro:** Optional animation when the item appears.\n * - **Size Options:** Supports single-line or multi-line layouts (see `size` property).\n *\n * ### Usage Guidelines\n * Use `obc-alert-menu-item` to represent individual alerts or notifications in a menu, list, or notification center. Ideal for scenarios where users need to quickly scan, identify, and acknowledge alerts. The component is best suited for transient or actionable notifications rather than persistent banners.\n *\n * - Use the `status` property to reflect the current state of the alert.\n * - Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.\n * - Use the `icon` slot for a source/system icon if needed.\n * - Only show the \"ACK\" action for alerts that require acknowledgment.\n * - Provide `secondaryActionLabel` to add a second action alongside ACK.\n * - Use `primaryActionState` / `secondaryActionState` to temporarily disable an action (`disabled`) or remove it without leaving a gap (`none`).\n * - Use the `shelved` property to indicate alerts that are temporarily deferred.\n *\n * ### Slots\n * | Slot Name     | Renders When...                | Purpose                                              |\n * |---------------|-------------------------------|------------------------------------------------------|\n * | alert-icon    | Always                        | Main alert icon representing the alert type.         |\n * | icon          | If `hasIcon` is true          | Secondary icon (e.g., system/source of alert).       |\n *\n * ### Events\n * - **ack-click** – Fired when the ACK action button is clicked.\n * - **ack-secondary-click** – Fired when the secondary action button is clicked.\n * - **item-click** – Fired when the alert menu item is clicked (toggles open/closed).\n *\n * ### Best Practices\n * - Only display the ACK action for alerts that require acknowledgment.\n * - Use concise titles and descriptions for quick scanning.\n * - For grouped alerts, ensure each item has a unique status and icon as appropriate.\n * - Avoid overloading with too many icons; use secondary and tertiary icons only when necessary.\n * - Follow standard notification design guidelines: keep actionable items prominent, and use color/iconography to indicate severity or status.\n *\n * **Example:**\n * ```\n * <obc-alert-menu-item\n *   status=\"unacknowledged\"\n *   title=\"Engine Temperature High\"\n *   description=\"Port main engine temperature exceeds normal operating range\"\n *   time=\"14:30\"\n *   hasIcon\n * >\n *   <obc-alert-icon slot=\"alert-icon\" type=\"alarm\" active></obc-alert-icon>\n *   <obi-engine slot=\"icon\"></obi-engine>\n * </obc-alert-menu-item>\n * ```\n *\n * @slot alert-icon - The main alert icon representing the alert type.\n * @slot icon - Optional secondary icon (e.g., source/system).\n *\n * @fires ack-click {CustomEvent<void>} Fired when the ACK action button is clicked.\n * @fires ack-secondary-click {CustomEvent<void>} Fired when the secondary action button is clicked.\n * @fires item-click {CustomEvent<void>} Fired when the alert menu item is clicked.\n */\n@customElement('obc-alert-menu-item')\nexport class ObcAlertMenuItem extends LitElement {\n  /**\n   * Whether to display a secondary icon (e.g., system/source) in the item.\n   * When true, the `icon` slot is rendered.\n   */\n  @property({type: Boolean}) hasIcon = false;\n\n  /**\n   * Indicates if the alert is shelved (temporarily deferred).\n   * When true, a tertiary icon is shown to represent the shelved state.\n   */\n  @property({type: Boolean, reflect: true}) shelved = false;\n\n  /**\n   * The title of the alert.\n   */\n  @property({type: String}) override title = '';\n\n  /**\n   * The description of the alert.\n   */\n  @property({type: String}) description = '';\n\n  /**\n   * The day label for the alert (e.g., \"Yesterday\").\n   */\n  @property({type: String}) day = '';\n\n  /**\n   * The time label for the alert (e.g., \"14:30\").\n   */\n  @property({type: String}) time = '';\n\n  /**\n   * The current status of the alert item.\n   * Determines visual style, icon, and action button visibility.\n   * Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified'.\n   * Default is 'unacknowledged'.\n   */\n  @property({type: String, reflect: true}) status =\n    ObcAlertMenuItemStatus.Unacknowledged;\n\n  /**\n   * Whether the item is expanded/open to show additional details.\n   * Toggled by clicking the item.\n   */\n  @property({type: Boolean}) open = false;\n\n  /**\n   * Layout size of the menu item.\n   * Controls whether content is single-line or multi-line.\n   * Possible values: 'single-line', 'multi-line'.\n   * Default is 'single-line'.\n   */\n  @property({type: String}) size: ObcMessageMenuItemSize =\n    ObcMessageMenuItemSize.SingleLine;\n\n  /**\n   * Whether to animate the item's appearance (intro animation).\n   */\n  @property({type: Boolean}) animateIntro = false;\n\n  /**\n   * The label for the secondary action button.\n   * Unlike the primary (ACK) action, the secondary label is not derived from\n   * `status`; it must be provided explicitly. The secondary action is only\n   * shown when a non-empty label is set and `secondaryActionState` is not\n   * `none`.\n   */\n  @property({type: String}) secondaryActionLabel = '';\n\n  /**\n   * Controls the appearance of the primary (ACK) action.\n   * See {@link ObcAlertMenuItemActionState} for the available states.\n   */\n  @property({type: String}) primaryActionState: ObcAlertMenuItemActionState =\n    ObcAlertMenuItemActionState.Enabled;\n\n  /**\n   * Controls the appearance of the secondary action.\n   * See {@link ObcAlertMenuItemActionState} for the available states.\n   */\n  @property({type: String}) secondaryActionState: ObcAlertMenuItemActionState =\n    ObcAlertMenuItemActionState.None;\n\n  private get primaryActionLabel() {\n    if (this.primaryActionState === ObcAlertMenuItemActionState.None) {\n      return '';\n    }\n    return this.status === ObcAlertMenuItemStatus.Unacknowledged ? 'ACK' : '';\n  }\n\n  private get secondaryActionLabelToShow() {\n    if (this.secondaryActionState === ObcAlertMenuItemActionState.None) {\n      return '';\n    }\n    return this.secondaryActionLabel;\n  }\n\n  private get primaryActionDisabled() {\n    return this.primaryActionState === ObcAlertMenuItemActionState.Disabled;\n  }\n\n  private get secondaryActionDisabled() {\n    return this.secondaryActionState === ObcAlertMenuItemActionState.Disabled;\n  }\n\n  private get hasTrailingIcon() {\n    // True when we need the action container but don't have an ACK button\n    return this.status !== ObcAlertMenuItemStatus.Unacknowledged;\n  }\n\n  private handleMessageClick() {\n    this.dispatchEvent(new CustomEvent('item-click'));\n    this.open = !this.open;\n  }\n\n  private handleActionClick() {\n    this.dispatchEvent(new CustomEvent('ack-click'));\n  }\n\n  private handleSecondaryActionClick() {\n    this.dispatchEvent(new CustomEvent('ack-secondary-click'));\n  }\n\n  override render() {\n    return html`\n      <obc-message-menu-item\n        .title=${this.title}\n        .description=${this.description}\n        .day=${this.day}\n        .time=${this.time}\n        .primaryActionLabel=${this.primaryActionLabel}\n        .secondaryActionLabel=${this.secondaryActionLabelToShow}\n        .enablePrimaryAction=${!this.primaryActionDisabled}\n        .enableSecondaryAction=${!this.secondaryActionDisabled}\n        .size=${this.size}\n        .open=${this.open}\n        .hasSecondaryIcon=${this.hasIcon}\n        .isShelved=${this.shelved}\n        .hasTrailingIcon=${this.hasTrailingIcon}\n        enhancedIcon\n        hasPrimaryIcon\n        @message-click=${this.handleMessageClick}\n        @primary-action-click=${this.handleActionClick}\n        @secondary-action-click=${this.handleSecondaryActionClick}\n      >\n        <slot name=\"alert-icon\" slot=\"primary-icon\"></slot>\n        <slot name=\"title\" slot=\"title\">${this.title}</slot>\n        <slot name=\"description\" slot=\"description\">${this.description}</slot>\n        ${this.hasIcon\n          ? html`<slot name=\"icon\" slot=\"secondary-icon\"></slot>`\n          : nothing}\n        ${choose(this.status, [\n          [\n            ObcAlertMenuItemStatus.NoAckAlarm,\n            () =>\n              html`<obi-alarm-noack-iec\n                slot=\"trailing-icon\"\n                useCssColor\n              ></obi-alarm-noack-iec>`,\n          ],\n          [\n            ObcAlertMenuItemStatus.NoAckWarning,\n            () =>\n              html`<obi-warning-noack-iec\n                slot=\"trailing-icon\"\n                useCssColor\n              ></obi-warning-noack-iec>`,\n          ],\n        ])}\n      </obc-message-menu-item>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ob-alert-menu-item': ObcAlertMenuItem;\n  }\n}\n"],"names":["ObcAlertMenuItemStatus","ObcAlertMenuItemActionState"],"mappings":"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"}

package/dist/components/message-menu-item/message-menu-item.d.ts

@@ -31,6 +31,7 @@ export declare 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:**
@@ -46,6 +47,7 @@ export declare 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
  *
@@ -123,6 +125,8 @@ export declare class ObcMessageMenuItem extends LitElement {
     time: string;
     primaryActionLabel: string;
     secondaryActionLabel: string;
+    enablePrimaryAction: boolean;
+    enableSecondaryAction: boolean;
     hasPrimaryIcon: boolean;
     hasSecondaryIcon: boolean;
     hasTrailingIcon: boolean;

package/dist/components/message-menu-item/message-menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/message-menu-item/message-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yCAAyC,CAAC;AACjD,OAAO,uCAAuC,CAAC;AAE/C,OAAO,kCAAkC,CAAC;AAE1C,oBAAY,sBAAsB;IAChC,UAAU,gBAAgB;IAC1B,UAAU,gBAAgB;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAEtB,IAAI,EAAE,sBAAsB,CAClB;IACT,aAAa,UAAS;IACtB,YAAY,UAAS;IACrB,IAAI,UAAS;IAGL,KAAK,SAAM;IACpB,WAAW,SAAM;IACjB,GAAG,SAAM;IACT,IAAI,SAAM;IACV,kBAAkB,SAAM;IACxB,oBAAoB,SAAM;IAGzB,cAAc,UAAS;IACvB,gBAAgB,UAAS;IACzB,eAAe,UAAS;IACxB,SAAS,UAAS;IAElB,kBAAkB,UAAS;IAEtD,OAAO,KAAK,UAAU,GAKrB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,KAAK,gBAAgB,GAE3B;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,0BAA0B;IAWzB,MAAM;IA0Ff,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"message-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/message-menu-item/message-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yCAAyC,CAAC;AACjD,OAAO,uCAAuC,CAAC;AAE/C,OAAO,kCAAkC,CAAC;AAE1C,oBAAY,sBAAsB;IAChC,UAAU,gBAAgB;IAC1B,UAAU,gBAAgB;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAEtB,IAAI,EAAE,sBAAsB,CAClB;IACT,aAAa,UAAS;IACtB,YAAY,UAAS;IACrB,IAAI,UAAS;IAGL,KAAK,SAAM;IACpB,WAAW,SAAM;IACjB,GAAG,SAAM;IACT,IAAI,SAAM;IACV,kBAAkB,SAAM;IACxB,oBAAoB,SAAM;IACP,mBAAmB,UAAQ;IAC3B,qBAAqB,UAAQ;IAG/C,cAAc,UAAS;IACvB,gBAAgB,UAAS;IACzB,eAAe,UAAS;IACxB,SAAS,UAAS;IAElB,kBAAkB,UAAS;IAEtD,OAAO,KAAK,UAAU,GAKrB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,KAAK,gBAAgB,GAE3B;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,0BAA0B;IAWzB,MAAM;IA4Ff,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"}

package/dist/components/message-menu-item/message-menu-item.js

@@ -35,6 +35,8 @@ let ObcMessageMenuItem = class extends LitElement {
     this.time = "";
     this.primaryActionLabel = "";
     this.secondaryActionLabel = "";
+    this.enablePrimaryAction = true;
+    this.enableSecondaryAction = true;
     this.hasPrimaryIcon = false;
     this.hasSecondaryIcon = false;
     this.hasTrailingIcon = false;
@@ -151,6 +153,7 @@ let ObcMessageMenuItem = class extends LitElement {
                     variant="normal"
                     .fullWidth=${this.isVertical}
                     @click=${this.handleSecondaryActionClick}
+                    ?disabled=${!this.enableSecondaryAction}
                   >
                     ${this.secondaryActionLabel}
                   </obc-button>` : nothing}
@@ -158,6 +161,7 @@ let ObcMessageMenuItem = class extends LitElement {
                     variant="normal"
                     .fullWidth=${this.isVertical}
                     @click=${this.handlePrimaryActionClick}
+                    ?disabled=${!this.enablePrimaryAction}
                   >
                     ${this.hasActionLabelSlot ? html`<slot name="action-label"></slot>` : this.primaryActionLabel}
                   </obc-button>` : nothing}
@@ -200,6 +204,12 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcMessageMenuItem.prototype, "secondaryActionLabel", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcMessageMenuItem.prototype, "enablePrimaryAction", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcMessageMenuItem.prototype, "enableSecondaryAction", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcMessageMenuItem.prototype, "hasPrimaryIcon", 2);

package/dist/components/message-menu-item/message-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-menu-item.js","sources":["../../../src/components/message-menu-item/message-menu-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './message-menu-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../button/button.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport '../../icons/icon-chevron-up-google.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-alerts-shelf.js';\n\nexport enum ObcMessageMenuItemSize {\n  SingleLine = 'single-line',\n  DoubleLine = 'double-line',\n}\n\n/**\n * `<obc-message-menu-item>` – An expandable message or notification item for use in message lists, notification panels, or alert menus.\n *\n * Displays a concise message row with optional icons, title, description, timestamp, and action buttons. Clicking the item expands it to reveal the full content. Designed for scannable lists where users may need to quickly review and act on individual messages.\n *\n * ## Features\n *\n * - **Size Variants:**\n *   - `single-line`: Compact layout with title and description on one line (default).\n *   - `double-line`: Two-line layout with title on top and description below.\n *   - When clicked, both variants expand to show full multi-line content.\n *\n * - **Stack Direction:**\n *   - `stackVertical=false` (default): Action buttons appear inline to the right of the content.\n *   - `stackVertical=true`: Action buttons appear below the content, spanning full width.\n *\n * - **Icon Options:**\n *   - Primary and secondary icon slots for visual context or status indicators.\n *   - Enhanced icon mode (`enhancedIcon`) increases icon size for emphasis.\n *   - Trailing icon slot (horizontal layout only) for additional actions.\n *   - Shelved state (`isShelved`) displays a shelf icon automatically.\n *\n * - **Actions:**\n *   - Supports up to two action buttons via `primaryActionLabel` and `secondaryActionLabel`.\n *   - In vertical layout, action buttons expand to full width.\n *\n * - **Timestamp:**\n *   - Optional day and time display via `day` and `time` properties.\n *\n * ## Usage Guidelines\n *\n * Use `obc-message-menu-item` to present individual notifications, alerts, or messages within a scrollable list. Ideal for scenarios where users need to quickly scan items, expand for details, or take immediate action.\n *\n * - Use `single-line` for high-density lists where space is limited.\n * - Use `double-line` when the description needs more visibility in the collapsed state.\n * - Keep `stackVertical=false` (default) when actions should be quickly accessible inline.\n * - Use `stackVertical=true` when actions need more prominence or when space is narrow.\n * - Enable `enhancedIcon` to highlight important or priority messages.\n * - Use `isShelved` to indicate messages that have been temporarily set aside.\n *\n * ## Slots\n *\n * Text content for `title`, `description`, and `action-label` supports both props (for plain text) and slots (for rich HTML like `CO<sub>2</sub>`).\n * To use a slot, set the corresponding `has*Slot` prop to `true`.\n *\n * | Slot Name        | Enabled By               | Purpose                                           |\n * |------------------|--------------------------|---------------------------------------------------|\n * | `title`          | `hasTitleSlot=true`      | Message title. Use slot for rich HTML.            |\n * | `description`    | `hasDescriptionSlot=true`| Message description. Use slot for rich HTML.      |\n * | `action-label`   | `hasActionLabelSlot=true`| Primary action button label. Use slot for rich HTML. |\n * | `primary-icon`   | `hasPrimaryIcon=true`    | Main icon representing message type or status.    |\n * | `secondary-icon` | `hasSecondaryIcon=true`  | Additional icon for secondary status or context.  |\n * | `trailing-icon`  | `hasTrailingIcon=true` (horizontal only) | Icon button after action buttons. |\n *\n * ## Events\n *\n * - `message-click` – Fired when the message item is clicked. Detail includes `{ open: boolean }`.\n * - `primary-action-click` – Fired when the primary action button is clicked.\n * - `secondary-action-click` – Fired when the secondary action button is clicked.\n *\n * ## Example\n *\n * Using props (simple text):\n * ```html\n * <obc-message-menu-item\n *   size=\"double-line\"\n *   title=\"System Update\"\n *   description=\"A new update is available for installation.\"\n *   day=\"Yesterday\"\n *   time=\"14:32\"\n *   primaryActionLabel=\"Install\"\n *   hasPrimaryIcon\n * >\n *   <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n * </obc-message-menu-item>\n * ```\n *\n * Using slots (rich HTML):\n * ```html\n * <obc-message-menu-item\n *   size=\"double-line\"\n *   day=\"Yesterday\"\n *   time=\"14:32\"\n *   hasPrimaryIcon\n *   hasTitleSlot\n *   hasDescriptionSlot\n *   hasActionLabelSlot\n * >\n *   <span slot=\"title\">High CO<sub>2</sub> level</span>\n *   <span slot=\"description\">CO<sub>2</sub> concentration exceeds safe limits.</span>\n *   <span slot=\"action-label\">Acknowledge</span>\n *   <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n * </obc-message-menu-item>\n * ```\n *\n * @slot title - Message title (shown when `hasTitleSlot` is true).\n * @slot description - Message description (shown when `hasDescriptionSlot` is true).\n * @slot action-label - Primary action button label (shown when `hasActionLabelSlot` is true).\n * @slot primary-icon - Main icon representing the message type or status (shown when `hasPrimaryIcon` is true).\n * @slot secondary-icon - Additional icon for secondary status/context (shown when `hasSecondaryIcon` is true).\n * @slot trailing-icon - Icon after action buttons, horizontal layout only (shown when `hasTrailingIcon` is true).\n * @fires message-click {CustomEvent<{open: boolean}>} Fired when the message item is clicked.\n * @fires primary-action-click {CustomEvent<void>} Fired when the primary action button is clicked.\n * @fires secondary-action-click {CustomEvent<void>} Fired when the secondary action button is clicked.\n */\n@customElement('obc-message-menu-item')\nexport class ObcMessageMenuItem extends LitElement {\n  // Layout properties\n  @property({type: String}) size: ObcMessageMenuItemSize =\n    ObcMessageMenuItemSize.SingleLine;\n  @property({type: Boolean}) stackVertical = false;\n  @property({type: Boolean}) enhancedIcon = false;\n  @property({type: Boolean}) open = false;\n\n  // Text content properties\n  @property({type: String}) override title = '';\n  @property({type: String}) description = '';\n  @property({type: String}) day = '';\n  @property({type: String}) time = '';\n  @property({type: String}) primaryActionLabel = '';\n  @property({type: String}) secondaryActionLabel = '';\n\n  // Visibility properties for icons (slots)\n  @property({type: Boolean}) hasPrimaryIcon = false;\n  @property({type: Boolean}) hasSecondaryIcon = false;\n  @property({type: Boolean}) hasTrailingIcon = false;\n  @property({type: Boolean}) isShelved = false;\n\n  @property({type: Boolean}) hasActionLabelSlot = false;\n\n  private get activeSize() {\n    if (this.open) {\n      return 'multi-line';\n    }\n    return this.size;\n  }\n\n  private get hasTimestamp() {\n    return this.time !== '' || this.day !== '';\n  }\n\n  private get hasDay() {\n    return this.day !== '';\n  }\n\n  private get hasPrimaryAction() {\n    return this.primaryActionLabel !== '' || this.hasActionLabelSlot;\n  }\n\n  private get hasSecondaryAction() {\n    return this.secondaryActionLabel !== '';\n  }\n\n  private get isVertical() {\n    return this.stackVertical;\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    // Only handle key events on the wrapper itself, not on nested interactive elements\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleMessageClick();\n    }\n  }\n\n  private handleMessageClick() {\n    this.open = !this.open;\n\n    this.dispatchEvent(\n      new CustomEvent('message-click', {\n        detail: {\n          open: this.open,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handlePrimaryActionClick(e: Event) {\n    e.stopPropagation();\n\n    this.dispatchEvent(\n      new CustomEvent('primary-action-click', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleSecondaryActionClick(e: Event) {\n    e.stopPropagation();\n\n    this.dispatchEvent(\n      new CustomEvent('secondary-action-click', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          ['active-size-' + this.activeSize]: true,\n          ['size-' + this.size]: true,\n          ['enhanced-icon']: this.enhancedIcon,\n          ['has-date']: this.hasTimestamp,\n          ['stack-vertical']: this.stackVertical,\n          ['stack-horizontal']: !this.stackVertical,\n        })}\n        role=\"button\"\n        tabindex=\"0\"\n        @click=${this.handleMessageClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <div class=\"content-container\">\n          <div class=\"icon-container\">\n            ${this.isShelved\n              ? html`<div class=\"icon\">\n                  <obi-alerts-shelf></obi-alerts-shelf>\n                </div>`\n              : nothing}\n            ${this.hasPrimaryIcon\n              ? html`<div class=\"icon primary\">\n                  <slot name=\"primary-icon\"></slot>\n                </div>`\n              : nothing}\n            ${this.hasSecondaryIcon\n              ? html`<div class=\"icon secondary\">\n                  <slot name=\"secondary-icon\"></slot>\n                </div>`\n              : nothing}\n          </div>\n          <div class=\"text-container\">\n            <div class=\"title-container\">\n              <slot name=\"title\">${this.title}</slot>\n            </div>\n            <div class=\"description-container\">\n              <slot name=\"description\">${this.description}</slot>\n            </div>\n            ${this.hasTimestamp\n              ? html`<div class=\"date-container\">\n                  ${this.hasDay ? html`<span>${this.day}</span>` : nothing}\n                  <span>${this.time}</span>\n                </div>`\n              : nothing}\n            <div class=\"chevron\">\n              ${this.open\n                ? html`<obi-chevron-up-google></obi-chevron-up-google>`\n                : html`<obi-chevron-down-google></obi-chevron-down-google>`}\n            </div>\n          </div>\n        </div>\n        ${this.hasPrimaryAction ||\n        this.hasSecondaryAction ||\n        (this.hasTrailingIcon && !this.isVertical)\n          ? html`<div class=\"action-button-container\" part=\"action-container\">\n              ${this.hasSecondaryAction\n                ? html`<obc-button\n                    variant=\"normal\"\n                    .fullWidth=${this.isVertical}\n                    @click=${this.handleSecondaryActionClick}\n                  >\n                    ${this.secondaryActionLabel}\n                  </obc-button>`\n                : nothing}\n              ${this.hasPrimaryAction\n                ? html`<obc-button\n                    variant=\"normal\"\n                    .fullWidth=${this.isVertical}\n                    @click=${this.handlePrimaryActionClick}\n                  >\n                    ${this.hasActionLabelSlot\n                      ? html`<slot name=\"action-label\"></slot>`\n                      : this.primaryActionLabel}\n                  </obc-button>`\n                : nothing}\n              ${this.hasTrailingIcon && !this.isVertical\n                ? html`<div class=\"trailing-icon\" part=\"trailing-icon\">\n                    <slot name=\"trailing-icon\"></slot>\n                  </div>`\n                : nothing}\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-message-menu-item': ObcMessageMenuItem;\n  }\n}\n"],"names":["ObcMessageMenuItemSize"],"mappings":"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"}
+{"version":3,"file":"message-menu-item.js","sources":["../../../src/components/message-menu-item/message-menu-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './message-menu-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../button/button.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport '../../icons/icon-chevron-up-google.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-alerts-shelf.js';\n\nexport enum ObcMessageMenuItemSize {\n  SingleLine = 'single-line',\n  DoubleLine = 'double-line',\n}\n\n/**\n * `<obc-message-menu-item>` – An expandable message or notification item for use in message lists, notification panels, or alert menus.\n *\n * Displays a concise message row with optional icons, title, description, timestamp, and action buttons. Clicking the item expands it to reveal the full content. Designed for scannable lists where users may need to quickly review and act on individual messages.\n *\n * ## Features\n *\n * - **Size Variants:**\n *   - `single-line`: Compact layout with title and description on one line (default).\n *   - `double-line`: Two-line layout with title on top and description below.\n *   - When clicked, both variants expand to show full multi-line content.\n *\n * - **Stack Direction:**\n *   - `stackVertical=false` (default): Action buttons appear inline to the right of the content.\n *   - `stackVertical=true`: Action buttons appear below the content, spanning full width.\n *\n * - **Icon Options:**\n *   - Primary and secondary icon slots for visual context or status indicators.\n *   - Enhanced icon mode (`enhancedIcon`) increases icon size for emphasis.\n *   - Trailing icon slot (horizontal layout only) for additional actions.\n *   - Shelved state (`isShelved`) displays a shelf icon automatically.\n *\n * - **Actions:**\n *   - Supports up to two action buttons via `primaryActionLabel` and `secondaryActionLabel`.\n *   - Each action can be independently disabled by setting `enablePrimaryAction` or `enableSecondaryAction` to `false`.\n *   - In vertical layout, action buttons expand to full width.\n *\n * - **Timestamp:**\n *   - Optional day and time display via `day` and `time` properties.\n *\n * ## Usage Guidelines\n *\n * Use `obc-message-menu-item` to present individual notifications, alerts, or messages within a scrollable list. Ideal for scenarios where users need to quickly scan items, expand for details, or take immediate action.\n *\n * - Use `single-line` for high-density lists where space is limited.\n * - Use `double-line` when the description needs more visibility in the collapsed state.\n * - Keep `stackVertical=false` (default) when actions should be quickly accessible inline.\n * - Use `stackVertical=true` when actions need more prominence or when space is narrow.\n * - Enable `enhancedIcon` to highlight important or priority messages.\n * - Use `isShelved` to indicate messages that have been temporarily set aside.\n * - Set `enablePrimaryAction` / `enableSecondaryAction` to `false` when an action is temporarily unavailable (e.g. awaiting a precondition) rather than removing the button.\n *\n * ## Slots\n *\n * Text content for `title`, `description`, and `action-label` supports both props (for plain text) and slots (for rich HTML like `CO<sub>2</sub>`).\n * To use a slot, set the corresponding `has*Slot` prop to `true`.\n *\n * | Slot Name        | Enabled By               | Purpose                                           |\n * |------------------|--------------------------|---------------------------------------------------|\n * | `title`          | `hasTitleSlot=true`      | Message title. Use slot for rich HTML.            |\n * | `description`    | `hasDescriptionSlot=true`| Message description. Use slot for rich HTML.      |\n * | `action-label`   | `hasActionLabelSlot=true`| Primary action button label. Use slot for rich HTML. |\n * | `primary-icon`   | `hasPrimaryIcon=true`    | Main icon representing message type or status.    |\n * | `secondary-icon` | `hasSecondaryIcon=true`  | Additional icon for secondary status or context.  |\n * | `trailing-icon`  | `hasTrailingIcon=true` (horizontal only) | Icon button after action buttons. |\n *\n * ## Events\n *\n * - `message-click` – Fired when the message item is clicked. Detail includes `{ open: boolean }`.\n * - `primary-action-click` – Fired when the primary action button is clicked.\n * - `secondary-action-click` – Fired when the secondary action button is clicked.\n *\n * ## Example\n *\n * Using props (simple text):\n * ```html\n * <obc-message-menu-item\n *   size=\"double-line\"\n *   title=\"System Update\"\n *   description=\"A new update is available for installation.\"\n *   day=\"Yesterday\"\n *   time=\"14:32\"\n *   primaryActionLabel=\"Install\"\n *   hasPrimaryIcon\n * >\n *   <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n * </obc-message-menu-item>\n * ```\n *\n * Using slots (rich HTML):\n * ```html\n * <obc-message-menu-item\n *   size=\"double-line\"\n *   day=\"Yesterday\"\n *   time=\"14:32\"\n *   hasPrimaryIcon\n *   hasTitleSlot\n *   hasDescriptionSlot\n *   hasActionLabelSlot\n * >\n *   <span slot=\"title\">High CO<sub>2</sub> level</span>\n *   <span slot=\"description\">CO<sub>2</sub> concentration exceeds safe limits.</span>\n *   <span slot=\"action-label\">Acknowledge</span>\n *   <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n * </obc-message-menu-item>\n * ```\n *\n * @slot title - Message title (shown when `hasTitleSlot` is true).\n * @slot description - Message description (shown when `hasDescriptionSlot` is true).\n * @slot action-label - Primary action button label (shown when `hasActionLabelSlot` is true).\n * @slot primary-icon - Main icon representing the message type or status (shown when `hasPrimaryIcon` is true).\n * @slot secondary-icon - Additional icon for secondary status/context (shown when `hasSecondaryIcon` is true).\n * @slot trailing-icon - Icon after action buttons, horizontal layout only (shown when `hasTrailingIcon` is true).\n * @fires message-click {CustomEvent<{open: boolean}>} Fired when the message item is clicked.\n * @fires primary-action-click {CustomEvent<void>} Fired when the primary action button is clicked.\n * @fires secondary-action-click {CustomEvent<void>} Fired when the secondary action button is clicked.\n */\n@customElement('obc-message-menu-item')\nexport class ObcMessageMenuItem extends LitElement {\n  // Layout properties\n  @property({type: String}) size: ObcMessageMenuItemSize =\n    ObcMessageMenuItemSize.SingleLine;\n  @property({type: Boolean}) stackVertical = false;\n  @property({type: Boolean}) enhancedIcon = false;\n  @property({type: Boolean}) open = false;\n\n  // Text content properties\n  @property({type: String}) override title = '';\n  @property({type: String}) description = '';\n  @property({type: String}) day = '';\n  @property({type: String}) time = '';\n  @property({type: String}) primaryActionLabel = '';\n  @property({type: String}) secondaryActionLabel = '';\n  @property({type: Boolean, attribute: false}) enablePrimaryAction = true;\n  @property({type: Boolean, attribute: false}) enableSecondaryAction = true;\n\n  // Visibility properties for icons (slots)\n  @property({type: Boolean}) hasPrimaryIcon = false;\n  @property({type: Boolean}) hasSecondaryIcon = false;\n  @property({type: Boolean}) hasTrailingIcon = false;\n  @property({type: Boolean}) isShelved = false;\n\n  @property({type: Boolean}) hasActionLabelSlot = false;\n\n  private get activeSize() {\n    if (this.open) {\n      return 'multi-line';\n    }\n    return this.size;\n  }\n\n  private get hasTimestamp() {\n    return this.time !== '' || this.day !== '';\n  }\n\n  private get hasDay() {\n    return this.day !== '';\n  }\n\n  private get hasPrimaryAction() {\n    return this.primaryActionLabel !== '' || this.hasActionLabelSlot;\n  }\n\n  private get hasSecondaryAction() {\n    return this.secondaryActionLabel !== '';\n  }\n\n  private get isVertical() {\n    return this.stackVertical;\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    // Only handle key events on the wrapper itself, not on nested interactive elements\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleMessageClick();\n    }\n  }\n\n  private handleMessageClick() {\n    this.open = !this.open;\n\n    this.dispatchEvent(\n      new CustomEvent('message-click', {\n        detail: {\n          open: this.open,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handlePrimaryActionClick(e: Event) {\n    e.stopPropagation();\n\n    this.dispatchEvent(\n      new CustomEvent('primary-action-click', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleSecondaryActionClick(e: Event) {\n    e.stopPropagation();\n\n    this.dispatchEvent(\n      new CustomEvent('secondary-action-click', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          ['active-size-' + this.activeSize]: true,\n          ['size-' + this.size]: true,\n          ['enhanced-icon']: this.enhancedIcon,\n          ['has-date']: this.hasTimestamp,\n          ['stack-vertical']: this.stackVertical,\n          ['stack-horizontal']: !this.stackVertical,\n        })}\n        role=\"button\"\n        tabindex=\"0\"\n        @click=${this.handleMessageClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <div class=\"content-container\">\n          <div class=\"icon-container\">\n            ${this.isShelved\n              ? html`<div class=\"icon\">\n                  <obi-alerts-shelf></obi-alerts-shelf>\n                </div>`\n              : nothing}\n            ${this.hasPrimaryIcon\n              ? html`<div class=\"icon primary\">\n                  <slot name=\"primary-icon\"></slot>\n                </div>`\n              : nothing}\n            ${this.hasSecondaryIcon\n              ? html`<div class=\"icon secondary\">\n                  <slot name=\"secondary-icon\"></slot>\n                </div>`\n              : nothing}\n          </div>\n          <div class=\"text-container\">\n            <div class=\"title-container\">\n              <slot name=\"title\">${this.title}</slot>\n            </div>\n            <div class=\"description-container\">\n              <slot name=\"description\">${this.description}</slot>\n            </div>\n            ${this.hasTimestamp\n              ? html`<div class=\"date-container\">\n                  ${this.hasDay ? html`<span>${this.day}</span>` : nothing}\n                  <span>${this.time}</span>\n                </div>`\n              : nothing}\n            <div class=\"chevron\">\n              ${this.open\n                ? html`<obi-chevron-up-google></obi-chevron-up-google>`\n                : html`<obi-chevron-down-google></obi-chevron-down-google>`}\n            </div>\n          </div>\n        </div>\n        ${this.hasPrimaryAction ||\n        this.hasSecondaryAction ||\n        (this.hasTrailingIcon && !this.isVertical)\n          ? html`<div class=\"action-button-container\" part=\"action-container\">\n              ${this.hasSecondaryAction\n                ? html`<obc-button\n                    variant=\"normal\"\n                    .fullWidth=${this.isVertical}\n                    @click=${this.handleSecondaryActionClick}\n                    ?disabled=${!this.enableSecondaryAction}\n                  >\n                    ${this.secondaryActionLabel}\n                  </obc-button>`\n                : nothing}\n              ${this.hasPrimaryAction\n                ? html`<obc-button\n                    variant=\"normal\"\n                    .fullWidth=${this.isVertical}\n                    @click=${this.handlePrimaryActionClick}\n                    ?disabled=${!this.enablePrimaryAction}\n                  >\n                    ${this.hasActionLabelSlot\n                      ? html`<slot name=\"action-label\"></slot>`\n                      : this.primaryActionLabel}\n                  </obc-button>`\n                : nothing}\n              ${this.hasTrailingIcon && !this.isVertical\n                ? html`<div class=\"trailing-icon\" part=\"trailing-icon\">\n                    <slot name=\"trailing-icon\"></slot>\n                  </div>`\n                : nothing}\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-message-menu-item': ObcMessageMenuItem;\n  }\n}\n"],"names":["ObcMessageMenuItemSize"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.0.0-next.71",
+  "version": "2.0.0-next.72",
   "type": "module",
   "repository": {
     "type": "git",