@oicl/openbridge-webcomponents 2.0.0-next.153 → 2.0.0-next.154

package/bundle/openbridge-webcomponents.bundle.js

@@ -84020,6 +84020,7 @@ const compentStyle$W = i$7`* {
 .alert-list {
   min-height: 0;
   flex-grow: 0;
+  --alert-list-grid-columns: 1fr;
 }
 
 .spacer {
@@ -84044,13 +84045,8 @@ const compentStyle$W = i$7`* {
   }
 
 obc-table::part(grid) {
-  grid-template-columns: 1fr repeat(4, min-content);
-}
-
-.wrapper.small obc-table::part(grid) {
-  grid-template-columns: 1fr min-content var(
-      --app-components-alert-table-row-ack-container-width-small
-    );
+  /* set from columns[].width */
+  grid-template-columns: var(--alert-list-grid-columns);
 }
 
 .empty-list {
@@ -85431,6 +85427,7 @@ var ObcTableCellType = /* @__PURE__ */ ((ObcTableCellType2) => {
   ObcTableCellType2["HorizontalBar"] = "horizontal-bar";
   return ObcTableCellType2;
 })(ObcTableCellType || {});
+const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [role="button"], [role="link"], [role="checkbox"]';
 function cssPart(value, subpart) {
   if (value.cssPart) {
     return `${value.cssPart} ${subpart}`;
@@ -85537,7 +85534,14 @@ let ObcTable = class extends i$4 {
       this._sortDirection = "asc";
     }
   }
-  _handleRowClick(row) {
+  _handleRowClick(event, row) {
+    const rowElement = event.currentTarget;
+    for (const node of event.composedPath()) {
+      if (node === rowElement) break;
+      if (node instanceof Element && node.matches(INTERACTIVE_SELECTOR)) {
+        return;
+      }
+    }
     this.dispatchEvent(
       new CustomEvent("row-click", { detail: { row } })
     );
@@ -85904,7 +85908,7 @@ let ObcTable = class extends i$4 {
           "selected-with-next": isRowSelected && hasSelectedNextRow,
           striped: isStriped
         })}
-                  @click=${() => this._handleRowClick(row)}
+                  @click=${(event) => this._handleRowClick(event, row)}
                   @keydown=${this._handleRowKeyDown}
                   data-row-id=${row.id}
                   style="grid-row: ${rowIndex + 1}"
@@ -86303,8 +86307,8 @@ var __decorateClass$v3 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$u$(target, key, result);
   return result;
 };
-function getAlertListModeData$1(selectedMode) {
-  if (selectedMode === "all")
+function getFilterModeData(filterMode) {
+  if (filterMode === "all")
     return {
       name: "all",
       title: msg("All"),
@@ -86312,7 +86316,7 @@ function getAlertListModeData$1(selectedMode) {
       emptyIcon: b`<obi-alerts></obi-alerts>`,
       filter: (alert) => !isShelved(alert) && isActive(alert)
     };
-  else if (selectedMode === "unacked")
+  else if (filterMode === "unacked")
     return {
       name: "unacked",
       title: msg("Unacked"),
@@ -86320,7 +86324,7 @@ function getAlertListModeData$1(selectedMode) {
       emptyIcon: b`<obi-unacknowledged></obi-unacknowledged>`,
       filter: (alert) => !isAcknowledged(alert) && isActive(alert) && !excludedFromUnackedFilter(alert.type) && !isShelved(alert)
     };
-  else if (selectedMode === "shelved")
+  else if (filterMode === "shelved")
     return {
       name: "shelved",
       title: msg("Shelved"),
@@ -86328,7 +86332,7 @@ function getAlertListModeData$1(selectedMode) {
       emptyIcon: b`<obi-alerts-shelf></obi-alerts-shelf>`,
       filter: (alert) => isShelved(alert)
     };
-  else if (selectedMode === "blocked")
+  else if (filterMode === "blocked")
     return {
       name: "blocked",
       title: msg("Blocked"),
@@ -86336,7 +86340,7 @@ function getAlertListModeData$1(selectedMode) {
       emptyIcon: b`<obi-alerts-active></obi-alerts-active>`,
       filter: (alert) => isBlocked(alert)
     };
-  else if (selectedMode === "rectified")
+  else if (filterMode === "rectified")
     return {
       name: "rectified",
       title: msg("Rectified"),
@@ -86344,19 +86348,196 @@ function getAlertListModeData$1(selectedMode) {
       emptyIcon: b`<obi-alarm-rectified-iec></obi-alarm-rectified-iec>`,
       filter: (alert) => !isActive(alert)
     };
-  else throw new Error("Invalid selected mode");
+  else throw new Error("Invalid filter mode");
+}
+function alertListCellSlotName(columnKey, rowId) {
+  return `cell-${encodeURIComponent(columnKey)}:${rowId}`;
+}
+function statusColumn(options = {}) {
+  return {
+    key: "status",
+    label: "Status",
+    sortDirection: "desc",
+    compare: comparePriorityAlerts,
+    cell: (alert) => ({
+      type: ObcTableCellType.Regular,
+      largeIcon: true,
+      text: alert.text,
+      title: alert.source,
+      noWrap: true,
+      icon: b`<obc-alert-icon
+        .type=${alert.type}
+        .acknowledged=${isAcknowledged(alert)}
+        .active=${isActive(alert)}
+      ></obc-alert-icon>`
+    }),
+    ...options
+  };
+}
+function ackColumn(options = {}) {
+  return {
+    key: "ack",
+    label: "ACK-status",
+    cell: (alert) => {
+      if (isAcknowledged(alert) || !isActive(alert) || !requiresAcknowledgement(alert.type)) {
+        return { type: ObcTableCellType.Regular };
+      }
+      if (alert.noAck) {
+        const icon = usesAlarmNoAckIcon(alert.type) ? b`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>` : b`<obi-warning-noack-iec usecsscolor></obi-warning-noack-iec>`;
+        return {
+          type: ObcTableCellType.Regular,
+          largeIcon: true,
+          icon,
+          align: "center"
+        };
+      }
+      return { type: ObcTableCellType.Button, text: msg("ACK") };
+    },
+    ...options
+  };
+}
+function tagIdColumn(options = {}) {
+  return {
+    key: "tagId",
+    label: "Tag ID",
+    compare: (a2, b2) => a2.tagId.localeCompare(b2.tagId),
+    cell: (alert) => ({
+      type: ObcTableCellType.Regular,
+      text: "#" + alert.tagId,
+      align: "right"
+    }),
+    ...options
+  };
+}
+function isSlotColumn(column) {
+  return "slot" in column && column.slot === true;
+}
+function parentRowIdOf(rowId) {
+  const separatorIndex = rowId.lastIndexOf("/");
+  return separatorIndex === -1 ? void 0 : rowId.slice(0, separatorIndex);
+}
+const TABLE_KEY_PREFIX = "column-";
+function walkAlertRows(alerts, isExpanded) {
+  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 = [];
+  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)
+    );
+    rows.push({
+      rowId,
+      parentRowId,
+      alert,
+      level,
+      expandable: expandableMembers.length > 0
+    });
+    if (!isExpanded(rowId)) {
+      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;
+}
+function getAlertRows(alerts, filterMode) {
+  const { filter } = getFilterModeData(filterMode);
+  return walkAlertRows(alerts.filter(filter), () => true);
 }
 let ObcAlertListDetailsExperimental = class extends i$4 {
   constructor() {
     super(...arguments);
-    this.selectedMode = "all";
+    this.filterMode = "all";
     this.alerts = [];
-    this.showTime = false;
-    this.timeFormatter = (time) => time.toLocaleTimeString(void 0, { hour12: false });
-    this.small = false;
+    this.columns = [
+      statusColumn(),
+      ackColumn({ dividerRight: true }),
+      tagIdColumn()
+    ];
+    this.showHeader = true;
     this.defaultExpanded = true;
     this.expansionOverrides = /* @__PURE__ */ new Map();
     this.alertByRowId = /* @__PURE__ */ new Map();
+    this.allRowIds = /* @__PURE__ */ new Set();
+    this._cellSlots = [];
+    this.cellSlotsChanged = false;
+  }
+  /** Slot of every cell in a slot column, rows in collapsed groups included. */
+  get cellSlots() {
+    return this._cellSlots;
+  }
+  willUpdate(changed) {
+    if (!changed.has("alerts") && !changed.has("columns") && !changed.has("filterMode")) {
+      return;
+    }
+    const rows = getAlertRows(this.alerts, this.filterMode);
+    this.allRowIds = new Set(rows.map((row) => row.rowId));
+    const slotColumns = this.columns.filter(isSlotColumn);
+    const next = getAlertRows(this.alerts, this.filterMode).flatMap(
+      (row) => slotColumns.map((column) => ({
+        name: alertListCellSlotName(column.key, row.rowId),
+        alert: row.alert,
+        rowId: row.rowId,
+        columnKey: column.key
+      }))
+    );
+    const unchanged = next.length === this._cellSlots.length && next.every(
+      (slot, index2) => slot.name === this._cellSlots[index2].name && slot.alert === this._cellSlots[index2].alert
+    );
+    if (!unchanged) {
+      this._cellSlots = next;
+      this.cellSlotsChanged = true;
+    }
+  }
+  updated() {
+    if (this.cellSlotsChanged) {
+      this.cellSlotsChanged = false;
+      this.dispatchEvent(
+        new CustomEvent("cell-slots-change", {
+          detail: this._cellSlots
+        })
+      );
+    }
   }
   getVisibleAlerts() {
     const seen = /* @__PURE__ */ new Set();
@@ -86369,19 +86550,27 @@ let ObcAlertListDetailsExperimental = class extends i$4 {
     });
   }
   onRowClick(e2) {
-    const row = this.alertByRowId.get(e2.detail.row.id);
-    if (row) {
+    const rowId = e2.detail.row.id;
+    const alert = this.alertByRowId.get(rowId);
+    if (alert) {
       this.dispatchEvent(
-        new CustomEvent("row-click", { detail: { alert: row } })
+        new CustomEvent("row-click", {
+          detail: { alert, rowId }
+        })
       );
     }
   }
   onCellButtonClick(e2) {
-    const row = this.alertByRowId.get(e2.detail.rowId);
-    if (row) {
+    const { rowId, columnKey } = e2.detail;
+    const alert = this.alertByRowId.get(rowId);
+    if (alert) {
       this.dispatchEvent(
-        new CustomEvent("ack-click", {
-          detail: { alert: row },
+        new CustomEvent("cell-click", {
+          detail: {
+            alert,
+            columnKey: columnKey.slice(TABLE_KEY_PREFIX.length),
+            rowId
+          },
           bubbles: false
         })
       );
@@ -86395,226 +86584,114 @@ let ObcAlertListDetailsExperimental = class extends i$4 {
   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"
-        });
+  compareRows(compare, aRow, bRow) {
+    const aAlert = this.alertByRowId.get(aRow.id);
+    const bAlert = this.alertByRowId.get(bRow.id);
+    return aAlert && bAlert ? compare(aAlert, bAlert) : 0;
+  }
+  get tableColumns() {
+    return this.columns.map((column) => {
+      const base = {
+        label: column.label,
+        key: TABLE_KEY_PREFIX + column.key,
+        dividerRight: column.dividerRight
+      };
+      if (isSlotColumn(column)) {
+        return {
+          ...base,
+          renderCell: (_value, row) => b`<slot
+              name=${alertListCellSlotName(column.key, row.id)}
+            ></slot>`
+        };
       }
-      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",
+      const { compare } = column;
+      if (compare) {
+        return {
+          ...base,
           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;
-          }
-        });
+          sortDirection: column.sortDirection,
+          compareFunction: (_a, _b, aRow, bRow) => this.compareRows(compare, aRow, bRow)
+        };
       }
-      columns.push({
-        label: "Tag ID",
-        key: "tagId",
-        sortable: true,
-        compareFunction: (a2, b2) => {
-          const aText = a2?.type === ObcTableCellType.Regular ? String(a2.text ?? "") : "";
-          const bText = b2?.type === ObcTableCellType.Regular ? String(b2.text ?? "") : "";
-          return aText.localeCompare(bText);
-        }
-      });
-      return columns;
-    }
+      return base;
+    });
   }
-  get metadata() {
-    return getAlertListModeData$1(this.selectedMode);
+  get gridColumns() {
+    const columnTracks = this.columns.map(
+      (column, index2) => column.width ?? (index2 === 0 ? "1fr" : "min-content")
+    );
+    return [...columnTracks, "min-content"].join(" ");
   }
-  get filteredAlerts() {
-    return this.alerts.filter(this.metadata.filter);
+  get metadata() {
+    return getFilterModeData(this.filterMode);
   }
   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 = walkAlertRows(
+      this.alerts.filter(this.metadata.filter),
+      (rowId) => this.isExpanded(rowId)
+    );
+    this.alertByRowId = new Map(rows.map((row) => [row.rowId, row.alert]));
+    const highlightedRowId = this.highlightedRowId();
+    return rows.map((row) => ({
+      ...this.buildRowCells(row.alert),
+      id: row.rowId,
+      parentId: row.parentRowId,
+      level: row.level,
+      expandable: row.expandable,
+      expanded: this.isExpanded(row.rowId),
+      selected: row.rowId === highlightedRowId
+    }));
+  }
+  /** The selected row, or the nearest visible group row when a collapsed group hides it. */
+  highlightedRowId() {
+    if (this.selectedRowId === void 0 || !this.allRowIds.has(this.selectedRowId)) {
+      return void 0;
     }
-    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());
+    let rowId = this.selectedRowId;
+    while (rowId !== void 0 && !this.alertByRowId.has(rowId)) {
+      rowId = parentRowIdOf(rowId);
     }
-    return rows;
+    return rowId;
   }
   buildRowCells(alert) {
-    let action = {
-      type: ObcTableCellType.Regular
-    };
-    if (!isAcknowledged(alert) && isActive(alert) && requiresAcknowledgement(alert.type)) {
-      if (alert.noAck) {
-        const icon = usesAlarmNoAckIcon(alert.type) ? b`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>` : b`<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: b`<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
-    };
+    const cells = {};
+    for (const column of this.columns) {
+      cells[TABLE_KEY_PREFIX + column.key] = isSlotColumn(column) ? (
+        // obc-table skips renderCell for an undefined value.
+        { type: ObcTableCellType.Regular }
+      ) : column.cell(alert);
+    }
+    return cells;
+  }
+  slotNames(rows) {
+    const slotColumns = this.columns.filter(isSlotColumn);
+    return rows.flatMap(
+      (row) => slotColumns.map((column) => alertListCellSlotName(column.key, row.id))
+    );
   }
   render() {
     const selectedList = this.metadata;
     const data = this.buildVisibleRows();
     return b`
-      <div class="wrapper ${this.small ? "small" : ""}">
+      <div class="wrapper">
         ${data.length > 0 ? b` <obc-table
                 class="alert-list"
+                style="--alert-list-grid-columns: ${this.gridColumns}"
                 .data=${data}
-                .columns=${this.columns}
+                .columns=${this.tableColumns}
                 .striped=${true}
-                .showHeader=${!this.small}
+                .showHeader=${this.showHeader}
                 @row-click=${this.onRowClick}
                 @cell-button-click=${this.onCellButtonClick}
                 @expand-toggle=${this.onExpandToggle}
-              ></obc-table>
+              >
+                ${c(
+      this.slotNames(data),
+      (name) => name,
+      // Forwards the host's slot into the one obc-table renders in the cell.
+      (name) => b`<slot name=${name} slot=${name}></slot>`
+    )}
+              </obc-table>
               <div class="spacer"></div>` : b` <div class="empty-list">
               <div class="icon">${selectedList.emptyIcon}</div>
               <div class="empty-title">${selectedList.emptyTitle}</div>
@@ -86626,22 +86703,22 @@ let ObcAlertListDetailsExperimental = class extends i$4 {
 ObcAlertListDetailsExperimental.styles = r$7(compentStyle$W);
 __decorateClass$v3([
   n$3({ type: String })
-], ObcAlertListDetailsExperimental.prototype, "selectedMode", 2);
+], ObcAlertListDetailsExperimental.prototype, "filterMode", 2);
 __decorateClass$v3([
   n$3({ type: Array })
 ], ObcAlertListDetailsExperimental.prototype, "alerts", 2);
 __decorateClass$v3([
-  n$3({ type: Boolean })
-], ObcAlertListDetailsExperimental.prototype, "showTime", 2);
-__decorateClass$v3([
-  n$3({ attribute: false })
-], ObcAlertListDetailsExperimental.prototype, "timeFormatter", 2);
+  n$3({ type: Array, attribute: false })
+], ObcAlertListDetailsExperimental.prototype, "columns", 2);
 __decorateClass$v3([
-  n$3({ type: Boolean })
-], ObcAlertListDetailsExperimental.prototype, "small", 2);
+  n$3({ type: Boolean, attribute: false })
+], ObcAlertListDetailsExperimental.prototype, "showHeader", 2);
 __decorateClass$v3([
   n$3({ type: Boolean, attribute: false })
 ], ObcAlertListDetailsExperimental.prototype, "defaultExpanded", 2);
+__decorateClass$v3([
+  n$3({ type: String })
+], ObcAlertListDetailsExperimental.prototype, "selectedRowId", 2);
 __decorateClass$v3([
   e$3("obc-table")
 ], ObcAlertListDetailsExperimental.prototype, "alertList", 2);