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

package/custom-elements.json

@@ -4900,6 +4900,51 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js",
+      "declarations": [
+        {
+          "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> `; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AlertListMode",
+          "declaration": {
+            "name": "AlertListMode",
+            "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ObcAlertListDetailsExperimental",
+          "declaration": {
+            "name": "ObcAlertListDetailsExperimental",
+            "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "canAckFilter",
+          "declaration": {
+            "name": "canAckFilter",
+            "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getAlertListModeData",
+          "declaration": {
+            "name": "getAlertListModeData",
+            "module": "dist/components/alert-list-details-experimental/alert-list-details-experimental.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/components/alert-list-details/alert-list-details.js",
@@ -7706,7 +7751,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 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 sortedData = [...this.data]; sortedData.sort((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 ); } }); 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 } }) ); } _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 (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(); } } _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=\"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\" > ${map(effectiveColumns, (col) => { 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\"></div>`; } if (col.renderCell) { return html`<div class=\"grid-cell ${col.dividerRight ? \"divider-right\" : \"\"}\" role=\"cell\" part=${ifDefined(value.cssPart)} > ${col.renderCell( value, row, row.id )} </div>`; } else { return this._renderCell( value, row, col ); } })} ${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) { 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\"))} > ${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\" > <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\"))} > <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\"))} > ${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\"))} > <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(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; } } }"
         }
       ],
       "exports": [
@@ -48380,6 +48425,250 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ObcAlertListDetailsExperimental",
+          "members": [
+            {
+              "kind": "field",
+              "name": "selectedMode",
+              "type": {
+                "text": "AlertListMode"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "alerts",
+              "type": {
+                "text": "Alert[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "showTime",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "timeFormatter",
+              "type": {
+                "text": "(time: Date) => string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "small",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "defaultExpanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether groups start expanded. Set false to open the list collapsed."
+            },
+            {
+              "kind": "field",
+              "name": "alertList",
+              "type": {
+                "text": "ObcTable"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "expansionOverrides",
+              "privacy": "private",
+              "default": "new Map<string, boolean>()"
+            },
+            {
+              "kind": "field",
+              "name": "alertByRowId",
+              "privacy": "private",
+              "default": "new Map<string, Alert>()"
+            },
+            {
+              "kind": "method",
+              "name": "getVisibleAlerts",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "Alert[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "onRowClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "ObcTableRowClickEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onCellButtonClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "ObcTableCellClickEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onExpandToggle",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "ObcTableExpandToggleEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "isExpanded",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "rowId",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "columns",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "metadata",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "filteredAlerts",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "buildVisibleRows",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ObcTableRow[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "buildRowCells",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Record<string, ObcTableCellData | undefined>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "alert",
+                  "type": {
+                    "text": "Alert"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "ObcAckClickEvent"
+              },
+              "description": "Fired when the user clicks the \"ACK\" button.",
+              "name": "ack-click"
+            },
+            {
+              "type": {
+                "text": "ObcRowClickEvent"
+              },
+              "description": "Fired when the user clicks a row.",
+              "name": "row-click"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getAlertListModeData",
+          "declaration": {
+            "name": "getAlertListModeData",
+            "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "canAckFilter",
+          "declaration": {
+            "name": "canAckFilter",
+            "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ObcAlertListDetailsExperimental",
+          "declaration": {
+            "name": "ObcAlertListDetailsExperimental",
+            "module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/alert-list-details/alert-list-details.ts",
@@ -65601,7 +65890,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-table>` renders tabular data with configurable columns and cell types.\n\nOverview\nUse this component to display structured datasets with optional selection, sorting, and rich cell\nrendering. It accepts `data` and `columns` and renders rows based on column configuration.\n\nFeatures/Variants\n- Selectable rows with header “select all” checkbox via `selectable=true`.\n- Cell rendering variants: `checkbox`, `tag`, `horizontal-bar`, and `button` cell types.\n- Visual variants: `rowDivider`, `striped`, `narrowHeader`, and `showHeader`.\n- Sorting support for sortable columns via column definitions.\n\nUsage Guidelines\n- Controlled selection: pass `selectedRowIds` and update it on `selection-change`.\n- Uncontrolled selection: pass `defaultSelectedRowIds` and listen to `selection-change`.\n- Use `selectAllAriaLabel` to customize the header checkbox accessibility label.\n\nSlots/Content\n- This component does not expose public slots. Provide content via `data` and `columns`.\n\nEvents\n- `row-click` fires when a row is clicked.\n- `cell-button-click` fires when a button cell is clicked.\n- `cell-checkbox-change` fires when a checkbox cell changes.\n- `cell-tag-click` fires when a tag inside a cell is clicked.\n- `selection-change` fires when row selection changes (source: `row` or `header`).\n\nBest Practices\n- Keep column `key` values stable across renders to avoid selection or sorting resets.\n- Prefer `selectedRowIds` for deterministic state in apps with external stores.\n- For dense tables, combine `narrowHeader` and `rowDivider` for visual clarity.\n\nExample (keywords: table, data grid, grid, tabular, datatable)\n```ts\nhtml`<obc-table\n  .data=${rows}\n  .columns=${columns}\n  selectable\n  striped",
+          "description": "`<obc-table>` renders tabular data with configurable columns and cell types.\n\nOverview\nUse this component to display structured datasets with optional selection, sorting, and rich cell\nrendering. It accepts `data` and `columns` and renders rows based on column configuration.\n\nFeatures/Variants\n- Selectable rows with header “select all” checkbox via `selectable=true`.\n- Cell rendering variants: `checkbox`, `tag`, `horizontal-bar`, and `button` cell types.\n- Visual variants: `rowDivider`, `striped`, `narrowHeader`, and `showHeader`.\n- Sorting support for sortable columns via column definitions.\n- Hierarchical rows via `parentId`, `level`, `expandable` and `expanded`.\n\nUsage Guidelines\n- Controlled selection: pass `selectedRowIds` and update it on `selection-change`.\n- Uncontrolled selection: pass `defaultSelectedRowIds` and listen to `selection-change`.\n- Use `selectAllAriaLabel` to customize the header checkbox accessibility label.\n- Hierarchy is controlled, and flat: pass only the rows that are currently\n  visible, each with the `parentId` of its parent row, and drop a collapsed\n  group's descendants from `data` on `expand-toggle`. The table draws the\n  indent and the chevron, keeps each sibling set sorted within its parent,\n  and owns no expansion state of its own.\n\nSlots/Content\n- This component does not expose public slots. Provide content via `data` and `columns`.\n\nEvents\n- `row-click` fires when a row is clicked.\n- `cell-button-click` fires when a button cell is clicked.\n- `cell-checkbox-change` fires when a checkbox cell changes.\n- `cell-tag-click` fires when a tag inside a cell is clicked.\n- `selection-change` fires when row selection changes (source: `row` or `header`).\n- `expand-toggle` fires when a group row's chevron or expand key is used.\n\nAccessibility\nA table with hierarchical rows renders as a\n[treegrid](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/): rows carry\n`aria-level`, and group rows `aria-expanded`. Right expands a collapsed\ngroup, Left collapses an expanded one or moves to the parent row. Cell-level\narrow navigation, which the full pattern also specifies, is out of scope —\narrow keys move between rows, matching the flat table.\n\nBest Practices\n- Keep column `key` values stable across renders to avoid selection or sorting resets.\n- Prefer `selectedRowIds` for deterministic state in apps with external stores.\n- For dense tables, combine `narrowHeader` and `rowDivider` for visual clarity.\n\nExample (keywords: table, data grid, grid, tabular, datatable)\n```ts\nhtml`<obc-table\n  .data=${rows}\n  .columns=${columns}\n  selectable\n  striped",
           "name": "ObcTable",
           "members": [
             {
@@ -65718,6 +66007,31 @@
               "privacy": "private",
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "hasHierarchy",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "sortWithinSiblings",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "rows",
+                  "type": {
+                    "text": "ObcTableRow[]"
+                  }
+                },
+                {
+                  "name": "compare",
+                  "type": {
+                    "text": "(a: ObcTableRow, b: ObcTableRow) => number"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "sortedData",
@@ -65749,6 +66063,38 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_handleExpandToggle",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "ObcTableRow"
+                  }
+                },
+                {
+                  "name": "expanded",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderRowExpander",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "ObcTableRow"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_focusFirstRow",
@@ -65798,6 +66144,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_handleRowExpandKey",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "'ArrowRight' | 'ArrowLeft'"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_getAllPositions",
@@ -66044,6 +66409,13 @@
                   "type": {
                     "text": "ObcTableColumn<ObcTableCellData, ObcTableRow>"
                   }
+                },
+                {
+                  "name": "expander",
+                  "default": "nothing",
+                  "type": {
+                    "text": "HTMLTemplateResult | typeof nothing"
+                  }
                 }
               ]
             },
@@ -66088,6 +66460,13 @@
               },
               "description": "Fired when row selection changes.",
               "name": "selection-change"
+            },
+            {
+              "type": {
+                "text": "ObcTableExpandToggleEvent"
+              },
+              "description": "Fired when a group row is expanded or collapsed.",
+              "name": "expand-toggle"
             }
           ],
           "superclass": {

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

@@ -0,0 +1,94 @@
+import { css } from "lit";
+const compentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  user-select: none;
+}
+
+.alert-list {
+  min-height: 0;
+  flex-grow: 0;
+}
+
+.spacer {
+  flex-grow: 1;
+}
+
+.action {
+  display: flex;
+  height: var(--app-components-tool-bar-touch-target-size);
+  padding: 0px var(--app-components-alert-toolbar-margin-horizontal);
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+  border-top: 1px solid var(--border-divider-color);
+  background: var(--container-section-color);
+  box-shadow: var(--shadow-flat);
+}
+
+.action .btn-group {
+    display: flex;
+  }
+
+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
+    );
+}
+
+.empty-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: var(--app-components-alert-menu-button-spacing);
+}
+
+.empty-list .icon {
+    height: 96px;
+    width: 96px;
+    color: var(--on-flat-neutral-color);
+  }
+
+.empty-list .empty-title {
+    color: var(--element-active-color);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-active-font-weight);
+    font-size: var(--global-typography-ui-body-active-font-size);
+    line-height: var(--global-typography-ui-body-active-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  }
+
+.empty-list .empty-description {
+    color: var(--element-neutral-color);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
+    font-size: var(--global-typography-ui-body-font-size);
+    line-height: var(--global-typography-ui-body-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    max-width: 344px;
+    text-align: center;
+  }
+`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=alert-list-details-experimental.css.js.map

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

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