@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.141 → 2.0.0-next.143
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 +17 -3
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +1 -1
- package/dist/components/alert-list-details/alert-list-details.js +2 -2
- package/dist/components/alert-list-details/alert-list-details.js.map +1 -1
- package/dist/components/message-menu-item/message-menu-item.css.js +15 -1
- package/dist/components/message-menu-item/message-menu-item.css.js.map +1 -1
- package/package.json +1 -1
- package/src/components/alert-list-details/alert-list-details.ts +2 -2
- package/src/components/alert-menu-item/alert-menu-item.stories.ts +70 -0
- package/src/components/message-menu-item/message-menu-item.css +15 -1
package/custom-elements.json
CHANGED
|
@@ -4907,7 +4907,7 @@
|
|
|
4907
4907
|
{
|
|
4908
4908
|
"kind": "variable",
|
|
4909
4909
|
"name": "ObcAlertListDetails",
|
|
4910
|
-
"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; } getVisibleAlerts() { const visibleElements = this.alertList.getAllVisibleRows().map((id) => this.alerts.find((alert) => alert.id === id)).filter((alert) => alert !== void 0); return visibleElements; } onRowClick(e) { const row = this.alerts.find((alert) => alert.id === e.detail.row.id); if (row) { this.dispatchEvent( new CustomEvent(\"row-click\", { detail: { alert: row } }) ); } } onCellButtonClick(e) { const row = this.alerts.find((alert) => alert.id === e.detail.rowId); if (row) { this.dispatchEvent( new CustomEvent(\"ack-click\", { detail: { alert: row }, bubbles: false }) ); } } get columns() { if (this.small) { const columns = [ { label: \"
|
|
4910
|
+
"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; } getVisibleAlerts() { const visibleElements = this.alertList.getAllVisibleRows().map((id) => this.alerts.find((alert) => alert.id === id)).filter((alert) => alert !== void 0); return visibleElements; } onRowClick(e) { const row = this.alerts.find((alert) => alert.id === e.detail.row.id); if (row) { this.dispatchEvent( new CustomEvent(\"row-click\", { detail: { alert: row } }) ); } } onCellButtonClick(e) { const row = this.alerts.find((alert) => alert.id === e.detail.rowId); if (row) { this.dispatchEvent( new CustomEvent(\"ack-click\", { detail: { alert: row }, bubbles: false }) ); } } get columns() { if (this.small) { const columns = [ { label: \"Status\", key: \"status\", sortDirection: \"desc\", sortable: true, compareFunction: (_a, _b, aRow, bRow) => { const aAlert = this.alerts.find((alert) => alert.id === aRow.id); const bAlert = this.alerts.find((alert) => alert.id === 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.alerts.find((alert) => alert.id === aRow.id); const bAlert = this.alerts.find((alert) => alert.id === 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.alerts.find((alert) => alert.id === aRow.id); const bAlert = this.alerts.find((alert) => alert.id === 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); } render() { const selectedList = this.metadata; const data = this.filteredAlerts.map((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 { id: alert.id, status, time, action, tagId }; }); 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} ></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> `; } }"
|
|
4911
4911
|
}
|
|
4912
4912
|
],
|
|
4913
4913
|
"exports": [
|
|
@@ -118,7 +118,7 @@ let ObcAlertListDetails = class extends LitElement {
|
|
|
118
118
|
if (this.small) {
|
|
119
119
|
const columns = [
|
|
120
120
|
{
|
|
121
|
-
label: "
|
|
121
|
+
label: "Status",
|
|
122
122
|
key: "status",
|
|
123
123
|
sortDirection: "desc",
|
|
124
124
|
sortable: true,
|
|
@@ -146,7 +146,7 @@ let ObcAlertListDetails = class extends LitElement {
|
|
|
146
146
|
} else {
|
|
147
147
|
const columns = [
|
|
148
148
|
{
|
|
149
|
-
label: "
|
|
149
|
+
label: "Status",
|
|
150
150
|
key: "status",
|
|
151
151
|
sortDirection: "desc",
|
|
152
152
|
sortable: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-list-details.js","sources":["../../../src/components/alert-list-details/alert-list-details.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './alert-list-details.css?inline';\nimport {msg} from '@lit/localize';\nimport {property, query} from 'lit/decorators.js';\nimport '../icon-button/icon-button.js';\nimport '../button/button.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-alerts-active.js';\nimport '../../icons/icon-alarm-rectified-iec.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../../icons/icon-alarm-noack-iec.js';\nimport '../../icons/icon-warning-noack-iec.js';\nimport '../alert-icon/alert-icon.js';\nimport {\n Alert,\n comparePriorityAlerts,\n isActive,\n isAcknowledged,\n isBlocked,\n isShelved,\n} from '../../types.js';\nimport {\n excludedFromUnackedFilter,\n requiresAcknowledgement,\n usesAlarmNoAckIcon,\n} from '../../alert-severity.js';\nimport {\n ObcTable,\n ObcTableCellClickEvent,\n ObcTableCellData,\n ObcTableCellType,\n ObcTableRowClickEvent,\n ObcTableRow,\n ObcTableColumn,\n} from '../table/table.js';\nimport '../scrollbar/scrollbar.js';\n\nexport enum AlertListMode {\n UNACKED = 'unacked',\n ALL = 'all',\n SHELVED = 'shelved',\n BLOCKED = 'blocked',\n RECTIFIED = 'rectified',\n}\n\nexport type ObcAckClickEvent = CustomEvent<{\n alert: Alert;\n}>;\n\nexport type ObcRowClickEvent = CustomEvent<{\n alert: Alert;\n}>;\n\nexport function getAlertListModeData(selectedMode: AlertListMode) {\n if (selectedMode === AlertListMode.ALL)\n return {\n name: AlertListMode.ALL,\n title: msg('All'),\n emptyTitle: msg('No active alerts'),\n emptyIcon: html`<obi-alerts></obi-alerts>`,\n filter: (alert: Alert) => !isShelved(alert) && isActive(alert),\n };\n else if (selectedMode === AlertListMode.UNACKED)\n return {\n name: AlertListMode.UNACKED,\n title: msg('Unacked'),\n emptyTitle: msg('No unacknowledged alerts'),\n emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n filter: (alert: Alert) =>\n !isAcknowledged(alert) &&\n isActive(alert) &&\n !excludedFromUnackedFilter(alert.type) &&\n !isShelved(alert),\n };\n else if (selectedMode === AlertListMode.SHELVED)\n return {\n name: AlertListMode.SHELVED,\n title: msg('Shelved'),\n emptyTitle: msg('No shelved alerts'),\n emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n filter: (alert: Alert) => isShelved(alert),\n };\n else if (selectedMode === AlertListMode.BLOCKED)\n return {\n name: AlertListMode.BLOCKED,\n title: msg('Blocked'),\n emptyTitle: msg('No blocked alerts'),\n emptyIcon: html`<obi-alerts-active></obi-alerts-active>`,\n filter: (alert: Alert) => isBlocked(alert),\n };\n else if (selectedMode === AlertListMode.RECTIFIED)\n return {\n name: AlertListMode.RECTIFIED,\n title: msg('Rectified'),\n emptyTitle: msg('No rectified alerts'),\n emptyIcon: html`<obi-alarm-rectified-iec></obi-alarm-rectified-iec>`,\n filter: (alert: Alert) => !isActive(alert),\n };\n else throw new Error('Invalid selected mode');\n}\n\nexport function canAckFilter(filter: (alert: Alert) => boolean) {\n return (alert: Alert) =>\n !isAcknowledged(alert) &&\n !alert.noAck &&\n !excludedFromUnackedFilter(alert.type) &&\n filter(alert);\n}\n\n/**\n * @availableWhen timeFormatter showTime==true\n * @fires {ObcAckClickEvent} ack-click - Fired when the user clicks the \"ACK\" button.\n * @fires {ObcRowClickEvent} row-click - Fired when the user clicks a row.\n * @stable\n */\n@customElement('obc-alert-list-details')\nexport class ObcAlertListDetails extends LitElement {\n @property({type: String}) selectedMode: AlertListMode = AlertListMode.ALL;\n @property({type: Array}) alerts: Alert[] = [];\n @property({type: Boolean}) showTime: boolean = false;\n @property({attribute: false}) timeFormatter: (time: Date) => string = (\n time: Date\n ) => time.toLocaleTimeString(undefined, {hour12: false});\n @property({type: Boolean}) small: boolean = false;\n\n @query('obc-table')\n private alertList!: ObcTable;\n\n public getVisibleAlerts(): Alert[] {\n const visibleElements = this.alertList\n .getAllVisibleRows()\n .map((id) => this.alerts.find((alert) => alert.id === id))\n .filter((alert): alert is Alert => alert !== undefined);\n return visibleElements;\n }\n\n private onRowClick(e: ObcTableRowClickEvent) {\n const row = this.alerts.find((alert) => alert.id === e.detail.row.id);\n if (row) {\n this.dispatchEvent(\n new CustomEvent('row-click', {detail: {alert: row}}) as ObcRowClickEvent\n );\n }\n }\n\n private onCellButtonClick(e: ObcTableCellClickEvent) {\n const row = this.alerts.find((alert) => alert.id === e.detail.rowId);\n if (row) {\n this.dispatchEvent(\n new CustomEvent('ack-click', {\n detail: {alert: row},\n bubbles: false,\n }) as ObcAckClickEvent\n );\n }\n }\n\n private get columns() {\n if (this.small) {\n const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [\n {\n label: 'status',\n key: 'status',\n sortDirection: 'desc',\n sortable: true,\n compareFunction: (_a, _b, aRow, bRow) => {\n const aAlert = this.alerts.find((alert) => alert.id === aRow.id);\n const bAlert = this.alerts.find((alert) => alert.id === bRow.id);\n if (aAlert && bAlert) {\n return comparePriorityAlerts(aAlert, bAlert);\n }\n return 0;\n },\n },\n ];\n if (this.showTime) {\n columns.push({\n label: 'Activated',\n key: 'time',\n });\n }\n columns.push({\n label: 'ACK-status',\n key: 'action',\n });\n return columns;\n } else {\n const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [\n {\n label: 'status',\n key: 'status',\n sortDirection: 'desc',\n sortable: true,\n compareFunction: (_a, _b, aRow, bRow) => {\n const aAlert = this.alerts.find((alert) => alert.id === aRow.id);\n const bAlert = this.alerts.find((alert) => alert.id === bRow.id);\n if (aAlert && bAlert) {\n return comparePriorityAlerts(aAlert, bAlert);\n }\n return 0;\n },\n },\n {\n label: 'ACK-status',\n key: 'action',\n dividerRight: true,\n },\n ];\n if (this.showTime) {\n columns.push({\n label: 'Activated',\n key: 'time',\n sortable: true,\n compareFunction: (_a, _b, aRow, bRow) => {\n const aAlert = this.alerts.find((alert) => alert.id === aRow.id);\n const bAlert = this.alerts.find((alert) => alert.id === bRow.id);\n if (aAlert && bAlert) {\n const aTime = new Date(aAlert.time);\n const bTime = new Date(bAlert.time);\n return aTime.getTime() - bTime.getTime();\n }\n return 0;\n },\n });\n }\n columns.push({\n label: 'Tag ID',\n key: 'tagId',\n sortable: true,\n compareFunction: (a, b) => {\n const aText =\n a?.type === ObcTableCellType.Regular ? String(a.text ?? '') : '';\n const bText =\n b?.type === ObcTableCellType.Regular ? String(b.text ?? '') : '';\n return aText.localeCompare(bText);\n },\n });\n return columns;\n }\n }\n\n private get metadata() {\n return getAlertListModeData(this.selectedMode);\n }\n\n private get filteredAlerts() {\n return this.alerts.filter(this.metadata.filter);\n }\n\n override render() {\n const selectedList = this.metadata;\n\n const data = this.filteredAlerts.map((alert) => {\n let action: ObcTableCellData = {\n type: ObcTableCellType.Regular,\n };\n if (\n !isAcknowledged(alert) &&\n isActive(alert) &&\n requiresAcknowledgement(alert.type)\n ) {\n if (alert.noAck) {\n const icon = usesAlarmNoAckIcon(alert.type)\n ? html`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>`\n : html`<obi-warning-noack-iec usecsscolor></obi-warning-noack-iec>`;\n action = {\n type: ObcTableCellType.Regular,\n largeIcon: true,\n icon,\n align: 'center',\n };\n } else {\n action = {\n type: ObcTableCellType.Button,\n text: msg('ACK'),\n };\n }\n }\n\n const status = {\n type: ObcTableCellType.Regular,\n largeIcon: true,\n text: alert.text,\n title: alert.source,\n noWrap: true,\n icon: html`<obc-alert-icon\n .type=${alert.type}\n .acknowledged=${isAcknowledged(alert)}\n .active=${isActive(alert)}\n ></obc-alert-icon>`,\n };\n\n const time = this.showTime\n ? {\n type: ObcTableCellType.Regular,\n text: this.timeFormatter(alert.time),\n align: 'center',\n neutral: true,\n }\n : undefined;\n\n const tagId = this.small\n ? undefined\n : {\n type: ObcTableCellType.Regular,\n text: '#' + alert.id,\n align: 'right',\n };\n return {\n id: alert.id,\n status,\n time,\n action,\n tagId,\n };\n });\n\n return html`\n <div class=\"wrapper ${this.small ? 'small' : ''}\">\n ${data.length > 0\n ? html` <obc-table\n class=\"alert-list\"\n .data=${data}\n .columns=${this.columns}\n .striped=${true}\n .showHeader=${!this.small}\n @row-click=${this.onRowClick}\n @cell-button-click=${this.onCellButtonClick}\n ></obc-table>\n <div class=\"spacer\"></div>`\n : html` <div class=\"empty-list\">\n <div class=\"icon\">${selectedList.emptyIcon}</div>\n <div class=\"empty-title\">${selectedList.emptyTitle}</div>\n </div>`}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-list-details': ObcAlertListDetails;\n }\n}\n"],"names":["AlertListMode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"alert-list-details.js","sources":["../../../src/components/alert-list-details/alert-list-details.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './alert-list-details.css?inline';\nimport {msg} from '@lit/localize';\nimport {property, query} from 'lit/decorators.js';\nimport '../icon-button/icon-button.js';\nimport '../button/button.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-alerts-active.js';\nimport '../../icons/icon-alarm-rectified-iec.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../../icons/icon-alarm-noack-iec.js';\nimport '../../icons/icon-warning-noack-iec.js';\nimport '../alert-icon/alert-icon.js';\nimport {\n Alert,\n comparePriorityAlerts,\n isActive,\n isAcknowledged,\n isBlocked,\n isShelved,\n} from '../../types.js';\nimport {\n excludedFromUnackedFilter,\n requiresAcknowledgement,\n usesAlarmNoAckIcon,\n} from '../../alert-severity.js';\nimport {\n ObcTable,\n ObcTableCellClickEvent,\n ObcTableCellData,\n ObcTableCellType,\n ObcTableRowClickEvent,\n ObcTableRow,\n ObcTableColumn,\n} from '../table/table.js';\nimport '../scrollbar/scrollbar.js';\n\nexport enum AlertListMode {\n UNACKED = 'unacked',\n ALL = 'all',\n SHELVED = 'shelved',\n BLOCKED = 'blocked',\n RECTIFIED = 'rectified',\n}\n\nexport type ObcAckClickEvent = CustomEvent<{\n alert: Alert;\n}>;\n\nexport type ObcRowClickEvent = CustomEvent<{\n alert: Alert;\n}>;\n\nexport function getAlertListModeData(selectedMode: AlertListMode) {\n if (selectedMode === AlertListMode.ALL)\n return {\n name: AlertListMode.ALL,\n title: msg('All'),\n emptyTitle: msg('No active alerts'),\n emptyIcon: html`<obi-alerts></obi-alerts>`,\n filter: (alert: Alert) => !isShelved(alert) && isActive(alert),\n };\n else if (selectedMode === AlertListMode.UNACKED)\n return {\n name: AlertListMode.UNACKED,\n title: msg('Unacked'),\n emptyTitle: msg('No unacknowledged alerts'),\n emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n filter: (alert: Alert) =>\n !isAcknowledged(alert) &&\n isActive(alert) &&\n !excludedFromUnackedFilter(alert.type) &&\n !isShelved(alert),\n };\n else if (selectedMode === AlertListMode.SHELVED)\n return {\n name: AlertListMode.SHELVED,\n title: msg('Shelved'),\n emptyTitle: msg('No shelved alerts'),\n emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n filter: (alert: Alert) => isShelved(alert),\n };\n else if (selectedMode === AlertListMode.BLOCKED)\n return {\n name: AlertListMode.BLOCKED,\n title: msg('Blocked'),\n emptyTitle: msg('No blocked alerts'),\n emptyIcon: html`<obi-alerts-active></obi-alerts-active>`,\n filter: (alert: Alert) => isBlocked(alert),\n };\n else if (selectedMode === AlertListMode.RECTIFIED)\n return {\n name: AlertListMode.RECTIFIED,\n title: msg('Rectified'),\n emptyTitle: msg('No rectified alerts'),\n emptyIcon: html`<obi-alarm-rectified-iec></obi-alarm-rectified-iec>`,\n filter: (alert: Alert) => !isActive(alert),\n };\n else throw new Error('Invalid selected mode');\n}\n\nexport function canAckFilter(filter: (alert: Alert) => boolean) {\n return (alert: Alert) =>\n !isAcknowledged(alert) &&\n !alert.noAck &&\n !excludedFromUnackedFilter(alert.type) &&\n filter(alert);\n}\n\n/**\n * @availableWhen timeFormatter showTime==true\n * @fires {ObcAckClickEvent} ack-click - Fired when the user clicks the \"ACK\" button.\n * @fires {ObcRowClickEvent} row-click - Fired when the user clicks a row.\n * @stable\n */\n@customElement('obc-alert-list-details')\nexport class ObcAlertListDetails extends LitElement {\n @property({type: String}) selectedMode: AlertListMode = AlertListMode.ALL;\n @property({type: Array}) alerts: Alert[] = [];\n @property({type: Boolean}) showTime: boolean = false;\n @property({attribute: false}) timeFormatter: (time: Date) => string = (\n time: Date\n ) => time.toLocaleTimeString(undefined, {hour12: false});\n @property({type: Boolean}) small: boolean = false;\n\n @query('obc-table')\n private alertList!: ObcTable;\n\n public getVisibleAlerts(): Alert[] {\n const visibleElements = this.alertList\n .getAllVisibleRows()\n .map((id) => this.alerts.find((alert) => alert.id === id))\n .filter((alert): alert is Alert => alert !== undefined);\n return visibleElements;\n }\n\n private onRowClick(e: ObcTableRowClickEvent) {\n const row = this.alerts.find((alert) => alert.id === e.detail.row.id);\n if (row) {\n this.dispatchEvent(\n new CustomEvent('row-click', {detail: {alert: row}}) as ObcRowClickEvent\n );\n }\n }\n\n private onCellButtonClick(e: ObcTableCellClickEvent) {\n const row = this.alerts.find((alert) => alert.id === e.detail.rowId);\n if (row) {\n this.dispatchEvent(\n new CustomEvent('ack-click', {\n detail: {alert: row},\n bubbles: false,\n }) as ObcAckClickEvent\n );\n }\n }\n\n private get columns() {\n if (this.small) {\n const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [\n {\n label: 'Status',\n key: 'status',\n sortDirection: 'desc',\n sortable: true,\n compareFunction: (_a, _b, aRow, bRow) => {\n const aAlert = this.alerts.find((alert) => alert.id === aRow.id);\n const bAlert = this.alerts.find((alert) => alert.id === bRow.id);\n if (aAlert && bAlert) {\n return comparePriorityAlerts(aAlert, bAlert);\n }\n return 0;\n },\n },\n ];\n if (this.showTime) {\n columns.push({\n label: 'Activated',\n key: 'time',\n });\n }\n columns.push({\n label: 'ACK-status',\n key: 'action',\n });\n return columns;\n } else {\n const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [\n {\n label: 'Status',\n key: 'status',\n sortDirection: 'desc',\n sortable: true,\n compareFunction: (_a, _b, aRow, bRow) => {\n const aAlert = this.alerts.find((alert) => alert.id === aRow.id);\n const bAlert = this.alerts.find((alert) => alert.id === bRow.id);\n if (aAlert && bAlert) {\n return comparePriorityAlerts(aAlert, bAlert);\n }\n return 0;\n },\n },\n {\n label: 'ACK-status',\n key: 'action',\n dividerRight: true,\n },\n ];\n if (this.showTime) {\n columns.push({\n label: 'Activated',\n key: 'time',\n sortable: true,\n compareFunction: (_a, _b, aRow, bRow) => {\n const aAlert = this.alerts.find((alert) => alert.id === aRow.id);\n const bAlert = this.alerts.find((alert) => alert.id === bRow.id);\n if (aAlert && bAlert) {\n const aTime = new Date(aAlert.time);\n const bTime = new Date(bAlert.time);\n return aTime.getTime() - bTime.getTime();\n }\n return 0;\n },\n });\n }\n columns.push({\n label: 'Tag ID',\n key: 'tagId',\n sortable: true,\n compareFunction: (a, b) => {\n const aText =\n a?.type === ObcTableCellType.Regular ? String(a.text ?? '') : '';\n const bText =\n b?.type === ObcTableCellType.Regular ? String(b.text ?? '') : '';\n return aText.localeCompare(bText);\n },\n });\n return columns;\n }\n }\n\n private get metadata() {\n return getAlertListModeData(this.selectedMode);\n }\n\n private get filteredAlerts() {\n return this.alerts.filter(this.metadata.filter);\n }\n\n override render() {\n const selectedList = this.metadata;\n\n const data = this.filteredAlerts.map((alert) => {\n let action: ObcTableCellData = {\n type: ObcTableCellType.Regular,\n };\n if (\n !isAcknowledged(alert) &&\n isActive(alert) &&\n requiresAcknowledgement(alert.type)\n ) {\n if (alert.noAck) {\n const icon = usesAlarmNoAckIcon(alert.type)\n ? html`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>`\n : html`<obi-warning-noack-iec usecsscolor></obi-warning-noack-iec>`;\n action = {\n type: ObcTableCellType.Regular,\n largeIcon: true,\n icon,\n align: 'center',\n };\n } else {\n action = {\n type: ObcTableCellType.Button,\n text: msg('ACK'),\n };\n }\n }\n\n const status = {\n type: ObcTableCellType.Regular,\n largeIcon: true,\n text: alert.text,\n title: alert.source,\n noWrap: true,\n icon: html`<obc-alert-icon\n .type=${alert.type}\n .acknowledged=${isAcknowledged(alert)}\n .active=${isActive(alert)}\n ></obc-alert-icon>`,\n };\n\n const time = this.showTime\n ? {\n type: ObcTableCellType.Regular,\n text: this.timeFormatter(alert.time),\n align: 'center',\n neutral: true,\n }\n : undefined;\n\n const tagId = this.small\n ? undefined\n : {\n type: ObcTableCellType.Regular,\n text: '#' + alert.id,\n align: 'right',\n };\n return {\n id: alert.id,\n status,\n time,\n action,\n tagId,\n };\n });\n\n return html`\n <div class=\"wrapper ${this.small ? 'small' : ''}\">\n ${data.length > 0\n ? html` <obc-table\n class=\"alert-list\"\n .data=${data}\n .columns=${this.columns}\n .striped=${true}\n .showHeader=${!this.small}\n @row-click=${this.onRowClick}\n @cell-button-click=${this.onCellButtonClick}\n ></obc-table>\n <div class=\"spacer\"></div>`\n : html` <div class=\"empty-list\">\n <div class=\"icon\">${selectedList.emptyIcon}</div>\n <div class=\"empty-title\">${selectedList.emptyTitle}</div>\n </div>`}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-list-details': ObcAlertListDetails;\n }\n}\n"],"names":["AlertListMode"],"mappings":"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"}
|
|
@@ -213,7 +213,21 @@ const compentStyle = css`* {
|
|
|
213
213
|
|
|
214
214
|
.wrapper.active-size-multi-line .text-container {
|
|
215
215
|
grid-template-areas: "title date chevron" "description description description";
|
|
216
|
-
grid-template-columns: 1fr min-content min-content;
|
|
216
|
+
grid-template-columns: minmax(0, 1fr) min-content min-content;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.wrapper.active-size-multi-line .title-container {
|
|
220
|
+
white-space: normal;
|
|
221
|
+
overflow-wrap: break-word;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.wrapper.active-size-multi-line .description-container {
|
|
225
|
+
overflow-wrap: break-word;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.wrapper.active-size-multi-line .date-container {
|
|
229
|
+
align-self: start;
|
|
230
|
+
height: var(--app-components-message-menu-item-icon-size-regular);
|
|
217
231
|
}
|
|
218
232
|
|
|
219
233
|
.wrapper.active-size-multi-line .icon-container {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-menu-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"message-menu-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -162,7 +162,7 @@ export class ObcAlertListDetails extends LitElement {
|
|
|
162
162
|
if (this.small) {
|
|
163
163
|
const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [
|
|
164
164
|
{
|
|
165
|
-
label: '
|
|
165
|
+
label: 'Status',
|
|
166
166
|
key: 'status',
|
|
167
167
|
sortDirection: 'desc',
|
|
168
168
|
sortable: true,
|
|
@@ -190,7 +190,7 @@ export class ObcAlertListDetails extends LitElement {
|
|
|
190
190
|
} else {
|
|
191
191
|
const columns: ObcTableColumn<ObcTableCellData, ObcTableRow>[] = [
|
|
192
192
|
{
|
|
193
|
-
label: '
|
|
193
|
+
label: 'Status',
|
|
194
194
|
key: 'status',
|
|
195
195
|
sortDirection: 'desc',
|
|
196
196
|
sortable: true,
|
|
@@ -21,6 +21,7 @@ const meta: Meta<ObcAlertMenuItem> = {
|
|
|
21
21
|
status: ObcAlertMenuItemStatus.Unacknowledged,
|
|
22
22
|
hasIcon: false,
|
|
23
23
|
shelved: false,
|
|
24
|
+
open: false,
|
|
24
25
|
secondaryActionLabel: '',
|
|
25
26
|
primaryActionState: ObcAlertMenuItemActionState.Enabled,
|
|
26
27
|
secondaryActionState: ObcAlertMenuItemActionState.Enabled,
|
|
@@ -33,6 +34,7 @@ const meta: Meta<ObcAlertMenuItem> = {
|
|
|
33
34
|
.time=${args.time}
|
|
34
35
|
.shelved=${args.shelved}
|
|
35
36
|
.hasIcon=${args.hasIcon}
|
|
37
|
+
.open=${args.open}
|
|
36
38
|
.status=${args.status}
|
|
37
39
|
.secondaryActionLabel=${args.secondaryActionLabel}
|
|
38
40
|
.primaryActionState=${args.primaryActionState}
|
|
@@ -53,6 +55,7 @@ const meta: Meta<ObcAlertMenuItem> = {
|
|
|
53
55
|
},
|
|
54
56
|
hasIcon: {control: 'boolean'},
|
|
55
57
|
shelved: {control: 'boolean'},
|
|
58
|
+
open: {control: 'boolean'},
|
|
56
59
|
secondaryActionLabel: {control: 'text'},
|
|
57
60
|
primaryActionState: {
|
|
58
61
|
control: 'select',
|
|
@@ -68,6 +71,27 @@ const meta: Meta<ObcAlertMenuItem> = {
|
|
|
68
71
|
export default meta;
|
|
69
72
|
type Story = StoryObj<ObcAlertMenuItem>;
|
|
70
73
|
|
|
74
|
+
const renderInNarrowContainer: Story['render'] = (args) => html`
|
|
75
|
+
<div style="width: 480px">
|
|
76
|
+
<obc-alert-menu-item
|
|
77
|
+
.title=${args.title}
|
|
78
|
+
.description=${args.description}
|
|
79
|
+
.day=${args.day}
|
|
80
|
+
.time=${args.time}
|
|
81
|
+
.shelved=${args.shelved}
|
|
82
|
+
.hasIcon=${args.hasIcon}
|
|
83
|
+
.open=${args.open}
|
|
84
|
+
.status=${args.status}
|
|
85
|
+
.secondaryActionLabel=${args.secondaryActionLabel}
|
|
86
|
+
.primaryActionState=${args.primaryActionState}
|
|
87
|
+
.secondaryActionState=${args.secondaryActionState}
|
|
88
|
+
>
|
|
89
|
+
<obc-alert-icon slot="alert-icon" type="alarm" active></obc-alert-icon>
|
|
90
|
+
${args.hasIcon ? html`<obi-engine slot="icon"></obi-engine>` : nothing}
|
|
91
|
+
</obc-alert-menu-item>
|
|
92
|
+
</div>
|
|
93
|
+
`;
|
|
94
|
+
|
|
71
95
|
export const Default: Story = {
|
|
72
96
|
args: {},
|
|
73
97
|
};
|
|
@@ -122,3 +146,49 @@ export const PrimaryActionNone: Story = {
|
|
|
122
146
|
primaryActionState: ObcAlertMenuItemActionState.None,
|
|
123
147
|
},
|
|
124
148
|
};
|
|
149
|
+
|
|
150
|
+
export const OpenWithLongText: Story = {
|
|
151
|
+
args: {
|
|
152
|
+
open: true,
|
|
153
|
+
title:
|
|
154
|
+
'A title that is far too long to fit on a single line in a narrow list',
|
|
155
|
+
description:
|
|
156
|
+
'A description that is long enough to span several lines once the item is expanded, so the text has to wrap inside the available width instead of making the item wider.',
|
|
157
|
+
},
|
|
158
|
+
render: renderInNarrowContainer,
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
export const OpenWithLongWord: Story = {
|
|
162
|
+
args: {
|
|
163
|
+
open: true,
|
|
164
|
+
title: 'Averylongunbrokenwordthatdoesnotfitthecolumnwidth',
|
|
165
|
+
description:
|
|
166
|
+
'A description ending in averylongunbrokenwordthatdoesnotfitthecolumnwidth',
|
|
167
|
+
},
|
|
168
|
+
render: renderInNarrowContainer,
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
export const OpenShelvedWithLongText: Story = {
|
|
172
|
+
args: {
|
|
173
|
+
open: true,
|
|
174
|
+
shelved: true,
|
|
175
|
+
title:
|
|
176
|
+
'A title that is far too long to fit on a single line in a narrow list',
|
|
177
|
+
description:
|
|
178
|
+
'A description that is long enough to span several lines once the item is expanded, so the text has to wrap inside the available width instead of making the item wider.',
|
|
179
|
+
},
|
|
180
|
+
render: renderInNarrowContainer,
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
export const OpenShelvedWithSecondaryAction: Story = {
|
|
184
|
+
args: {
|
|
185
|
+
open: true,
|
|
186
|
+
shelved: true,
|
|
187
|
+
secondaryActionLabel: 'Mute',
|
|
188
|
+
title:
|
|
189
|
+
'A title that is far too long to fit on a single line in a narrow list',
|
|
190
|
+
description:
|
|
191
|
+
'A description that is long enough to span several lines once the item is expanded, so the text has to wrap inside the available width instead of making the item wider.',
|
|
192
|
+
},
|
|
193
|
+
render: renderInNarrowContainer,
|
|
194
|
+
};
|
|
@@ -137,7 +137,21 @@
|
|
|
137
137
|
&.active-size-multi-line {
|
|
138
138
|
.text-container {
|
|
139
139
|
grid-template-areas: "title date chevron" "description description description";
|
|
140
|
-
grid-template-columns: 1fr min-content min-content;
|
|
140
|
+
grid-template-columns: minmax(0, 1fr) min-content min-content;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.title-container {
|
|
144
|
+
white-space: normal;
|
|
145
|
+
overflow-wrap: break-word;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.description-container {
|
|
149
|
+
overflow-wrap: break-word;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.date-container {
|
|
153
|
+
align-self: start;
|
|
154
|
+
height: var(--app-components-message-menu-item-icon-size-regular);
|
|
141
155
|
}
|
|
142
156
|
|
|
143
157
|
.icon-container {
|