@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.148 → 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",
@@ -6192,7 +6237,7 @@
         {
           "kind": "variable",
           "name": "ObcIconButton",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.variant = \"normal\"; this.activated = false; this.cornerLeft = false; this.cornerRight = false; this.activeColor = false; this.wide = false; this.disabled = false; this.progress = void 0; this.hasLabel = false; this.showDivider = true; } get progressSpinner() { if (this.progress === void 0) { return nothing; } if (this.progress === 100) { return html`<div class=\"progress-spinner\"> <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" > <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"#325B9A\" stroke-width=\"4\" fill=\"none\" /> </svg> </div>`; } const angleRad = degToRad(this.progress * 0.95 * 3.6); const x = 20 + 18 * Math.sin(angleRad); const y = 20 - 18 * Math.cos(angleRad); const largeArcFlag = angleRad > Math.PI ? 1 : 0; return html`<div class=\"progress-spinner\"> <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" > <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"var(--container-backdrop-color)\" stroke-width=\"4\" fill=\"none\" /> <path d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\" stroke=\"var(--instrument-enhanced-secondary-color)\" stroke-width=\"4\" stroke-linecap=\"round\" /> </svg> </div>`; } render() { return html` <button class=${classMap({ wrapper: true, [\"variant-\" + this.variant]: true, activated: this.activated, \"corner-left\": this.cornerLeft, \"corner-right\": this.cornerRight, \"active-color\": this.activeColor, \"has-label\": this.hasLabel, wide: this.wide, progress: this.progress !== void 0, \"hide-divider\": !this.showDivider })} ?disabled=${this.disabled} part=\"wrapper\" > ${this.progress !== void 0 ? this.progressSpinner : nothing} <div class=\"visible-wrapper\" part=\"visible-wrapper\"> <div class=\"icon\" part=\"icon\"> <slot></slot> </div> </div> ${this.hasLabel ? html`<div class=\"label\" part=\"label\"> <slot name=\"label\"></slot> </div>` : nothing} </button> `; } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.variant = \"normal\"; this.activated = false; this.cornerLeft = false; this.cornerRight = false; this.activeColor = false; this.wide = false; this.disabled = false; this.progress = void 0; this.hasLabel = false; this.showDivider = true; this.ariaLabel = null; } get progressSpinner() { if (this.progress === void 0) { return nothing; } if (this.progress === 100) { return html`<div class=\"progress-spinner\"> <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" > <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"#325B9A\" stroke-width=\"4\" fill=\"none\" /> </svg> </div>`; } const angleRad = degToRad(this.progress * 0.95 * 3.6); const x = 20 + 18 * Math.sin(angleRad); const y = 20 - 18 * Math.cos(angleRad); const largeArcFlag = angleRad > Math.PI ? 1 : 0; return html`<div class=\"progress-spinner\"> <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" > <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"var(--container-backdrop-color)\" stroke-width=\"4\" fill=\"none\" /> <path d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\" stroke=\"var(--instrument-enhanced-secondary-color)\" stroke-width=\"4\" stroke-linecap=\"round\" /> </svg> </div>`; } render() { return html` <button class=${classMap({ wrapper: true, [\"variant-\" + this.variant]: true, activated: this.activated, \"corner-left\": this.cornerLeft, \"corner-right\": this.cornerRight, \"active-color\": this.activeColor, \"has-label\": this.hasLabel, wide: this.wide, progress: this.progress !== void 0, \"hide-divider\": !this.showDivider })} ?disabled=${this.disabled} aria-label=${ifDefined(this.ariaLabel ?? void 0)} part=\"wrapper\" > ${this.progress !== void 0 ? this.progressSpinner : nothing} <div class=\"visible-wrapper\" part=\"visible-wrapper\"> <div class=\"icon\" part=\"icon\"> <slot></slot> </div> </div> ${this.hasLabel ? html`<div class=\"label\" part=\"label\"> <slot name=\"label\"></slot> </div>` : nothing} </button> `; } }"
         }
       ],
       "exports": [
@@ -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": [
@@ -8220,7 +8265,7 @@
         {
           "kind": "variable",
           "name": "ObcTopBar",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.appTitle = \"App\"; this.pageName = \"Page\"; this.menuButtonIcon = \"menu\"; this.menuButtonActivated = false; this.dimmingButtonActivated = false; this.appsButtonActivated = false; this.leftMoreButtonActivated = false; this.userButtonActivated = false; this.userButtonDisabled = false; this.tall = false; this.wideMenuButton = false; this.showAppsButton = false; this.showDimmingButton = false; this.showUserButton = false; this.showClock = false; this.showDate = false; this.showAppIcon = false; this.inactive = false; this.appButtonBreakpointPx = 500; this.dimmingButtonBreakpointPx = 500; this.appTitleBreakpointPx = 500; this.userButtonBreakpointPx = 500; this.appIconBreakpointPx = 500; this.settings = false; this.breadcrumbItems = []; this.leftButtonEvent = null; this.leftButtonTimeout = null; this.isLeftButtonDown = false; this.isEmergencyBrightness = false; } dimmingButtonClicked() { this.dispatchEvent(new CustomEvent(\"dimming-button-clicked\")); } appsButtonClicked() { this.dispatchEvent(new CustomEvent(\"apps-button-clicked\")); } leftMoreButtonClicked() { this.dispatchEvent(new CustomEvent(\"left-more-button-clicked\")); } userButtonClicked() { this.dispatchEvent(new CustomEvent(\"user-button-clicked\")); } leftButtonDown(event) { this.leftButtonEvent = event; this.isLeftButtonDown = true; this.leftButtonTimeout = setTimeout(() => { this.leftButtonEvent = null; this.dispatchEvent(new CustomEvent(\"emergency-brightness-start\")); this.isEmergencyBrightness = true; }, 500); } leftButtonUp() { if (this.leftButtonEvent) { this.dispatchEvent(this.leftButtonEvent); this.leftButtonEvent = null; } if (this.leftButtonTimeout) { clearTimeout(this.leftButtonTimeout); this.leftButtonTimeout = null; } if (this.isEmergencyBrightness) { this.dispatchEvent(new CustomEvent(\"emergency-brightness-stop\")); this.isEmergencyBrightness = false; } this.isLeftButtonDown = false; } leftButtonLeave() { if (!this.isLeftButtonDown) return; if (this.leftButtonTimeout) { clearInterval(this.leftButtonTimeout); this.leftButtonTimeout = null; } if (this.isEmergencyBrightness) { this.dispatchEvent(new CustomEvent(\"emergency-brightness-stop\")); this.isEmergencyBrightness = false; } this.isLeftButtonDown = false; } render() { const leftGroup = []; if (this.settings) { leftGroup.push( html`<div class=\"menu-button\"> <obc-icon-button variant=\"flat\" @pointerdown=${() => this.leftButtonDown(new CustomEvent(\"close\"))} @pointerup=${() => this.leftButtonUp()} @pointerleave=${() => this.leftButtonLeave()} > <obi-close-google></obi-close-google> </obc-icon-button> </div>` ); leftGroup.push( html`<obc-icon-button variant=\"flat\" @click=${() => this.dispatchEvent(new CustomEvent(\"back\"))} > <obi-arrow-left-google></obi-arrow-left-google> </obc-icon-button>` ); leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`); leftGroup.push( html`<obc-breadcrumb .items=${this.breadcrumbItems} @breadcrumb-click=${(e) => this.dispatchEvent( new CustomEvent(\"breadcrumb-click\", { detail: e.detail }) )} ></obc-breadcrumb>` ); } else { if (!this.inactive) { leftGroup.push( html`<div class=\"menu-button ${this.wideMenuButton ? \"wide\" : null}\"> <obc-icon-button variant=\"flat\" @pointerdown=${() => this.leftButtonDown(new CustomEvent(\"menu-button-clicked\"))} @pointerup=${() => this.leftButtonUp()} @pointerleave=${() => this.leftButtonLeave()} ?activated=${this.menuButtonActivated} > ${this.menuButtonIcon === \"menu\" ? html`<obi-menu-iec></obi-menu-iec>` : html`<obi-home></obi-home>`} </obc-icon-button> </div>` ); } if (this.showAppIcon) { leftGroup.push( html`<div class=\"app-icon\"><slot name=\"app-icon\"></slot></div>` ); } leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`); leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`); leftGroup.push(html`<slot name=\"command-button\"></slot>`); } const breakpointMoreButton = Math.max( this.appButtonBreakpointPx, this.dimmingButtonBreakpointPx ); return html` <style> @media (max-width: ${breakpointMoreButton}px) { .left-more-button { display: revert !important; } .group.left > * { margin-right: 4px; margin-left: 4px; } } @media (max-width: ${this.appButtonBreakpointPx}px) { .apps-button { display: none; } } @media (max-width: ${this.dimmingButtonBreakpointPx}px) { .dimming-button { display: none; } } @media (max-width: ${this.appTitleBreakpointPx}px) { .title { display: none !important; /* the stylesheet's display wins over this inline rule otherwise */ } } @media (max-width: ${this.userButtonBreakpointPx}px) { .user-button { display: none; } } @media (max-width: ${this.appIconBreakpointPx}px) { .app-icon { display: none; } } </style> <nav class=${classMap({ wrapper: true, inactive: this.inactive, settings: this.settings, tall: this.tall })} role=\"menubar\" > <div class=\"left group\">${leftGroup}</div> <div class=\"right group\"> <div class=\"alert-container\"> <slot name=\"alerts\"></slot> </div> ${this.showDimmingButton && !this.inactive ? html`<obc-icon-button class=\"dimming-button\" part=\"dimming-button\" variant=\"flat\" @click=${this.dimmingButtonClicked} ?activated=${this.dimmingButtonActivated} > <obi-palette-day-night-iec></obi-palette-day-night-iec> </obc-icon-button>` : null} ${this.showUserButton && !this.inactive ? html`<obc-icon-button class=\"user-button\" variant=\"flat\" part=\"user-button\" @click=${this.userButtonClicked} ?activated=${this.userButtonActivated} ?disabled=${this.userButtonDisabled} > <obi-user></obi-user> </obc-icon-button>` : null} ${this.showAppsButton && !this.inactive ? html`<obc-icon-button class=\"apps-button\" variant=\"flat\" part=\"apps-button\" @click=${this.appsButtonClicked} ?activated=${this.appsButtonActivated} > <obi-applications></obi-applications> </obc-icon-button>` : null} ${this.showClock ? html`<slot name=\"clock\"></slot>` : null} ${!this.inactive ? html`<obc-icon-button class=\"left-more-button\" part=\"left-more-button\" variant=\"flat\" @click=${this.leftMoreButtonClicked} ?activated=${this.leftMoreButtonActivated} > <obi-more-vertical-google></obi-more-vertical-google> </obc-icon-button>` : null} </div> </nav> `; } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.appTitle = \"App\"; this.pageName = \"Page\"; this.menuButtonIcon = \"menu\"; this.menuButtonActivated = false; this.dimmingButtonActivated = false; this.appsButtonActivated = false; this.leftMoreButtonActivated = false; this.userButtonActivated = false; this.userButtonDisabled = false; this.tall = false; this.wideMenuButton = false; this.showAppsButton = false; this.showDimmingButton = false; this.showUserButton = false; this.showClock = false; this.showDate = false; this.showAppIcon = false; this.inactive = false; this.appButtonBreakpointPx = 500; this.dimmingButtonBreakpointPx = 500; this.appTitleBreakpointPx = 500; this.userButtonBreakpointPx = 500; this.appIconBreakpointPx = 500; this.settings = false; this.breadcrumbItems = []; this.leftButtonEvent = null; this.leftButtonTimeout = null; this.isLeftButtonDown = false; this.isEmergencyBrightness = false; } dimmingButtonClicked() { this.dispatchEvent(new CustomEvent(\"dimming-button-clicked\")); } appsButtonClicked() { this.dispatchEvent(new CustomEvent(\"apps-button-clicked\")); } leftMoreButtonClicked() { this.dispatchEvent(new CustomEvent(\"left-more-button-clicked\")); } userButtonClicked() { this.dispatchEvent(new CustomEvent(\"user-button-clicked\")); } leftButtonDown(event) { this.leftButtonEvent = event; this.isLeftButtonDown = true; this.leftButtonTimeout = setTimeout(() => { this.leftButtonEvent = null; this.dispatchEvent(new CustomEvent(\"emergency-brightness-start\")); this.isEmergencyBrightness = true; }, 500); } leftButtonUp() { if (this.leftButtonEvent) { this.dispatchEvent(this.leftButtonEvent); this.leftButtonEvent = null; } if (this.leftButtonTimeout) { clearTimeout(this.leftButtonTimeout); this.leftButtonTimeout = null; } if (this.isEmergencyBrightness) { this.dispatchEvent(new CustomEvent(\"emergency-brightness-stop\")); this.isEmergencyBrightness = false; } this.isLeftButtonDown = false; } leftButtonLeave() { if (!this.isLeftButtonDown) return; if (this.leftButtonTimeout) { clearInterval(this.leftButtonTimeout); this.leftButtonTimeout = null; } if (this.isEmergencyBrightness) { this.dispatchEvent(new CustomEvent(\"emergency-brightness-stop\")); this.isEmergencyBrightness = false; } this.isLeftButtonDown = false; } render() { const leftGroup = []; if (this.settings) { leftGroup.push( html`<div class=\"menu-button\"> <obc-icon-button variant=\"flat\" aria-label=${msg(\"Close\")} @pointerdown=${() => this.leftButtonDown(new CustomEvent(\"close\"))} @pointerup=${() => this.leftButtonUp()} @pointerleave=${() => this.leftButtonLeave()} > <obi-close-google></obi-close-google> </obc-icon-button> </div>` ); leftGroup.push( html`<obc-icon-button variant=\"flat\" aria-label=${msg(\"Back\")} @click=${() => this.dispatchEvent(new CustomEvent(\"back\"))} > <obi-arrow-left-google></obi-arrow-left-google> </obc-icon-button>` ); leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`); leftGroup.push( html`<obc-breadcrumb .items=${this.breadcrumbItems} @breadcrumb-click=${(e) => this.dispatchEvent( new CustomEvent(\"breadcrumb-click\", { detail: e.detail }) )} ></obc-breadcrumb>` ); } else { if (!this.inactive) { leftGroup.push( html`<div class=\"menu-button ${this.wideMenuButton ? \"wide\" : null}\"> <obc-icon-button variant=\"flat\" aria-label=${this.menuButtonIcon === \"menu\" ? msg(\"Menu\") : msg(\"Home\")} @pointerdown=${() => this.leftButtonDown(new CustomEvent(\"menu-button-clicked\"))} @pointerup=${() => this.leftButtonUp()} @pointerleave=${() => this.leftButtonLeave()} ?activated=${this.menuButtonActivated} > ${this.menuButtonIcon === \"menu\" ? html`<obi-menu-iec></obi-menu-iec>` : html`<obi-home></obi-home>`} </obc-icon-button> </div>` ); } if (this.showAppIcon) { leftGroup.push( html`<div class=\"app-icon\"><slot name=\"app-icon\"></slot></div>` ); } leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`); leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`); leftGroup.push(html`<slot name=\"command-button\"></slot>`); } const breakpointMoreButton = Math.max( this.appButtonBreakpointPx, this.dimmingButtonBreakpointPx ); return html` <style> @media (max-width: ${breakpointMoreButton}px) { .left-more-button { display: revert !important; } .group.left > * { margin-right: 4px; margin-left: 4px; } } @media (max-width: ${this.appButtonBreakpointPx}px) { .apps-button { display: none; } } @media (max-width: ${this.dimmingButtonBreakpointPx}px) { .dimming-button { display: none; } } @media (max-width: ${this.appTitleBreakpointPx}px) { .title { display: none !important; /* the stylesheet's display wins over this inline rule otherwise */ } } @media (max-width: ${this.userButtonBreakpointPx}px) { .user-button { display: none; } } @media (max-width: ${this.appIconBreakpointPx}px) { .app-icon { display: none; } } </style> <nav class=${classMap({ wrapper: true, inactive: this.inactive, settings: this.settings, tall: this.tall })} role=\"menubar\" > <div class=\"left group\">${leftGroup}</div> <div class=\"right group\"> <div class=\"alert-container\"> <slot name=\"alerts\"></slot> </div> ${this.showDimmingButton && !this.inactive ? html`<obc-icon-button class=\"dimming-button\" part=\"dimming-button\" variant=\"flat\" aria-label=${msg(\"Dimming\")} @click=${this.dimmingButtonClicked} ?activated=${this.dimmingButtonActivated} > <obi-palette-day-night-iec></obi-palette-day-night-iec> </obc-icon-button>` : null} ${this.showUserButton && !this.inactive ? html`<obc-icon-button class=\"user-button\" variant=\"flat\" part=\"user-button\" aria-label=${msg(\"User\")} @click=${this.userButtonClicked} ?activated=${this.userButtonActivated} ?disabled=${this.userButtonDisabled} > <obi-user></obi-user> </obc-icon-button>` : null} ${this.showAppsButton && !this.inactive ? html`<obc-icon-button class=\"apps-button\" variant=\"flat\" part=\"apps-button\" aria-label=${msg(\"Apps\")} @click=${this.appsButtonClicked} ?activated=${this.appsButtonActivated} > <obi-applications></obi-applications> </obc-icon-button>` : null} ${this.showClock ? html`<slot name=\"clock\"></slot>` : null} ${!this.inactive ? html`<obc-icon-button class=\"left-more-button\" part=\"left-more-button\" variant=\"flat\" aria-label=${msg(\"More\")} @click=${this.leftMoreButtonClicked} ?activated=${this.leftMoreButtonActivated} > <obi-more-vertical-google></obi-more-vertical-google> </obc-icon-button>` : null} </div> </nav> `; } }"
         }
       ],
       "exports": [
@@ -8505,7 +8550,7 @@
         {
           "kind": "variable",
           "name": "ObcIntegrationBarDropdown",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.showHomeButton = false; this.homeButtonActivated = false; this.showClock = false; this.showNotificationButton = false; this.notificationButtonActivated = false; this.notificationCount = 0; this.showNotificationCount = false; this.showUserButton = false; this.userButtonActivated = false; this.showDimmingButton = false; this.dimmingButtonActivated = false; this.showSystemButton = false; this.systemButtonActivated = false; this.nStatusFields = 0; } renderStatusFields() { if (this.nStatusFields <= 0) { return nothing; } const result = []; for (let i = 0; i < this.nStatusFields; i++) { if (i > 0) { result.push(html`<div class=\"divider\"></div>`); } result.push(html` <div class=\"status-item\"> <slot class=\"status-icon\" name=\"status-icon-${i + 1}\"></slot> <slot class=\"status-label\" name=\"status-label-${i + 1}\"></slot> </div> `); } return html`<div class=\"status\">${result}</div>`; } render() { return html` <div class=\"wrapper\"> <div class=\"left-side\"> ${this.showHomeButton ? html`<obc-icon-button class=\"home-button\" part=\"home-button\" variant=\"integration\" @click=${() => this.dispatchEvent(new CustomEvent(\"home-button-clicked\"))} ?activated=${this.homeButtonActivated} > <obi-home></obi-home> </obc-icon-button>` : null} <slot name=\"vessel-selector\"></slot> ${this.renderStatusFields()} </div> <div class=\"right-side\"> ${this.showNotificationButton ? html`<obc-notification-button @click=${() => this.dispatchEvent( new CustomEvent(\"notification-button-clicked\") )} .buttonStyle=${NotificationButtonStyle.Enhanced} .showCount=${this.showNotificationCount} .count=${this.notificationCount} ?isActive=${this.notificationButtonActivated} ></obc-notification-button>` : nothing} ${this.showSystemButton ? html`<obc-icon-button class=\"system-button\" part=\"system-button\" variant=\"integration\" @click=${() => this.dispatchEvent(new CustomEvent(\"system-button-clicked\"))} ?activated=${this.systemButtonActivated} > <obi-configure></obi-configure> </obc-icon-button>` : null} ${this.showDimmingButton ? html`<obc-icon-button class=\"dimming-button\" part=\"dimming-button\" variant=\"integration\" @click=${() => this.dispatchEvent(new CustomEvent(\"dimming-button-clicked\"))} ?activated=${this.dimmingButtonActivated} > <obi-palette-day-night-iec></obi-palette-day-night-iec> </obc-icon-button>` : null} ${this.showUserButton ? html`<obc-icon-button class=\"user-button\" part=\"user-button\" variant=\"integration\" @click=${() => this.dispatchEvent(new CustomEvent(\"user-button-clicked\"))} ?activated=${this.userButtonActivated} > <obi-user></obi-user> </obc-icon-button>` : null} ${this.showClock ? html`<slot name=\"clock\"></slot>` : null} </div> </div> `; } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.showHomeButton = false; this.homeButtonActivated = false; this.showLinkButton = false; this.linkButtonActivated = false; this.showClock = false; this.showAlertButton = false; this.alertButtonActivated = false; this.showNotificationButton = false; this.notificationButtonActivated = false; this.notificationCount = 0; this.showNotificationCount = false; this.showScreenButton = false; this.screenButtonActivated = false; this.showUserButton = false; this.userButtonActivated = false; this.showDimmingButton = false; this.dimmingButtonActivated = false; this.showSystemButton = false; this.systemButtonActivated = false; this.nStatusFields = 0; } renderStatusFields() { if (this.nStatusFields <= 0) { return nothing; } const result = []; for (let i = 0; i < this.nStatusFields; i++) { if (i > 0) { result.push(html`<div class=\"divider\"></div>`); } result.push(html` <div class=\"status-item\"> <slot class=\"status-icon\" name=\"status-icon-${i + 1}\"></slot> <slot class=\"status-label\" name=\"status-label-${i + 1}\"></slot> </div> `); } return html`<div class=\"status\">${result}</div>`; } // The event name stays a literal at each call site so `cem analyze` can read it. renderIconButton(name, activated, label, icon, onClick) { return html`<obc-icon-button class=\"${name}-button\" part=\"${name}-button\" variant=\"integration\" aria-label=${label} @click=${onClick} ?activated=${activated} > ${icon} </obc-icon-button>`; } render() { return html` <div class=\"wrapper\"> <div class=\"left-side\"> ${this.showHomeButton ? this.renderIconButton( \"home\", this.homeButtonActivated, msg(\"Home\"), html`<obi-home></obi-home>`, () => this.dispatchEvent(new CustomEvent(\"home-button-clicked\")) ) : nothing} ${this.showLinkButton ? this.renderIconButton( \"link\", this.linkButtonActivated, msg(\"Link\"), html`<obi-link></obi-link>`, () => this.dispatchEvent(new CustomEvent(\"link-button-clicked\")) ) : nothing} <slot name=\"vessel-selector\"></slot> ${this.renderStatusFields()} </div> <div class=\"right-side\"> ${this.showAlertButton ? this.renderIconButton( \"alert\", this.alertButtonActivated, msg(\"Alerts\"), html`<obi-alerts></obi-alerts>`, () => this.dispatchEvent(new CustomEvent(\"alert-button-clicked\")) ) : nothing} ${this.showNotificationButton ? ( // TODO(designer): keep the Enhanced badge button here, or match the // sibling bar's plain notification icon button? (#624) html`<obc-notification-button @click=${() => this.dispatchEvent( new CustomEvent(\"notification-button-clicked\") )} .buttonStyle=${NotificationButtonStyle.Enhanced} .showCount=${this.showNotificationCount} .count=${this.notificationCount} ?isActive=${this.notificationButtonActivated} ></obc-notification-button>` ) : nothing} ${this.showScreenButton ? this.renderIconButton( \"screen\", this.screenButtonActivated, msg(\"Screen\"), html`<obi-screen-desk></obi-screen-desk>`, () => this.dispatchEvent(new CustomEvent(\"screen-button-clicked\")) ) : nothing} ${this.showSystemButton ? this.renderIconButton( \"system\", this.systemButtonActivated, msg(\"System\"), html`<obi-configure></obi-configure>`, () => this.dispatchEvent(new CustomEvent(\"system-button-clicked\")) ) : nothing} ${this.showDimmingButton ? this.renderIconButton( \"dimming\", this.dimmingButtonActivated, msg(\"Dimming\"), html`<obi-palette-day-night-iec></obi-palette-day-night-iec>`, () => this.dispatchEvent(new CustomEvent(\"dimming-button-clicked\")) ) : nothing} ${this.showUserButton ? this.renderIconButton( \"user\", this.userButtonActivated, msg(\"User\"), html`<obi-user></obi-user>`, () => this.dispatchEvent(new CustomEvent(\"user-button-clicked\")) ) : nothing} ${this.showClock ? html`<slot name=\"clock\"></slot>` : nothing} </div> </div> `; } }"
         }
       ],
       "exports": [
@@ -8526,7 +8571,7 @@
         {
           "kind": "variable",
           "name": "ObcIntegrationBar",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.hideHomeButton = false; this.showClock = false; this.showLinkButton = false; this.linkButtonActivated = false; this.showUserButton = false; this.userButtonActivated = false; this.showDimmingButton = false; this.dimmingButtonActivated = false; this.showSystemButton = false; this.systemButtonActivated = false; this.showScreenButton = false; this.screenButtonActivated = false; this.showNotificationButton = false; this.notificationButtonActivated = false; this.showAlertButton = false; this.alertButtonActivated = false; this.showFleetButton = false; this.fleetButtonSelected = false; this.fleetButtonActivated = false; this.fleetButtonLabel = \"Fleet\"; this.buttonsOnBar = false; } onFleetButtonClick() { this.dispatchEvent(new CustomEvent(\"fleet-button-click\")); } onHugButtonsSlotChange(event) { const slot = event.currentTarget; const assignedElements = slot.assignedElements({ flatten: true }); assignedElements.forEach((element) => { if (element.tagName === \"OBC-INTEGRATION-BUTTON\") { const integrationButton = element; integrationButton.type = IntegrationButtonType.hug; } }); this.buttonsOnBar = true; } onButtonsSlotChange() { this.buttonsOnBar = true; } render() { const isFleetButtonAnchored = this.fleetButtonActivated; return html` <nav class=\"wrapper\"> <div class=\"content-container\"> ${!this.hideHomeButton ? html`<obc-icon-button class=\"home-button\" variant=\"integration\"> <obi-home></obi-home> </obc-icon-button>` : null} ${this.showLinkButton ? html`<obc-icon-button class=${classMap({ \"link-button\": true, activated: this.linkButtonActivated })} part=\"link-button\" variant=\"integration\" @click=${() => this.dispatchEvent(new CustomEvent(\"link-button-clicked\"))} ?activated=${this.linkButtonActivated} > <obi-link></obi-link> </obc-icon-button>` : null} <div class=${classMap({ \"fleet-vessel-container\": true })}> ${this.showFleetButton ? html`<obc-integration-button class=\"fleet-button\" .variant=${IntegrationButtonVariant.normal} ?selected=${this.fleetButtonSelected} ?activated=${this.fleetButtonActivated} style=${isFleetButtonAnchored ? \"anchor-name: --integration-menu-anchor;\" : \"\"} @click=${() => this.onFleetButtonClick()} > <span slot=\"label\">${this.fleetButtonLabel}</span> </obc-integration-button>` : nothing} <div class=\"vessel-container\"> ${this.buttonsOnBar ? nothing : html`<div class=\"vessel-button-placeholder\"></div>`} <slot class=\"hug-buttons-slot\" name=\"hug-buttons\" @slotchange=${this.onHugButtonsSlotChange} ></slot> <slot class=\"integration-buttons-slot\" name=\"integration-buttons\" @slotchange=${this.onButtonsSlotChange} ></slot> </div> </div> </div> <div class=${classMap({ \"buttons-on-bar\": this.buttonsOnBar, \"right-content-container\": true })} > ${this.showAlertButton ? html`<obc-icon-button class=${classMap({ \"alert-button\": true, activated: this.alertButtonActivated })} part=\"alert-button\" variant=\"integration\" style=${this.alertButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"alert-button-clicked\"))} ?activated=${this.alertButtonActivated} > <obi-alerts></obi-alerts> </obc-icon-button>` : null} ${this.showNotificationButton ? html`<obc-icon-button class=${classMap({ \"notification-button\": true, activated: this.notificationButtonActivated })} part=\"notification-button\" variant=\"integration\" style=${this.notificationButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent( new CustomEvent(\"notification-button-clicked\") )} ?activated=${this.notificationButtonActivated} > <obi-notification></obi-notification> </obc-icon-button>` : null} ${this.showScreenButton ? html`<obc-icon-button class=${classMap({ \"screen-button\": true, activated: this.screenButtonActivated })} part=\"screen-button\" variant=\"integration\" style=${this.screenButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"screen-button-clicked\"))} ?activated=${this.screenButtonActivated} > <obi-screen-desk></obi-screen-desk> </obc-icon-button>` : null} ${this.showSystemButton ? html`<obc-icon-button class=${classMap({ \"system-button\": true, activated: this.systemButtonActivated })} part=\"system-button\" variant=\"integration\" style=${this.systemButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"system-button-clicked\"))} ?activated=${this.systemButtonActivated} > <obi-configure></obi-configure> </obc-icon-button>` : null} ${this.showDimmingButton ? html`<obc-icon-button class=${classMap({ \"dimming-button\": true, activated: this.dimmingButtonActivated })} part=\"dimming-button\" variant=\"integration\" style=${this.dimmingButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"dimming-button-clicked\"))} ?activated=${this.dimmingButtonActivated} > <obi-palette-day-night-iec></obi-palette-day-night-iec> </obc-icon-button>` : null} ${this.showUserButton ? html`<obc-icon-button class=${classMap({ \"user-button\": true, activated: this.userButtonActivated })} part=\"user-button\" variant=\"integration\" style=${this.userButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"user-button-clicked\"))} ?activated=${this.userButtonActivated} > <obi-user></obi-user> </obc-icon-button>` : null} ${this.showClock ? html`<slot name=\"clock\"></slot>` : null} </div> </nav> `; } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.hideHomeButton = false; this.showClock = false; this.showLinkButton = false; this.linkButtonActivated = false; this.showUserButton = false; this.userButtonActivated = false; this.showDimmingButton = false; this.dimmingButtonActivated = false; this.showSystemButton = false; this.systemButtonActivated = false; this.showScreenButton = false; this.screenButtonActivated = false; this.showNotificationButton = false; this.notificationButtonActivated = false; this.showAlertButton = false; this.alertButtonActivated = false; this.showFleetButton = false; this.fleetButtonSelected = false; this.fleetButtonActivated = false; this.fleetButtonLabel = \"Fleet\"; this.buttonsOnBar = false; } onFleetButtonClick() { this.dispatchEvent(new CustomEvent(\"fleet-button-click\")); } onHugButtonsSlotChange(event) { const slot = event.currentTarget; const assignedElements = slot.assignedElements({ flatten: true }); assignedElements.forEach((element) => { if (element.tagName === \"OBC-INTEGRATION-BUTTON\") { const integrationButton = element; integrationButton.type = IntegrationButtonType.hug; } }); this.buttonsOnBar = true; } onButtonsSlotChange() { this.buttonsOnBar = true; } render() { const isFleetButtonAnchored = this.fleetButtonActivated; return html` <nav class=\"wrapper\"> <div class=\"content-container\"> ${!this.hideHomeButton ? html`<obc-icon-button class=\"home-button\" variant=\"integration\" aria-label=${msg(\"Home\")} > <obi-home></obi-home> </obc-icon-button>` : null} ${this.showLinkButton ? html`<obc-icon-button class=${classMap({ \"link-button\": true, activated: this.linkButtonActivated })} part=\"link-button\" variant=\"integration\" aria-label=${msg(\"Link\")} @click=${() => this.dispatchEvent(new CustomEvent(\"link-button-clicked\"))} ?activated=${this.linkButtonActivated} > <obi-link></obi-link> </obc-icon-button>` : null} <div class=${classMap({ \"fleet-vessel-container\": true })}> ${this.showFleetButton ? html`<obc-integration-button class=\"fleet-button\" .variant=${IntegrationButtonVariant.normal} ?selected=${this.fleetButtonSelected} ?activated=${this.fleetButtonActivated} style=${isFleetButtonAnchored ? \"anchor-name: --integration-menu-anchor;\" : \"\"} @click=${() => this.onFleetButtonClick()} > <span slot=\"label\">${this.fleetButtonLabel}</span> </obc-integration-button>` : nothing} <div class=\"vessel-container\"> ${this.buttonsOnBar ? nothing : html`<div class=\"vessel-button-placeholder\"></div>`} <slot class=\"hug-buttons-slot\" name=\"hug-buttons\" @slotchange=${this.onHugButtonsSlotChange} ></slot> <slot class=\"integration-buttons-slot\" name=\"integration-buttons\" @slotchange=${this.onButtonsSlotChange} ></slot> </div> </div> </div> <div class=${classMap({ \"buttons-on-bar\": this.buttonsOnBar, \"right-content-container\": true })} > ${this.showAlertButton ? html`<obc-icon-button class=${classMap({ \"alert-button\": true, activated: this.alertButtonActivated })} part=\"alert-button\" variant=\"integration\" aria-label=${msg(\"Alerts\")} style=${this.alertButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"alert-button-clicked\"))} ?activated=${this.alertButtonActivated} > <obi-alerts></obi-alerts> </obc-icon-button>` : null} ${this.showNotificationButton ? html`<obc-icon-button class=${classMap({ \"notification-button\": true, activated: this.notificationButtonActivated })} part=\"notification-button\" variant=\"integration\" aria-label=${msg(\"Notifications\")} style=${this.notificationButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent( new CustomEvent(\"notification-button-clicked\") )} ?activated=${this.notificationButtonActivated} > <obi-notification></obi-notification> </obc-icon-button>` : null} ${this.showScreenButton ? html`<obc-icon-button class=${classMap({ \"screen-button\": true, activated: this.screenButtonActivated })} part=\"screen-button\" variant=\"integration\" aria-label=${msg(\"Screen\")} style=${this.screenButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"screen-button-clicked\"))} ?activated=${this.screenButtonActivated} > <obi-screen-desk></obi-screen-desk> </obc-icon-button>` : null} ${this.showSystemButton ? html`<obc-icon-button class=${classMap({ \"system-button\": true, activated: this.systemButtonActivated })} part=\"system-button\" variant=\"integration\" aria-label=${msg(\"System\")} style=${this.systemButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"system-button-clicked\"))} ?activated=${this.systemButtonActivated} > <obi-configure></obi-configure> </obc-icon-button>` : null} ${this.showDimmingButton ? html`<obc-icon-button class=${classMap({ \"dimming-button\": true, activated: this.dimmingButtonActivated })} part=\"dimming-button\" variant=\"integration\" aria-label=${msg(\"Dimming\")} style=${this.dimmingButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"dimming-button-clicked\"))} ?activated=${this.dimmingButtonActivated} > <obi-palette-day-night-iec></obi-palette-day-night-iec> </obc-icon-button>` : null} ${this.showUserButton ? html`<obc-icon-button class=${classMap({ \"user-button\": true, activated: this.userButtonActivated })} part=\"user-button\" variant=\"integration\" aria-label=${msg(\"User\")} style=${this.userButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"user-button-clicked\"))} ?activated=${this.userButtonActivated} > <obi-user></obi-user> </obc-icon-button>` : null} ${this.showClock ? html`<slot name=\"clock\"></slot>` : null} </div> </nav> `; } }"
         }
       ],
       "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",
@@ -55348,6 +55637,15 @@
               "default": "true",
               "description": "If false, and cornerLeft or cornerRight is true, the divider is not shown."
             },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary."
+            },
             {
               "kind": "field",
               "name": "progressSpinner",
@@ -65592,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": [
             {
@@ -65709,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",
@@ -65740,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",
@@ -65789,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",
@@ -66035,6 +66409,13 @@
                   "type": {
                     "text": "ObcTableColumn<ObcTableCellData, ObcTableRow>"
                   }
+                },
+                {
+                  "name": "expander",
+                  "default": "nothing",
+                  "type": {
+                    "text": "HTMLTemplateResult | typeof nothing"
+                  }
                 }
               ]
             },
@@ -66079,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": {
@@ -70804,7 +71192,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "`<obc-integration-bar-dropdown>` – A compact top-level integration header with a dropdown selector, status fields and system action buttons.",
           "name": "ObcIntegrationBarDropdown",
           "slots": [
             {
@@ -70847,7 +71235,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Home button at the left end of the bar."
             },
             {
               "kind": "field",
@@ -70855,7 +71244,26 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Pressed styling for the home button."
+            },
+            {
+              "kind": "field",
+              "name": "showLinkButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Link button, between home and the selector."
+            },
+            {
+              "kind": "field",
+              "name": "linkButtonActivated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Pressed styling for the link button."
             },
             {
               "kind": "field",
@@ -70863,7 +71271,26 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Renders the `clock` slot at the right end."
+            },
+            {
+              "kind": "field",
+              "name": "showAlertButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Alert button, first in the right-hand group."
+            },
+            {
+              "kind": "field",
+              "name": "alertButtonActivated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Pressed styling for the alert button."
             },
             {
               "kind": "field",
@@ -70871,7 +71298,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Notification button, after the alert button."
             },
             {
               "kind": "field",
@@ -70879,7 +71307,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Pressed styling; the count badge only appears in this state."
             },
             {
               "kind": "field",
@@ -70887,7 +71316,8 @@
               "type": {
                 "text": "number"
               },
-              "default": "0"
+              "default": "0",
+              "description": "Number drawn in the count badge."
             },
             {
               "kind": "field",
@@ -70895,7 +71325,26 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Draws the count badge on the notification button."
+            },
+            {
+              "kind": "field",
+              "name": "showScreenButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Screen button, after the notification button."
+            },
+            {
+              "kind": "field",
+              "name": "screenButtonActivated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Pressed styling for the screen button."
             },
             {
               "kind": "field",
@@ -70903,7 +71352,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "User button, last before the clock."
             },
             {
               "kind": "field",
@@ -70911,7 +71361,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Pressed styling for the user button."
             },
             {
               "kind": "field",
@@ -70919,7 +71370,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Dimming button, between system and user."
             },
             {
               "kind": "field",
@@ -70927,7 +71379,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Pressed styling for the dimming button."
             },
             {
               "kind": "field",
@@ -70935,7 +71388,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "System button, after the screen button."
             },
             {
               "kind": "field",
@@ -70943,7 +71397,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Pressed styling for the system button."
             },
             {
               "kind": "field",
@@ -70951,13 +71406,51 @@
               "type": {
                 "text": "number"
               },
-              "default": "0"
+              "default": "0",
+              "description": "How many `status-icon-N`/`status-label-N` slot pairs are rendered."
             },
             {
               "kind": "method",
               "name": "renderStatusFields",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderIconButton",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "activated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "label",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "icon",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                },
+                {
+                  "name": "onClick",
+                  "type": {
+                    "text": "() => void"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "render"
@@ -70976,6 +71469,20 @@
               },
               "description": "Fired when the home button is clicked"
             },
+            {
+              "name": "link-button-clicked",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the link button is clicked"
+            },
+            {
+              "name": "alert-button-clicked",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the alert button is clicked"
+            },
             {
               "name": "notification-button-clicked",
               "type": {
@@ -70983,6 +71490,13 @@
               },
               "description": "Fired when the notification button is clicked"
             },
+            {
+              "name": "screen-button-clicked",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the screen button is clicked"
+            },
             {
               "name": "system-button-clicked",
               "type": {