@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.149 → 2.0.0-next.150

package/dist/components/alert-list-details-experimental/alert-list-details-experimental.d.ts

@@ -0,0 +1,72 @@
+import { LitElement } from 'lit';
+import { Alert } from '../../types.js';
+import '../icon-button/icon-button.js';
+import '../button/button.js';
+import '../../icons/icon-silence-iec.js';
+import '../../icons/icon-alerts.js';
+import '../../icons/icon-alerts-shelf.js';
+import '../../icons/icon-alerts-active.js';
+import '../../icons/icon-alarm-rectified-iec.js';
+import '../../icons/icon-unacknowledged.js';
+import '../../icons/icon-alarm-noack-iec.js';
+import '../../icons/icon-warning-noack-iec.js';
+import '../alert-icon/alert-icon.js';
+import '../scrollbar/scrollbar.js';
+export declare enum AlertListMode {
+    UNACKED = "unacked",
+    ALL = "all",
+    SHELVED = "shelved",
+    BLOCKED = "blocked",
+    RECTIFIED = "rectified"
+}
+export type ObcAckClickEvent = CustomEvent<{
+    alert: Alert;
+}>;
+export type ObcRowClickEvent = CustomEvent<{
+    alert: Alert;
+}>;
+export declare function getAlertListModeData(selectedMode: AlertListMode): {
+    name: AlertListMode;
+    title: string;
+    emptyTitle: string;
+    emptyIcon: import('lit-html').TemplateResult<1>;
+    filter: (alert: Alert) => boolean;
+};
+export declare function canAckFilter(filter: (alert: Alert) => boolean): (alert: Alert) => boolean;
+/**
+ * @availableWhen timeFormatter showTime==true
+ * @property defaultExpanded - Whether groups start expanded. Set false to open the list collapsed.
+ * @fires {ObcAckClickEvent} ack-click - Fired when the user clicks the "ACK" button.
+ * @fires {ObcRowClickEvent} row-click - Fired when the user clicks a row.
+ * @experimental
+ */
+export declare class ObcAlertListDetailsExperimental extends LitElement {
+    selectedMode: AlertListMode;
+    alerts: Alert[];
+    showTime: boolean;
+    timeFormatter: (time: Date) => string;
+    small: boolean;
+    /** Whether groups start expanded. Set false to open the list collapsed. */
+    defaultExpanded: boolean;
+    private alertList;
+    private expansionOverrides;
+    private alertByRowId;
+    getVisibleAlerts(): Alert[];
+    private onRowClick;
+    private onCellButtonClick;
+    private onExpandToggle;
+    private isExpanded;
+    private get columns();
+    private get metadata();
+    private get filteredAlerts();
+    private buildVisibleRows;
+    private buildRowCells;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-alert-list-details-experimental': ObcAlertListDetailsExperimental;
+    }
+}
+//# sourceMappingURL=alert-list-details-experimental.d.ts.map

package/dist/components/alert-list-details-experimental/alert-list-details-experimental.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-list-details-experimental.d.ts","sourceRoot":"","sources":["../../../src/components/alert-list-details-experimental/alert-list-details-experimental.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,+BAA+B,CAAC;AACvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,6BAA6B,CAAC;AACrC,OAAO,EACL,KAAK,EAMN,MAAM,gBAAgB,CAAC;AAgBxB,OAAO,2BAA2B,CAAC;AAEnC,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACzC,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACzC,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,aAAa;;;;;oBAO1C,KAAK;EAuC1B;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,IACpD,OAAO,KAAK,aAKrB;AAED;;;;;;GAMG;AACH,qBACa,+BAAgC,SAAQ,UAAU;IACnC,YAAY,EAAE,aAAa,CAAqB;IACjD,MAAM,EAAE,KAAK,EAAE,CAAM;IACnB,QAAQ,EAAE,OAAO,CAAS;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAEV;IAC9B,KAAK,EAAE,OAAO,CAAS;IACL,eAAe,EAAE,OAAO,CAAQ;IAG7E,OAAO,CAAC,SAAS,CAAY;IAEpB,OAAO,CAAC,kBAAkB,CAA8B;IAEjE,OAAO,CAAC,YAAY,CAA4B;IAEzC,gBAAgB,IAAI,KAAK,EAAE;IAelC,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,UAAU;IAIlB,OAAO,KAAK,OAAO,GAkFlB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,CAAC,gBAAgB;IAiFxB,OAAO,CAAC,aAAa;IAkEZ,MAAM;IA0Bf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qCAAqC,EAAE,+BAA+B,CAAC;KACxE;CACF"}

package/dist/components/alert-list-details-experimental/alert-list-details-experimental.js

@@ -0,0 +1,396 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { customElement } from "../../decorator.js";
+import compentStyle from "./alert-list-details-experimental.css.js";
+import { msg } from "@lit/localize";
+import { property, query, state } from "lit/decorators.js";
+import "../icon-button/icon-button.js";
+import "../button/button.js";
+import "../../icons/icon-silence-iec.js";
+import "../../icons/icon-alerts.js";
+import "../../icons/icon-alerts-shelf.js";
+import "../../icons/icon-alerts-active.js";
+import "../../icons/icon-alarm-rectified-iec.js";
+import "../../icons/icon-unacknowledged.js";
+import "../../icons/icon-alarm-noack-iec.js";
+import "../../icons/icon-warning-noack-iec.js";
+import "../alert-icon/alert-icon.js";
+import { isAcknowledged, isActive, comparePriorityAlerts, isShelved, isBlocked } from "../../types.js";
+import { requiresAcknowledgement, usesAlarmNoAckIcon, excludedFromUnackedFilter } from "../../alert-severity.js";
+import { ObcTableCellType } from "../table/table.js";
+import "../scrollbar/scrollbar.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var AlertListMode = /* @__PURE__ */ ((AlertListMode2) => {
+  AlertListMode2["UNACKED"] = "unacked";
+  AlertListMode2["ALL"] = "all";
+  AlertListMode2["SHELVED"] = "shelved";
+  AlertListMode2["BLOCKED"] = "blocked";
+  AlertListMode2["RECTIFIED"] = "rectified";
+  return AlertListMode2;
+})(AlertListMode || {});
+function getAlertListModeData(selectedMode) {
+  if (selectedMode === "all")
+    return {
+      name: "all",
+      title: msg("All"),
+      emptyTitle: msg("No active alerts"),
+      emptyIcon: html`<obi-alerts></obi-alerts>`,
+      filter: (alert) => !isShelved(alert) && isActive(alert)
+    };
+  else if (selectedMode === "unacked")
+    return {
+      name: "unacked",
+      title: msg("Unacked"),
+      emptyTitle: msg("No unacknowledged alerts"),
+      emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,
+      filter: (alert) => !isAcknowledged(alert) && isActive(alert) && !excludedFromUnackedFilter(alert.type) && !isShelved(alert)
+    };
+  else if (selectedMode === "shelved")
+    return {
+      name: "shelved",
+      title: msg("Shelved"),
+      emptyTitle: msg("No shelved alerts"),
+      emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,
+      filter: (alert) => isShelved(alert)
+    };
+  else if (selectedMode === "blocked")
+    return {
+      name: "blocked",
+      title: msg("Blocked"),
+      emptyTitle: msg("No blocked alerts"),
+      emptyIcon: html`<obi-alerts-active></obi-alerts-active>`,
+      filter: (alert) => isBlocked(alert)
+    };
+  else if (selectedMode === "rectified")
+    return {
+      name: "rectified",
+      title: msg("Rectified"),
+      emptyTitle: msg("No rectified alerts"),
+      emptyIcon: html`<obi-alarm-rectified-iec></obi-alarm-rectified-iec>`,
+      filter: (alert) => !isActive(alert)
+    };
+  else throw new Error("Invalid selected mode");
+}
+function canAckFilter(filter) {
+  return (alert) => !isAcknowledged(alert) && !alert.noAck && !excludedFromUnackedFilter(alert.type) && filter(alert);
+}
+let ObcAlertListDetailsExperimental = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.selectedMode = "all";
+    this.alerts = [];
+    this.showTime = false;
+    this.timeFormatter = (time) => time.toLocaleTimeString(void 0, { hour12: false });
+    this.small = false;
+    this.defaultExpanded = true;
+    this.expansionOverrides = /* @__PURE__ */ new Map();
+    this.alertByRowId = /* @__PURE__ */ new Map();
+  }
+  getVisibleAlerts() {
+    const seen = /* @__PURE__ */ new Set();
+    return this.alertList.getAllVisibleRows().map((rowId) => this.alertByRowId.get(rowId)).filter((alert) => alert !== void 0).filter((alert) => {
+      if (seen.has(alert.id)) {
+        return false;
+      }
+      seen.add(alert.id);
+      return true;
+    });
+  }
+  onRowClick(e) {
+    const row = this.alertByRowId.get(e.detail.row.id);
+    if (row) {
+      this.dispatchEvent(
+        new CustomEvent("row-click", { detail: { alert: row } })
+      );
+    }
+  }
+  onCellButtonClick(e) {
+    const row = this.alertByRowId.get(e.detail.rowId);
+    if (row) {
+      this.dispatchEvent(
+        new CustomEvent("ack-click", {
+          detail: { alert: row },
+          bubbles: false
+        })
+      );
+    }
+  }
+  onExpandToggle(e) {
+    const overrides = new Map(this.expansionOverrides);
+    overrides.set(e.detail.rowId, e.detail.expanded);
+    this.expansionOverrides = overrides;
+  }
+  isExpanded(rowId) {
+    return this.expansionOverrides.get(rowId) ?? this.defaultExpanded;
+  }
+  get columns() {
+    if (this.small) {
+      const columns = [
+        {
+          label: "Status",
+          key: "status",
+          sortDirection: "desc",
+          sortable: true,
+          compareFunction: (_a, _b, aRow, bRow) => {
+            const aAlert = this.alertByRowId.get(aRow.id);
+            const bAlert = this.alertByRowId.get(bRow.id);
+            if (aAlert && bAlert) {
+              return comparePriorityAlerts(aAlert, bAlert);
+            }
+            return 0;
+          }
+        }
+      ];
+      if (this.showTime) {
+        columns.push({
+          label: "Activated",
+          key: "time"
+        });
+      }
+      columns.push({
+        label: "ACK-status",
+        key: "action"
+      });
+      return columns;
+    } else {
+      const columns = [
+        {
+          label: "Status",
+          key: "status",
+          sortDirection: "desc",
+          sortable: true,
+          compareFunction: (_a, _b, aRow, bRow) => {
+            const aAlert = this.alertByRowId.get(aRow.id);
+            const bAlert = this.alertByRowId.get(bRow.id);
+            if (aAlert && bAlert) {
+              return comparePriorityAlerts(aAlert, bAlert);
+            }
+            return 0;
+          }
+        },
+        {
+          label: "ACK-status",
+          key: "action",
+          dividerRight: true
+        }
+      ];
+      if (this.showTime) {
+        columns.push({
+          label: "Activated",
+          key: "time",
+          sortable: true,
+          compareFunction: (_a, _b, aRow, bRow) => {
+            const aAlert = this.alertByRowId.get(aRow.id);
+            const bAlert = this.alertByRowId.get(bRow.id);
+            if (aAlert && bAlert) {
+              const aTime = new Date(aAlert.time);
+              const bTime = new Date(bAlert.time);
+              return aTime.getTime() - bTime.getTime();
+            }
+            return 0;
+          }
+        });
+      }
+      columns.push({
+        label: "Tag ID",
+        key: "tagId",
+        sortable: true,
+        compareFunction: (a, b) => {
+          const aText = a?.type === ObcTableCellType.Regular ? String(a.text ?? "") : "";
+          const bText = b?.type === ObcTableCellType.Regular ? String(b.text ?? "") : "";
+          return aText.localeCompare(bText);
+        }
+      });
+      return columns;
+    }
+  }
+  get metadata() {
+    return getAlertListModeData(this.selectedMode);
+  }
+  get filteredAlerts() {
+    return this.alerts.filter(this.metadata.filter);
+  }
+  buildVisibleRows() {
+    const alerts = this.filteredAlerts;
+    const alertIds = new Set(alerts.map((alert) => alert.id));
+    const membersByGroupId = /* @__PURE__ */ new Map();
+    const roots = [];
+    for (const alert of alerts) {
+      const groupIds = (alert.memberOf ?? []).filter(
+        (groupId) => groupId !== alert.id && alertIds.has(groupId)
+      );
+      if (groupIds.length === 0) {
+        roots.push(alert);
+        continue;
+      }
+      for (const groupId of groupIds) {
+        const members = membersByGroupId.get(groupId) ?? [];
+        members.push(alert);
+        membersByGroupId.set(groupId, members);
+      }
+    }
+    const reachable = /* @__PURE__ */ new Set();
+    const markReachable = (alert) => {
+      if (reachable.has(alert.id)) {
+        return;
+      }
+      reachable.add(alert.id);
+      for (const member of membersByGroupId.get(alert.id) ?? []) {
+        markReachable(member);
+      }
+    };
+    roots.forEach(markReachable);
+    for (const alert of alerts) {
+      if (!reachable.has(alert.id)) {
+        roots.push(alert);
+        markReachable(alert);
+      }
+    }
+    const rows = [];
+    this.alertByRowId = /* @__PURE__ */ new Map();
+    const visit = (alert, level, parentRowId, ancestors) => {
+      const segment = encodeURIComponent(alert.id);
+      const rowId = parentRowId === void 0 ? segment : `${parentRowId}/${segment}`;
+      const members = membersByGroupId.get(alert.id) ?? [];
+      const expandableMembers = members.filter(
+        (member) => !ancestors.has(member.id)
+      );
+      const expanded = this.isExpanded(rowId);
+      this.alertByRowId.set(rowId, alert);
+      rows.push({
+        ...this.buildRowCells(alert),
+        id: rowId,
+        parentId: parentRowId,
+        level,
+        expandable: expandableMembers.length > 0,
+        expanded
+      });
+      if (!expanded) {
+        return;
+      }
+      const nextAncestors = new Set(ancestors).add(alert.id);
+      for (const member of expandableMembers) {
+        visit(member, level + 1, rowId, nextAncestors);
+      }
+    };
+    for (const alert of roots) {
+      visit(alert, 0, void 0, /* @__PURE__ */ new Set());
+    }
+    return rows;
+  }
+  buildRowCells(alert) {
+    let action = {
+      type: ObcTableCellType.Regular
+    };
+    if (!isAcknowledged(alert) && isActive(alert) && requiresAcknowledgement(alert.type)) {
+      if (alert.noAck) {
+        const icon = usesAlarmNoAckIcon(alert.type) ? html`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>` : html`<obi-warning-noack-iec usecsscolor></obi-warning-noack-iec>`;
+        action = {
+          type: ObcTableCellType.Regular,
+          largeIcon: true,
+          icon,
+          align: "center"
+        };
+      } else {
+        action = {
+          type: ObcTableCellType.Button,
+          text: msg("ACK")
+        };
+      }
+    }
+    const status = {
+      type: ObcTableCellType.Regular,
+      largeIcon: true,
+      text: alert.text,
+      title: alert.source,
+      noWrap: true,
+      icon: html`<obc-alert-icon
+        .type=${alert.type}
+        .acknowledged=${isAcknowledged(alert)}
+        .active=${isActive(alert)}
+      ></obc-alert-icon>`
+    };
+    const time = this.showTime ? {
+      type: ObcTableCellType.Regular,
+      text: this.timeFormatter(alert.time),
+      align: "center",
+      neutral: true
+    } : void 0;
+    const tagId = this.small ? void 0 : {
+      type: ObcTableCellType.Regular,
+      text: "#" + alert.id,
+      align: "right"
+    };
+    return {
+      status,
+      time,
+      action,
+      tagId
+    };
+  }
+  render() {
+    const selectedList = this.metadata;
+    const data = this.buildVisibleRows();
+    return html`
+      <div class="wrapper ${this.small ? "small" : ""}">
+        ${data.length > 0 ? html` <obc-table
+                class="alert-list"
+                .data=${data}
+                .columns=${this.columns}
+                .striped=${true}
+                .showHeader=${!this.small}
+                @row-click=${this.onRowClick}
+                @cell-button-click=${this.onCellButtonClick}
+                @expand-toggle=${this.onExpandToggle}
+              ></obc-table>
+              <div class="spacer"></div>` : html` <div class="empty-list">
+              <div class="icon">${selectedList.emptyIcon}</div>
+              <div class="empty-title">${selectedList.emptyTitle}</div>
+            </div>`}
+      </div>
+    `;
+  }
+};
+ObcAlertListDetailsExperimental.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcAlertListDetailsExperimental.prototype, "selectedMode", 2);
+__decorateClass([
+  property({ type: Array })
+], ObcAlertListDetailsExperimental.prototype, "alerts", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertListDetailsExperimental.prototype, "showTime", 2);
+__decorateClass([
+  property({ attribute: false })
+], ObcAlertListDetailsExperimental.prototype, "timeFormatter", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertListDetailsExperimental.prototype, "small", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcAlertListDetailsExperimental.prototype, "defaultExpanded", 2);
+__decorateClass([
+  query("obc-table")
+], ObcAlertListDetailsExperimental.prototype, "alertList", 2);
+__decorateClass([
+  state()
+], ObcAlertListDetailsExperimental.prototype, "expansionOverrides", 2);
+ObcAlertListDetailsExperimental = __decorateClass([
+  customElement("obc-alert-list-details-experimental")
+], ObcAlertListDetailsExperimental);
+export {
+  AlertListMode,
+  ObcAlertListDetailsExperimental,
+  canAckFilter,
+  getAlertListModeData
+};
+//# sourceMappingURL=alert-list-details-experimental.js.map

package/dist/components/alert-list-details-experimental/alert-list-details-experimental.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-list-details-experimental.js","sources":["../../../src/components/alert-list-details-experimental/alert-list-details-experimental.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './alert-list-details-experimental.css?inline';\nimport {msg} from '@lit/localize';\nimport {property, query, state} from 'lit/decorators.js';\nimport '../icon-button/icon-button.js';\nimport '../button/button.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-alerts-active.js';\nimport '../../icons/icon-alarm-rectified-iec.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../../icons/icon-alarm-noack-iec.js';\nimport '../../icons/icon-warning-noack-iec.js';\nimport '../alert-icon/alert-icon.js';\nimport {\n  Alert,\n  comparePriorityAlerts,\n  isActive,\n  isAcknowledged,\n  isBlocked,\n  isShelved,\n} from '../../types.js';\nimport {\n  excludedFromUnackedFilter,\n  requiresAcknowledgement,\n  usesAlarmNoAckIcon,\n} from '../../alert-severity.js';\nimport {\n  ObcTable,\n  ObcTableCellClickEvent,\n  ObcTableCellData,\n  ObcTableCellType,\n  ObcTableExpandToggleEvent,\n  ObcTableRowClickEvent,\n  ObcTableRow,\n  ObcTableColumn,\n} from '../table/table.js';\nimport '../scrollbar/scrollbar.js';\n\nexport enum AlertListMode {\n  UNACKED = 'unacked',\n  ALL = 'all',\n  SHELVED = 'shelved',\n  BLOCKED = 'blocked',\n  RECTIFIED = 'rectified',\n}\n\nexport type ObcAckClickEvent = CustomEvent<{\n  alert: Alert;\n}>;\n\nexport type ObcRowClickEvent = CustomEvent<{\n  alert: Alert;\n}>;\n\nexport function getAlertListModeData(selectedMode: AlertListMode) {\n  if (selectedMode === AlertListMode.ALL)\n    return {\n      name: AlertListMode.ALL,\n      title: msg('All'),\n      emptyTitle: msg('No active alerts'),\n      emptyIcon: html`<obi-alerts></obi-alerts>`,\n      filter: (alert: Alert) => !isShelved(alert) && isActive(alert),\n    };\n  else if (selectedMode === AlertListMode.UNACKED)\n    return {\n      name: AlertListMode.UNACKED,\n      title: msg('Unacked'),\n      emptyTitle: msg('No unacknowledged alerts'),\n      emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n      filter: (alert: Alert) =>\n        !isAcknowledged(alert) &&\n        isActive(alert) &&\n        !excludedFromUnackedFilter(alert.type) &&\n        !isShelved(alert),\n    };\n  else if (selectedMode === AlertListMode.SHELVED)\n    return {\n      name: AlertListMode.SHELVED,\n      title: msg('Shelved'),\n      emptyTitle: msg('No shelved alerts'),\n      emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n      filter: (alert: Alert) => isShelved(alert),\n    };\n  else if (selectedMode === AlertListMode.BLOCKED)\n    return {\n      name: AlertListMode.BLOCKED,\n      title: msg('Blocked'),\n      emptyTitle: msg('No blocked alerts'),\n      emptyIcon: html`<obi-alerts-active></obi-alerts-active>`,\n      filter: (alert: Alert) => isBlocked(alert),\n    };\n  else if (selectedMode === AlertListMode.RECTIFIED)\n    return {\n      name: AlertListMode.RECTIFIED,\n      title: msg('Rectified'),\n      emptyTitle: msg('No rectified alerts'),\n      emptyIcon: html`<obi-alarm-rectified-iec></obi-alarm-rectified-iec>`,\n      filter: (alert: Alert) => !isActive(alert),\n    };\n  else throw new Error('Invalid selected mode');\n}\n\nexport function canAckFilter(filter: (alert: Alert) => boolean) {\n  return (alert: Alert) =>\n    !isAcknowledged(alert) &&\n    !alert.noAck &&\n    !excludedFromUnackedFilter(alert.type) &&\n    filter(alert);\n}\n\n/**\n * @availableWhen timeFormatter showTime==true\n * @property defaultExpanded - Whether groups start expanded. Set false to open the list collapsed.\n * @fires {ObcAckClickEvent} ack-click - Fired when the user clicks the \"ACK\" button.\n * @fires {ObcRowClickEvent} row-click - Fired when the user clicks a row.\n * @experimental\n */\n@customElement('obc-alert-list-details-experimental')\nexport class ObcAlertListDetailsExperimental extends LitElement {\n  @property({type: String}) selectedMode: AlertListMode = AlertListMode.ALL;\n  @property({type: Array}) alerts: Alert[] = [];\n  @property({type: Boolean}) showTime: boolean = false;\n  @property({attribute: false}) timeFormatter: (time: Date) => string = (\n    time: Date\n  ) => time.toLocaleTimeString(undefined, {hour12: false});\n  @property({type: Boolean}) small: boolean = false;\n  @property({type: Boolean, attribute: false}) defaultExpanded: boolean = true;\n\n  @query('obc-table')\n  private alertList!: ObcTable;\n\n  @state() private expansionOverrides = new Map<string, boolean>();\n\n  private alertByRowId = new Map<string, Alert>();\n\n  public getVisibleAlerts(): Alert[] {\n    const seen = new Set<string>();\n    return this.alertList\n      .getAllVisibleRows()\n      .map((rowId) => this.alertByRowId.get(rowId))\n      .filter((alert): alert is Alert => alert !== undefined)\n      .filter((alert) => {\n        if (seen.has(alert.id)) {\n          return false;\n        }\n        seen.add(alert.id);\n        return true;\n      });\n  }\n\n  private onRowClick(e: ObcTableRowClickEvent) {\n    const row = this.alertByRowId.get(e.detail.row.id);\n    if (row) {\n      this.dispatchEvent(\n        new CustomEvent('row-click', {detail: {alert: row}}) as ObcRowClickEvent\n      );\n    }\n  }\n\n  private onCellButtonClick(e: ObcTableCellClickEvent) {\n    const row = this.alertByRowId.get(e.detail.rowId);\n    if (row) {\n      this.dispatchEvent(\n        new CustomEvent('ack-click', {\n          detail: {alert: row},\n          bubbles: false,\n        }) as ObcAckClickEvent\n      );\n    }\n  }\n\n  private onExpandToggle(e: ObcTableExpandToggleEvent) {\n    const overrides = new Map(this.expansionOverrides);\n    overrides.set(e.detail.rowId, e.detail.expanded);\n    this.expansionOverrides = overrides;\n  }\n\n  private isExpanded(rowId: string) {\n    return this.expansionOverrides.get(rowId) ?? this.defaultExpanded;\n  }\n\n  private get columns() {\n    if (this.small) {\n      const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [\n        {\n          label: 'Status',\n          key: 'status',\n          sortDirection: 'desc',\n          sortable: true,\n          compareFunction: (_a, _b, aRow, bRow) => {\n            const aAlert = this.alertByRowId.get(aRow.id);\n            const bAlert = this.alertByRowId.get(bRow.id);\n            if (aAlert && bAlert) {\n              return comparePriorityAlerts(aAlert, bAlert);\n            }\n            return 0;\n          },\n        },\n      ];\n      if (this.showTime) {\n        columns.push({\n          label: 'Activated',\n          key: 'time',\n        });\n      }\n      columns.push({\n        label: 'ACK-status',\n        key: 'action',\n      });\n      return columns;\n    } else {\n      const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [\n        {\n          label: 'Status',\n          key: 'status',\n          sortDirection: 'desc',\n          sortable: true,\n          compareFunction: (_a, _b, aRow, bRow) => {\n            const aAlert = this.alertByRowId.get(aRow.id);\n            const bAlert = this.alertByRowId.get(bRow.id);\n            if (aAlert && bAlert) {\n              return comparePriorityAlerts(aAlert, bAlert);\n            }\n            return 0;\n          },\n        },\n        {\n          label: 'ACK-status',\n          key: 'action',\n          dividerRight: true,\n        },\n      ];\n      if (this.showTime) {\n        columns.push({\n          label: 'Activated',\n          key: 'time',\n          sortable: true,\n          compareFunction: (_a, _b, aRow, bRow) => {\n            const aAlert = this.alertByRowId.get(aRow.id);\n            const bAlert = this.alertByRowId.get(bRow.id);\n            if (aAlert && bAlert) {\n              const aTime = new Date(aAlert.time);\n              const bTime = new Date(bAlert.time);\n              return aTime.getTime() - bTime.getTime();\n            }\n            return 0;\n          },\n        });\n      }\n      columns.push({\n        label: 'Tag ID',\n        key: 'tagId',\n        sortable: true,\n        compareFunction: (a, b) => {\n          const aText =\n            a?.type === ObcTableCellType.Regular ? String(a.text ?? '') : '';\n          const bText =\n            b?.type === ObcTableCellType.Regular ? String(b.text ?? '') : '';\n          return aText.localeCompare(bText);\n        },\n      });\n      return columns;\n    }\n  }\n\n  private get metadata() {\n    return getAlertListModeData(this.selectedMode);\n  }\n\n  private get filteredAlerts() {\n    return this.alerts.filter(this.metadata.filter);\n  }\n\n  private buildVisibleRows(): ObcTableRow[] {\n    const alerts = this.filteredAlerts;\n    const alertIds = new Set(alerts.map((alert) => alert.id));\n    const membersByGroupId = new Map<string, Alert[]>();\n    const roots: Alert[] = [];\n    for (const alert of alerts) {\n      const groupIds = (alert.memberOf ?? []).filter(\n        (groupId) => groupId !== alert.id && alertIds.has(groupId)\n      );\n      if (groupIds.length === 0) {\n        roots.push(alert);\n        continue;\n      }\n      for (const groupId of groupIds) {\n        const members = membersByGroupId.get(groupId) ?? [];\n        members.push(alert);\n        membersByGroupId.set(groupId, members);\n      }\n    }\n\n    const reachable = new Set<string>();\n    const markReachable = (alert: Alert) => {\n      if (reachable.has(alert.id)) {\n        return;\n      }\n      reachable.add(alert.id);\n      for (const member of membersByGroupId.get(alert.id) ?? []) {\n        markReachable(member);\n      }\n    };\n    roots.forEach(markReachable);\n    for (const alert of alerts) {\n      if (!reachable.has(alert.id)) {\n        roots.push(alert);\n        markReachable(alert);\n      }\n    }\n\n    const rows: ObcTableRow[] = [];\n    this.alertByRowId = new Map();\n    const visit = (\n      alert: Alert,\n      level: number,\n      parentRowId: string | undefined,\n      ancestors: Set<string>\n    ) => {\n      const segment = encodeURIComponent(alert.id);\n      const rowId =\n        parentRowId === undefined ? segment : `${parentRowId}/${segment}`;\n      const members = membersByGroupId.get(alert.id) ?? [];\n      // A member can name a group that is also its own descendant.\n      const expandableMembers = members.filter(\n        (member) => !ancestors.has(member.id)\n      );\n      const expanded = this.isExpanded(rowId);\n\n      this.alertByRowId.set(rowId, alert);\n      rows.push({\n        ...this.buildRowCells(alert),\n        id: rowId,\n        parentId: parentRowId,\n        level,\n        expandable: expandableMembers.length > 0,\n        expanded,\n      });\n\n      if (!expanded) {\n        return;\n      }\n      const nextAncestors = new Set(ancestors).add(alert.id);\n      for (const member of expandableMembers) {\n        visit(member, level + 1, rowId, nextAncestors);\n      }\n    };\n\n    for (const alert of roots) {\n      visit(alert, 0, undefined, new Set());\n    }\n    return rows;\n  }\n\n  private buildRowCells(\n    alert: Alert\n  ): Record<string, ObcTableCellData | undefined> {\n    let action: ObcTableCellData = {\n      type: ObcTableCellType.Regular,\n    };\n    if (\n      !isAcknowledged(alert) &&\n      isActive(alert) &&\n      requiresAcknowledgement(alert.type)\n    ) {\n      if (alert.noAck) {\n        const icon = usesAlarmNoAckIcon(alert.type)\n          ? html`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>`\n          : html`<obi-warning-noack-iec usecsscolor></obi-warning-noack-iec>`;\n        action = {\n          type: ObcTableCellType.Regular,\n          largeIcon: true,\n          icon,\n          align: 'center',\n        };\n      } else {\n        action = {\n          type: ObcTableCellType.Button,\n          text: msg('ACK'),\n        };\n      }\n    }\n\n    const status: ObcTableCellData = {\n      type: ObcTableCellType.Regular,\n      largeIcon: true,\n      text: alert.text,\n      title: alert.source,\n      noWrap: true,\n      icon: html`<obc-alert-icon\n        .type=${alert.type}\n        .acknowledged=${isAcknowledged(alert)}\n        .active=${isActive(alert)}\n      ></obc-alert-icon>`,\n    };\n\n    const time: ObcTableCellData | undefined = this.showTime\n      ? {\n          type: ObcTableCellType.Regular,\n          text: this.timeFormatter(alert.time),\n          align: 'center',\n          neutral: true,\n        }\n      : undefined;\n\n    const tagId: ObcTableCellData | undefined = this.small\n      ? undefined\n      : {\n          type: ObcTableCellType.Regular,\n          text: '#' + alert.id,\n          align: 'right',\n        };\n    return {\n      status,\n      time,\n      action,\n      tagId,\n    };\n  }\n\n  override render() {\n    const selectedList = this.metadata;\n    const data = this.buildVisibleRows();\n\n    return html`\n      <div class=\"wrapper ${this.small ? 'small' : ''}\">\n        ${data.length > 0\n          ? html` <obc-table\n                class=\"alert-list\"\n                .data=${data}\n                .columns=${this.columns}\n                .striped=${true}\n                .showHeader=${!this.small}\n                @row-click=${this.onRowClick}\n                @cell-button-click=${this.onCellButtonClick}\n                @expand-toggle=${this.onExpandToggle}\n              ></obc-table>\n              <div class=\"spacer\"></div>`\n          : html` <div class=\"empty-list\">\n              <div class=\"icon\">${selectedList.emptyIcon}</div>\n              <div class=\"empty-title\">${selectedList.emptyTitle}</div>\n            </div>`}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-list-details-experimental': ObcAlertListDetailsExperimental;\n  }\n}\n"],"names":["AlertListMode"],"mappings":"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"}

package/dist/components/table/table.css.js

@@ -424,6 +424,49 @@ const compentStyle = css`* {
         flex-shrink: 0;
       }
 
+/* ---- Hierarchy ---- */
+
+/*
+       * Indent gutter for a hierarchical row. One step per level plus one for
+       * the chevron itself, so a leaf and a group at the same level align.
+       */
+
+:is(:is(.grid-container .grid-row) .grid-cell) .row-expander {
+        --row-indent-step: var(
+          --menu-navigation-components-table-item-icon-size
+        );
+        /* Depth of this row; the row's inline style overrides it. */
+        --row-level: 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        align-self: stretch;
+        width: calc((var(--row-level) + 1) * var(--row-indent-step));
+      }
+
+:is(:is(.grid-container .grid-row) .grid-cell) .row-expander .chevron {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* Pointer target floor, and the gutter is only one step wide. */
+        min-width: var(--row-indent-step);
+        min-height: var(--row-indent-step);
+        align-self: stretch;
+        color: var(--on-flat-neutral-color);
+        transition: transform 100ms ease-in-out;
+      }
+
+:is(:is(.grid-container .grid-row) .grid-cell) .row-expander .chevron.expanded {
+        transform: rotate(90deg);
+      }
+
+@media (prefers-reduced-motion: reduce) {
+        :is(:is(.grid-container .grid-row) .grid-cell) .row-expander .chevron {
+          transition: none;
+        }
+      }
+
 .large-icon:is(:is(.grid-container .grid-row) .grid-cell) .icon {
         min-width: var(--menu-navigation-components-table-item-icon-size-large);
         min-height: var(

package/dist/components/table/table.css.js.map

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

package/dist/components/table/table.d.ts

@@ -5,6 +5,7 @@ import { TagColor } from '../tag/tag.js';
 import { ExternalScaleSide, FillMode, FrameStyle, InstrumentState, Priority, ScaleType } from '../../building-blocks/bar-horizontal/bar-horizontal.js';
 import '../table-header-item/table-header-item.js';
 import '../button/button.js';
+import '../../icons/icon-chevron-right-google.js';
 import '../../building-blocks/bar-horizontal/bar-horizontal.js';
 export declare enum ObcTableCellType {
     Regular = "regular",
@@ -95,7 +96,11 @@ export type ObcTableCellData = ObcTableCellDataRegular | ObcTableCellDataButton
 export interface ObcTableRow {
     selected?: boolean;
     id: string;
-    [key: string]: ObcTableCellData | boolean | undefined | string;
+    parentId?: string;
+    level?: number;
+    expandable?: boolean;
+    expanded?: boolean;
+    [key: string]: ObcTableCellData | boolean | undefined | string | number;
 }
 export interface ObcTableColumnUnsortable<T extends ObcTableCellData, S extends ObcTableRow> {
     label: string;
@@ -134,6 +139,10 @@ export type ObcTableSelectionChangeEvent = CustomEvent<{
 export type ObcTableRowClickEvent = CustomEvent<{
     row: ObcTableRow;
 }>;
+export type ObcTableExpandToggleEvent = CustomEvent<{
+    rowId: string;
+    expanded: boolean;
+}>;
 /**
  * `<obc-table>` renders tabular data with configurable columns and cell types.
  *
@@ -146,11 +155,17 @@ export type ObcTableRowClickEvent = CustomEvent<{
  * - Cell rendering variants: `checkbox`, `tag`, `horizontal-bar`, and `button` cell types.
  * - Visual variants: `rowDivider`, `striped`, `narrowHeader`, and `showHeader`.
  * - Sorting support for sortable columns via column definitions.
+ * - Hierarchical rows via `parentId`, `level`, `expandable` and `expanded`.
  *
  * Usage Guidelines
  * - Controlled selection: pass `selectedRowIds` and update it on `selection-change`.
  * - Uncontrolled selection: pass `defaultSelectedRowIds` and listen to `selection-change`.
  * - Use `selectAllAriaLabel` to customize the header checkbox accessibility label.
+ * - Hierarchy is controlled, and flat: pass only the rows that are currently
+ *   visible, each with the `parentId` of its parent row, and drop a collapsed
+ *   group's descendants from `data` on `expand-toggle`. The table draws the
+ *   indent and the chevron, keeps each sibling set sorted within its parent,
+ *   and owns no expansion state of its own.
  *
  * Slots/Content
  * - This component does not expose public slots. Provide content via `data` and `columns`.
@@ -161,6 +176,15 @@ export type ObcTableRowClickEvent = CustomEvent<{
  * - `cell-checkbox-change` fires when a checkbox cell changes.
  * - `cell-tag-click` fires when a tag inside a cell is clicked.
  * - `selection-change` fires when row selection changes (source: `row` or `header`).
+ * - `expand-toggle` fires when a group row's chevron or expand key is used.
+ *
+ * Accessibility
+ * A table with hierarchical rows renders as a
+ * [treegrid](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/): rows carry
+ * `aria-level`, and group rows `aria-expanded`. Right expands a collapsed
+ * group, Left collapses an expanded one or moves to the parent row. Cell-level
+ * arrow navigation, which the full pattern also specifies, is out of scope —
+ * arrow keys move between rows, matching the flat table.
  *
  * Best Practices
  * - Keep column `key` values stable across renders to avoid selection or sorting resets.
@@ -187,6 +211,7 @@ export type ObcTableRowClickEvent = CustomEvent<{
  * @fires {ObcTableCellCheckboxChangeEvent} cell-checkbox-change - Fired when a cell checkbox is changed.
  * @fires {ObcTableCellTagClickEvent} cell-tag-click - Fired when a tag inside a cell is clicked.
  * @fires {ObcTableSelectionChangeEvent} selection-change - Fired when row selection changes.
+ * @fires {ObcTableExpandToggleEvent} expand-toggle - Fired when a group row is expanded or collapsed.
  * @beta
  */
 export declare class ObcTable extends LitElement {
@@ -204,14 +229,19 @@ export declare class ObcTable extends LitElement {
     private _sortDirection;
     private _selectedRowIds;
     private _previousPositions;
+    private get hasHierarchy();
+    private sortWithinSiblings;
     get sortedData(): ObcTableRow[];
     private _handleSortClick;
     private _handleRowClick;
+    private _handleExpandToggle;
+    private _renderRowExpander;
     private _focusFirstRow;
     private _focusLeftHeaderItem;
     private _focusHeaderByIndex;
     private _handleHeaderKeyDown;
     private _handleRowKeyDown;
+    private _handleRowExpandKey;
     private _getAllPositions;
     private _animateRowChanges;
     private _hasRenderedRows;