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

package/src/components/alert-list-details-experimental/alert-list-details-experimental.ts

@@ -0,0 +1,457 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement} from '../../decorator.js';
+import compentStyle from './alert-list-details-experimental.css?inline';
+import {msg} from '@lit/localize';
+import {property, query, state} from 'lit/decorators.js';
+import '../icon-button/icon-button.js';
+import '../button/button.js';
+import '../../icons/icon-silence-iec.js';
+import '../../icons/icon-alerts.js';
+import '../../icons/icon-alerts-shelf.js';
+import '../../icons/icon-alerts-active.js';
+import '../../icons/icon-alarm-rectified-iec.js';
+import '../../icons/icon-unacknowledged.js';
+import '../../icons/icon-alarm-noack-iec.js';
+import '../../icons/icon-warning-noack-iec.js';
+import '../alert-icon/alert-icon.js';
+import {
+  Alert,
+  comparePriorityAlerts,
+  isActive,
+  isAcknowledged,
+  isBlocked,
+  isShelved,
+} from '../../types.js';
+import {
+  excludedFromUnackedFilter,
+  requiresAcknowledgement,
+  usesAlarmNoAckIcon,
+} from '../../alert-severity.js';
+import {
+  ObcTable,
+  ObcTableCellClickEvent,
+  ObcTableCellData,
+  ObcTableCellType,
+  ObcTableExpandToggleEvent,
+  ObcTableRowClickEvent,
+  ObcTableRow,
+  ObcTableColumn,
+} from '../table/table.js';
+import '../scrollbar/scrollbar.js';
+
+export enum AlertListMode {
+  UNACKED = 'unacked',
+  ALL = 'all',
+  SHELVED = 'shelved',
+  BLOCKED = 'blocked',
+  RECTIFIED = 'rectified',
+}
+
+export type ObcAckClickEvent = CustomEvent<{
+  alert: Alert;
+}>;
+
+export type ObcRowClickEvent = CustomEvent<{
+  alert: Alert;
+}>;
+
+export function getAlertListModeData(selectedMode: AlertListMode) {
+  if (selectedMode === AlertListMode.ALL)
+    return {
+      name: AlertListMode.ALL,
+      title: msg('All'),
+      emptyTitle: msg('No active alerts'),
+      emptyIcon: html`<obi-alerts></obi-alerts>`,
+      filter: (alert: Alert) => !isShelved(alert) && isActive(alert),
+    };
+  else if (selectedMode === AlertListMode.UNACKED)
+    return {
+      name: AlertListMode.UNACKED,
+      title: msg('Unacked'),
+      emptyTitle: msg('No unacknowledged alerts'),
+      emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,
+      filter: (alert: Alert) =>
+        !isAcknowledged(alert) &&
+        isActive(alert) &&
+        !excludedFromUnackedFilter(alert.type) &&
+        !isShelved(alert),
+    };
+  else if (selectedMode === AlertListMode.SHELVED)
+    return {
+      name: AlertListMode.SHELVED,
+      title: msg('Shelved'),
+      emptyTitle: msg('No shelved alerts'),
+      emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,
+      filter: (alert: Alert) => isShelved(alert),
+    };
+  else if (selectedMode === AlertListMode.BLOCKED)
+    return {
+      name: AlertListMode.BLOCKED,
+      title: msg('Blocked'),
+      emptyTitle: msg('No blocked alerts'),
+      emptyIcon: html`<obi-alerts-active></obi-alerts-active>`,
+      filter: (alert: Alert) => isBlocked(alert),
+    };
+  else if (selectedMode === AlertListMode.RECTIFIED)
+    return {
+      name: AlertListMode.RECTIFIED,
+      title: msg('Rectified'),
+      emptyTitle: msg('No rectified alerts'),
+      emptyIcon: html`<obi-alarm-rectified-iec></obi-alarm-rectified-iec>`,
+      filter: (alert: Alert) => !isActive(alert),
+    };
+  else throw new Error('Invalid selected mode');
+}
+
+export function canAckFilter(filter: (alert: Alert) => boolean) {
+  return (alert: Alert) =>
+    !isAcknowledged(alert) &&
+    !alert.noAck &&
+    !excludedFromUnackedFilter(alert.type) &&
+    filter(alert);
+}
+
+/**
+ * @availableWhen timeFormatter showTime==true
+ * @property defaultExpanded - Whether groups start expanded. Set false to open the list collapsed.
+ * @fires {ObcAckClickEvent} ack-click - Fired when the user clicks the "ACK" button.
+ * @fires {ObcRowClickEvent} row-click - Fired when the user clicks a row.
+ * @experimental
+ */
+@customElement('obc-alert-list-details-experimental')
+export class ObcAlertListDetailsExperimental extends LitElement {
+  @property({type: String}) selectedMode: AlertListMode = AlertListMode.ALL;
+  @property({type: Array}) alerts: Alert[] = [];
+  @property({type: Boolean}) showTime: boolean = false;
+  @property({attribute: false}) timeFormatter: (time: Date) => string = (
+    time: Date
+  ) => time.toLocaleTimeString(undefined, {hour12: false});
+  @property({type: Boolean}) small: boolean = false;
+  @property({type: Boolean, attribute: false}) defaultExpanded: boolean = true;
+
+  @query('obc-table')
+  private alertList!: ObcTable;
+
+  @state() private expansionOverrides = new Map<string, boolean>();
+
+  private alertByRowId = new Map<string, Alert>();
+
+  public getVisibleAlerts(): Alert[] {
+    const seen = new Set<string>();
+    return this.alertList
+      .getAllVisibleRows()
+      .map((rowId) => this.alertByRowId.get(rowId))
+      .filter((alert): alert is Alert => alert !== undefined)
+      .filter((alert) => {
+        if (seen.has(alert.id)) {
+          return false;
+        }
+        seen.add(alert.id);
+        return true;
+      });
+  }
+
+  private onRowClick(e: ObcTableRowClickEvent) {
+    const row = this.alertByRowId.get(e.detail.row.id);
+    if (row) {
+      this.dispatchEvent(
+        new CustomEvent('row-click', {detail: {alert: row}}) as ObcRowClickEvent
+      );
+    }
+  }
+
+  private onCellButtonClick(e: ObcTableCellClickEvent) {
+    const row = this.alertByRowId.get(e.detail.rowId);
+    if (row) {
+      this.dispatchEvent(
+        new CustomEvent('ack-click', {
+          detail: {alert: row},
+          bubbles: false,
+        }) as ObcAckClickEvent
+      );
+    }
+  }
+
+  private onExpandToggle(e: ObcTableExpandToggleEvent) {
+    const overrides = new Map(this.expansionOverrides);
+    overrides.set(e.detail.rowId, e.detail.expanded);
+    this.expansionOverrides = overrides;
+  }
+
+  private isExpanded(rowId: string) {
+    return this.expansionOverrides.get(rowId) ?? this.defaultExpanded;
+  }
+
+  private get columns() {
+    if (this.small) {
+      const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [
+        {
+          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: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [
+        {
+          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;
+    }
+  }
+
+  private get metadata() {
+    return getAlertListModeData(this.selectedMode);
+  }
+
+  private get filteredAlerts() {
+    return this.alerts.filter(this.metadata.filter);
+  }
+
+  private buildVisibleRows(): ObcTableRow[] {
+    const alerts = this.filteredAlerts;
+    const alertIds = new Set(alerts.map((alert) => alert.id));
+    const membersByGroupId = new Map<string, Alert[]>();
+    const roots: Alert[] = [];
+    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 = new Set<string>();
+    const markReachable = (alert: 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: ObcTableRow[] = [];
+    this.alertByRowId = new Map();
+    const visit = (
+      alert: Alert,
+      level: number,
+      parentRowId: string | undefined,
+      ancestors: Set<string>
+    ) => {
+      const segment = encodeURIComponent(alert.id);
+      const rowId =
+        parentRowId === undefined ? segment : `${parentRowId}/${segment}`;
+      const members = membersByGroupId.get(alert.id) ?? [];
+      // A member can name a group that is also its own descendant.
+      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, undefined, new Set());
+    }
+    return rows;
+  }
+
+  private buildRowCells(
+    alert: Alert
+  ): Record<string, ObcTableCellData | undefined> {
+    let action: ObcTableCellData = {
+      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: ObcTableCellData = {
+      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: ObcTableCellData | undefined = this.showTime
+      ? {
+          type: ObcTableCellType.Regular,
+          text: this.timeFormatter(alert.time),
+          align: 'center',
+          neutral: true,
+        }
+      : undefined;
+
+    const tagId: ObcTableCellData | undefined = this.small
+      ? undefined
+      : {
+          type: ObcTableCellType.Regular,
+          text: '#' + alert.id,
+          align: 'right',
+        };
+    return {
+      status,
+      time,
+      action,
+      tagId,
+    };
+  }
+
+  override 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>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-alert-list-details-experimental': ObcAlertListDetailsExperimental;
+  }
+}

package/src/components/icon-button/icon-button.spec.ts

@@ -0,0 +1,52 @@
+import {describe, expect, it} from 'vitest';
+import './icon-button.js';
+import {ObcIconButton} from './icon-button.js';
+import {render} from 'vitest-browser-lit';
+import {html} from 'lit';
+
+describe('obc-icon-button accessible name', () => {
+  async function setup(template: ReturnType<typeof html>) {
+    const screen = render(template);
+    const el = screen.baseElement.querySelector(
+      'obc-icon-button'
+    ) as ObcIconButton;
+    await el.updateComplete;
+    return el;
+  }
+
+  function shadowButton(el: ObcIconButton) {
+    return el.shadowRoot!.querySelector('button')!;
+  }
+
+  it('forwards the host aria-label to the shadow button', async () => {
+    const el = await setup(
+      html`<obc-icon-button aria-label="Play"></obc-icon-button>`
+    );
+
+    expect(shadowButton(el).getAttribute('aria-label')).toBe('Play');
+  });
+
+  it('follows later changes to the host aria-label', async () => {
+    const el = await setup(
+      html`<obc-icon-button aria-label="Play"></obc-icon-button>`
+    );
+
+    el.setAttribute('aria-label', 'Pause');
+    await el.updateComplete;
+
+    expect(shadowButton(el).getAttribute('aria-label')).toBe('Pause');
+  });
+
+  it('does not forward aria-labelledby, which cannot resolve across the shadow boundary', async () => {
+    const el = await setup(
+      html`<obc-icon-button
+        aria-label="Play"
+        aria-labelledby="external-label"
+      ></obc-icon-button>`
+    );
+
+    const button = shadowButton(el);
+    expect(button.hasAttribute('aria-labelledby')).toBe(false);
+    expect(button.getAttribute('aria-label')).toBe('Play');
+  });
+});

package/src/components/icon-button/icon-button.ts

@@ -2,6 +2,7 @@ import {LitElement, html, nothing, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
 import iconStyle from './icon-button.css?inline';
 import {classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 import {customElement} from '../../decorator.js';
 import {degToRad} from '../../svghelpers/math.js';
 
@@ -96,6 +97,7 @@ export enum IconButtonVariant {
  *   If undefined, no progress indicator is shown.
  * @property hasLabel - If true, displays a label below the icon using the `label` slot.
  * @property showDivider - If false, and cornerLeft or cornerRight is true, the divider is not shown.
+ * @property ariaLabel - 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.
  * @slot - Icon slot (default): Place an icon such as <obi-search> here.
  * @slot label - Optional label shown below the icon when `hasLabel` is true.
  * @fires click - Fired when the button is clicked (if not disabled).
@@ -130,6 +132,10 @@ export class ObcIconButton extends LitElement {
 
   @property({type: Boolean, attribute: false}) showDivider = true;
 
+  // Reactive so a consumer swapping the name (Play → Pause) re-renders the shadow button.
+  @property({type: String, attribute: 'aria-label'})
+  override ariaLabel: string | null = null;
+
   get progressSpinner() {
     if (this.progress === undefined) {
       return nothing;
@@ -200,6 +206,7 @@ export class ObcIconButton extends LitElement {
           'hide-divider': !this.showDivider,
         })}
         ?disabled=${this.disabled}
+        aria-label=${ifDefined(this.ariaLabel ?? undefined)}
         part="wrapper"
       >
         ${this.progress !== undefined ? this.progressSpinner : nothing}

package/src/components/table/table.css

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