@oicl/openbridge-webcomponents 2.0.0-next.153 → 2.0.0-next.154
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/openbridge-webcomponents.bundle.js +309 -232
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +190 -46
- package/dist/components/alert-list-details-experimental/alert-list-details-experimental.css.js +3 -7
- package/dist/components/alert-list-details-experimental/alert-list-details-experimental.css.js.map +1 -1
- package/dist/components/alert-list-details-experimental/alert-list-details-experimental.d.ts +133 -14
- package/dist/components/alert-list-details-experimental/alert-list-details-experimental.d.ts.map +1 -1
- package/dist/components/alert-list-details-experimental/alert-list-details-experimental.js +330 -233
- package/dist/components/alert-list-details-experimental/alert-list-details-experimental.js.map +1 -1
- package/dist/components/table/table.d.ts.map +1 -1
- package/dist/components/table/table.js +10 -2
- package/dist/components/table/table.js.map +1 -1
- package/package.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -56962,16 +56962,23 @@
|
|
|
56962
56962
|
"declarations": [
|
|
56963
56963
|
{
|
|
56964
56964
|
"kind": "class",
|
|
56965
|
-
"description": "",
|
|
56965
|
+
"description": "`<obc-alert-list-details-experimental>` lists alerts in a table with\nconsumer-defined columns, grouping alerts through `memberOf`.\n\n## Features\n- **Columns:** `columns` sets which columns show and in what order. A data\n column renders each cell from `cell(alert)`; a slot column renders\n whatever the consumer places in the cell's slot.\n- **Column factories:** `statusColumn()`, `ackColumn()`, `timeColumn()` and\n `tagIdColumn()` build the standard data columns; each takes overrides\n such as `label`, `width` or `dividerRight`.\n- **Filter modes:** `filterMode` lists unacknowledged, all, shelved,\n blocked or rectified alerts, with an empty state per filter mode.\n- **Grouping:** an alert listing group ids in `memberOf` renders under each\n of those groups; groups nest and can be collapsed.\n- **Selection:** `selectedRowId` highlights one row. When a collapsed group\n hides it, the nearest visible group row is highlighted instead.\n\n## Usage Guidelines\n- Use a slot column when the cell content must be owned by the consumer,\n for example a button the application disables or removes later. Slotted\n content stays in the light DOM, so it can be looked up by id.\n- Slot names are `cell-<key>:<rowId>`. `cellSlots` lists every one, with its\n alert, row id and column key, and `cell-slots-change` fires when the list\n changes. The Svelte wrapper renders its `cell` snippet once per entry. An\n alert in two groups has two rows, so it gets two entries.\n- Without a wrapper, build the names from `getAlertRows(alerts, filterMode)`\n and `alertListCellSlotName(key, rowId)`, or read `cellSlots`.\n- Clicks on buttons, links and inputs in a cell do not fire `row-click`.\n- The consumer owns the selection: set `selectedRowId` from `row-click`, and\n set it to `undefined` on a second click to unselect. The list never changes\n it; clear it when the row is no longer in `getAlertRows(alerts, filterMode)`.\n\n## Example\n```html\n<obc-alert-list-details-experimental>\n <obc-button slot=\"cell-ack:radar\" id=\"ack-radar\">ACK</obc-button>\n</obc-alert-list-details-experimental>\n```\nwith `columns` set to `[statusColumn(), {key: 'ack', label: 'ACK-status', slot: true}]`.",
|
|
56966
56966
|
"name": "ObcAlertListDetailsExperimental",
|
|
56967
|
+
"slots": [
|
|
56968
|
+
{
|
|
56969
|
+
"description": "Content of the cell in slot column `<key>` for row `<rowId>`.",
|
|
56970
|
+
"name": "cell-<key>:<rowId>"
|
|
56971
|
+
}
|
|
56972
|
+
],
|
|
56967
56973
|
"members": [
|
|
56968
56974
|
{
|
|
56969
56975
|
"kind": "field",
|
|
56970
|
-
"name": "
|
|
56976
|
+
"name": "filterMode",
|
|
56971
56977
|
"type": {
|
|
56972
|
-
"text": "
|
|
56978
|
+
"text": "FilterModes"
|
|
56973
56979
|
},
|
|
56974
|
-
"
|
|
56980
|
+
"description": "Which alerts to list.",
|
|
56981
|
+
"attribute": "filterMode"
|
|
56975
56982
|
},
|
|
56976
56983
|
{
|
|
56977
56984
|
"kind": "field",
|
|
@@ -56980,47 +56987,44 @@
|
|
|
56980
56987
|
"text": "Alert[]"
|
|
56981
56988
|
},
|
|
56982
56989
|
"default": "[]",
|
|
56990
|
+
"description": "Alerts to list.",
|
|
56983
56991
|
"attribute": "alerts"
|
|
56984
56992
|
},
|
|
56985
56993
|
{
|
|
56986
56994
|
"kind": "field",
|
|
56987
|
-
"name": "
|
|
56995
|
+
"name": "columns",
|
|
56988
56996
|
"type": {
|
|
56989
|
-
"text": "
|
|
56997
|
+
"text": "AlertListColumn[]"
|
|
56990
56998
|
},
|
|
56991
|
-
"default": "
|
|
56992
|
-
"
|
|
56999
|
+
"default": "[ statusColumn(), ackColumn({dividerRight: true}), tagIdColumn(), ]",
|
|
57000
|
+
"description": "Columns in display order."
|
|
56993
57001
|
},
|
|
56994
57002
|
{
|
|
56995
57003
|
"kind": "field",
|
|
56996
|
-
"name": "
|
|
57004
|
+
"name": "showHeader",
|
|
56997
57005
|
"type": {
|
|
56998
|
-
"text": "
|
|
57006
|
+
"text": "boolean"
|
|
56999
57007
|
},
|
|
57000
|
-
"
|
|
57001
|
-
"description": "
|
|
57002
|
-
"availableWhenIf": {
|
|
57003
|
-
"arg": "showTime",
|
|
57004
|
-
"truthy": true
|
|
57005
|
-
}
|
|
57008
|
+
"default": "true",
|
|
57009
|
+
"description": "Whether to show the column header row."
|
|
57006
57010
|
},
|
|
57007
57011
|
{
|
|
57008
57012
|
"kind": "field",
|
|
57009
|
-
"name": "
|
|
57013
|
+
"name": "defaultExpanded",
|
|
57010
57014
|
"type": {
|
|
57011
57015
|
"text": "boolean"
|
|
57012
57016
|
},
|
|
57013
|
-
"default": "
|
|
57014
|
-
"
|
|
57017
|
+
"default": "true",
|
|
57018
|
+
"description": "Whether groups start expanded. Set false to open the list collapsed."
|
|
57015
57019
|
},
|
|
57016
57020
|
{
|
|
57017
57021
|
"kind": "field",
|
|
57018
|
-
"name": "
|
|
57022
|
+
"name": "selectedRowId",
|
|
57019
57023
|
"type": {
|
|
57020
|
-
"text": "
|
|
57024
|
+
"text": "string | undefined"
|
|
57021
57025
|
},
|
|
57022
|
-
"
|
|
57023
|
-
"
|
|
57026
|
+
"description": "Row id to highlight, as given by `row-click` or `getAlertRows()`. Nothing is highlighted when no row has this id.",
|
|
57027
|
+
"attribute": "selectedRowId"
|
|
57024
57028
|
},
|
|
57025
57029
|
{
|
|
57026
57030
|
"kind": "field",
|
|
@@ -57042,6 +57046,39 @@
|
|
|
57042
57046
|
"privacy": "private",
|
|
57043
57047
|
"default": "new Map<string, Alert>()"
|
|
57044
57048
|
},
|
|
57049
|
+
{
|
|
57050
|
+
"kind": "field",
|
|
57051
|
+
"name": "allRowIds",
|
|
57052
|
+
"privacy": "private",
|
|
57053
|
+
"default": "new Set<string>()"
|
|
57054
|
+
},
|
|
57055
|
+
{
|
|
57056
|
+
"kind": "field",
|
|
57057
|
+
"name": "_cellSlots",
|
|
57058
|
+
"type": {
|
|
57059
|
+
"text": "AlertListCellSlot[]"
|
|
57060
|
+
},
|
|
57061
|
+
"privacy": "private",
|
|
57062
|
+
"default": "[]"
|
|
57063
|
+
},
|
|
57064
|
+
{
|
|
57065
|
+
"kind": "field",
|
|
57066
|
+
"name": "cellSlotsChanged",
|
|
57067
|
+
"type": {
|
|
57068
|
+
"text": "boolean"
|
|
57069
|
+
},
|
|
57070
|
+
"privacy": "private",
|
|
57071
|
+
"default": "false"
|
|
57072
|
+
},
|
|
57073
|
+
{
|
|
57074
|
+
"kind": "field",
|
|
57075
|
+
"name": "cellSlots",
|
|
57076
|
+
"type": {
|
|
57077
|
+
"text": "AlertListCellSlot[]"
|
|
57078
|
+
},
|
|
57079
|
+
"description": "Slot of every cell in a slot column, rows in collapsed groups included.",
|
|
57080
|
+
"readonly": true
|
|
57081
|
+
},
|
|
57045
57082
|
{
|
|
57046
57083
|
"kind": "method",
|
|
57047
57084
|
"name": "getVisibleAlerts",
|
|
@@ -57104,21 +57141,49 @@
|
|
|
57104
57141
|
}
|
|
57105
57142
|
]
|
|
57106
57143
|
},
|
|
57144
|
+
{
|
|
57145
|
+
"kind": "method",
|
|
57146
|
+
"name": "compareRows",
|
|
57147
|
+
"privacy": "private",
|
|
57148
|
+
"parameters": [
|
|
57149
|
+
{
|
|
57150
|
+
"name": "compare",
|
|
57151
|
+
"type": {
|
|
57152
|
+
"text": "(a: Alert, b: Alert) => number"
|
|
57153
|
+
}
|
|
57154
|
+
},
|
|
57155
|
+
{
|
|
57156
|
+
"name": "aRow",
|
|
57157
|
+
"type": {
|
|
57158
|
+
"text": "ObcTableRow"
|
|
57159
|
+
}
|
|
57160
|
+
},
|
|
57161
|
+
{
|
|
57162
|
+
"name": "bRow",
|
|
57163
|
+
"type": {
|
|
57164
|
+
"text": "ObcTableRow"
|
|
57165
|
+
}
|
|
57166
|
+
}
|
|
57167
|
+
]
|
|
57168
|
+
},
|
|
57107
57169
|
{
|
|
57108
57170
|
"kind": "field",
|
|
57109
|
-
"name": "
|
|
57171
|
+
"name": "tableColumns",
|
|
57172
|
+
"type": {
|
|
57173
|
+
"text": "ObcTableColumn[]"
|
|
57174
|
+
},
|
|
57110
57175
|
"privacy": "private",
|
|
57111
57176
|
"readonly": true
|
|
57112
57177
|
},
|
|
57113
57178
|
{
|
|
57114
57179
|
"kind": "field",
|
|
57115
|
-
"name": "
|
|
57180
|
+
"name": "gridColumns",
|
|
57116
57181
|
"privacy": "private",
|
|
57117
57182
|
"readonly": true
|
|
57118
57183
|
},
|
|
57119
57184
|
{
|
|
57120
57185
|
"kind": "field",
|
|
57121
|
-
"name": "
|
|
57186
|
+
"name": "metadata",
|
|
57122
57187
|
"privacy": "private",
|
|
57123
57188
|
"readonly": true
|
|
57124
57189
|
},
|
|
@@ -57132,6 +57197,17 @@
|
|
|
57132
57197
|
}
|
|
57133
57198
|
}
|
|
57134
57199
|
},
|
|
57200
|
+
{
|
|
57201
|
+
"kind": "method",
|
|
57202
|
+
"name": "highlightedRowId",
|
|
57203
|
+
"privacy": "private",
|
|
57204
|
+
"return": {
|
|
57205
|
+
"type": {
|
|
57206
|
+
"text": "string | undefined"
|
|
57207
|
+
}
|
|
57208
|
+
},
|
|
57209
|
+
"description": "The selected row, or the nearest visible group row when a collapsed group hides it."
|
|
57210
|
+
},
|
|
57135
57211
|
{
|
|
57136
57212
|
"kind": "method",
|
|
57137
57213
|
"name": "buildRowCells",
|
|
@@ -57149,15 +57225,28 @@
|
|
|
57149
57225
|
}
|
|
57150
57226
|
}
|
|
57151
57227
|
]
|
|
57228
|
+
},
|
|
57229
|
+
{
|
|
57230
|
+
"kind": "method",
|
|
57231
|
+
"name": "slotNames",
|
|
57232
|
+
"privacy": "private",
|
|
57233
|
+
"parameters": [
|
|
57234
|
+
{
|
|
57235
|
+
"name": "rows",
|
|
57236
|
+
"type": {
|
|
57237
|
+
"text": "ObcTableRow[]"
|
|
57238
|
+
}
|
|
57239
|
+
}
|
|
57240
|
+
]
|
|
57152
57241
|
}
|
|
57153
57242
|
],
|
|
57154
57243
|
"events": [
|
|
57155
57244
|
{
|
|
57156
57245
|
"type": {
|
|
57157
|
-
"text": "
|
|
57246
|
+
"text": "ObcAlertListCellClickEvent"
|
|
57158
57247
|
},
|
|
57159
|
-
"description": "Fired when the user clicks the
|
|
57160
|
-
"name": "
|
|
57248
|
+
"description": "Fired when the user clicks a button rendered by a data column, such as the one from `ackColumn()`.",
|
|
57249
|
+
"name": "cell-click"
|
|
57161
57250
|
},
|
|
57162
57251
|
{
|
|
57163
57252
|
"type": {
|
|
@@ -57165,15 +57254,23 @@
|
|
|
57165
57254
|
},
|
|
57166
57255
|
"description": "Fired when the user clicks a row.",
|
|
57167
57256
|
"name": "row-click"
|
|
57257
|
+
},
|
|
57258
|
+
{
|
|
57259
|
+
"type": {
|
|
57260
|
+
"text": "ObcAlertListCellSlotsChangeEvent"
|
|
57261
|
+
},
|
|
57262
|
+
"description": "Fired when `cellSlots` changes; the detail is the new list.",
|
|
57263
|
+
"name": "cell-slots-change"
|
|
57168
57264
|
}
|
|
57169
57265
|
],
|
|
57170
57266
|
"attributes": [
|
|
57171
57267
|
{
|
|
57172
|
-
"name": "
|
|
57268
|
+
"name": "filterMode",
|
|
57173
57269
|
"type": {
|
|
57174
|
-
"text": "
|
|
57270
|
+
"text": "FilterModes"
|
|
57175
57271
|
},
|
|
57176
|
-
"
|
|
57272
|
+
"description": "Which alerts to list.",
|
|
57273
|
+
"fieldName": "filterMode"
|
|
57177
57274
|
},
|
|
57178
57275
|
{
|
|
57179
57276
|
"name": "alerts",
|
|
@@ -57181,23 +57278,16 @@
|
|
|
57181
57278
|
"text": "Alert[]"
|
|
57182
57279
|
},
|
|
57183
57280
|
"default": "[]",
|
|
57281
|
+
"description": "Alerts to list.",
|
|
57184
57282
|
"fieldName": "alerts"
|
|
57185
57283
|
},
|
|
57186
57284
|
{
|
|
57187
|
-
"name": "
|
|
57188
|
-
"type": {
|
|
57189
|
-
"text": "boolean"
|
|
57190
|
-
},
|
|
57191
|
-
"default": "false",
|
|
57192
|
-
"fieldName": "showTime"
|
|
57193
|
-
},
|
|
57194
|
-
{
|
|
57195
|
-
"name": "small",
|
|
57285
|
+
"name": "selectedRowId",
|
|
57196
57286
|
"type": {
|
|
57197
|
-
"text": "
|
|
57287
|
+
"text": "string | undefined"
|
|
57198
57288
|
},
|
|
57199
|
-
"
|
|
57200
|
-
"fieldName": "
|
|
57289
|
+
"description": "Row id to highlight, as given by `row-click` or `getAlertRows()`. Nothing is highlighted when no row has this id.",
|
|
57290
|
+
"fieldName": "selectedRowId"
|
|
57201
57291
|
}
|
|
57202
57292
|
],
|
|
57203
57293
|
"superclass": {
|
|
@@ -57211,9 +57301,9 @@
|
|
|
57211
57301
|
"exports": [
|
|
57212
57302
|
{
|
|
57213
57303
|
"kind": "js",
|
|
57214
|
-
"name": "
|
|
57304
|
+
"name": "getFilterModeData",
|
|
57215
57305
|
"declaration": {
|
|
57216
|
-
"name": "
|
|
57306
|
+
"name": "getFilterModeData",
|
|
57217
57307
|
"module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
|
|
57218
57308
|
}
|
|
57219
57309
|
},
|
|
@@ -57225,6 +57315,54 @@
|
|
|
57225
57315
|
"module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
|
|
57226
57316
|
}
|
|
57227
57317
|
},
|
|
57318
|
+
{
|
|
57319
|
+
"kind": "js",
|
|
57320
|
+
"name": "alertListCellSlotName",
|
|
57321
|
+
"declaration": {
|
|
57322
|
+
"name": "alertListCellSlotName",
|
|
57323
|
+
"module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
|
|
57324
|
+
}
|
|
57325
|
+
},
|
|
57326
|
+
{
|
|
57327
|
+
"kind": "js",
|
|
57328
|
+
"name": "statusColumn",
|
|
57329
|
+
"declaration": {
|
|
57330
|
+
"name": "statusColumn",
|
|
57331
|
+
"module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
|
|
57332
|
+
}
|
|
57333
|
+
},
|
|
57334
|
+
{
|
|
57335
|
+
"kind": "js",
|
|
57336
|
+
"name": "ackColumn",
|
|
57337
|
+
"declaration": {
|
|
57338
|
+
"name": "ackColumn",
|
|
57339
|
+
"module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
|
|
57340
|
+
}
|
|
57341
|
+
},
|
|
57342
|
+
{
|
|
57343
|
+
"kind": "js",
|
|
57344
|
+
"name": "timeColumn",
|
|
57345
|
+
"declaration": {
|
|
57346
|
+
"name": "timeColumn",
|
|
57347
|
+
"module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
|
|
57348
|
+
}
|
|
57349
|
+
},
|
|
57350
|
+
{
|
|
57351
|
+
"kind": "js",
|
|
57352
|
+
"name": "tagIdColumn",
|
|
57353
|
+
"declaration": {
|
|
57354
|
+
"name": "tagIdColumn",
|
|
57355
|
+
"module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
|
|
57356
|
+
}
|
|
57357
|
+
},
|
|
57358
|
+
{
|
|
57359
|
+
"kind": "js",
|
|
57360
|
+
"name": "getAlertRows",
|
|
57361
|
+
"declaration": {
|
|
57362
|
+
"name": "getAlertRows",
|
|
57363
|
+
"module": "src/components/alert-list-details-experimental/alert-list-details-experimental.ts"
|
|
57364
|
+
}
|
|
57365
|
+
},
|
|
57228
57366
|
{
|
|
57229
57367
|
"kind": "js",
|
|
57230
57368
|
"name": "ObcAlertListDetailsExperimental",
|
|
@@ -80874,6 +81012,12 @@
|
|
|
80874
81012
|
"name": "_handleRowClick",
|
|
80875
81013
|
"privacy": "private",
|
|
80876
81014
|
"parameters": [
|
|
81015
|
+
{
|
|
81016
|
+
"name": "event",
|
|
81017
|
+
"type": {
|
|
81018
|
+
"text": "MouseEvent"
|
|
81019
|
+
}
|
|
81020
|
+
},
|
|
80877
81021
|
{
|
|
80878
81022
|
"name": "row",
|
|
80879
81023
|
"type": {
|
package/dist/components/alert-list-details-experimental/alert-list-details-experimental.css.js
CHANGED
|
@@ -14,6 +14,7 @@ const compentStyle = css`* {
|
|
|
14
14
|
.alert-list {
|
|
15
15
|
min-height: 0;
|
|
16
16
|
flex-grow: 0;
|
|
17
|
+
--alert-list-grid-columns: 1fr;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
.spacer {
|
|
@@ -38,13 +39,8 @@ const compentStyle = css`* {
|
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
obc-table::part(grid) {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
.wrapper.small obc-table::part(grid) {
|
|
45
|
-
grid-template-columns: 1fr min-content var(
|
|
46
|
-
--app-components-alert-table-row-ack-container-width-small
|
|
47
|
-
);
|
|
42
|
+
/* set from columns[].width */
|
|
43
|
+
grid-template-columns: var(--alert-list-grid-columns);
|
|
48
44
|
}
|
|
49
45
|
|
|
50
46
|
.empty-list {
|
package/dist/components/alert-list-details-experimental/alert-list-details-experimental.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-list-details-experimental.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
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
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
2
|
import { Alert } from '../../types.js';
|
|
3
|
+
import { ObcTableCellData } from '../table/table.js';
|
|
3
4
|
import '../icon-button/icon-button.js';
|
|
4
5
|
import '../button/button.js';
|
|
5
6
|
import '../../icons/icon-silence-iec.js';
|
|
@@ -12,56 +13,174 @@ import '../../icons/icon-alarm-noack-iec.js';
|
|
|
12
13
|
import '../../icons/icon-warning-noack-iec.js';
|
|
13
14
|
import '../alert-icon/alert-icon.js';
|
|
14
15
|
import '../scrollbar/scrollbar.js';
|
|
15
|
-
export declare enum
|
|
16
|
+
export declare enum FilterModes {
|
|
16
17
|
UNACKED = "unacked",
|
|
17
18
|
ALL = "all",
|
|
18
19
|
SHELVED = "shelved",
|
|
19
20
|
BLOCKED = "blocked",
|
|
20
21
|
RECTIFIED = "rectified"
|
|
21
22
|
}
|
|
22
|
-
export type
|
|
23
|
+
export type ObcAlertListCellClickEvent = CustomEvent<{
|
|
23
24
|
alert: Alert;
|
|
25
|
+
columnKey: string;
|
|
26
|
+
rowId: string;
|
|
24
27
|
}>;
|
|
25
28
|
export type ObcRowClickEvent = CustomEvent<{
|
|
26
29
|
alert: Alert;
|
|
30
|
+
rowId: string;
|
|
27
31
|
}>;
|
|
28
|
-
export
|
|
29
|
-
name
|
|
32
|
+
export interface AlertListColumnBase {
|
|
33
|
+
/** Unique within the list; part of the cell slot name. */
|
|
34
|
+
key: string;
|
|
35
|
+
label: string;
|
|
36
|
+
/** CSS grid track size. Defaults to `1fr` for the first column, `min-content` for the rest. */
|
|
37
|
+
width?: string;
|
|
38
|
+
dividerRight?: boolean;
|
|
39
|
+
}
|
|
40
|
+
/** A column whose cells the list renders from `cell(alert)`. */
|
|
41
|
+
export interface AlertListDataColumn extends AlertListColumnBase {
|
|
42
|
+
cell: (alert: Alert) => ObcTableCellData | undefined;
|
|
43
|
+
/** Makes the column sortable. */
|
|
44
|
+
compare?: (a: Alert, b: Alert) => number;
|
|
45
|
+
sortDirection?: 'asc' | 'desc';
|
|
46
|
+
}
|
|
47
|
+
/** A column whose cells the consumer supplies through `cell-<key>:<rowId>` slots. */
|
|
48
|
+
export interface AlertListSlotColumn extends AlertListColumnBase {
|
|
49
|
+
slot: true;
|
|
50
|
+
}
|
|
51
|
+
export type AlertListColumn = AlertListDataColumn | AlertListSlotColumn;
|
|
52
|
+
export type AlertListColumnOptions = Partial<AlertListColumnBase>;
|
|
53
|
+
/** One cell of a slot column, for every row including rows in collapsed groups. */
|
|
54
|
+
export interface AlertListCellSlot {
|
|
55
|
+
name: string;
|
|
56
|
+
alert: Alert;
|
|
57
|
+
rowId: string;
|
|
58
|
+
columnKey: string;
|
|
59
|
+
}
|
|
60
|
+
export type ObcAlertListCellSlotsChangeEvent = CustomEvent<AlertListCellSlot[]>;
|
|
61
|
+
export interface AlertListRow {
|
|
62
|
+
rowId: string;
|
|
63
|
+
parentRowId?: string;
|
|
64
|
+
alert: Alert;
|
|
65
|
+
level: number;
|
|
66
|
+
expandable: boolean;
|
|
67
|
+
}
|
|
68
|
+
export declare function getFilterModeData(filterMode: FilterModes): {
|
|
69
|
+
name: FilterModes;
|
|
30
70
|
title: string;
|
|
31
71
|
emptyTitle: string;
|
|
32
72
|
emptyIcon: import('lit-html').TemplateResult<1>;
|
|
33
73
|
filter: (alert: Alert) => boolean;
|
|
34
74
|
};
|
|
35
75
|
export declare function canAckFilter(filter: (alert: Alert) => boolean): (alert: Alert) => boolean;
|
|
76
|
+
/** Name of the slot that fills the cell of a slot column in one row. */
|
|
77
|
+
export declare function alertListCellSlotName(columnKey: string, rowId: string): string;
|
|
78
|
+
/** Alert icon, text and source; sorted by priority. */
|
|
79
|
+
export declare function statusColumn(options?: AlertListColumnOptions): AlertListDataColumn;
|
|
80
|
+
/** ACK button, or the no-ack icon, for alerts that await acknowledgement. The button fires `cell-click`. */
|
|
81
|
+
export declare function ackColumn(options?: AlertListColumnOptions): AlertListDataColumn;
|
|
82
|
+
/** Activation time; sorted by time. */
|
|
83
|
+
export declare function timeColumn({ formatter, ...options }?: AlertListColumnOptions & {
|
|
84
|
+
formatter?: (time: Date) => string;
|
|
85
|
+
}): AlertListDataColumn;
|
|
86
|
+
/** Tag ID prefixed with `#`; sorted alphabetically. */
|
|
87
|
+
export declare function tagIdColumn(options?: AlertListColumnOptions): AlertListDataColumn;
|
|
88
|
+
/**
|
|
89
|
+
* Every row `obc-alert-list-details-experimental` can show for these alerts
|
|
90
|
+
* and filter mode, rows inside collapsed groups included. An alert that is a member
|
|
91
|
+
* of several groups gets one row, and one `rowId`, under each.
|
|
92
|
+
*/
|
|
93
|
+
export declare function getAlertRows(alerts: Alert[], filterMode: FilterModes): AlertListRow[];
|
|
36
94
|
/**
|
|
37
|
-
*
|
|
95
|
+
* `<obc-alert-list-details-experimental>` lists alerts in a table with
|
|
96
|
+
* consumer-defined columns, grouping alerts through `memberOf`.
|
|
97
|
+
*
|
|
98
|
+
* ## Features
|
|
99
|
+
* - **Columns:** `columns` sets which columns show and in what order. A data
|
|
100
|
+
* column renders each cell from `cell(alert)`; a slot column renders
|
|
101
|
+
* whatever the consumer places in the cell's slot.
|
|
102
|
+
* - **Column factories:** `statusColumn()`, `ackColumn()`, `timeColumn()` and
|
|
103
|
+
* `tagIdColumn()` build the standard data columns; each takes overrides
|
|
104
|
+
* such as `label`, `width` or `dividerRight`.
|
|
105
|
+
* - **Filter modes:** `filterMode` lists unacknowledged, all, shelved,
|
|
106
|
+
* blocked or rectified alerts, with an empty state per filter mode.
|
|
107
|
+
* - **Grouping:** an alert listing group ids in `memberOf` renders under each
|
|
108
|
+
* of those groups; groups nest and can be collapsed.
|
|
109
|
+
* - **Selection:** `selectedRowId` highlights one row. When a collapsed group
|
|
110
|
+
* hides it, the nearest visible group row is highlighted instead.
|
|
111
|
+
*
|
|
112
|
+
* ## Usage Guidelines
|
|
113
|
+
* - Use a slot column when the cell content must be owned by the consumer,
|
|
114
|
+
* for example a button the application disables or removes later. Slotted
|
|
115
|
+
* content stays in the light DOM, so it can be looked up by id.
|
|
116
|
+
* - Slot names are `cell-<key>:<rowId>`. `cellSlots` lists every one, with its
|
|
117
|
+
* alert, row id and column key, and `cell-slots-change` fires when the list
|
|
118
|
+
* changes. The Svelte wrapper renders its `cell` snippet once per entry. An
|
|
119
|
+
* alert in two groups has two rows, so it gets two entries.
|
|
120
|
+
* - Without a wrapper, build the names from `getAlertRows(alerts, filterMode)`
|
|
121
|
+
* and `alertListCellSlotName(key, rowId)`, or read `cellSlots`.
|
|
122
|
+
* - Clicks on buttons, links and inputs in a cell do not fire `row-click`.
|
|
123
|
+
* - The consumer owns the selection: set `selectedRowId` from `row-click`, and
|
|
124
|
+
* set it to `undefined` on a second click to unselect. The list never changes
|
|
125
|
+
* it; clear it when the row is no longer in `getAlertRows(alerts, filterMode)`.
|
|
126
|
+
*
|
|
127
|
+
* ## Example
|
|
128
|
+
* ```html
|
|
129
|
+
* <obc-alert-list-details-experimental>
|
|
130
|
+
* <obc-button slot="cell-ack:radar" id="ack-radar">ACK</obc-button>
|
|
131
|
+
* </obc-alert-list-details-experimental>
|
|
132
|
+
* ```
|
|
133
|
+
* with `columns` set to `[statusColumn(), {key: 'ack', label: 'ACK-status', slot: true}]`.
|
|
134
|
+
*
|
|
135
|
+
* @property filterMode - Which alerts to list.
|
|
136
|
+
* @property alerts - Alerts to list.
|
|
137
|
+
* @property columns - Columns in display order.
|
|
138
|
+
* @property showHeader - Whether to show the column header row.
|
|
38
139
|
* @property defaultExpanded - Whether groups start expanded. Set false to open the list collapsed.
|
|
39
|
-
* @
|
|
140
|
+
* @property selectedRowId - Row id to highlight, as given by `row-click` or `getAlertRows()`. Nothing is highlighted when no row has this id.
|
|
141
|
+
* @slot cell-<key>:<rowId> - Content of the cell in slot column `<key>` for row `<rowId>`.
|
|
142
|
+
* @fires {ObcAlertListCellClickEvent} cell-click - Fired when the user clicks a button rendered by a data column, such as the one from `ackColumn()`.
|
|
40
143
|
* @fires {ObcRowClickEvent} row-click - Fired when the user clicks a row.
|
|
144
|
+
* @fires {ObcAlertListCellSlotsChangeEvent} cell-slots-change - Fired when `cellSlots` changes; the detail is the new list.
|
|
41
145
|
* @experimental
|
|
42
146
|
*/
|
|
43
147
|
export declare class ObcAlertListDetailsExperimental extends LitElement {
|
|
44
|
-
|
|
148
|
+
/** Which alerts to list. */
|
|
149
|
+
filterMode: FilterModes;
|
|
150
|
+
/** Alerts to list. */
|
|
45
151
|
alerts: Alert[];
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
152
|
+
/** Columns in display order. */
|
|
153
|
+
columns: AlertListColumn[];
|
|
154
|
+
/** Whether to show the column header row. */
|
|
155
|
+
showHeader: boolean;
|
|
50
156
|
/** Whether groups start expanded. Set false to open the list collapsed. */
|
|
51
157
|
defaultExpanded: boolean;
|
|
158
|
+
/** Row id to highlight, as given by `row-click` or `getAlertRows()`. Nothing is highlighted when no row has this id. */
|
|
159
|
+
selectedRowId?: string;
|
|
52
160
|
private alertList;
|
|
53
161
|
private expansionOverrides;
|
|
54
162
|
private alertByRowId;
|
|
163
|
+
private allRowIds;
|
|
164
|
+
private _cellSlots;
|
|
165
|
+
private cellSlotsChanged;
|
|
166
|
+
/** Slot of every cell in a slot column, rows in collapsed groups included. */
|
|
167
|
+
get cellSlots(): AlertListCellSlot[];
|
|
168
|
+
willUpdate(changed: PropertyValues<this>): void;
|
|
169
|
+
updated(): void;
|
|
55
170
|
getVisibleAlerts(): Alert[];
|
|
56
171
|
private onRowClick;
|
|
57
172
|
private onCellButtonClick;
|
|
58
173
|
private onExpandToggle;
|
|
59
174
|
private isExpanded;
|
|
60
|
-
private
|
|
175
|
+
private compareRows;
|
|
176
|
+
private get tableColumns();
|
|
177
|
+
private get gridColumns();
|
|
61
178
|
private get metadata();
|
|
62
|
-
private get filteredAlerts();
|
|
63
179
|
private buildVisibleRows;
|
|
180
|
+
/** The selected row, or the nearest visible group row when a collapsed group hides it. */
|
|
181
|
+
private highlightedRowId;
|
|
64
182
|
private buildRowCells;
|
|
183
|
+
private slotNames;
|
|
65
184
|
render(): import('lit-html').TemplateResult<1>;
|
|
66
185
|
static styles: import('lit').CSSResult;
|
|
67
186
|
}
|
package/dist/components/alert-list-details-experimental/alert-list-details-experimental.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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;
|
|
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":"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"}
|