@oicl/openbridge-webcomponents 2.1.0-next.1 → 2.1.0-next.3

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

@@ -16,6 +16,7 @@ import { localized, msg } from "@lit/localize";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 //#region src/components/alert-menu/alert-menu.ts
+var WAITING_FOR_ACK = [ObcAlertMenuItemStatus.Unacknowledged, ObcAlertMenuItemStatus.RectifiedUnacknowledged];
 var ObcAlertMenu = class ObcAlertMenu extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -26,88 +27,108 @@ var ObcAlertMenu = class ObcAlertMenu extends LitElement {
 		this.canAckAll = false;
 		this.showSilenceButton = true;
 		this.showAlertListButton = true;
-		this._selectedTabIndex = 1;
 	}
 	handleAckAllVisibleClick() {
 		const visibleElements = this.alertList.getVisibleElements();
 		this.dispatchEvent(new CustomEvent("ack-all-visible-click", { detail: {
 			visibleElements,
-			tabName: this.getSelectedTab().name
+			tabName: this.selectedTab.name
 		} }));
 	}
 	onTabChange(e) {
-		this._selectedTabIndex = e.detail.tab;
+		this._selectedTabName = this.tabs[e.detail.tab]?.name;
 	}
-	getSelectedTab() {
-		if (this._selectedTabIndex === 0) return {
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (!this.tabs.some((tab) => tab.name === this._selectedTabName)) this._selectedTabName = void 0;
+	}
+	/** Whether the menu offers "ACK visible" at all; `canAckAll` enables it. */
+	get offersAckAll() {
+		return true;
+	}
+	/** The tabs in display order; the menu opens on the second one. */
+	get tabs() {
+		const tabs = [{
 			name: "unacked",
+			title: msg("Unacked"),
 			emptyTitle: msg("No unacknowledged alerts"),
-			emptyDescription: msg("Go to the 'Alert list' for more details or to manage existing alerts."),
-			emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,
-			class: "unacked",
-			filter: (item) => {
-				return item.getAttribute("status") === ObcAlertMenuItemStatus.Unacknowledged && !item.hasAttribute("shelved");
-			}
-		};
-		else if (this._selectedTabIndex === 2) return {
-			name: "shelved",
-			emptyTitle: msg("No shelved alerts"),
-			emptyDescription: msg("Go to the 'Alert list' for more details or to manage existing alerts."),
-			emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,
-			class: "shelved",
-			filter: (item) => {
-				return item.hasAttribute("shelved");
-			}
-		};
-		else return {
+			emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`
+		}, {
 			name: "all",
+			title: msg("Active"),
 			emptyTitle: msg("No active alerts"),
-			emptyDescription: msg("Go to the 'Alert list' for more details or to manage existing alerts."),
-			emptyIcon: html`<obi-alerts></obi-alerts>`,
-			class: "all",
-			filter: (item) => {
-				return !item.hasAttribute("shelved");
-			}
-		};
+			emptyIcon: html`<obi-alerts></obi-alerts>`
+		}];
+		if (this.hasShelved) tabs.push({
+			name: "shelved",
+			title: msg("Shelved"),
+			emptyTitle: msg("No shelved alerts"),
+			emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`
+		});
+		return tabs;
+	}
+	/** Where the selected tab sits in `tabs`: the one the user picked, else the second. */
+	selectedTabIndex(tabs) {
+		const index = tabs.findIndex((tab) => tab.name === this._selectedTabName);
+		return index === -1 ? 1 : index;
+	}
+	get selectedTab() {
+		const tabs = this.tabs;
+		return tabs[this.selectedTabIndex(tabs)];
+	}
+	/**
+	* The list that shows the selected tab's items. The CSS hides the items the
+	* tab leaves out; the filter tells the list which ones those are.
+	*/
+	renderList(tab, content) {
+		return html`<obc-alert-list
+      class="alert-list ${tab.name}"
+      .filter=${(item) => this.tabFilter(tab.name, item)}
+      >${content}</obc-alert-list
+    >`;
+	}
+	tabFilter(name, item) {
+		const status = item.getAttribute("status") ?? "";
+		if (name === "unacked") return WAITING_FOR_ACK.includes(status) && !item.hasAttribute("shelved");
+		if (name === "shelved") return item.hasAttribute("shelved");
+		return !item.hasAttribute("shelved") && status !== ObcAlertMenuItemStatus.RectifiedUnacknowledged;
 	}
 	render() {
-		const t = this.getSelectedTab();
+		const tabs = this.tabs;
+		const selectedIndex = this.selectedTabIndex(tabs);
+		const t = tabs[selectedIndex];
 		return html`
       <obc-tabbed-card
-        .nTabs=${this.hasShelved ? 3 : 2}
+        .nTabs=${tabs.length}
         class="wrapper"
         part="wrapper"
-        .selectedTab=${this._selectedTabIndex}
+        .selectedTab=${selectedIndex}
         hasDefaultSlotOnly
         @tab-change=${this.onTabChange}
       >
-        <span slot="tab-title-0">${msg("Unacked")}</span>
-        <span slot="tab-title-1">${msg("Active")}</span>
-        ${this.hasShelved ? html`<span slot="tab-title-2">${msg("Shelved")}</span>` : nothing}
+        ${tabs.map((tab, index) => html`<span slot="tab-title-${index}">${tab.title}</span>`)}
         <div class="container">
-          <obc-alert-list class="alert-list ${t.class}" .filter=${t.filter}>
-            <slot></slot>
-            <slot name="empty-${t.name}-title" slot="empty-title"
-              >${t.emptyTitle}</slot
-            >
-            <slot name="empty-${t.name}-description" slot="empty-description"
-              >${t.emptyDescription}</slot
-            >
-            <slot name="empty-${t.name}-icon" slot="empty-icon"
-              >${t.emptyIcon}</slot
-            >
-          </obc-alert-list>
+          ${this.renderList(t, html`<slot></slot>
+              <slot name="empty-${t.name}-title" slot="empty-title"
+                >${t.emptyTitle}</slot
+              >
+              <slot name="empty-${t.name}-description" slot="empty-description"
+                >${msg("Go to the 'Alert list' for more details or to manage existing alerts.")}</slot
+              >
+              <slot name="empty-${t.name}-icon" slot="empty-icon"
+                >${t.emptyIcon}</slot
+              >`)}
           <div class="action">
-            <obc-button
-              variant="raised"
-              .disabled=${!this.canAckAll}
-              fullWidth
-              class="btn"
-              data-testid="ack-all-visible-button"
-              @click=${this.handleAckAllVisibleClick}
-            >
-              ${msg("ACK visible")}
-            </obc-button>
+            ${this.offersAckAll ? html`<obc-button
+                    variant="raised"
+                    .disabled=${!this.canAckAll}
+                    fullWidth
+                    class="btn"
+                    data-testid="ack-all-visible-button"
+                    @click=${this.handleAckAllVisibleClick}
+                  >
+                    ${msg("ACK visible")}
+                  </obc-button>` : nothing}
             ${this.showSilenceButton ? html`<obc-button
                     variant="normal"
                     fullWidth
@@ -153,8 +174,8 @@ __decorate([property({
 	type: Boolean,
 	attribute: false
 })], ObcAlertMenu.prototype, "showAlertListButton", void 0);
-__decorate([state()], ObcAlertMenu.prototype, "_selectedTabIndex", void 0);
-__decorate([query("obc-alert-list")], ObcAlertMenu.prototype, "alertList", void 0);
+__decorate([state()], ObcAlertMenu.prototype, "_selectedTabName", void 0);
+__decorate([query(".alert-list")], ObcAlertMenu.prototype, "alertList", void 0);
 ObcAlertMenu = __decorate([localized(), customElement("obc-alert-menu")], ObcAlertMenu);
 //#endregion
 export { ObcAlertMenu };

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

@@ -1 +1 @@
-{"version":3,"file":"alert-menu.js","names":[],"sources":["../../../src/components/alert-menu/alert-menu.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './alert-menu.css?inline';\nimport '../button/button.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alert-list.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../tabbed-card/tabbed-card.js';\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport '../../building-blocks/alert-list/alert-list.js';\nimport {ObcAlertList} from '../../building-blocks/alert-list/alert-list.js';\nimport {ObcTabbedCardChangeEvent} from '../tabbed-card/tabbed-card.js';\nimport {ObcAlertMenuItemStatus} from '../alert-menu-item/alert-menu-item.js';\nimport {PopoverController} from '../../internal/popover-controller.js';\n\nexport type ObcAckAllVisibleClickEvent = CustomEvent<{\n  visibleElements: {element: HTMLElement; index: number}[];\n  tabName: 'shelved' | 'unacked' | 'all';\n}>;\n\n/**\n * `<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.\n *\n * Provides a compact, interactive menu for reviewing current alerts, grouped by status (e.g., unacknowledged, active, shelved). Users can acknowledge visible alerts, silence notifications, or navigate to a full alert list. Designed for quick triage and management of alert items in a sidebar or overlay context.\n *\n * ### Features\n * - **Tabbed organization:** Switch between \"Unacked\", \"Active\", and (optionally) \"Shelved\" tabs for focused alert review.\n * - **Alert filtering:** Each tab displays only relevant alerts (e.g., \"Unacked\" shows only unacknowledged, non-shelved items).\n * - **Bulk actions:** \"ACK visible\" button allows acknowledging all currently visible (filtered) alerts at once.\n * - **Silence and navigation:** Dedicated buttons to silence alerts or jump to the full alert list.\n * - **Dynamic content:** Supports any number of `<obc-alert-menu-item>` children, with automatic empty-state messaging and icons per tab.\n * - **Responsive layout:** Adapts to available space, with scrollable alert lists and sticky action bar.\n * - **Customizable:** Optionally show/hide the \"Shelved\" tab via `hasShelved` property; enable/disable bulk ACK via `canAckAll`.\n *\n * ### Usage Guidelines\n * Use `<obc-alert-menu>` to provide users with a focused, actionable summary of current alerts, typically in a sidebar, overlay, or dashboard context. Ideal for scenarios where users need to quickly review, acknowledge, or silence multiple alerts without leaving their current workflow. Avoid using for persistent, always-visible alert banners; for that, use a dedicated alert banner or notification system.\n *\n * - Place one or more `<obc-alert-menu-item>` elements as children to populate the alert list.\n * - Use the `hasShelved` property to enable the \"Shelved\" tab if your application supports alert shelving.\n * - Use the `canAckAll` property to control whether the \"ACK visible\" button is enabled (e.g., only when there are unacknowledged alerts in view).\n * - Listen for custom events (`ack-all-visible-click`, `silence-click`, `go-to-alert-list-click`) to handle user actions.\n *\n * **TODO(designer):** Confirm if there are recommended maximum numbers of alerts to display, or if there are best practices for when to use the \"Shelved\" tab.\n *\n * ### Slots\n *\n * | Slot Name                        | Renders When...                  | Purpose                                                        |\n * |----------------------------------|----------------------------------|----------------------------------------------------------------|\n * | (default)                        | Always                           | Place one or more `<obc-alert-menu-item>` elements as alert rows. |\n * | empty-<tab>-title                | Selected tab is empty            | Custom title for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n * | empty-<tab>-description          | Selected tab is empty            | Custom description for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n * | empty-<tab>-icon                 | Selected tab is empty            | Custom icon for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n *\n * ### Properties\n * - `hasShelved` (boolean): If true, displays the \"Shelved\" tab and enables shelving support. Default: false.\n * - `canAckAll` (boolean): If true, enables the \"ACK visible\" button for bulk acknowledgment. Default: false.\n * - `showSilenceButton` (boolean): If true, shows the \"Silence\" button. Default: true.\n * - `showAlertListButton` (boolean): If true, shows the \"Alerts\" navigation button. Default: true.\n *\n * ### Events\n * - **ack-all-visible-click** – Fired when the \"ACK visible\" button is clicked. The event detail includes the list of visible alert elements and the current tab name.\n * - **silence-click** – Fired when the \"Silence\" button is clicked.\n * - **go-to-alert-list-click** – Fired when the \"Alerts\" navigation button is clicked.\n *\n * ### Best Practices and Constraints\n * - Only enable \"ACK visible\" when there are actionable, unacknowledged alerts in the current view.\n * - Use the \"Shelved\" tab only if your application supports shelving alerts; otherwise, omit it for simplicity.\n * - For accessibility, keep all alert items and action buttons keyboard navigable.\n * - Do not use this component for persistent, always-on-screen alerts; use banners or dialogs for critical, persistent notifications.\n *\n * ### Example\n * ```\n * <obc-alert-menu hasShelved canAckAll>\n *   <obc-alert-menu-item active hasTime>\n *     <obi-placeholder slot=\"alert-icon\"></obi-placeholder>\n *     <span slot=\"title\">Engine Overheat</span>\n *     <span slot=\"description\">Main engine temperature exceeds threshold</span>\n *     <span slot=\"time\">09:12:34</span>\n *   </obc-alert-menu-item>\n *   <!-- More alert items... -->\n * </obc-alert-menu>\n * ```\n *\n * @property hasShelved - If true, displays the \"Shelved\" tab and enables shelving support for alerts.\n *   Set to false to hide the \"Shelved\" tab and related filtering.\n * @property canAckAll - If true, enables the \"ACK visible\" button, allowing users to acknowledge all currently visible alerts in the active tab.\n *   Should be set to true only when there are unacknowledged alerts in view.\n * @property showSilenceButton - If true, shows the \"Silence\" button in the action bar.\n *   When hidden, the \"ACK visible\" button expands to fill the freed space.\n * @property showAlertListButton - If true, shows the \"Alerts\" navigation button in the action bar.\n *   When hidden, the \"ACK visible\" button expands to fill the freed space.\n * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.\n * @property open - Whether the menu is showing.\n * @availableWhen open softDismiss==true\n * @slot - The alerts items as ObcAlertMenuItem\n * @slot empty-<tab>-title - Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-description - Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-icon - Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @fires {ObcAckAllVisibleClickEvent} ack-all-visible-click - Fired when the ack all visible button is clicked\n * @fires {CustomEvent} silence-click - Fired when the silence button is clicked\n * @fires {CustomEvent} go-to-alert-list-click - Fired when the go to alert list button is clicked\n * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-alert-menu')\nexport class ObcAlertMenu extends LitElement {\n  @property({type: Boolean}) softDismiss = false;\n\n  @property({type: Boolean}) open = false;\n\n  protected readonly softDismissController = new PopoverController(this);\n\n  @property({type: Boolean}) hasShelved: boolean = false;\n\n  @property({type: Boolean}) canAckAll: boolean = false;\n\n  @property({type: Boolean, attribute: false}) showSilenceButton: boolean =\n    true;\n\n  @property({type: Boolean, attribute: false}) showAlertListButton: boolean =\n    true;\n\n  @state() private _selectedTabIndex = 1;\n\n  @query('obc-alert-list')\n  private alertList!: ObcAlertList;\n\n  private handleAckAllVisibleClick() {\n    const panel = this.alertList;\n    const visibleElements = panel.getVisibleElements();\n    this.dispatchEvent(\n      new CustomEvent('ack-all-visible-click', {\n        detail: {\n          visibleElements: visibleElements,\n          tabName: this.getSelectedTab().name,\n        },\n      })\n    );\n  }\n\n  private onTabChange(e: ObcTabbedCardChangeEvent) {\n    this._selectedTabIndex = e.detail.tab;\n  }\n\n  private getSelectedTab() {\n    if (this._selectedTabIndex === 0) {\n      return {\n        name: 'unacked',\n        emptyTitle: msg('No unacknowledged alerts'),\n        emptyDescription: msg(\n          \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n        ),\n        emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n        class: 'unacked',\n        filter: (item: HTMLElement) => {\n          return (\n            item.getAttribute('status') ===\n              ObcAlertMenuItemStatus.Unacknowledged &&\n            !item.hasAttribute('shelved')\n          );\n        },\n      };\n    } else if (this._selectedTabIndex === 2) {\n      return {\n        name: 'shelved',\n        emptyTitle: msg('No shelved alerts'),\n        emptyDescription: msg(\n          \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n        ),\n        emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n        class: 'shelved',\n        filter: (item: HTMLElement) => {\n          return item.hasAttribute('shelved');\n        },\n      };\n    } else {\n      return {\n        name: 'all',\n        emptyTitle: msg('No active alerts'),\n        emptyDescription: msg(\n          \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n        ),\n        emptyIcon: html`<obi-alerts></obi-alerts>`,\n        class: 'all',\n        filter: (item: HTMLElement) => {\n          return !item.hasAttribute('shelved');\n        },\n      };\n    }\n  }\n\n  override render() {\n    const t = this.getSelectedTab();\n\n    return html`\n      <obc-tabbed-card\n        .nTabs=${this.hasShelved ? 3 : 2}\n        class=\"wrapper\"\n        part=\"wrapper\"\n        .selectedTab=${this._selectedTabIndex}\n        hasDefaultSlotOnly\n        @tab-change=${this.onTabChange}\n      >\n        <span slot=\"tab-title-0\">${msg('Unacked')}</span>\n        <span slot=\"tab-title-1\">${msg('Active')}</span>\n        ${\n          this.hasShelved\n            ? html`<span slot=\"tab-title-2\">${msg('Shelved')}</span>`\n            : nothing\n        }\n        <div class=\"container\">\n          <obc-alert-list class=\"alert-list ${t.class}\" .filter=${t.filter}>\n            <slot></slot>\n            <slot name=\"empty-${t.name}-title\" slot=\"empty-title\"\n              >${t.emptyTitle}</slot\n            >\n            <slot name=\"empty-${t.name}-description\" slot=\"empty-description\"\n              >${t.emptyDescription}</slot\n            >\n            <slot name=\"empty-${t.name}-icon\" slot=\"empty-icon\"\n              >${t.emptyIcon}</slot\n            >\n          </obc-alert-list>\n          <div class=\"action\">\n            <obc-button\n              variant=\"raised\"\n              .disabled=${!this.canAckAll}\n              fullWidth\n              class=\"btn\"\n              data-testid=\"ack-all-visible-button\"\n              @click=${this.handleAckAllVisibleClick}\n            >\n              ${msg('ACK visible')}\n            </obc-button>\n            ${\n              this.showSilenceButton\n                ? html`<obc-button\n                    variant=\"normal\"\n                    fullWidth\n                    class=\"btn\"\n                    showLeadingIcon\n                    @click=${() =>\n                      this.dispatchEvent(new CustomEvent('silence-click'))}\n                  >\n                    <obi-silence-iec slot=\"leading-icon\"></obi-silence-iec>\n                    ${msg('Silence')}\n                  </obc-button>`\n                : nothing\n            }\n            ${\n              this.showAlertListButton\n                ? html`<obc-button\n                    variant=\"normal\"\n                    class=\"btn\"\n                    fullWidth\n                    showLeadingIcon\n                    showTrailingIcon\n                    @click=${() =>\n                      this.dispatchEvent(\n                        new CustomEvent('go-to-alert-list-click')\n                      )}\n                  >\n                    <obi-alert-list slot=\"leading-icon\"></obi-alert-list>\n                    <obi-chevron-right-google\n                      slot=\"trailing-icon\"\n                    ></obi-chevron-right-google>\n                    ${msg('Alerts')}\n                  </obc-button>`\n                : nothing\n            }\n          </div>\n        </div>\n      </obc-tabbed-card>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-menu': ObcAlertMenu;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"alert-menu.js","names":[],"sources":["../../../src/components/alert-menu/alert-menu.ts"],"sourcesContent":["import {\n  CSSResultGroup,\n  LitElement,\n  PropertyValues,\n  TemplateResult,\n  html,\n  nothing,\n  unsafeCSS,\n} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './alert-menu.css?inline';\nimport '../button/button.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alert-list.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../tabbed-card/tabbed-card.js';\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport '../../building-blocks/alert-list/alert-list.js';\nimport type {ObcAlertListBase} from '../../building-blocks/alert-list/alert-list-base.js';\nimport {ObcTabbedCardChangeEvent} from '../tabbed-card/tabbed-card.js';\nimport {ObcAlertMenuItemStatus} from '../alert-menu-item/alert-menu-item.js';\nimport {PopoverController} from '../../internal/popover-controller.js';\n\nexport type ObcAckAllVisibleClickEvent = CustomEvent<{\n  visibleElements: {element: HTMLElement; index: number}[];\n  tabName: 'shelved' | 'unacked' | 'all';\n}>;\n\n/** One tab of an alert menu: its name, its label and its empty state. */\nexport interface AlertMenuTab {\n  /** Names the tab in `ack-all-visible-click` and in the `empty-<tab>-*` slots. */\n  name: string;\n  title: string;\n  emptyTitle: string;\n  emptyIcon: TemplateResult;\n}\n\nconst WAITING_FOR_ACK: string[] = [\n  ObcAlertMenuItemStatus.Unacknowledged,\n  ObcAlertMenuItemStatus.RectifiedUnacknowledged,\n];\n\n/**\n * `<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.\n *\n * Provides a compact, interactive menu for reviewing current alerts, grouped by status (e.g., unacknowledged, active, shelved). Users can acknowledge visible alerts, silence notifications, or navigate to a full alert list. Designed for quick triage and management of alert items in a sidebar or overlay context.\n *\n * ### Features\n * - **Tabbed organization:** Switch between \"Unacked\", \"Active\", and (optionally) \"Shelved\" tabs for focused alert review.\n * - **Alert filtering:** Each tab displays only relevant alerts: \"Unacked\" shows the non-shelved items still waiting for acknowledgment (`unacknowledged` or `rectified-unacknowledged`), \"Active\" every non-shelved item except the `rectified-unacknowledged` ones. A subclass changes the tabs and the list through the `tabs` and `renderList` hooks.\n * - **Bulk actions:** \"ACK visible\" button allows acknowledging all currently visible (filtered) alerts at once.\n * - **Silence and navigation:** Dedicated buttons to silence alerts or jump to the full alert list.\n * - **Dynamic content:** Supports any number of `<obc-alert-menu-item>` children, with automatic empty-state messaging and icons per tab.\n * - **Responsive layout:** Adapts to available space, with scrollable alert lists and sticky action bar.\n * - **Customizable:** Optionally show/hide the \"Shelved\" tab via `hasShelved` property; enable/disable bulk ACK via `canAckAll`.\n *\n * ### Usage Guidelines\n * Use `<obc-alert-menu>` to provide users with a focused, actionable summary of current alerts, typically in a sidebar, overlay, or dashboard context. Ideal for scenarios where users need to quickly review, acknowledge, or silence multiple alerts without leaving their current workflow. Avoid using for persistent, always-visible alert banners; for that, use a dedicated alert banner or notification system.\n *\n * - Place one or more `<obc-alert-menu-item>` elements as children to populate the alert list.\n * - Use the `hasShelved` property to enable the \"Shelved\" tab if your application supports alert shelving.\n * - Use the `canAckAll` property to control whether the \"ACK visible\" button is enabled (e.g., only when there are unacknowledged alerts in view).\n * - Listen for custom events (`ack-all-visible-click`, `silence-click`, `go-to-alert-list-click`) to handle user actions.\n *\n * **TODO(designer):** Confirm if there are recommended maximum numbers of alerts to display, or if there are best practices for when to use the \"Shelved\" tab.\n *\n * ### Slots\n *\n * | Slot Name                        | Renders When...                  | Purpose                                                        |\n * |----------------------------------|----------------------------------|----------------------------------------------------------------|\n * | (default)                        | Always                           | Place one or more `<obc-alert-menu-item>` elements as alert rows. |\n * | empty-<tab>-title                | Selected tab is empty            | Custom title for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n * | empty-<tab>-description          | Selected tab is empty            | Custom description for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n * | empty-<tab>-icon                 | Selected tab is empty            | Custom icon for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n *\n * ### Properties\n * - `hasShelved` (boolean): If true, displays the \"Shelved\" tab and enables shelving support. Default: false.\n * - `canAckAll` (boolean): If true, enables the \"ACK visible\" button for bulk acknowledgment. Default: false.\n * - `showSilenceButton` (boolean): If true, shows the \"Silence\" button. Default: true.\n * - `showAlertListButton` (boolean): If true, shows the \"Alerts\" navigation button. Default: true.\n *\n * ### Events\n * - **ack-all-visible-click** – Fired when the \"ACK visible\" button is clicked. The event detail includes the list of visible alert elements and the current tab name.\n * - **silence-click** – Fired when the \"Silence\" button is clicked.\n * - **go-to-alert-list-click** – Fired when the \"Alerts\" navigation button is clicked.\n *\n * ### Best Practices and Constraints\n * - Only enable \"ACK visible\" when there are actionable, unacknowledged alerts in the current view.\n * - Use the \"Shelved\" tab only if your application supports shelving alerts; otherwise, omit it for simplicity.\n * - For accessibility, keep all alert items and action buttons keyboard navigable.\n * - Do not use this component for persistent, always-on-screen alerts; use banners or dialogs for critical, persistent notifications.\n *\n * ### Example\n * ```\n * <obc-alert-menu hasShelved canAckAll>\n *   <obc-alert-menu-item active hasTime>\n *     <obi-placeholder slot=\"alert-icon\"></obi-placeholder>\n *     <span slot=\"title\">Engine Overheat</span>\n *     <span slot=\"description\">Main engine temperature exceeds threshold</span>\n *     <span slot=\"time\">09:12:34</span>\n *   </obc-alert-menu-item>\n *   <!-- More alert items... -->\n * </obc-alert-menu>\n * ```\n *\n * @property hasShelved - If true, displays the \"Shelved\" tab and enables shelving support for alerts.\n *   Set to false to hide the \"Shelved\" tab and related filtering.\n * @property canAckAll - If true, enables the \"ACK visible\" button, allowing users to acknowledge all currently visible alerts in the active tab.\n *   Should be set to true only when there are unacknowledged alerts in view.\n * @property showSilenceButton - If true, shows the \"Silence\" button in the action bar.\n *   When hidden, the \"ACK visible\" button expands to fill the freed space.\n * @property showAlertListButton - If true, shows the \"Alerts\" navigation button in the action bar.\n *   When hidden, the \"ACK visible\" button expands to fill the freed space.\n * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.\n * @property open - Whether the menu is showing.\n * @availableWhen open softDismiss==true\n * @slot - The alerts items as ObcAlertMenuItem\n * @slot empty-<tab>-title - Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-description - Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-icon - Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @fires {ObcAckAllVisibleClickEvent} ack-all-visible-click - Fired when the ack all visible button is clicked\n * @fires {CustomEvent} silence-click - Fired when the silence button is clicked\n * @fires {CustomEvent} go-to-alert-list-click - Fired when the go to alert list button is clicked\n * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-alert-menu')\nexport class ObcAlertMenu extends LitElement {\n  @property({type: Boolean}) softDismiss = false;\n\n  @property({type: Boolean}) open = false;\n\n  protected readonly softDismissController = new PopoverController(this);\n\n  @property({type: Boolean}) hasShelved: boolean = false;\n\n  @property({type: Boolean}) canAckAll: boolean = false;\n\n  @property({type: Boolean, attribute: false}) showSilenceButton: boolean =\n    true;\n\n  @property({type: Boolean, attribute: false}) showAlertListButton: boolean =\n    true;\n\n  /** The `name` of the tab the user picked; the second tab shows until then. */\n  @state() private _selectedTabName?: string;\n\n  @query('.alert-list')\n  private alertList!: ObcAlertListBase;\n\n  private handleAckAllVisibleClick() {\n    const panel = this.alertList;\n    const visibleElements = panel.getVisibleElements();\n    this.dispatchEvent(\n      new CustomEvent('ack-all-visible-click', {\n        detail: {\n          visibleElements: visibleElements,\n          tabName: this.selectedTab.name,\n        },\n      })\n    );\n  }\n\n  private onTabChange(e: ObcTabbedCardChangeEvent) {\n    this._selectedTabName = this.tabs[e.detail.tab]?.name;\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>) {\n    super.willUpdate(changedProperties);\n    // A picked tab that goes away, as Shelved does when `hasShelved` turns\n    // off, gives way to the second tab, which stays when the tab returns.\n    if (!this.tabs.some((tab) => tab.name === this._selectedTabName)) {\n      this._selectedTabName = undefined;\n    }\n  }\n\n  /** Whether the menu offers \"ACK visible\" at all; `canAckAll` enables it. */\n  protected get offersAckAll(): boolean {\n    return true;\n  }\n\n  /** The tabs in display order; the menu opens on the second one. */\n  protected get tabs(): AlertMenuTab[] {\n    const tabs = [\n      {\n        name: 'unacked',\n        title: msg('Unacked'),\n        emptyTitle: msg('No unacknowledged alerts'),\n        emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n      },\n      {\n        name: 'all',\n        title: msg('Active'),\n        emptyTitle: msg('No active alerts'),\n        emptyIcon: html`<obi-alerts></obi-alerts>`,\n      },\n    ];\n    if (this.hasShelved) {\n      tabs.push({\n        name: 'shelved',\n        title: msg('Shelved'),\n        emptyTitle: msg('No shelved alerts'),\n        emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n      });\n    }\n    return tabs;\n  }\n\n  /** Where the selected tab sits in `tabs`: the one the user picked, else the second. */\n  private selectedTabIndex(tabs: AlertMenuTab[]): number {\n    const index = tabs.findIndex((tab) => tab.name === this._selectedTabName);\n    return index === -1 ? 1 : index;\n  }\n\n  private get selectedTab(): AlertMenuTab {\n    const tabs = this.tabs;\n    return tabs[this.selectedTabIndex(tabs)];\n  }\n\n  /**\n   * The list that shows the selected tab's items. The CSS hides the items the\n   * tab leaves out; the filter tells the list which ones those are.\n   */\n  protected renderList(\n    tab: AlertMenuTab,\n    content: TemplateResult\n  ): TemplateResult {\n    return html`<obc-alert-list\n      class=\"alert-list ${tab.name}\"\n      .filter=${(item: HTMLElement) => this.tabFilter(tab.name, item)}\n      >${content}</obc-alert-list\n    >`;\n  }\n\n  private tabFilter(name: string, item: HTMLElement): boolean {\n    const status = item.getAttribute('status') ?? '';\n    if (name === 'unacked') {\n      return WAITING_FOR_ACK.includes(status) && !item.hasAttribute('shelved');\n    }\n    if (name === 'shelved') {\n      return item.hasAttribute('shelved');\n    }\n    return (\n      !item.hasAttribute('shelved') &&\n      status !== ObcAlertMenuItemStatus.RectifiedUnacknowledged\n    );\n  }\n\n  override render() {\n    const tabs = this.tabs;\n    const selectedIndex = this.selectedTabIndex(tabs);\n    const t = tabs[selectedIndex];\n\n    return html`\n      <obc-tabbed-card\n        .nTabs=${tabs.length}\n        class=\"wrapper\"\n        part=\"wrapper\"\n        .selectedTab=${selectedIndex}\n        hasDefaultSlotOnly\n        @tab-change=${this.onTabChange}\n      >\n        ${tabs.map(\n          (tab, index) =>\n            html`<span slot=\"tab-title-${index}\">${tab.title}</span>`\n        )}\n        <div class=\"container\">\n          ${this.renderList(\n            t,\n            html`<slot></slot>\n              <slot name=\"empty-${t.name}-title\" slot=\"empty-title\"\n                >${t.emptyTitle}</slot\n              >\n              <slot name=\"empty-${t.name}-description\" slot=\"empty-description\"\n                >${msg(\n                  \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n                )}</slot\n              >\n              <slot name=\"empty-${t.name}-icon\" slot=\"empty-icon\"\n                >${t.emptyIcon}</slot\n              >`\n          )}\n          <div class=\"action\">\n            ${\n              this.offersAckAll\n                ? html`<obc-button\n                    variant=\"raised\"\n                    .disabled=${!this.canAckAll}\n                    fullWidth\n                    class=\"btn\"\n                    data-testid=\"ack-all-visible-button\"\n                    @click=${this.handleAckAllVisibleClick}\n                  >\n                    ${msg('ACK visible')}\n                  </obc-button>`\n                : nothing\n            }\n            ${\n              this.showSilenceButton\n                ? html`<obc-button\n                    variant=\"normal\"\n                    fullWidth\n                    class=\"btn\"\n                    showLeadingIcon\n                    @click=${() =>\n                      this.dispatchEvent(new CustomEvent('silence-click'))}\n                  >\n                    <obi-silence-iec slot=\"leading-icon\"></obi-silence-iec>\n                    ${msg('Silence')}\n                  </obc-button>`\n                : nothing\n            }\n            ${\n              this.showAlertListButton\n                ? html`<obc-button\n                    variant=\"normal\"\n                    class=\"btn\"\n                    fullWidth\n                    showLeadingIcon\n                    showTrailingIcon\n                    @click=${() =>\n                      this.dispatchEvent(\n                        new CustomEvent('go-to-alert-list-click')\n                      )}\n                  >\n                    <obi-alert-list slot=\"leading-icon\"></obi-alert-list>\n                    <obi-chevron-right-google\n                      slot=\"trailing-icon\"\n                    ></obi-chevron-right-google>\n                    ${msg('Alerts')}\n                  </obc-button>`\n                : nothing\n            }\n          </div>\n        </div>\n      </obc-tabbed-card>\n    `;\n  }\n\n  static override styles: CSSResultGroup = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-menu': ObcAlertMenu;\n  }\n}\n"],"mappings":"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"}

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

@@ -11,7 +11,8 @@ export declare enum ObcAlertMenuItemStatus {
     Acknowledged = "acknowledged",
     NoAckAlarm = "no-ack-alarm",
     NoAckWarning = "no-ack-warning",
-    Rectified = "rectified"
+    Rectified = "rectified",
+    RectifiedUnacknowledged = "rectified-unacknowledged"
 }
 /**
  * Appearance of an alert menu item action.
@@ -32,12 +33,13 @@ export declare enum ObcAlertMenuItemActionState {
  * ### Features
  * - **Status Variants:** Supports multiple alert states via the `status` property:
  *   - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.
+ *   - **RectifiedUnacknowledged:** The situation that raised the alert has cleared, but the alert still waits for acknowledgment, so the ACK action stays.
  *   - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.
  *   - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.
  * - **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 Buttons:** Displays an "ACK" button for unacknowledged alerts and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.
+ * - **Action Buttons:** Displays an "ACK" button for the statuses that still wait for acknowledgment (`unacknowledged` and `rectified-unacknowledged`) 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).
@@ -51,7 +53,9 @@ export declare enum ObcAlertMenuItemActionState {
  * - 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.
+ * - Use the `shelved` property to indicate alerts that are temporarily deferred, and `blocked` for alerts another system has set aside. The alert menus sort items into their tabs by `status` and `shelved`; `blocked` is there for menus that list blocked alerts apart.
+ *
+ * **TODO(designer):** Should a blocked alert show a marker, as a shelved one shows the shelf icon?
  *
  * ### Slots
  * | Slot Name     | Renders When...                | Purpose                                              |
@@ -91,13 +95,16 @@ export declare enum ObcAlertMenuItemActionState {
  *   When true, the `icon` slot is rendered.
  * @property shelved - Indicates if the alert is shelved (temporarily deferred).
  *   When true, a tertiary icon is shown to represent the shelved state.
+ * @property blocked - Indicates that another system has blocked the alert as not relevant here.
+ *   For menus that list blocked alerts apart; the item itself shows no marker for it yet.
  * @property title - The title of the alert.
  * @property description - The description of the alert.
  * @property day - The day label for the alert (e.g., "Yesterday").
  * @property time - The time label for the alert (e.g., "14:30").
  * @property status - The current status of the alert item.
  *   Determines visual style, icon, and action button visibility.
- *   Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified'.
+ *   Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified', 'rectified-unacknowledged'.
+ *   'unacknowledged' and 'rectified-unacknowledged' show the ACK action; the other values show a trailing icon instead.
  *   Default is 'unacknowledged'.
  * @property open - Whether the item is expanded/open to show additional details.
  *   Toggled by clicking the item.
@@ -130,6 +137,8 @@ export declare class ObcAlertMenuItem extends LitElement {
     hasIcon: boolean;
     /** Indicates if the alert is shelved (temporarily deferred). When true, a tertiary icon is shown to represent the shelved state. */
     shelved: boolean;
+    /** Indicates that another system has blocked the alert as not relevant here. For menus that list blocked alerts apart; the item itself shows no marker for it yet. */
+    blocked: boolean;
     /** The title of the alert. */
     title: string;
     /** The description of the alert. */
@@ -138,7 +147,7 @@ export declare class ObcAlertMenuItem extends LitElement {
     day: string;
     /** The time label for the alert (e.g., "14:30"). */
     time: string;
-    /** The current status of the alert item. Determines visual style, icon, and action button visibility. Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified'. Default is 'unacknowledged'. */
+    /** The current status of the alert item. Determines visual style, icon, and action button visibility. Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified', 'rectified-unacknowledged'. 'unacknowledged' and 'rectified-unacknowledged' show the ACK action; the other values show a trailing icon instead. Default is 'unacknowledged'. */
     status: ObcAlertMenuItemStatus;
     /** Whether the item is expanded/open to show additional details. Toggled by clicking the item. */
     open: boolean;
@@ -152,6 +161,7 @@ export declare class ObcAlertMenuItem extends LitElement {
     primaryActionState: ObcAlertMenuItemActionState;
     /** Appearance of the secondary action: `enabled`, `disabled` or `none`, which hides it. */
     secondaryActionState: ObcAlertMenuItemActionState;
+    private get canAck();
     private get primaryActionLabel();
     private get secondaryActionLabelToShow();
     private get primaryActionDisabled();
@@ -165,7 +175,7 @@ export declare class ObcAlertMenuItem extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'ob-alert-menu-item': ObcAlertMenuItem;
+        'obc-alert-menu-item': ObcAlertMenuItem;
     }
 }
 //# sourceMappingURL=alert-menu-item.d.ts.map

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;;;;;GAKG;AACH,oBAAY,2BAA2B;IACrC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoGG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IACnB,OAAO,UAAS;IAED,OAAO,UAAS;IAEvB,KAAK,SAAM;IAEpB,WAAW,SAAM;IAEjB,GAAG,SAAM;IAET,IAAI,SAAM;IAEK,MAAM,yBACP;IAEb,IAAI,UAAS;IAEd,IAAI,EAAE,sBAAsB,CAClB;IAET,YAAY,UAAS;IAEtB,oBAAoB,SAAM;IAE1B,kBAAkB,EAAE,2BAA2B,CACnC;IAEZ,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;IAM1B,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,0BAA0B;IAKzB,MAAM;IAoDf,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;IACvB,uBAAuB,6BAA6B;CACrD;AAED;;;;;GAKG;AACH,oBAAY,2BAA2B;IACrC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IACnB,OAAO,UAAS;IAED,OAAO,UAAS;IAEhB,OAAO,UAAS;IAEvB,KAAK,SAAM;IAEpB,WAAW,SAAM;IAEjB,GAAG,SAAM;IAET,IAAI,SAAM;IAEK,MAAM,yBACP;IAEb,IAAI,UAAS;IAEd,IAAI,EAAE,sBAAsB,CAClB;IAET,YAAY,UAAS;IAEtB,oBAAoB,SAAM;IAE1B,kBAAkB,EAAE,2BAA2B,CACnC;IAEZ,oBAAoB,EAAE,2BAA2B,CACxC;IAEnC,OAAO,KAAK,MAAM,GAKjB;IAED,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;IAM1B,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,0BAA0B;IAKzB,MAAM;IAoDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}

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

@@ -17,6 +17,7 @@ var ObcAlertMenuItemStatus = /* @__PURE__ */ function(ObcAlertMenuItemStatus) {
 	ObcAlertMenuItemStatus["NoAckAlarm"] = "no-ack-alarm";
 	ObcAlertMenuItemStatus["NoAckWarning"] = "no-ack-warning";
 	ObcAlertMenuItemStatus["Rectified"] = "rectified";
+	ObcAlertMenuItemStatus["RectifiedUnacknowledged"] = "rectified-unacknowledged";
 	return ObcAlertMenuItemStatus;
 }({});
 /**
@@ -36,6 +37,7 @@ var ObcAlertMenuItem = class ObcAlertMenuItem extends LitElement {
 		super(..._args);
 		this.hasIcon = false;
 		this.shelved = false;
+		this.blocked = false;
 		this.title = "";
 		this.description = "";
 		this.day = "";
@@ -48,9 +50,12 @@ var ObcAlertMenuItem = class ObcAlertMenuItem extends LitElement {
 		this.primaryActionState = "enabled";
 		this.secondaryActionState = "none";
 	}
+	get canAck() {
+		return this.status === "unacknowledged" || this.status === "rectified-unacknowledged";
+	}
 	get primaryActionLabel() {
 		if (this.primaryActionState === "none") return "";
-		return this.status === "unacknowledged" ? "ACK" : "";
+		return this.canAck ? "ACK" : "";
 	}
 	get secondaryActionLabelToShow() {
 		if (this.secondaryActionState === "none") return "";
@@ -63,7 +68,7 @@ var ObcAlertMenuItem = class ObcAlertMenuItem extends LitElement {
 		return this.secondaryActionState === "disabled";
 	}
 	get hasTrailingIcon() {
-		return this.status !== "unacknowledged";
+		return !this.canAck;
 	}
 	handleMessageClick(event) {
 		event.stopPropagation();
@@ -123,6 +128,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], ObcAlertMenuItem.prototype, "shelved", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ObcAlertMenuItem.prototype, "blocked", void 0);
 __decorate([property({ type: String })], ObcAlertMenuItem.prototype, "title", void 0);
 __decorate([property({ type: String })], ObcAlertMenuItem.prototype, "description", void 0);
 __decorate([property({ type: String })], ObcAlertMenuItem.prototype, "day", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"alert-menu-item.js","names":[],"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 * | title         | Always                        | Title content; falls back to the `title` property.   |\n * | description   | Always                        | Description content; falls back to the `description` property. |\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 * @property hasIcon - Whether to display a secondary icon (e.g., system/source) in the item.\n *   When true, the `icon` slot is rendered.\n * @property shelved - Indicates if the alert is shelved (temporarily deferred).\n *   When true, a tertiary icon is shown to represent the shelved state.\n * @property title - The title of the alert.\n * @property description - The description of the alert.\n * @property day - The day label for the alert (e.g., \"Yesterday\").\n * @property time - The time label for the alert (e.g., \"14:30\").\n * @property status - 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 * @property open - Whether the item is expanded/open to show additional details.\n *   Toggled by clicking the item.\n * @property size - 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 * @property animateIntro - Whether to animate the item's appearance (intro animation).\n * @property secondaryActionLabel - 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 * @property primaryActionState - Appearance of the primary (ACK) action: `enabled`, `disabled` or `none`,\n *   which hides it.\n * @property secondaryActionState - Appearance of the secondary action: `enabled`, `disabled` or `none`, which\n *   hides it.\n * @slot alert-icon - The main alert icon representing the alert type.\n * @slot title - Title content; falls back to the `title` property when empty.\n * @slot description - Description content; falls back to the `description` property when empty.\n * @slot icon - Optional secondary icon (e.g., source/system).\n *\n * @fires {CustomEvent<void>} ack-click - Fired when the ACK action button is clicked.\n * @fires {CustomEvent<void>} ack-secondary-click - Fired when the secondary action button is clicked.\n * @fires {CustomEvent<void>} item-click - Fired when the alert menu item is clicked.\n * @stable\n */\n@customElement('obc-alert-menu-item')\nexport class ObcAlertMenuItem extends LitElement {\n  @property({type: Boolean}) hasIcon = false;\n\n  @property({type: Boolean, reflect: true}) shelved = false;\n\n  @property({type: String}) override title = '';\n\n  @property({type: String}) description = '';\n\n  @property({type: String}) day = '';\n\n  @property({type: String}) time = '';\n\n  @property({type: String, reflect: true}) status =\n    ObcAlertMenuItemStatus.Unacknowledged;\n\n  @property({type: Boolean}) open = false;\n\n  @property({type: String}) size: ObcMessageMenuItemSize =\n    ObcMessageMenuItemSize.SingleLine;\n\n  @property({type: Boolean}) animateIntro = false;\n\n  @property({type: String}) secondaryActionLabel = '';\n\n  @property({type: String}) primaryActionState: ObcAlertMenuItemActionState =\n    ObcAlertMenuItemActionState.Enabled;\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(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(new CustomEvent('item-click'));\n    this.open = !this.open;\n  }\n\n  private handleActionClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ack-click'));\n  }\n\n  private handleSecondaryActionClick(event: Event) {\n    event.stopPropagation();\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        ${\n          this.hasIcon\n            ? html`<slot name=\"icon\" slot=\"secondary-icon\"></slot>`\n            : nothing\n        }\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"],"mappings":"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"}
+{"version":3,"file":"alert-menu-item.js","names":[],"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  RectifiedUnacknowledged = 'rectified-unacknowledged',\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 *   - **RectifiedUnacknowledged:** The situation that raised the alert has cleared, but the alert still waits for acknowledgment, so the ACK action stays.\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 the statuses that still wait for acknowledgment (`unacknowledged` and `rectified-unacknowledged`) 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, and `blocked` for alerts another system has set aside. The alert menus sort items into their tabs by `status` and `shelved`; `blocked` is there for menus that list blocked alerts apart.\n *\n * **TODO(designer):** Should a blocked alert show a marker, as a shelved one shows the shelf icon?\n *\n * ### Slots\n * | Slot Name     | Renders When...                | Purpose                                              |\n * |---------------|-------------------------------|------------------------------------------------------|\n * | alert-icon    | Always                        | Main alert icon representing the alert type.         |\n * | title         | Always                        | Title content; falls back to the `title` property.   |\n * | description   | Always                        | Description content; falls back to the `description` property. |\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 * @property hasIcon - Whether to display a secondary icon (e.g., system/source) in the item.\n *   When true, the `icon` slot is rendered.\n * @property shelved - Indicates if the alert is shelved (temporarily deferred).\n *   When true, a tertiary icon is shown to represent the shelved state.\n * @property blocked - Indicates that another system has blocked the alert as not relevant here.\n *   For menus that list blocked alerts apart; the item itself shows no marker for it yet.\n * @property title - The title of the alert.\n * @property description - The description of the alert.\n * @property day - The day label for the alert (e.g., \"Yesterday\").\n * @property time - The time label for the alert (e.g., \"14:30\").\n * @property status - 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', 'rectified-unacknowledged'.\n *   'unacknowledged' and 'rectified-unacknowledged' show the ACK action; the other values show a trailing icon instead.\n *   Default is 'unacknowledged'.\n * @property open - Whether the item is expanded/open to show additional details.\n *   Toggled by clicking the item.\n * @property size - 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 * @property animateIntro - Whether to animate the item's appearance (intro animation).\n * @property secondaryActionLabel - 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 * @property primaryActionState - Appearance of the primary (ACK) action: `enabled`, `disabled` or `none`,\n *   which hides it.\n * @property secondaryActionState - Appearance of the secondary action: `enabled`, `disabled` or `none`, which\n *   hides it.\n * @slot alert-icon - The main alert icon representing the alert type.\n * @slot title - Title content; falls back to the `title` property when empty.\n * @slot description - Description content; falls back to the `description` property when empty.\n * @slot icon - Optional secondary icon (e.g., source/system).\n *\n * @fires {CustomEvent<void>} ack-click - Fired when the ACK action button is clicked.\n * @fires {CustomEvent<void>} ack-secondary-click - Fired when the secondary action button is clicked.\n * @fires {CustomEvent<void>} item-click - Fired when the alert menu item is clicked.\n * @stable\n */\n@customElement('obc-alert-menu-item')\nexport class ObcAlertMenuItem extends LitElement {\n  @property({type: Boolean}) hasIcon = false;\n\n  @property({type: Boolean, reflect: true}) shelved = false;\n\n  @property({type: Boolean, reflect: true}) blocked = false;\n\n  @property({type: String}) override title = '';\n\n  @property({type: String}) description = '';\n\n  @property({type: String}) day = '';\n\n  @property({type: String}) time = '';\n\n  @property({type: String, reflect: true}) status =\n    ObcAlertMenuItemStatus.Unacknowledged;\n\n  @property({type: Boolean}) open = false;\n\n  @property({type: String}) size: ObcMessageMenuItemSize =\n    ObcMessageMenuItemSize.SingleLine;\n\n  @property({type: Boolean}) animateIntro = false;\n\n  @property({type: String}) secondaryActionLabel = '';\n\n  @property({type: String}) primaryActionState: ObcAlertMenuItemActionState =\n    ObcAlertMenuItemActionState.Enabled;\n\n  @property({type: String}) secondaryActionState: ObcAlertMenuItemActionState =\n    ObcAlertMenuItemActionState.None;\n\n  private get canAck() {\n    return (\n      this.status === ObcAlertMenuItemStatus.Unacknowledged ||\n      this.status === ObcAlertMenuItemStatus.RectifiedUnacknowledged\n    );\n  }\n\n  private get primaryActionLabel() {\n    if (this.primaryActionState === ObcAlertMenuItemActionState.None) {\n      return '';\n    }\n    return this.canAck ? '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.canAck;\n  }\n\n  private handleMessageClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(new CustomEvent('item-click'));\n    this.open = !this.open;\n  }\n\n  private handleActionClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ack-click'));\n  }\n\n  private handleSecondaryActionClick(event: Event) {\n    event.stopPropagation();\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        ${\n          this.hasIcon\n            ? html`<slot name=\"icon\" slot=\"secondary-icon\"></slot>`\n            : nothing\n        }\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    'obc-alert-menu-item': ObcAlertMenuItem;\n  }\n}\n"],"mappings":"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"}

package/dist/components/number-input-field/number-input-field.css.js

@@ -419,12 +419,18 @@ var number_input_field_default = css`* {
 }
 
 .wrapper.align-center .value-input {
-  width: var(--obc-number-input-center-width, auto);
-  min-width: var(--obc-number-input-center-width, 40px);
+  field-sizing: content; /* the unit hugs the value */
+  width: auto;
   text-align: right;
   flex: 0 0 auto;
 }
 
+@supports not (field-sizing: content) {
+  .wrapper.align-center .value-input {
+    flex: 1 1 auto; /* the 20-character default width would push the value out of a narrow field */
+  }
+}
+
 .wrapper.align-right .label-container,
 .wrapper.align-right-unit-outside .label-container {
   justify-content: flex-end;

package/dist/components/number-input-field/number-input-field.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input-field.css.js","names":[],"sources":["../../../src/components/number-input-field/number-input-field.css?inline"],"sourcesContent":["* {\n  box-sizing: border-box;\n  user-select: text;\n}\n\n.wrapper {\n  @mixin base-input-field-wrapper;\n  @mixin base-input-field-sizes;\n\n  &.error .unit-text {\n    color: var(--element-neutral-color);\n  }\n}\n\n/* Shared base styles */\n@mixin base-input-field-all;\n\n.wrapper.align-center .label-container,\n.wrapper.wrapper.align-right .label-container {\n  align-items: baseline;\n}\n\n/* Number input specific: text alignment */\n.value-input {\n  text-align: right;\n}\n\n.squared .input-field-container {\n  border-radius: 0;\n}\n\n/* Unit */\n.unit-text {\n  @mixin font-instrument-unit;\n  color: var(--element-inactive-color);\n  white-space: nowrap;\n  height: var(--global-typography-instrument-unit-line-height);\n  user-select: none;\n\n  &.external {\n    padding-left: var(\n      --ui-components-input-fields-number-input-field-unit-container-padding-left\n    );\n  }\n}\n\n.wrapper.align-center .label-container:focus-within .unit-text {\n  color: var(--element-neutral-color);\n}\n\n/* Alignment variants */\n.wrapper.align-center .label-container {\n  justify-content: center;\n}\n\n.wrapper .value-input {\n  text-align: right;\n  padding: 0;\n}\n\n.wrapper.align-center .value-input {\n  width: var(--obc-number-input-center-width, auto);\n  min-width: var(--obc-number-input-center-width, 40px);\n  text-align: right;\n  flex: 0 0 auto;\n}\n\n.wrapper.align-right .label-container,\n.wrapper.align-right-unit-outside .label-container {\n  justify-content: flex-end;\n}\n"],"mappings":""}
+{"version":3,"file":"number-input-field.css.js","names":[],"sources":["../../../src/components/number-input-field/number-input-field.css?inline"],"sourcesContent":["* {\n  box-sizing: border-box;\n  user-select: text;\n}\n\n.wrapper {\n  @mixin base-input-field-wrapper;\n  @mixin base-input-field-sizes;\n\n  &.error .unit-text {\n    color: var(--element-neutral-color);\n  }\n}\n\n/* Shared base styles */\n@mixin base-input-field-all;\n\n.wrapper.align-center .label-container,\n.wrapper.wrapper.align-right .label-container {\n  align-items: baseline;\n}\n\n/* Number input specific: text alignment */\n.value-input {\n  text-align: right;\n}\n\n.squared .input-field-container {\n  border-radius: 0;\n}\n\n/* Unit */\n.unit-text {\n  @mixin font-instrument-unit;\n  color: var(--element-inactive-color);\n  white-space: nowrap;\n  height: var(--global-typography-instrument-unit-line-height);\n  user-select: none;\n\n  &.external {\n    padding-left: var(\n      --ui-components-input-fields-number-input-field-unit-container-padding-left\n    );\n  }\n}\n\n.wrapper.align-center .label-container:focus-within .unit-text {\n  color: var(--element-neutral-color);\n}\n\n/* Alignment variants */\n.wrapper.align-center .label-container {\n  justify-content: center;\n}\n\n.wrapper .value-input {\n  text-align: right;\n  padding: 0;\n}\n\n.wrapper.align-center .value-input {\n  field-sizing: content; /* the unit hugs the value */\n  width: auto;\n  text-align: right;\n  flex: 0 0 auto;\n}\n\n@supports not (field-sizing: content) {\n  .wrapper.align-center .value-input {\n    flex: 1 1 auto; /* the 20-character default width would push the value out of a narrow field */\n  }\n}\n\n.wrapper.align-right .label-container,\n.wrapper.align-right-unit-outside .label-container {\n  justify-content: flex-end;\n}\n"],"mappings":""}

package/dist/components/number-input-field/number-input-field.d.ts

@@ -98,6 +98,7 @@ export declare class ObcNumberInputField extends LitElement {
     private previousValue;
     private previousDisplayText;
     private lastCommittedValue;
+    private focusFromValueClick;
     private inputElement?;
     get displayValue(): string;
     private getFormatOptions;
@@ -106,18 +107,31 @@ export declare class ObcNumberInputField extends LitElement {
     private isProjectedValueAllowed;
     private onBeforeInput;
     private onFocus;
+    /**
+     * Ungroups a value the user clicked into, once the browser has placed the
+     * caret, and moves the caret with its digits. Ungrouping before that shifts
+     * the text under the pointer and the caret lands beside the clicked digit.
+     */
+    private ungroupKeepingSelection;
+    private ungroupDisplay;
     private onBlur;
     private commitDisplay;
     private dispatchInput;
     private dispatchChange;
     private get shouldUpdateValue();
     private getEffectiveDisplay;
-    private updateCenterAlignedInputWidth;
     firstUpdated(): void;
     private get isEmpty();
     willUpdate(changedProperties: PropertyValues): void;
     updated(): void;
     private renderFooterText;
+    /**
+     * Keeps focus where it is while the chrome around the value is clicked.
+     * The wrapper is a `<label>`, so the click itself focuses the input; without
+     * this the pointerdown would blur it first and commit an unfinished edit.
+     * A click on the value itself is the browser's; it is only noted, so the
+     * focus it causes ungroups the value without moving the caret.
+     */
     private onPointerDown;
     render(): TemplateResult<1>;
     static styles: import('lit').CSSResult;

package/dist/components/number-input-field/number-input-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-input-field.d.ts","sourceRoot":"","sources":["../../../src/components/number-input-field/number-input-field.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAgBb,MAAM,MAAM,6BAA6B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AACzE,MAAM,MAAM,8BAA8B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE1E,oBAAY,4BAA4B;IACtC,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,gBAAgB,uBAAuB;CACxC;AAED,oBAAY,uBAAuB;IACjC,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,4BAA4B;IACtC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACvB,KAAK,SAAO;IACZ,IAAI,SAAM;IACV,WAAW,SAAM;IACjB,SAAS,EAAE,4BAA4B,CAC5B;IAEK,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IAC9B,SAAS,SAAM;IACd,oBAAoB,UAAS;IAC7B,aAAa,UAAS;IAEtB,sBAAsB,UAAS;IAEhC,IAAI,SAAM;IAEV,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,uBAAuB,CACrB;IAEP,cAAc,UAAS;IACxB,UAAU,SAAM;IAEhB,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,YAAY,UAAS;IACtB,cAAc,EAAE,4BAA4B,CAClC;IAET,aAAa,UAAS;IACvB,eAAe,EAAE,4BAA4B,CACnC;IAET,OAAO,UAAS;IAEC,eAAe,SAAM;IAEvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,SAAK;IACtB,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvC,iBAAiB,SAAM;IAExC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,mBAAmB,CAAM;IACjC,OAAO,CAAC,kBAAkB,CAAO;IAEnB,OAAO,CAAC,YAAY,CAAC,CAAmB;IAE/D,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,OAAO;IAaf,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,6BAA6B;IA6B5B,YAAY;IAQrB,OAAO,KAAK,OAAO,GAKlB;IAEQ,UAAU,CAAC,iBAAiB,EAAE,cAAc;IA2B5C,OAAO;IAYhB,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,aAAa;IAyCZ,MAAM;IA4Gf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
+{"version":3,"file":"number-input-field.d.ts","sourceRoot":"","sources":["../../../src/components/number-input-field/number-input-field.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAeb,MAAM,MAAM,6BAA6B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AACzE,MAAM,MAAM,8BAA8B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE1E,oBAAY,4BAA4B;IACtC,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,gBAAgB,uBAAuB;CACxC;AAED,oBAAY,uBAAuB;IACjC,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,4BAA4B;IACtC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACvB,KAAK,SAAO;IACZ,IAAI,SAAM;IACV,WAAW,SAAM;IACjB,SAAS,EAAE,4BAA4B,CAC5B;IAEK,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IAC9B,SAAS,SAAM;IACd,oBAAoB,UAAS;IAC7B,aAAa,UAAS;IAEtB,sBAAsB,UAAS;IAEhC,IAAI,SAAM;IAEV,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,uBAAuB,CACrB;IAEP,cAAc,UAAS;IACxB,UAAU,SAAM;IAEhB,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,YAAY,UAAS;IACtB,cAAc,EAAE,4BAA4B,CAClC;IAET,aAAa,UAAS;IACvB,eAAe,EAAE,4BAA4B,CACnC;IAET,OAAO,UAAS;IAEC,eAAe,SAAM;IAEvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,SAAK;IACtB,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvC,iBAAiB,SAAM;IAExC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,mBAAmB,CAAM;IACjC,OAAO,CAAC,kBAAkB,CAAO;IAE1C,OAAO,CAAC,mBAAmB,CAAS;IAEb,OAAO,CAAC,YAAY,CAAC,CAAmB;IAE/D,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,OAAO;IAaf;;;;OAIG;YACW,uBAAuB;IAiBrC,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,mBAAmB;IAUlB,YAAY;IAOrB,OAAO,KAAK,OAAO,GAKlB;IAEQ,UAAU,CAAC,iBAAiB,EAAE,cAAc;IA2B5C,OAAO;IAUhB,OAAO,CAAC,gBAAgB;IAuBxB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IASZ,MAAM;IA4Gf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}