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

package/custom-elements.json

@@ -55293,6 +55293,293 @@
         }
       ]
     },
+    {
+      "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"
+              },
+              "attribute": "selectedMode"
+            },
+            {
+              "kind": "field",
+              "name": "alerts",
+              "type": {
+                "text": "Alert[]"
+              },
+              "default": "[]",
+              "attribute": "alerts"
+            },
+            {
+              "kind": "field",
+              "name": "showTime",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "showTime"
+            },
+            {
+              "kind": "field",
+              "name": "timeFormatter",
+              "type": {
+                "text": "(time: Date) => string"
+              },
+              "availableWhen": "showTime==true",
+              "description": "Available when `showTime==true`.",
+              "availableWhenIf": {
+                "arg": "showTime",
+                "truthy": true
+              }
+            },
+            {
+              "kind": "field",
+              "name": "small",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "small"
+            },
+            {
+              "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"
+                  }
+                }
+              ]
+            }
+          ],
+          "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"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "selectedMode",
+              "type": {
+                "text": "AlertListMode"
+              },
+              "fieldName": "selectedMode"
+            },
+            {
+              "name": "alerts",
+              "type": {
+                "text": "Alert[]"
+              },
+              "default": "[]",
+              "fieldName": "alerts"
+            },
+            {
+              "name": "showTime",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "showTime"
+            },
+            {
+              "name": "small",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "small"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "obc-alert-list-details-experimental",
+          "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": "custom-element-definition",
+          "name": "obc-alert-list-details-experimental",
+          "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",
@@ -78734,7 +79021,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": [
             {
@@ -78876,6 +79163,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",
@@ -78907,6 +79219,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",
@@ -78956,6 +79300,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_handleRowExpandKey",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "'ArrowRight' | 'ArrowLeft'"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_getAllPositions",
@@ -79174,6 +79537,13 @@
                   "type": {
                     "text": "ObcTableColumn<ObcTableCellData, ObcTableRow>"
                   }
+                },
+                {
+                  "name": "expander",
+                  "default": "nothing",
+                  "type": {
+                    "text": "HTMLTemplateResult | typeof nothing"
+                  }
                 }
               ]
             }
@@ -79213,6 +79583,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"
             }
           ],
           "attributes": [

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

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

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

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

package/dist/components/alert-list-details-experimental/alert-list-details-experimental.d.ts

@@ -0,0 +1,73 @@
+import { LitElement } from 'lit';
+import { Alert } from '../../types.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 '../scrollbar/scrollbar.js';
+export declare 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 declare function getAlertListModeData(selectedMode: AlertListMode): {
+    name: AlertListMode;
+    title: string;
+    emptyTitle: string;
+    emptyIcon: import('lit-html').TemplateResult<1>;
+    filter: (alert: Alert) => boolean;
+};
+export declare function canAckFilter(filter: (alert: Alert) => boolean): (alert: Alert) => boolean;
+/**
+ * @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
+ */
+export declare class ObcAlertListDetailsExperimental extends LitElement {
+    selectedMode: AlertListMode;
+    alerts: Alert[];
+    showTime: boolean;
+    /** Available when `showTime==true`. */
+    timeFormatter: (time: Date) => string;
+    small: boolean;
+    /** Whether groups start expanded. Set false to open the list collapsed. */
+    defaultExpanded: boolean;
+    private alertList;
+    private expansionOverrides;
+    private alertByRowId;
+    getVisibleAlerts(): Alert[];
+    private onRowClick;
+    private onCellButtonClick;
+    private onExpandToggle;
+    private isExpanded;
+    private get columns();
+    private get metadata();
+    private get filteredAlerts();
+    private buildVisibleRows;
+    private buildRowCells;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-alert-list-details-experimental': ObcAlertListDetailsExperimental;
+    }
+}
+//# sourceMappingURL=alert-list-details-experimental.d.ts.map

package/dist/components/alert-list-details-experimental/alert-list-details-experimental.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-list-details-experimental.d.ts","sourceRoot":"","sources":["../../../src/components/alert-list-details-experimental/alert-list-details-experimental.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,+BAA+B,CAAC;AACvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,6BAA6B,CAAC;AACrC,OAAO,EACL,KAAK,EAMN,MAAM,gBAAgB,CAAC;AAgBxB,OAAO,2BAA2B,CAAC;AAEnC,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACzC,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACzC,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,aAAa;;;;;oBAO1C,KAAK;EAuC1B;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,IACpD,OAAO,KAAK,aAKrB;AAED;;;;;;GAMG;AACH,qBACa,+BAAgC,SAAQ,UAAU;IACnC,YAAY,EAAE,aAAa,CAAqB;IACjD,MAAM,EAAE,KAAK,EAAE,CAAM;IACnB,QAAQ,EAAE,OAAO,CAAS;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAEV;IAC9B,KAAK,EAAE,OAAO,CAAS;IACL,eAAe,EAAE,OAAO,CAAQ;IAG7E,OAAO,CAAC,SAAS,CAAY;IAEpB,OAAO,CAAC,kBAAkB,CAA8B;IAEjE,OAAO,CAAC,YAAY,CAA4B;IAEzC,gBAAgB,IAAI,KAAK,EAAE;IAelC,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,UAAU;IAIlB,OAAO,KAAK,OAAO,GAkFlB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,CAAC,gBAAgB;IAiFxB,OAAO,CAAC,aAAa;IAkEZ,MAAM;IA0Bf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qCAAqC,EAAE,+BAA+B,CAAC;KACxE;CACF"}