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

package/custom-elements.json

@@ -4989,15 +4989,15 @@
         {
           "kind": "variable",
           "name": "ObcAlertListDetailsExperimental",
-          "default": "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> `; } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.filterMode = \"all\"; this.alerts = []; 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, index) => slot.name === this._cellSlots[index].name && slot.alert === this._cellSlots[index].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(); 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 rowId = e.detail.row.id; const alert = this.alertByRowId.get(rowId); if (alert) { this.dispatchEvent( new CustomEvent(\"row-click\", { detail: { alert, rowId } }) ); } } onCellButtonClick(e) { const { rowId, columnKey } = e.detail; const alert = this.alertByRowId.get(rowId); if (alert) { this.dispatchEvent( new CustomEvent(\"cell-click\", { detail: { alert, columnKey: columnKey.slice(TABLE_KEY_PREFIX.length), rowId }, 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; } 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) => html`<slot name=${alertListCellSlotName(column.key, row.id)} ></slot>` }; } const { compare } = column; if (compare) { return { ...base, sortable: true, sortDirection: column.sortDirection, compareFunction: (_a, _b, aRow, bRow) => this.compareRows(compare, aRow, bRow) }; } return base; }); } get gridColumns() { const columnTracks = this.columns.map( (column, index) => column.width ?? (index === 0 ? \"1fr\" : \"min-content\") ); return [...columnTracks, \"min-content\"].join(\" \"); } get metadata() { return getFilterModeData(this.filterMode); } buildVisibleRows() { 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; } let rowId = this.selectedRowId; while (rowId !== void 0 && !this.alertByRowId.has(rowId)) { rowId = parentRowIdOf(rowId); } return rowId; } buildRowCells(alert) { 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 html` <div class=\"wrapper\"> ${data.length > 0 ? html` <obc-table class=\"alert-list\" style=\"--alert-list-grid-columns: ${this.gridColumns}\" .data=${data} .columns=${this.tableColumns} .striped=${true} .showHeader=${this.showHeader} @row-click=${this.onRowClick} @cell-button-click=${this.onCellButtonClick} @expand-toggle=${this.onExpandToggle} > ${repeat( this.slotNames(data), (name) => name, // Forwards the host's slot into the one obc-table renders in the cell. (name) => html`<slot name=${name} slot=${name}></slot>` )} </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> `; } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "AlertListMode",
+          "name": "FilterModes",
           "declaration": {
-            "name": "AlertListMode",
+            "name": "FilterModes",
             "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
           }
         },
@@ -5009,6 +5009,22 @@
             "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ackColumn",
+          "declaration": {
+            "name": "ackColumn",
+            "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "alertListCellSlotName",
+          "declaration": {
+            "name": "alertListCellSlotName",
+            "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
+          }
+        },
         {
           "kind": "js",
           "name": "canAckFilter",
@@ -5019,9 +5035,41 @@
         },
         {
           "kind": "js",
-          "name": "getAlertListModeData",
+          "name": "getAlertRows",
           "declaration": {
-            "name": "getAlertListModeData",
+            "name": "getAlertRows",
+            "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getFilterModeData",
+          "declaration": {
+            "name": "getFilterModeData",
+            "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "statusColumn",
+          "declaration": {
+            "name": "statusColumn",
+            "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "tagIdColumn",
+          "declaration": {
+            "name": "tagIdColumn",
+            "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "timeColumn",
+          "declaration": {
+            "name": "timeColumn",
             "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
           }
         }
@@ -7833,7 +7881,7 @@
         {
           "kind": "variable",
           "name": "ObcTable",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.data = []; this.columns = []; this.rowDivider = false; this.narrowHeader = false; this.showHeader = true; this.striped = false; this.selectable = false; this.selectAllAriaLabel = \"Select all rows\"; this._sortByColumnIdx = void 0; this._sortDirection = \"asc\"; this._selectedRowIds = /* @__PURE__ */ new Set(); this._previousPositions = []; this._hasRenderedRows = false; } get hasHierarchy() { return this.data.some( (row) => row.parentId !== void 0 || (row.level ?? 0) > 0 || row.expandable === true ); } sortWithinSiblings(rows, compare) { const ids = new Set(rows.map((row) => row.id)); const childrenByParent = /* @__PURE__ */ new Map(); const roots = []; for (const row of rows) { const parentId = row.parentId; if (parentId !== void 0 && parentId !== row.id && ids.has(parentId)) { const siblings = childrenByParent.get(parentId) ?? []; siblings.push(row); childrenByParent.set(parentId, siblings); } else { roots.push(row); } } const sorted = []; const visited = /* @__PURE__ */ new Set(); const visit = (siblings) => { for (const row of [...siblings].sort(compare)) { if (visited.has(row.id)) { continue; } visited.add(row.id); sorted.push(row); visit(childrenByParent.get(row.id) ?? []); } }; visit(roots); visit(rows.filter((row) => !visited.has(row.id))); return sorted; } get sortedData() { if (this._sortByColumnIdx === void 0) { return this.data; } const sortByColumn = this.columns[this._sortByColumnIdx]; if (sortByColumn === void 0) { console.warn(\"Sort by column is undefined\"); return this.data; } const sortDirection = this._sortDirection; const compare = (a, b) => { const aValue = a[sortByColumn.key]; const bValue = b[sortByColumn.key]; if (sortDirection === \"asc\") { return sortByColumn.compareFunction( aValue, bValue, a, b ); } else { return sortByColumn.compareFunction( bValue, aValue, b, a ); } }; if (this.hasHierarchy) { return this.sortWithinSiblings(this.data, compare); } const sortedData = [...this.data]; sortedData.sort(compare); return sortedData; } _handleSortClick(column) { if (!column.sortable) { return; } const newSortColumnIdx = this.columns.indexOf(column); if (newSortColumnIdx === this._sortByColumnIdx) { this._sortDirection = this._sortDirection === \"asc\" ? \"desc\" : \"asc\"; } else { this._sortByColumnIdx = newSortColumnIdx; this._sortDirection = \"asc\"; } } _handleRowClick(row) { this.dispatchEvent( new CustomEvent(\"row-click\", { detail: { row } }) ); } _handleExpandToggle(row, expanded) { if (!row.expandable) { return; } this.dispatchEvent( new CustomEvent(\"expand-toggle\", { detail: { rowId: row.id, expanded } }) ); } _renderRowExpander(row) { if (!this.hasHierarchy) { return nothing; } const level = row.level ?? 0; return html`<span class=\"row-expander\" style=\"--row-level: ${level}\" aria-hidden=\"true\" > ${row.expandable ? html`<span class=${classMap({ chevron: true, expanded: row.expanded ?? false })} @click=${(event) => { event.preventDefault(); event.stopPropagation(); this._handleExpandToggle(row, !(row.expanded ?? false)); }} > <obi-chevron-right-google></obi-chevron-right-google> </span>` : nothing} </span>`; } _focusFirstRow() { const firstRow = this.renderRoot.querySelector( 'button[role=\"row\"].grid-row' ); firstRow?.focus(); } _focusLeftHeaderItem() { this._focusHeaderByIndex(0); } _focusHeaderByIndex(index) { const headers = Array.from( this.renderRoot.querySelectorAll( '.grid-header [role=\"columnheader\"]' ) ); if (headers.length === 0) return; const clampedIndex = Math.max(0, Math.min(index, headers.length - 1)); const headerItem = headers[clampedIndex]; const innerButton = headerItem.shadowRoot?.querySelector(\"button\") ?? null; (innerButton ?? headerItem).focus(); } _handleHeaderKeyDown(event) { const key = event.key; if (key === \"ArrowDown\") { this._focusFirstRow(); event.preventDefault(); event.stopPropagation(); return; } if (key !== \"ArrowLeft\" && key !== \"ArrowRight\") { return; } const headers = Array.from( this.renderRoot.querySelectorAll( '.grid-header [role=\"columnheader\"]' ) ); if (headers.length === 0) return; const currentHeaderEl = event.currentTarget; const currentIndex = currentHeaderEl ? headers.indexOf(currentHeaderEl) : -1; if (currentIndex === -1) return; const nextIndex = key === \"ArrowRight\" ? Math.min(currentIndex + 1, headers.length - 1) : Math.max(currentIndex - 1, 0); if (nextIndex !== currentIndex) { this._focusHeaderByIndex(nextIndex); event.preventDefault(); event.stopPropagation(); } } _handleRowKeyDown(event) { const key = event.key; if (this.hasHierarchy && (key === \"ArrowRight\" || key === \"ArrowLeft\") && this._handleRowExpandKey(event, key)) { return; } if (key !== \"ArrowDown\" && key !== \"ArrowUp\" && key !== \"Home\" && key !== \"End\") { return; } const target = event.currentTarget; if (!target) return; const rows = Array.from( this.renderRoot.querySelectorAll( 'button[role=\"row\"].grid-row' ) ); const currentIndex = rows.indexOf(target); if (currentIndex === -1) return; let nextIndex = currentIndex; switch (key) { case \"ArrowDown\": nextIndex = Math.min(currentIndex + 1, rows.length - 1); break; case \"ArrowUp\": if (currentIndex === 0) { this._focusLeftHeaderItem(); event.preventDefault(); event.stopPropagation(); return; } nextIndex = Math.max(currentIndex - 1, 0); break; case \"Home\": nextIndex = 0; break; case \"End\": nextIndex = rows.length - 1; break; } if (nextIndex !== currentIndex) { rows[nextIndex]?.focus(); event.preventDefault(); event.stopPropagation(); } else if (key === \"Home\" || key === \"End\") { event.preventDefault(); event.stopPropagation(); } } _handleRowExpandKey(event, key) { const target = event.currentTarget; const rowId = target?.dataset.rowId; const row = this.sortedData.find((candidate) => candidate.id === rowId); if (!row) return false; const expanded = row.expanded ?? false; if (key === \"ArrowRight\" && row.expandable && !expanded) { this._handleExpandToggle(row, true); } else if (key === \"ArrowLeft\" && row.expandable && expanded) { this._handleExpandToggle(row, false); } else if (key === \"ArrowLeft\") { const parent = this.renderRoot.querySelector( `button[role=\"row\"].grid-row[data-row-id=\"${CSS.escape( row.parentId ?? \"\" )}\"]` ); if (!parent) return false; parent.focus(); } else { return false; } event.preventDefault(); event.stopPropagation(); return true; } _getAllPositions() { const rows = Array.from( this.renderRoot.querySelectorAll( 'button[role=\"row\"].grid-row' ) ); const firstRow = rows[0]; if (!firstRow) { return []; } const firstRowRect = firstRow.getBoundingClientRect(); const firstRowHeight = firstRowRect.height; const computedStyle = getComputedStyle(firstRow); const computedHeight = parseFloat(computedStyle.height); const zoomFactor = computedHeight / firstRowHeight; return rows.map((row) => { const rect = row.getBoundingClientRect(); return { top: rect.top * zoomFactor, height: rect.height * zoomFactor, index: row.getAttribute(\"data-row-id\") ?? \"\", element: row }; }); } _animateRowChanges() { const previousPositions = this._previousPositions; const currentPositions = this._getAllPositions(); currentPositions.forEach((el) => { const previousPosition = previousPositions.find( (p) => p.index === el.index ); if (!previousPosition) { el.element.style.transform = `translateY(-${el.height}px)`; el.element.style.opacity = \"0\"; } else { el.element.style.transform = `translateY(${previousPosition.top - el.top}px)`; } el.element.style.transition = \"none\"; el.element.offsetHeight; el.element.style.transition = \"transform 100ms ease-in-out, opacity 100ms ease-in-out\"; el.element.style.transform = \"translateY(0px)\"; el.element.style.opacity = \"1\"; }); this._previousPositions = currentPositions; } willUpdate(changedProperties) { if (changedProperties.has(\"defaultSelectedRowIds\")) { if (this.selectedRowIds === void 0 && this._selectedRowIds.size === 0) { this._selectedRowIds = new Set(this.defaultSelectedRowIds ?? []); } } if (changedProperties.has(\"selectedRowIds\")) { if (this.selectedRowIds !== void 0) { this._selectedRowIds = new Set(this.selectedRowIds); } } if (changedProperties.has(\"data\")) { const availableIds = new Set(this.data.map((row) => row.id)); this._selectedRowIds.forEach((id) => { if (!availableIds.has(id)) { this._selectedRowIds.delete(id); } }); } if (changedProperties.has(\"data\") || changedProperties.has(\"_sortByColumnIdx\") || changedProperties.has(\"_sortDirection\")) { if (this._hasRenderedRows) { this._updatePositions(); } else { this.updateComplete.then(() => { this._hasRenderedRows = true; }); } } } updated(changedProperties) { if (changedProperties.has(\"columns\")) { this._sortByColumnIdx = this.columns.findIndex( (col) => \"sortDirection\" in col && col.sortDirection !== void 0 ); if (this._sortByColumnIdx === -1) { this._sortByColumnIdx = void 0; this._sortDirection = \"asc\"; } else { this._sortDirection = this.columns[this._sortByColumnIdx]?.sortDirection ?? \"asc\"; } } if (changedProperties.has(\"data\") || changedProperties.has(\"_sortByColumnIdx\") || changedProperties.has(\"_sortDirection\")) { if (this._hasRenderedRows) { this._animateRowChanges(); } } } _updatePositions() { const positions = this._getAllPositions(); this._previousPositions = positions; } render() { const effectiveColumns = this.selectable ? [ { label: \"\", key: \"__selection__\" }, ...this.columns ] : this.columns; const selectionColumnCount = this.selectable ? Math.max(0, effectiveColumns.length - 1) : effectiveColumns.length; return html` <div class=${classMap({ \"grid-container\": true, \"has-selection-column\": this.selectable })} part=\"grid\" style=\" --grid-columns: ${effectiveColumns.length}; --grid-columns-rest: ${selectionColumnCount}; --selection-column-width: var(--menu-navigation-components-table-item-touch-target-size); \" role=${this.hasHierarchy ? \"treegrid\" : \"table\"} > ${this.showHeader ? html` <div class=\"grid-header\" role=\"row\"> ${effectiveColumns.map((col) => { const isSelectionColumn = this.selectable && col.key === \"__selection__\"; const isNotLast = effectiveColumns.indexOf(col) !== effectiveColumns.length - 1; const icon = col.renderHeaderIcon ? html`<span slot=\"leading-icon\" >${col.renderHeaderIcon()}</span >` : nothing; const columnIndex = this.columns.findIndex( (column) => column.key === col.key ); const sorted = \"sortable\" in col && col.sortable && this._sortByColumnIdx === columnIndex; const sortDirection = sorted ? this._sortDirection : \"none\"; const headerType = col.headerType ?? (this.narrowHeader ? ObcTableHeaderItemType.Narrow : ObcTableHeaderItemType.Regular); if (\"sortable\" in col && col.sortable && !isSelectionColumn) { return html`<obc-table-header-item role=\"columnheader\" class=${isSelectionColumn ? \"selection-header\" : \"\"} .showDivider=${isNotLast} ?hasLeadingIcon=${icon !== nothing} .sortDirection=${sortDirection} .sortable=${true} type=${headerType} @click=${() => this._handleSortClick( col )} @keydown=${this._handleHeaderKeyDown} >${icon}${col.label}</obc-table-header-item > `; } else { if (isSelectionColumn) { return html`<div role=\"columnheader\" class=${classMap({ \"selection-header\": true })} tabindex=\"0\" @keydown=${this._handleHeaderKeyDown} > <obc-checkbox .status=${this._getSelectionStatus()} .disabled=${false} aria-label=${this.selectAllAriaLabel} @click=${(event) => { event.preventDefault(); event.stopPropagation(); }} @change=${() => this._toggleAllSelection()} ></obc-checkbox> </div>`; } return html`<obc-table-header-item role=\"columnheader\" class=${isSelectionColumn ? \"selection-header\" : \"\"} .showDivider=${isNotLast} ?hasLeadingIcon=${icon !== nothing} type=${headerType} >${icon}${col.label}</obc-table-header-item >`; } })} </div> <div class=\"grid-header-divider\"></div> ` : nothing} <div class=\"grid-body\" part=\"body\" style=\"grid-template-rows: repeat(${this.sortedData.length}, min-content)\" > ${repeat( this.sortedData, (row) => row.id, (row, rowIndex) => { const hasDivider = this.rowDivider && this.data.length - 1 !== rowIndex; const isStriped = this.striped && rowIndex % 2 === 1; const isRowSelected = (row.selected ?? false) || this.selectable && this._selectedRowIds.has(row.id); const previousRow = rowIndex > 0 ? this.sortedData[rowIndex - 1] : void 0; const nextRow = rowIndex < this.sortedData.length - 1 ? this.sortedData[rowIndex + 1] : void 0; const hasSelectedPreviousRow = previousRow !== void 0 && ((previousRow.selected ?? false) || this.selectable && this._selectedRowIds.has(previousRow.id)); const hasSelectedNextRow = nextRow !== void 0 && ((nextRow.selected ?? false) || this.selectable && this._selectedRowIds.has(nextRow.id)); return html` <button role=\"row\" class=${classMap({ \"grid-row\": true, selected: isRowSelected, \"selected-with-prev\": isRowSelected && hasSelectedPreviousRow, \"selected-with-next\": isRowSelected && hasSelectedNextRow, striped: isStriped })} @click=${() => this._handleRowClick(row)} @keydown=${this._handleRowKeyDown} data-row-id=${row.id} style=\"grid-row: ${rowIndex + 1}\" part=\"row\" aria-level=${ifDefined( this.hasHierarchy ? (row.level ?? 0) + 1 : void 0 )} aria-expanded=${ifDefined( row.expandable ? row.expanded ?? false : void 0 )} > ${map(effectiveColumns, (col, colIndex) => { const expander = colIndex === (this.selectable ? 1 : 0) ? this._renderRowExpander(row) : nothing; if (this.selectable && col.key === \"__selection__\") { const checked = this._selectedRowIds.has(row.id); return html`<div class=\"grid-cell checkbox align-center selection\" role=\"cell\" > <obc-checkbox .status=${checked ? CheckboxStatus.checked : CheckboxStatus.unchecked} .disabled=${false} aria-label=${`Select row ${row.id}`} @click=${(event) => { event.preventDefault(); event.stopPropagation(); }} @change=${() => this._toggleRowSelection(row.id)} ></obc-checkbox> </div>`; } const value = row[col.key]; if (value === void 0) { return html`<div class=\"grid-cell\" role=\"cell\"> ${expander} </div>`; } if (col.renderCell) { return html`<div class=\"grid-cell ${col.dividerRight ? \"divider-right\" : \"\"}\" role=\"cell\" part=${ifDefined(value.cssPart)} > ${expander}${col.renderCell( value, row, row.id )} </div>`; } else { return this._renderCell( value, row, col, expander ); } })} ${hasDivider ? html`<div class=\"grid-row-divider\"></div>` : nothing} </button> `; } )} ${repeat( effectiveColumns, (col) => col.key, (col, colIndex) => col.dividerRight ? html`<div class=\"grid-column-divider\" style=\"grid-column: ${colIndex + 1}; grid-row: 1/${this.sortedData.length + 1}\" ></div>` : nothing )} </div> </div> `; } getAllVisibleRows() { const rows = Array.from( this.renderRoot.querySelectorAll( 'button[role=\"row\"].grid-row' ) ); const bodyRect = this.renderRoot.querySelector(\".grid-body\")?.getBoundingClientRect(); if (!bodyRect) { return []; } const scrollTop = bodyRect.top; const scrollHeight = bodyRect.height; const scrollBottom = scrollTop + scrollHeight; return rows.filter((el) => el.checkVisibility()).filter( (el) => el.getBoundingClientRect().top >= scrollTop && el.getBoundingClientRect().bottom <= scrollBottom ).map((row) => row.getAttribute(\"data-row-id\")).filter((id) => id !== null); } _handleCellButtonClick(event, row, columnKey) { event.preventDefault(); event.stopPropagation(); const e = new CustomEvent(\"cell-button-click\", { detail: { rowId: row.id, columnKey } }); this.dispatchEvent(e); } _handleCellTagClick(event, row, columnKey, tagId) { event.preventDefault(); event.stopPropagation(); const e = new CustomEvent(\"cell-tag-click\", { detail: { rowId: row.id, columnKey, tagId } }); this.dispatchEvent(e); } _handleCellCheckboxChange(event, row, columnKey) { event.preventDefault(); event.stopPropagation(); const e = new CustomEvent( \"cell-checkbox-change\", { detail: { rowId: row.id, columnKey, status: event.detail.status, disabled: event.detail.disabled } } ); this.dispatchEvent(e); } _getSelectableRowIds() { return this.data.map((row) => row.id); } _getSelectionStatus() { const rowIds = this._getSelectableRowIds(); if (rowIds.length === 0) return CheckboxStatus.unchecked; const selectedCount = rowIds.filter( (id) => this._selectedRowIds.has(id) ).length; if (selectedCount === 0) return CheckboxStatus.unchecked; if (selectedCount === rowIds.length) return CheckboxStatus.checked; return CheckboxStatus.mixed; } _emitSelectionChange(selectedRowIds, source) { const selectedRows = this.data.filter( (row) => selectedRowIds.includes(row.id) ); const e = new CustomEvent( \"selection-change\", { detail: { selectedRowIds, selectedRows, source } } ); this.dispatchEvent(e); } _applySelectionChange(nextSelection, source) { const selectedRowIds = Array.from(nextSelection); this._emitSelectionChange(selectedRowIds, source); if (this.selectedRowIds === void 0) { this._selectedRowIds = nextSelection; this.requestUpdate(); } } _toggleRowSelection(rowId) { const nextSelection = new Set(this._selectedRowIds); if (nextSelection.has(rowId)) { nextSelection.delete(rowId); } else { nextSelection.add(rowId); } this._applySelectionChange(nextSelection, \"row\"); } _toggleAllSelection() { const rowIds = this._getSelectableRowIds(); const status = this._getSelectionStatus(); const nextSelection = status === CheckboxStatus.checked ? /* @__PURE__ */ new Set() : new Set(rowIds); this._applySelectionChange(nextSelection, \"header\"); } _renderCell(value, row, column, expander = nothing) { if (value.type === \"regular\") { return html`<div class=${classMap({ \"grid-cell\": true, regular: true, neutral: value.neutral ?? false, \"large-icon\": value.largeIcon ?? false, \"no-wrap\": value.noWrap ?? false, [`align-${value.align ?? \"left\"}`]: true, \"divider-right\": column.dividerRight ?? false, vertical: value.vertical ?? false })} role=\"cell\" part=${ifDefined(cssPart(value, \"cell\"))} > ${expander}${value.icon3 ? html`<span class=\"icon\" part=${ifDefined(cssPart(value, \"icon3\"))} >${value.icon3}</span >` : nothing} ${value.icon2 ? html`<span class=\"icon\" part=${ifDefined(cssPart(value, \"icon2\"))} >${value.icon2}</span >` : nothing} ${value.icon ? html`<span class=\"icon\" part=${ifDefined(cssPart(value, \"icon\"))} >${value.icon}</span >` : nothing} ${value.title ? html`<span class=\"title\" part=${ifDefined(cssPart(value, \"title\"))} >${value.title}</span >` : nothing} ${value.text ? html`<span part=${ifDefined(cssPart(value, \"text\"))} >${value.text}</span >` : nothing} </div>`; } else if (value.type === \"button\") { return html`<div class=\"grid-cell button ${column.dividerRight ? \"divider-right\" : \"\"}\" role=\"cell\" > ${expander} <obc-button variant=\"normal\" fullWidth .disabled=${value.disabled ?? false} ?showLeadingIcon=${value.icon !== void 0} part=${ifDefined(cssPart(value, \"button\"))} @click=${(event) => this._handleCellButtonClick(event, row, column.key)} > ${value.icon ? html`<span slot=\"leading-icon\" part=${ifDefined(cssPart(value, \"icon\"))} >${value.icon}</span >` : nothing} ${value.text ? html`<span part=${ifDefined(cssPart(value, \"text\"))} >${value.text}</span >` : nothing} </obc-button> </div>`; } else if (value.type === \"checkbox\") { const checkboxLabel = value.label ?? value.text ?? \"\"; const ariaLabel = checkboxLabel.trim() || column.label?.trim() || \"Checkbox\"; return html`<div class=${classMap({ \"grid-cell\": true, checkbox: true, [`align-${value.align ?? \"center\"}`]: true, \"divider-right\": column.dividerRight ?? false })} role=\"cell\" part=${ifDefined(cssPart(value, \"cell\"))} > ${expander} <obc-checkbox .status=${value.status ?? CheckboxStatus.unchecked} .disabled=${value.disabled ?? false} aria-describedby=${ifDefined(value.ariaDescribedBy)} aria-label=${ariaLabel} part=${ifDefined(cssPart(value, \"checkbox\"))} @click=${(event) => { event.preventDefault(); event.stopPropagation(); }} @change=${(event) => this._handleCellCheckboxChange(event, row, column.key)} ></obc-checkbox> </div>`; } else if (value.type === \"tag\") { const tags = value.tags ?? (value.tag ? [value.tag] : void 0) ?? [ { id: value.tagId ?? \"tag\", label: value.label ?? value.text ?? \"Label\", color: value.color, hasIcon: value.hasIcon, icon: value.icon } ]; const wrap = value.wrap ?? value.tags !== void 0; const defaultMaxTags = value.tags ? 2 : void 0; const maxTags = (value.maxTags ?? defaultMaxTags) !== void 0 ? Math.max(0, Math.floor(value.maxTags ?? defaultMaxTags ?? 0)) : void 0; const visibleTags = maxTags !== void 0 ? tags.slice(0, maxTags) : tags; const overflowCount = maxTags !== void 0 ? Math.max(0, tags.length - maxTags) : 0; const overflowLabel = value.overflowLabel ?? `+${overflowCount.toString()}`; return html`<div class=${classMap({ \"grid-cell\": true, tags: tags.length > 1, wrap, [`align-${value.align ?? \"left\"}`]: true, \"divider-right\": column.dividerRight ?? false })} role=\"cell\" part=${ifDefined(cssPart(value, \"cell\"))} > ${expander}${visibleTags.map((tag) => { const hasIcon = tag.hasIcon ?? tag.icon !== void 0; return html`<obc-tag .label=${tag.label} color=${tag.color ?? TagColor.gray} ?hasIcon=${hasIcon} part=${ifDefined( [cssPart(value, \"tag\"), tag.cssPart].filter(Boolean).join(\" \") || void 0 )} @click=${(event) => this._handleCellTagClick(event, row, column.key, tag.id)} > ${hasIcon && tag.icon ? tag.icon : nothing} </obc-tag>`; })} ${overflowCount > 0 ? html`<span class=\"tag-overflow\" part=${ifDefined(cssPart(value, \"tag-overflow\"))} >${overflowLabel}</span >` : nothing} </div>`; } else if (value.type === \"horizontal-bar\") { const hasBar = value.hasBar ?? true; const hasScale = value.hasScale ?? false; const showLabels = !(value.hideLabels ?? true); const fixedAspectRatio = value.fixedAspectRatio ?? true; return html`<div class=${classMap({ \"grid-cell\": true, \"horizontal-bar\": true, [`align-${value.align ?? \"left\"}`]: true, \"divider-right\": column.dividerRight ?? false })} role=\"cell\" part=${ifDefined(cssPart(value, \"cell\"))} > ${expander} <obc-bar-horizontal .minValue=${value.minValue ?? 0} .maxValue=${value.maxValue ?? 100} .value=${value.value} .setpoint=${value.setpoint} .hasBar=${hasBar} .hasScale=${hasScale} .showLabels=${showLabels} .priority=${value.priority ?? Priority.regular} .fillMode=${value.fillMode ?? FillMode.fill} .fillMin=${value.fillMin} .fillMax=${value.fillMax} .barThickness=${value.barThickness ?? 24} .scaleType=${value.scaleType ?? ScaleType.regular} .frameStyle=${value.frameStyle ?? FrameStyle.regular} .side=${value.side ?? ExternalScaleSide.bottom} .state=${value.state ?? InstrumentState.active} .fixedAspectRatio=${fixedAspectRatio} .scaleReferenceSize=${value.scaleReferenceSize ?? 384} part=${ifDefined(cssPart(value, \"bar\"))} ></obc-bar-horizontal> </div>`; } else { return nothing; } } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.data = []; this.columns = []; this.rowDivider = false; this.narrowHeader = false; this.showHeader = true; this.striped = false; this.selectable = false; this.selectAllAriaLabel = \"Select all rows\"; this._sortByColumnIdx = void 0; this._sortDirection = \"asc\"; this._selectedRowIds = /* @__PURE__ */ new Set(); this._previousPositions = []; this._hasRenderedRows = false; } get hasHierarchy() { return this.data.some( (row) => row.parentId !== void 0 || (row.level ?? 0) > 0 || row.expandable === true ); } sortWithinSiblings(rows, compare) { const ids = new Set(rows.map((row) => row.id)); const childrenByParent = /* @__PURE__ */ new Map(); const roots = []; for (const row of rows) { const parentId = row.parentId; if (parentId !== void 0 && parentId !== row.id && ids.has(parentId)) { const siblings = childrenByParent.get(parentId) ?? []; siblings.push(row); childrenByParent.set(parentId, siblings); } else { roots.push(row); } } const sorted = []; const visited = /* @__PURE__ */ new Set(); const visit = (siblings) => { for (const row of [...siblings].sort(compare)) { if (visited.has(row.id)) { continue; } visited.add(row.id); sorted.push(row); visit(childrenByParent.get(row.id) ?? []); } }; visit(roots); visit(rows.filter((row) => !visited.has(row.id))); return sorted; } get sortedData() { if (this._sortByColumnIdx === void 0) { return this.data; } const sortByColumn = this.columns[this._sortByColumnIdx]; if (sortByColumn === void 0) { console.warn(\"Sort by column is undefined\"); return this.data; } const sortDirection = this._sortDirection; const compare = (a, b) => { const aValue = a[sortByColumn.key]; const bValue = b[sortByColumn.key]; if (sortDirection === \"asc\") { return sortByColumn.compareFunction( aValue, bValue, a, b ); } else { return sortByColumn.compareFunction( bValue, aValue, b, a ); } }; if (this.hasHierarchy) { return this.sortWithinSiblings(this.data, compare); } const sortedData = [...this.data]; sortedData.sort(compare); return sortedData; } _handleSortClick(column) { if (!column.sortable) { return; } const newSortColumnIdx = this.columns.indexOf(column); if (newSortColumnIdx === this._sortByColumnIdx) { this._sortDirection = this._sortDirection === \"asc\" ? \"desc\" : \"asc\"; } else { this._sortByColumnIdx = newSortColumnIdx; this._sortDirection = \"asc\"; } } _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 } }) ); } _handleExpandToggle(row, expanded) { if (!row.expandable) { return; } this.dispatchEvent( new CustomEvent(\"expand-toggle\", { detail: { rowId: row.id, expanded } }) ); } _renderRowExpander(row) { if (!this.hasHierarchy) { return nothing; } const level = row.level ?? 0; return html`<span class=\"row-expander\" style=\"--row-level: ${level}\" aria-hidden=\"true\" > ${row.expandable ? html`<span class=${classMap({ chevron: true, expanded: row.expanded ?? false })} @click=${(event) => { event.preventDefault(); event.stopPropagation(); this._handleExpandToggle(row, !(row.expanded ?? false)); }} > <obi-chevron-right-google></obi-chevron-right-google> </span>` : nothing} </span>`; } _focusFirstRow() { const firstRow = this.renderRoot.querySelector( 'button[role=\"row\"].grid-row' ); firstRow?.focus(); } _focusLeftHeaderItem() { this._focusHeaderByIndex(0); } _focusHeaderByIndex(index) { const headers = Array.from( this.renderRoot.querySelectorAll( '.grid-header [role=\"columnheader\"]' ) ); if (headers.length === 0) return; const clampedIndex = Math.max(0, Math.min(index, headers.length - 1)); const headerItem = headers[clampedIndex]; const innerButton = headerItem.shadowRoot?.querySelector(\"button\") ?? null; (innerButton ?? headerItem).focus(); } _handleHeaderKeyDown(event) { const key = event.key; if (key === \"ArrowDown\") { this._focusFirstRow(); event.preventDefault(); event.stopPropagation(); return; } if (key !== \"ArrowLeft\" && key !== \"ArrowRight\") { return; } const headers = Array.from( this.renderRoot.querySelectorAll( '.grid-header [role=\"columnheader\"]' ) ); if (headers.length === 0) return; const currentHeaderEl = event.currentTarget; const currentIndex = currentHeaderEl ? headers.indexOf(currentHeaderEl) : -1; if (currentIndex === -1) return; const nextIndex = key === \"ArrowRight\" ? Math.min(currentIndex + 1, headers.length - 1) : Math.max(currentIndex - 1, 0); if (nextIndex !== currentIndex) { this._focusHeaderByIndex(nextIndex); event.preventDefault(); event.stopPropagation(); } } _handleRowKeyDown(event) { const key = event.key; if (this.hasHierarchy && (key === \"ArrowRight\" || key === \"ArrowLeft\") && this._handleRowExpandKey(event, key)) { return; } if (key !== \"ArrowDown\" && key !== \"ArrowUp\" && key !== \"Home\" && key !== \"End\") { return; } const target = event.currentTarget; if (!target) return; const rows = Array.from( this.renderRoot.querySelectorAll( 'button[role=\"row\"].grid-row' ) ); const currentIndex = rows.indexOf(target); if (currentIndex === -1) return; let nextIndex = currentIndex; switch (key) { case \"ArrowDown\": nextIndex = Math.min(currentIndex + 1, rows.length - 1); break; case \"ArrowUp\": if (currentIndex === 0) { this._focusLeftHeaderItem(); event.preventDefault(); event.stopPropagation(); return; } nextIndex = Math.max(currentIndex - 1, 0); break; case \"Home\": nextIndex = 0; break; case \"End\": nextIndex = rows.length - 1; break; } if (nextIndex !== currentIndex) { rows[nextIndex]?.focus(); event.preventDefault(); event.stopPropagation(); } else if (key === \"Home\" || key === \"End\") { event.preventDefault(); event.stopPropagation(); } } _handleRowExpandKey(event, key) { const target = event.currentTarget; const rowId = target?.dataset.rowId; const row = this.sortedData.find((candidate) => candidate.id === rowId); if (!row) return false; const expanded = row.expanded ?? false; if (key === \"ArrowRight\" && row.expandable && !expanded) { this._handleExpandToggle(row, true); } else if (key === \"ArrowLeft\" && row.expandable && expanded) { this._handleExpandToggle(row, false); } else if (key === \"ArrowLeft\") { const parent = this.renderRoot.querySelector( `button[role=\"row\"].grid-row[data-row-id=\"${CSS.escape( row.parentId ?? \"\" )}\"]` ); if (!parent) return false; parent.focus(); } else { return false; } event.preventDefault(); event.stopPropagation(); return true; } _getAllPositions() { const rows = Array.from( this.renderRoot.querySelectorAll( 'button[role=\"row\"].grid-row' ) ); const firstRow = rows[0]; if (!firstRow) { return []; } const firstRowRect = firstRow.getBoundingClientRect(); const firstRowHeight = firstRowRect.height; const computedStyle = getComputedStyle(firstRow); const computedHeight = parseFloat(computedStyle.height); const zoomFactor = computedHeight / firstRowHeight; return rows.map((row) => { const rect = row.getBoundingClientRect(); return { top: rect.top * zoomFactor, height: rect.height * zoomFactor, index: row.getAttribute(\"data-row-id\") ?? \"\", element: row }; }); } _animateRowChanges() { const previousPositions = this._previousPositions; const currentPositions = this._getAllPositions(); currentPositions.forEach((el) => { const previousPosition = previousPositions.find( (p) => p.index === el.index ); if (!previousPosition) { el.element.style.transform = `translateY(-${el.height}px)`; el.element.style.opacity = \"0\"; } else { el.element.style.transform = `translateY(${previousPosition.top - el.top}px)`; } el.element.style.transition = \"none\"; el.element.offsetHeight; el.element.style.transition = \"transform 100ms ease-in-out, opacity 100ms ease-in-out\"; el.element.style.transform = \"translateY(0px)\"; el.element.style.opacity = \"1\"; }); this._previousPositions = currentPositions; } willUpdate(changedProperties) { if (changedProperties.has(\"defaultSelectedRowIds\")) { if (this.selectedRowIds === void 0 && this._selectedRowIds.size === 0) { this._selectedRowIds = new Set(this.defaultSelectedRowIds ?? []); } } if (changedProperties.has(\"selectedRowIds\")) { if (this.selectedRowIds !== void 0) { this._selectedRowIds = new Set(this.selectedRowIds); } } if (changedProperties.has(\"data\")) { const availableIds = new Set(this.data.map((row) => row.id)); this._selectedRowIds.forEach((id) => { if (!availableIds.has(id)) { this._selectedRowIds.delete(id); } }); } if (changedProperties.has(\"data\") || changedProperties.has(\"_sortByColumnIdx\") || changedProperties.has(\"_sortDirection\")) { if (this._hasRenderedRows) { this._updatePositions(); } else { this.updateComplete.then(() => { this._hasRenderedRows = true; }); } } } updated(changedProperties) { if (changedProperties.has(\"columns\")) { this._sortByColumnIdx = this.columns.findIndex( (col) => \"sortDirection\" in col && col.sortDirection !== void 0 ); if (this._sortByColumnIdx === -1) { this._sortByColumnIdx = void 0; this._sortDirection = \"asc\"; } else { this._sortDirection = this.columns[this._sortByColumnIdx]?.sortDirection ?? \"asc\"; } } if (changedProperties.has(\"data\") || changedProperties.has(\"_sortByColumnIdx\") || changedProperties.has(\"_sortDirection\")) { if (this._hasRenderedRows) { this._animateRowChanges(); } } } _updatePositions() { const positions = this._getAllPositions(); this._previousPositions = positions; } render() { const effectiveColumns = this.selectable ? [ { label: \"\", key: \"__selection__\" }, ...this.columns ] : this.columns; const selectionColumnCount = this.selectable ? Math.max(0, effectiveColumns.length - 1) : effectiveColumns.length; return html` <div class=${classMap({ \"grid-container\": true, \"has-selection-column\": this.selectable })} part=\"grid\" style=\" --grid-columns: ${effectiveColumns.length}; --grid-columns-rest: ${selectionColumnCount}; --selection-column-width: var(--menu-navigation-components-table-item-touch-target-size); \" role=${this.hasHierarchy ? \"treegrid\" : \"table\"} > ${this.showHeader ? html` <div class=\"grid-header\" role=\"row\"> ${effectiveColumns.map((col) => { const isSelectionColumn = this.selectable && col.key === \"__selection__\"; const isNotLast = effectiveColumns.indexOf(col) !== effectiveColumns.length - 1; const icon = col.renderHeaderIcon ? html`<span slot=\"leading-icon\" >${col.renderHeaderIcon()}</span >` : nothing; const columnIndex = this.columns.findIndex( (column) => column.key === col.key ); const sorted = \"sortable\" in col && col.sortable && this._sortByColumnIdx === columnIndex; const sortDirection = sorted ? this._sortDirection : \"none\"; const headerType = col.headerType ?? (this.narrowHeader ? ObcTableHeaderItemType.Narrow : ObcTableHeaderItemType.Regular); if (\"sortable\" in col && col.sortable && !isSelectionColumn) { return html`<obc-table-header-item role=\"columnheader\" class=${isSelectionColumn ? \"selection-header\" : \"\"} .showDivider=${isNotLast} ?hasLeadingIcon=${icon !== nothing} .sortDirection=${sortDirection} .sortable=${true} type=${headerType} @click=${() => this._handleSortClick( col )} @keydown=${this._handleHeaderKeyDown} >${icon}${col.label}</obc-table-header-item > `; } else { if (isSelectionColumn) { return html`<div role=\"columnheader\" class=${classMap({ \"selection-header\": true })} tabindex=\"0\" @keydown=${this._handleHeaderKeyDown} > <obc-checkbox .status=${this._getSelectionStatus()} .disabled=${false} aria-label=${this.selectAllAriaLabel} @click=${(event) => { event.preventDefault(); event.stopPropagation(); }} @change=${() => this._toggleAllSelection()} ></obc-checkbox> </div>`; } return html`<obc-table-header-item role=\"columnheader\" class=${isSelectionColumn ? \"selection-header\" : \"\"} .showDivider=${isNotLast} ?hasLeadingIcon=${icon !== nothing} type=${headerType} >${icon}${col.label}</obc-table-header-item >`; } })} </div> <div class=\"grid-header-divider\"></div> ` : nothing} <div class=\"grid-body\" part=\"body\" style=\"grid-template-rows: repeat(${this.sortedData.length}, min-content)\" > ${repeat( this.sortedData, (row) => row.id, (row, rowIndex) => { const hasDivider = this.rowDivider && this.data.length - 1 !== rowIndex; const isStriped = this.striped && rowIndex % 2 === 1; const isRowSelected = (row.selected ?? false) || this.selectable && this._selectedRowIds.has(row.id); const previousRow = rowIndex > 0 ? this.sortedData[rowIndex - 1] : void 0; const nextRow = rowIndex < this.sortedData.length - 1 ? this.sortedData[rowIndex + 1] : void 0; const hasSelectedPreviousRow = previousRow !== void 0 && ((previousRow.selected ?? false) || this.selectable && this._selectedRowIds.has(previousRow.id)); const hasSelectedNextRow = nextRow !== void 0 && ((nextRow.selected ?? false) || this.selectable && this._selectedRowIds.has(nextRow.id)); return html` <button role=\"row\" class=${classMap({ \"grid-row\": true, selected: isRowSelected, \"selected-with-prev\": isRowSelected && hasSelectedPreviousRow, \"selected-with-next\": isRowSelected && hasSelectedNextRow, striped: isStriped })} @click=${(event) => this._handleRowClick(event, row)} @keydown=${this._handleRowKeyDown} data-row-id=${row.id} style=\"grid-row: ${rowIndex + 1}\" part=\"row\" aria-level=${ifDefined( this.hasHierarchy ? (row.level ?? 0) + 1 : void 0 )} aria-expanded=${ifDefined( row.expandable ? row.expanded ?? false : void 0 )} > ${map(effectiveColumns, (col, colIndex) => { const expander = colIndex === (this.selectable ? 1 : 0) ? this._renderRowExpander(row) : nothing; if (this.selectable && col.key === \"__selection__\") { const checked = this._selectedRowIds.has(row.id); return html`<div class=\"grid-cell checkbox align-center selection\" role=\"cell\" > <obc-checkbox .status=${checked ? CheckboxStatus.checked : CheckboxStatus.unchecked} .disabled=${false} aria-label=${`Select row ${row.id}`} @click=${(event) => { event.preventDefault(); event.stopPropagation(); }} @change=${() => this._toggleRowSelection(row.id)} ></obc-checkbox> </div>`; } const value = row[col.key]; if (value === void 0) { return html`<div class=\"grid-cell\" role=\"cell\"> ${expander} </div>`; } if (col.renderCell) { return html`<div class=\"grid-cell ${col.dividerRight ? \"divider-right\" : \"\"}\" role=\"cell\" part=${ifDefined(value.cssPart)} > ${expander}${col.renderCell( value, row, row.id )} </div>`; } else { return this._renderCell( value, row, col, expander ); } })} ${hasDivider ? html`<div class=\"grid-row-divider\"></div>` : nothing} </button> `; } )} ${repeat( effectiveColumns, (col) => col.key, (col, colIndex) => col.dividerRight ? html`<div class=\"grid-column-divider\" style=\"grid-column: ${colIndex + 1}; grid-row: 1/${this.sortedData.length + 1}\" ></div>` : nothing )} </div> </div> `; } getAllVisibleRows() { const rows = Array.from( this.renderRoot.querySelectorAll( 'button[role=\"row\"].grid-row' ) ); const bodyRect = this.renderRoot.querySelector(\".grid-body\")?.getBoundingClientRect(); if (!bodyRect) { return []; } const scrollTop = bodyRect.top; const scrollHeight = bodyRect.height; const scrollBottom = scrollTop + scrollHeight; return rows.filter((el) => el.checkVisibility()).filter( (el) => el.getBoundingClientRect().top >= scrollTop && el.getBoundingClientRect().bottom <= scrollBottom ).map((row) => row.getAttribute(\"data-row-id\")).filter((id) => id !== null); } _handleCellButtonClick(event, row, columnKey) { event.preventDefault(); event.stopPropagation(); const e = new CustomEvent(\"cell-button-click\", { detail: { rowId: row.id, columnKey } }); this.dispatchEvent(e); } _handleCellTagClick(event, row, columnKey, tagId) { event.preventDefault(); event.stopPropagation(); const e = new CustomEvent(\"cell-tag-click\", { detail: { rowId: row.id, columnKey, tagId } }); this.dispatchEvent(e); } _handleCellCheckboxChange(event, row, columnKey) { event.preventDefault(); event.stopPropagation(); const e = new CustomEvent( \"cell-checkbox-change\", { detail: { rowId: row.id, columnKey, status: event.detail.status, disabled: event.detail.disabled } } ); this.dispatchEvent(e); } _getSelectableRowIds() { return this.data.map((row) => row.id); } _getSelectionStatus() { const rowIds = this._getSelectableRowIds(); if (rowIds.length === 0) return CheckboxStatus.unchecked; const selectedCount = rowIds.filter( (id) => this._selectedRowIds.has(id) ).length; if (selectedCount === 0) return CheckboxStatus.unchecked; if (selectedCount === rowIds.length) return CheckboxStatus.checked; return CheckboxStatus.mixed; } _emitSelectionChange(selectedRowIds, source) { const selectedRows = this.data.filter( (row) => selectedRowIds.includes(row.id) ); const e = new CustomEvent( \"selection-change\", { detail: { selectedRowIds, selectedRows, source } } ); this.dispatchEvent(e); } _applySelectionChange(nextSelection, source) { const selectedRowIds = Array.from(nextSelection); this._emitSelectionChange(selectedRowIds, source); if (this.selectedRowIds === void 0) { this._selectedRowIds = nextSelection; this.requestUpdate(); } } _toggleRowSelection(rowId) { const nextSelection = new Set(this._selectedRowIds); if (nextSelection.has(rowId)) { nextSelection.delete(rowId); } else { nextSelection.add(rowId); } this._applySelectionChange(nextSelection, \"row\"); } _toggleAllSelection() { const rowIds = this._getSelectableRowIds(); const status = this._getSelectionStatus(); const nextSelection = status === CheckboxStatus.checked ? /* @__PURE__ */ new Set() : new Set(rowIds); this._applySelectionChange(nextSelection, \"header\"); } _renderCell(value, row, column, expander = nothing) { if (value.type === \"regular\") { return html`<div class=${classMap({ \"grid-cell\": true, regular: true, neutral: value.neutral ?? false, \"large-icon\": value.largeIcon ?? false, \"no-wrap\": value.noWrap ?? false, [`align-${value.align ?? \"left\"}`]: true, \"divider-right\": column.dividerRight ?? false, vertical: value.vertical ?? false })} role=\"cell\" part=${ifDefined(cssPart(value, \"cell\"))} > ${expander}${value.icon3 ? html`<span class=\"icon\" part=${ifDefined(cssPart(value, \"icon3\"))} >${value.icon3}</span >` : nothing} ${value.icon2 ? html`<span class=\"icon\" part=${ifDefined(cssPart(value, \"icon2\"))} >${value.icon2}</span >` : nothing} ${value.icon ? html`<span class=\"icon\" part=${ifDefined(cssPart(value, \"icon\"))} >${value.icon}</span >` : nothing} ${value.title ? html`<span class=\"title\" part=${ifDefined(cssPart(value, \"title\"))} >${value.title}</span >` : nothing} ${value.text ? html`<span part=${ifDefined(cssPart(value, \"text\"))} >${value.text}</span >` : nothing} </div>`; } else if (value.type === \"button\") { return html`<div class=\"grid-cell button ${column.dividerRight ? \"divider-right\" : \"\"}\" role=\"cell\" > ${expander} <obc-button variant=\"normal\" fullWidth .disabled=${value.disabled ?? false} ?showLeadingIcon=${value.icon !== void 0} part=${ifDefined(cssPart(value, \"button\"))} @click=${(event) => this._handleCellButtonClick(event, row, column.key)} > ${value.icon ? html`<span slot=\"leading-icon\" part=${ifDefined(cssPart(value, \"icon\"))} >${value.icon}</span >` : nothing} ${value.text ? html`<span part=${ifDefined(cssPart(value, \"text\"))} >${value.text}</span >` : nothing} </obc-button> </div>`; } else if (value.type === \"checkbox\") { const checkboxLabel = value.label ?? value.text ?? \"\"; const ariaLabel = checkboxLabel.trim() || column.label?.trim() || \"Checkbox\"; return html`<div class=${classMap({ \"grid-cell\": true, checkbox: true, [`align-${value.align ?? \"center\"}`]: true, \"divider-right\": column.dividerRight ?? false })} role=\"cell\" part=${ifDefined(cssPart(value, \"cell\"))} > ${expander} <obc-checkbox .status=${value.status ?? CheckboxStatus.unchecked} .disabled=${value.disabled ?? false} aria-describedby=${ifDefined(value.ariaDescribedBy)} aria-label=${ariaLabel} part=${ifDefined(cssPart(value, \"checkbox\"))} @click=${(event) => { event.preventDefault(); event.stopPropagation(); }} @change=${(event) => this._handleCellCheckboxChange(event, row, column.key)} ></obc-checkbox> </div>`; } else if (value.type === \"tag\") { const tags = value.tags ?? (value.tag ? [value.tag] : void 0) ?? [ { id: value.tagId ?? \"tag\", label: value.label ?? value.text ?? \"Label\", color: value.color, hasIcon: value.hasIcon, icon: value.icon } ]; const wrap = value.wrap ?? value.tags !== void 0; const defaultMaxTags = value.tags ? 2 : void 0; const maxTags = (value.maxTags ?? defaultMaxTags) !== void 0 ? Math.max(0, Math.floor(value.maxTags ?? defaultMaxTags ?? 0)) : void 0; const visibleTags = maxTags !== void 0 ? tags.slice(0, maxTags) : tags; const overflowCount = maxTags !== void 0 ? Math.max(0, tags.length - maxTags) : 0; const overflowLabel = value.overflowLabel ?? `+${overflowCount.toString()}`; return html`<div class=${classMap({ \"grid-cell\": true, tags: tags.length > 1, wrap, [`align-${value.align ?? \"left\"}`]: true, \"divider-right\": column.dividerRight ?? false })} role=\"cell\" part=${ifDefined(cssPart(value, \"cell\"))} > ${expander}${visibleTags.map((tag) => { const hasIcon = tag.hasIcon ?? tag.icon !== void 0; return html`<obc-tag .label=${tag.label} color=${tag.color ?? TagColor.gray} ?hasIcon=${hasIcon} part=${ifDefined( [cssPart(value, \"tag\"), tag.cssPart].filter(Boolean).join(\" \") || void 0 )} @click=${(event) => this._handleCellTagClick(event, row, column.key, tag.id)} > ${hasIcon && tag.icon ? tag.icon : nothing} </obc-tag>`; })} ${overflowCount > 0 ? html`<span class=\"tag-overflow\" part=${ifDefined(cssPart(value, \"tag-overflow\"))} >${overflowLabel}</span >` : nothing} </div>`; } else if (value.type === \"horizontal-bar\") { const hasBar = value.hasBar ?? true; const hasScale = value.hasScale ?? false; const showLabels = !(value.hideLabels ?? true); const fixedAspectRatio = value.fixedAspectRatio ?? true; return html`<div class=${classMap({ \"grid-cell\": true, \"horizontal-bar\": true, [`align-${value.align ?? \"left\"}`]: true, \"divider-right\": column.dividerRight ?? false })} role=\"cell\" part=${ifDefined(cssPart(value, \"cell\"))} > ${expander} <obc-bar-horizontal .minValue=${value.minValue ?? 0} .maxValue=${value.maxValue ?? 100} .value=${value.value} .setpoint=${value.setpoint} .hasBar=${hasBar} .hasScale=${hasScale} .showLabels=${showLabels} .priority=${value.priority ?? Priority.regular} .fillMode=${value.fillMode ?? FillMode.fill} .fillMin=${value.fillMin} .fillMax=${value.fillMax} .barThickness=${value.barThickness ?? 24} .scaleType=${value.scaleType ?? ScaleType.regular} .frameStyle=${value.frameStyle ?? FrameStyle.regular} .side=${value.side ?? ExternalScaleSide.bottom} .state=${value.state ?? InstrumentState.active} .fixedAspectRatio=${fixedAspectRatio} .scaleReferenceSize=${value.scaleReferenceSize ?? 384} part=${ifDefined(cssPart(value, \"bar\"))} ></obc-bar-horizontal> </div>`; } else { return nothing; } } }"
         }
       ],
       "exports": [
@@ -49834,15 +49882,22 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "`<obc-alert-list-details-experimental>` lists alerts in a table with\nconsumer-defined columns, grouping alerts through `memberOf`.\n\n## Features\n- **Columns:** `columns` sets which columns show and in what order. A data\n  column renders each cell from `cell(alert)`; a slot column renders\n  whatever the consumer places in the cell's slot.\n- **Column factories:** `statusColumn()`, `ackColumn()`, `timeColumn()` and\n  `tagIdColumn()` build the standard data columns; each takes overrides\n  such as `label`, `width` or `dividerRight`.\n- **Filter modes:** `filterMode` lists unacknowledged, all, shelved,\n  blocked or rectified alerts, with an empty state per filter mode.\n- **Grouping:** an alert listing group ids in `memberOf` renders under each\n  of those groups; groups nest and can be collapsed.\n- **Selection:** `selectedRowId` highlights one row. When a collapsed group\n  hides it, the nearest visible group row is highlighted instead.\n\n## Usage Guidelines\n- Use a slot column when the cell content must be owned by the consumer,\n  for example a button the application disables or removes later. Slotted\n  content stays in the light DOM, so it can be looked up by id.\n- Slot names are `cell-<key>:<rowId>`. `cellSlots` lists every one, with its\n  alert, row id and column key, and `cell-slots-change` fires when the list\n  changes. The Svelte wrapper renders its `cell` snippet once per entry. An\n  alert in two groups has two rows, so it gets two entries.\n- Without a wrapper, build the names from `getAlertRows(alerts, filterMode)`\n  and `alertListCellSlotName(key, rowId)`, or read `cellSlots`.\n- Clicks on buttons, links and inputs in a cell do not fire `row-click`.\n- The consumer owns the selection: set `selectedRowId` from `row-click`, and\n  set it to `undefined` on a second click to unselect. The list never changes\n  it; clear it when the row is no longer in `getAlertRows(alerts, filterMode)`.\n\n## Example\n```html\n<obc-alert-list-details-experimental>\n  <obc-button slot=\"cell-ack:radar\" id=\"ack-radar\">ACK</obc-button>\n</obc-alert-list-details-experimental>\n```\nwith `columns` set to `[statusColumn(), {key: 'ack', label: 'ACK-status', slot: true}]`.",
           "name": "ObcAlertListDetailsExperimental",
+          "slots": [
+            {
+              "description": "Content of the cell in slot column `<key>` for row `<rowId>`.",
+              "name": "cell-<key>:<rowId>"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "selectedMode",
+              "name": "filterMode",
               "type": {
-                "text": "AlertListMode"
-              }
+                "text": "FilterModes"
+              },
+              "description": "Which alerts to list."
             },
             {
               "kind": "field",
@@ -49850,30 +49905,26 @@
               "type": {
                 "text": "Alert[]"
               },
-              "default": "[]"
+              "default": "[]",
+              "description": "Alerts to list."
             },
             {
               "kind": "field",
-              "name": "showTime",
+              "name": "columns",
               "type": {
-                "text": "boolean"
+                "text": "AlertListColumn[]"
               },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "timeFormatter",
-              "type": {
-                "text": "(time: Date) => string"
-              }
+              "default": "[ statusColumn(), ackColumn({dividerRight: true}), tagIdColumn(), ]",
+              "description": "Columns in display order."
             },
             {
               "kind": "field",
-              "name": "small",
+              "name": "showHeader",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "true",
+              "description": "Whether to show the column header row."
             },
             {
               "kind": "field",
@@ -49884,6 +49935,14 @@
               "default": "true",
               "description": "Whether groups start expanded. Set false to open the list collapsed."
             },
+            {
+              "kind": "field",
+              "name": "selectedRowId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Row id to highlight, as given by `row-click` or `getAlertRows()`. Nothing is highlighted when no row has this id."
+            },
             {
               "kind": "field",
               "name": "alertList",
@@ -49904,6 +49963,55 @@
               "privacy": "private",
               "default": "new Map<string, Alert>()"
             },
+            {
+              "kind": "field",
+              "name": "allRowIds",
+              "privacy": "private",
+              "default": "new Set<string>()"
+            },
+            {
+              "kind": "field",
+              "name": "_cellSlots",
+              "type": {
+                "text": "AlertListCellSlot[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "cellSlotsChanged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "cellSlots",
+              "type": {
+                "text": "AlertListCellSlot[]"
+              },
+              "description": "Slot of every cell in a slot column, rows in collapsed groups included.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "willUpdate",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "PropertyValues<this>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updated"
+            },
             {
               "kind": "method",
               "name": "getVisibleAlerts",
@@ -49966,21 +50074,49 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "compareRows",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "compare",
+                  "type": {
+                    "text": "(a: Alert, b: Alert) => number"
+                  }
+                },
+                {
+                  "name": "aRow",
+                  "type": {
+                    "text": "ObcTableRow"
+                  }
+                },
+                {
+                  "name": "bRow",
+                  "type": {
+                    "text": "ObcTableRow"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
-              "name": "columns",
+              "name": "tableColumns",
+              "type": {
+                "text": "ObcTableColumn[]"
+              },
               "privacy": "private",
               "readonly": true
             },
             {
               "kind": "field",
-              "name": "metadata",
+              "name": "gridColumns",
               "privacy": "private",
               "readonly": true
             },
             {
               "kind": "field",
-              "name": "filteredAlerts",
+              "name": "metadata",
               "privacy": "private",
               "readonly": true
             },
@@ -49994,6 +50130,17 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "highlightedRowId",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | undefined"
+                }
+              },
+              "description": "The selected row, or the nearest visible group row when a collapsed group hides it."
+            },
             {
               "kind": "method",
               "name": "buildRowCells",
@@ -50012,6 +50159,19 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "slotNames",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "rows",
+                  "type": {
+                    "text": "ObcTableRow[]"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "render"
@@ -50025,10 +50185,10 @@
           "events": [
             {
               "type": {
-                "text": "ObcAckClickEvent"
+                "text": "ObcAlertListCellClickEvent"
               },
-              "description": "Fired when the user clicks the \"ACK\" button.",
-              "name": "ack-click"
+              "description": "Fired when the user clicks a button rendered by a data column, such as the one from `ackColumn()`.",
+              "name": "cell-click"
             },
             {
               "type": {
@@ -50036,6 +50196,13 @@
               },
               "description": "Fired when the user clicks a row.",
               "name": "row-click"
+            },
+            {
+              "type": {
+                "text": "ObcAlertListCellSlotsChangeEvent"
+              },
+              "description": "Fired when `cellSlots` changes; the detail is the new list.",
+              "name": "cell-slots-change"
             }
           ],
           "superclass": {
@@ -50048,9 +50215,9 @@
       "exports": [
         {
           "kind": "js",
-          "name": "getAlertListModeData",
+          "name": "getFilterModeData",
           "declaration": {
-            "name": "getAlertListModeData",
+            "name": "getFilterModeData",
             "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
           }
         },
@@ -50062,6 +50229,54 @@
             "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "alertListCellSlotName",
+          "declaration": {
+            "name": "alertListCellSlotName",
+            "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "statusColumn",
+          "declaration": {
+            "name": "statusColumn",
+            "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ackColumn",
+          "declaration": {
+            "name": "ackColumn",
+            "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "timeColumn",
+          "declaration": {
+            "name": "timeColumn",
+            "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "tagIdColumn",
+          "declaration": {
+            "name": "tagIdColumn",
+            "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getAlertRows",
+          "declaration": {
+            "name": "getAlertRows",
+            "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "ObcAlertListDetailsExperimental",
@@ -67458,6 +67673,12 @@
               "name": "_handleRowClick",
               "privacy": "private",
               "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                },
                 {
                   "name": "row",
                   "type": {

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

@@ -14,6 +14,7 @@ const compentStyle = css`* {
 .alert-list {
   min-height: 0;
   flex-grow: 0;
+  --alert-list-grid-columns: 1fr;
 }
 
 .spacer {
@@ -38,13 +39,8 @@ const compentStyle = css`* {
   }
 
 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 {

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

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