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

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/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.css.js

@@ -8,6 +8,10 @@ const componentStyle = css`
   box-sizing: border-box;
 }
 
+:host {
+  display: block;
+}
+
 .wrapper {
             border-color: var(--integration-normal-enabled-border-color);
             background-color: var(--integration-normal-enabled-background-color);
@@ -18,6 +22,7 @@ const componentStyle = css`
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 100%;
   background: var(--container-global-color);
   border-radius: var(
     --app-components-integration-system-dropdown-menu-border-radius
@@ -44,6 +49,10 @@ const componentStyle = css`
   border-radius: 12px;
 }
 
+.footer-container.hidden {
+    display: none;
+  }
+
 .content-area {
   display: flex;
   flex-direction: column;
@@ -53,6 +62,10 @@ const componentStyle = css`
   border-radius: 8px;
 }
 
+.content-area.hidden {
+    display: none;
+  }
+
 .footer-container slot[name="buttons"]::slotted(*) {
   display: flex;
   flex: 1 1 0px;
@@ -67,7 +80,8 @@ const componentStyle = css`
   gap: var(--app-components-integration-system-menu-action-spacing);
 }
 
-.buttons-slot {
+.buttons-slot,
+.content-slot {
   display: contents;
 }
 
@@ -81,12 +95,13 @@ const componentStyle = css`
   border-radius: 8px;
 }
 
-.content-container.hidealarmlist {
+.content-container.hidden {
     display: none;
   }
 
 .alertlist {
   width: 100%;
+  height: 100%;
 }
 
 .leading-icon {

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-vessel-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"integration-vessel-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.d.ts

@@ -2,17 +2,39 @@ import { LitElement } from 'lit';
 import '../../components/button/button.js';
 import '../../components/icon-button/icon-button.js';
 import '../../icons/icon-placeholder.js';
+import '../../icons/icon-unacknowledged.js';
 import '../../building-blocks/alert-list/alert-list.js';
 /**
  * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.
  *
+ * ## Sizing
+ *
+ * The menu hugs its content and never reserves more space than its slotted
+ * sections need; it deliberately does not impose a height of its own. Sizing is
+ * owned by the consumer, since only the consumer knows how large the menu may
+ * grow in a given layout.
+ *
+ * From a web components perspective, drive the size from the host element and
+ * the slotted light-DOM nodes — not from component properties:
+ *
+ * - **Bound the whole menu** by giving the host element a definite `height`. The
+ *   menu fills that height and the alert list scrolls within the remaining space
+ *   while the footer and content keep their size. This is the recommended
+ *   approach. (A `max-height` alone will not bound the list — the internal
+ *   scroll needs a definite height to resolve against.)
+ * - **Size sections independently** (advanced) by sizing the slotted nodes
+ *   directly — e.g. a fixed-height `content` element, or a capped, scrollable
+ *   wrapper around the `alarms` items.
+ * - **Leave it unbounded** to let the menu grow with its content.
+ *
  * @slot buttons - Buttons shown in the footer.
  * @slot content - Main content shown in the content area.
  * @slot alarms - Alarm items rendered inside the alert list.
  */
 export declare class ObcIntegrationVesselMenu extends LitElement {
-    /** Hide the alarm list, ensuring it doesn't take space (display: none). */
-    hideAlarmList: boolean;
+    hasActions: boolean;
+    hasAlertList: boolean;
+    hasContent: boolean;
     protected render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integration-vessel-menu.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6CAA6C,CAAC;AACrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,gDAAgD,CAAC;AAExD;;;;;;GAMG;AAEH,qBACa,wBAAyB,SAAQ,UAAU;IACtD,2EAA2E;IAChD,aAAa,UAAS;cAE9B,MAAM;IA2BzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}
+{"version":3,"file":"integration-vessel-menu.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6CAA6C,CAAC;AACrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,gDAAgD,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,qBACa,wBAAyB,SAAQ,UAAU;IACT,UAAU,UAAQ;IAClB,YAAY,UAAQ;IACpB,UAAU,UAAQ;cAE5C,MAAM;IAuCzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.js

@@ -6,6 +6,7 @@ import componentStyle from "./integration-vessel-menu.css.js";
 import "../../components/button/button.js";
 import "../../components/icon-button/icon-button.js";
 import "../../icons/icon-placeholder.js";
+import "../../icons/icon-unacknowledged.js";
 import "../../building-blocks/alert-list/alert-list.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,29 +21,43 @@ var __decorateClass = (decorators, target, key, kind) => {
 let ObcIntegrationVesselMenu = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.hideAlarmList = false;
+    this.hasActions = true;
+    this.hasAlertList = true;
+    this.hasContent = true;
   }
   render() {
     return html`
-      <div
-        class=${classMap({
-      wrapper: true
+      <div class="wrapper">
+        <div
+          class=${classMap({
+      "footer-container": true,
+      hidden: !this.hasActions
     })}
-      >
-        <div class="footer-container">
+        >
           <slot name="buttons" class="buttons-slot"></slot>
         </div>
-        <div class="content-area">
-          <slot name="content"></slot>
+        <div
+          class=${classMap({
+      "content-area": true,
+      hidden: !this.hasContent
+    })}
+        >
+          <slot name="content" class="content-slot"></slot>
         </div>
         <div
           class=${classMap({
       "content-container": true,
-      hidealarmlist: this.hideAlarmList
+      hidden: !this.hasAlertList
     })}
         >
           <obc-alert-list class="alertlist"
             ><slot name="alarms"></slot>
+            <div slot="empty-icon">
+              <obi-unacknowledged></obi-unacknowledged>
+            </div>
+            <div slot="empty-title">
+              <span>No alerts</span>
+            </div>
           </obc-alert-list>
         </div>
       </div>
@@ -51,8 +66,14 @@ let ObcIntegrationVesselMenu = class extends LitElement {
 };
 ObcIntegrationVesselMenu.styles = unsafeCSS(componentStyle);
 __decorateClass([
-  property({ type: Boolean })
-], ObcIntegrationVesselMenu.prototype, "hideAlarmList", 2);
+  property({ type: Boolean, attribute: false })
+], ObcIntegrationVesselMenu.prototype, "hasActions", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcIntegrationVesselMenu.prototype, "hasAlertList", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcIntegrationVesselMenu.prototype, "hasContent", 2);
 ObcIntegrationVesselMenu = __decorateClass([
   customElement("obc-integration-vessel-menu")
 ], ObcIntegrationVesselMenu);

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-vessel-menu.js","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './integration-vessel-menu.css?inline';\n\nimport '../../components/button/button.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-placeholder.js';\nimport '../../building-blocks/alert-list/alert-list.js';\n\n/**\n * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.\n *\n * @slot buttons - Buttons shown in the footer.\n * @slot content - Main content shown in the content area.\n * @slot alarms - Alarm items rendered inside the alert list.\n */\n\n@customElement('obc-integration-vessel-menu')\nexport class ObcIntegrationVesselMenu extends LitElement {\n  /** Hide the alarm list, ensuring it doesn't take space (display: none). */\n  @property({type: Boolean}) hideAlarmList = false;\n\n  protected override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n        })}\n      >\n        <div class=\"footer-container\">\n          <slot name=\"buttons\" class=\"buttons-slot\"></slot>\n        </div>\n        <div class=\"content-area\">\n          <slot name=\"content\"></slot>\n        </div>\n        <div\n          class=${classMap({\n            'content-container': true,\n            hidealarmlist: this.hideAlarmList,\n          })}\n        >\n          <obc-alert-list class=\"alertlist\"\n            ><slot name=\"alarms\"></slot>\n          </obc-alert-list>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-vessel-menu': ObcIntegrationVesselMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoBO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEsB,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAExB,SAAS;AAC1B,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,IAAA,CACV,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASQ,SAAS;AAAA,MACf,qBAAqB;AAAA,MACrB,eAAe,KAAK;AAAA,IAAA,CACrB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQV;AAGF;AAhCa,yBA+BK,SAAS,UAAU,cAAc;AA7BtB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,yBAEgB,WAAA,iBAAA,CAAA;AAFhB,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}
+{"version":3,"file":"integration-vessel-menu.js","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './integration-vessel-menu.css?inline';\n\nimport '../../components/button/button.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-placeholder.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../../building-blocks/alert-list/alert-list.js';\n\n/**\n * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.\n *\n * ## Sizing\n *\n * The menu hugs its content and never reserves more space than its slotted\n * sections need; it deliberately does not impose a height of its own. Sizing is\n * owned by the consumer, since only the consumer knows how large the menu may\n * grow in a given layout.\n *\n * From a web components perspective, drive the size from the host element and\n * the slotted light-DOM nodes — not from component properties:\n *\n * - **Bound the whole menu** by giving the host element a definite `height`. The\n *   menu fills that height and the alert list scrolls within the remaining space\n *   while the footer and content keep their size. This is the recommended\n *   approach. (A `max-height` alone will not bound the list — the internal\n *   scroll needs a definite height to resolve against.)\n * - **Size sections independently** (advanced) by sizing the slotted nodes\n *   directly — e.g. a fixed-height `content` element, or a capped, scrollable\n *   wrapper around the `alarms` items.\n * - **Leave it unbounded** to let the menu grow with its content.\n *\n * @slot buttons - Buttons shown in the footer.\n * @slot content - Main content shown in the content area.\n * @slot alarms - Alarm items rendered inside the alert list.\n */\n\n@customElement('obc-integration-vessel-menu')\nexport class ObcIntegrationVesselMenu extends LitElement {\n  @property({type: Boolean, attribute: false}) hasActions = true;\n  @property({type: Boolean, attribute: false}) hasAlertList = true;\n  @property({type: Boolean, attribute: false}) hasContent = true;\n\n  protected override render() {\n    return html`\n      <div class=\"wrapper\">\n        <div\n          class=${classMap({\n            'footer-container': true,\n            hidden: !this.hasActions,\n          })}\n        >\n          <slot name=\"buttons\" class=\"buttons-slot\"></slot>\n        </div>\n        <div\n          class=${classMap({\n            'content-area': true,\n            hidden: !this.hasContent,\n          })}\n        >\n          <slot name=\"content\" class=\"content-slot\"></slot>\n        </div>\n        <div\n          class=${classMap({\n            'content-container': true,\n            hidden: !this.hasAlertList,\n          })}\n        >\n          <obc-alert-list class=\"alertlist\"\n            ><slot name=\"alarms\"></slot>\n            <div slot=\"empty-icon\">\n              <obi-unacknowledged></obi-unacknowledged>\n            </div>\n            <div slot=\"empty-title\">\n              <span>No alerts</span>\n            </div>\n          </obc-alert-list>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-vessel-menu': ObcIntegrationVesselMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACwC,SAAA,aAAa;AACb,SAAA,eAAe;AACf,SAAA,aAAa;AAAA,EAAA;AAAA,EAEvC,SAAS;AAC1B,WAAO;AAAA;AAAA;AAAA,kBAGO,SAAS;AAAA,MACf,oBAAoB;AAAA,MACpB,QAAQ,CAAC,KAAK;AAAA,IAAA,CACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKM,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,QAAQ,CAAC,KAAK;AAAA,IAAA,CACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKM,SAAS;AAAA,MACf,qBAAqB;AAAA,MACrB,QAAQ,CAAC,KAAK;AAAA,IAAA,CACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcV;AAGF;AA7Ca,yBA4CK,SAAS,UAAU,cAAc;AA3CJ,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GADhC,yBACkC,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAFhC,yBAEkC,WAAA,gBAAA,CAAA;AACA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAHhC,yBAGkC,WAAA,cAAA,CAAA;AAHlC,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}

package/package.json

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