@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.63 → 2.0.0-next.64
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 +326 -323
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +12 -12
- package/dist/alert-severity.d.ts.map +1 -1
- package/dist/alert-severity.js +37 -35
- package/dist/alert-severity.js.map +1 -1
- package/dist/ar/building-blocks/poi-header/poi-header.css.js +15 -15
- package/dist/ar/building-blocks/poi-header/poi-header.d.ts +6 -6
- package/dist/ar/building-blocks/poi-header/poi-header.d.ts.map +1 -1
- package/dist/ar/building-blocks/poi-header/poi-header.js +5 -5
- package/dist/ar/building-blocks/poi-header/poi-header.js.map +1 -1
- package/dist/ar/poi-button/poi-button.css.js +31 -30
- package/dist/ar/poi-button/poi-button.css.js.map +1 -1
- package/dist/ar/poi-button/poi-button.d.ts +6 -6
- package/dist/ar/poi-button/poi-button.d.ts.map +1 -1
- package/dist/ar/poi-button/poi-button.js +15 -15
- package/dist/ar/poi-button/poi-button.js.map +1 -1
- package/dist/ar/types.d.ts +5 -5
- package/dist/ar/types.d.ts.map +1 -1
- package/dist/ar/types.js +5 -5
- package/dist/ar/types.js.map +1 -1
- package/dist/automation/automation-badge/automation-badge.d.ts +7 -7
- package/dist/automation/automation-badge/automation-badge.d.ts.map +1 -1
- package/dist/automation/automation-badge/automation-badge.js +29 -29
- package/dist/automation/automation-badge/automation-badge.js.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button.d.ts +5 -5
- package/dist/automation/automation-button/abstract-automation-button.d.ts.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button.js +15 -15
- package/dist/automation/automation-button/abstract-automation-button.js.map +1 -1
- package/dist/automation/automation-tank/automation-tank.js +10 -10
- package/dist/automation/automation-tank/automation-tank.js.map +1 -1
- package/dist/components/accordion-card/accordion-card.css.js +5 -5
- package/dist/components/alert-button/alert-button.css.js +128 -128
- package/dist/components/alert-frame/alert-frame.css.js +6 -6
- package/dist/components/alert-frame/alert-frame.d.ts +4 -4
- package/dist/components/alert-frame/alert-frame.js.map +1 -1
- package/dist/components/alert-icon/alert-icon.js +4 -4
- package/dist/components/alert-icon/alert-icon.js.map +1 -1
- package/dist/components/badge/badge.css.js +10 -10
- package/dist/components/badge/badge.d.ts +13 -13
- package/dist/components/badge/badge.d.ts.map +1 -1
- package/dist/components/badge/badge.js +10 -10
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/manual-icon/icon-alerts-critical-twotone.d.ts +1 -1
- package/dist/manual-icon/icon-alerts-critical-twotone.js.map +1 -1
- package/dist/manual-icon/icon-alerts-diagnostic-twotone.d.ts +1 -1
- package/dist/manual-icon/icon-alerts-diagnostic-twotone.js.map +1 -1
- package/dist/types.d.ts +5 -5
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +11 -11
- package/dist/types.js.map +1 -1
- package/package.json +1 -1
- package/src/alert-severity.ts +43 -41
- package/src/ar/building-blocks/poi-header/poi-header.css +15 -15
- package/src/ar/building-blocks/poi-header/poi-header.ts +6 -6
- package/src/ar/poi-button/poi-button.css +31 -30
- package/src/ar/poi-button/poi-button.ts +16 -16
- package/src/ar/types.ts +5 -5
- package/src/automation/automation-badge/automation-badge.ts +22 -22
- package/src/automation/automation-button/abstract-automation-button.ts +15 -15
- package/src/automation/automation-tank/automation-tank.stories.ts +6 -6
- package/src/automation/automation-tank/automation-tank.ts +10 -10
- package/src/components/accordion-card/accordion-card.css +5 -5
- package/src/components/alert-button/alert-button.css +14 -14
- package/src/components/alert-button/alert-button.stories.ts +10 -10
- package/src/components/alert-frame/alert-frame.css +6 -6
- package/src/components/alert-frame/alert-frame.stories.ts +10 -10
- package/src/components/alert-frame/alert-frame.ts +4 -4
- package/src/components/alert-icon/alert-icon.stories.ts +10 -10
- package/src/components/alert-icon/alert-icon.ts +4 -4
- package/src/components/alert-list-details/alert-list-details.stories.ts +11 -11
- package/src/components/badge/badge.css +10 -10
- package/src/components/badge/badge.stories.ts +10 -10
- package/src/components/badge/badge.ts +18 -18
- package/src/manual-icon/icon-alerts-critical-twotone.ts +1 -1
- package/src/manual-icon/icon-alerts-diagnostic-twotone.ts +1 -1
- package/src/navigation-instruments/readout/readout.stories.ts +2 -2
- package/src/navigation-instruments/readout-list-item/readout-list-item.stories.ts +4 -4
- package/src/types.ts +10 -10
|
@@ -208,44 +208,44 @@ export const EnhancedCaution: Story = {
|
|
|
208
208
|
},
|
|
209
209
|
};
|
|
210
210
|
|
|
211
|
-
export const
|
|
211
|
+
export const EnhancedLevelCritical: Story = {
|
|
212
212
|
args: {
|
|
213
|
-
alertType: AlertType.
|
|
213
|
+
alertType: AlertType.LevelCritical,
|
|
214
214
|
type: ObcAlertButtonType.Enhanced,
|
|
215
215
|
nAlerts: 3,
|
|
216
216
|
blinking: true,
|
|
217
217
|
},
|
|
218
218
|
};
|
|
219
219
|
|
|
220
|
-
export const
|
|
220
|
+
export const NormalLevelHigh: Story = {
|
|
221
221
|
args: {
|
|
222
|
-
alertType: AlertType.
|
|
222
|
+
alertType: AlertType.LevelHigh,
|
|
223
223
|
type: ObcAlertButtonType.Normal,
|
|
224
224
|
nAlerts: 2,
|
|
225
225
|
blinking: true,
|
|
226
226
|
},
|
|
227
227
|
};
|
|
228
228
|
|
|
229
|
-
export const
|
|
229
|
+
export const NormalLevelMedium: Story = {
|
|
230
230
|
args: {
|
|
231
|
-
alertType: AlertType.
|
|
231
|
+
alertType: AlertType.LevelMedium,
|
|
232
232
|
type: ObcAlertButtonType.Normal,
|
|
233
233
|
nAlerts: 1,
|
|
234
234
|
blinking: true,
|
|
235
235
|
},
|
|
236
236
|
};
|
|
237
237
|
|
|
238
|
-
export const
|
|
238
|
+
export const FlatLevelLow: Story = {
|
|
239
239
|
args: {
|
|
240
|
-
alertType: AlertType.
|
|
240
|
+
alertType: AlertType.LevelLow,
|
|
241
241
|
type: ObcAlertButtonType.Flat,
|
|
242
242
|
nAlerts: 1,
|
|
243
243
|
},
|
|
244
244
|
};
|
|
245
245
|
|
|
246
|
-
export const
|
|
246
|
+
export const NormalLevelDiagnostic: Story = {
|
|
247
247
|
args: {
|
|
248
|
-
alertType: AlertType.
|
|
248
|
+
alertType: AlertType.LevelDiagnostic,
|
|
249
249
|
type: ObcAlertButtonType.Normal,
|
|
250
250
|
nAlerts: 1,
|
|
251
251
|
},
|
|
@@ -44,35 +44,35 @@
|
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
&.alarm,
|
|
47
|
-
&.
|
|
47
|
+
&.level-high {
|
|
48
48
|
--bg-color: var(--alert-alarm-color);
|
|
49
49
|
color: var(--on-alarm-active-color);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
&.warning,
|
|
53
|
-
&.
|
|
53
|
+
&.level-medium {
|
|
54
54
|
--bg-color: var(--alert-warning-color);
|
|
55
55
|
--blink-on: var(--warning-blink-on);
|
|
56
56
|
color: var(--on-warning-active-color);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
&.caution,
|
|
60
|
-
&.
|
|
60
|
+
&.level-low {
|
|
61
61
|
--bg-color: var(--alert-caution-color);
|
|
62
62
|
--blink-on: 1;
|
|
63
63
|
color: var(--on-caution-active-color);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
&.
|
|
66
|
+
&.level-low {
|
|
67
67
|
--blink-on: var(--low-blink-on);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
&.
|
|
70
|
+
&.level-critical {
|
|
71
71
|
--bg-color: var(--critical-enabled-background-color);
|
|
72
72
|
color: var(--on-critical-active-color);
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
-
&.
|
|
75
|
+
&.level-diagnostic {
|
|
76
76
|
--bg-color: var(--notification-enabled-background-color);
|
|
77
77
|
color: var(--on-notification-active-color);
|
|
78
78
|
}
|
|
@@ -220,33 +220,33 @@ export const AlarmThickTopFlipNoIcons: Story = {
|
|
|
220
220
|
render: AlarmThickTopFlip.render,
|
|
221
221
|
};
|
|
222
222
|
|
|
223
|
-
export const
|
|
223
|
+
export const LevelCritical: Story = {
|
|
224
224
|
args: {
|
|
225
|
-
status: ObcAlertFrameStatus.
|
|
225
|
+
status: ObcAlertFrameStatus.LevelCritical,
|
|
226
226
|
},
|
|
227
227
|
};
|
|
228
228
|
|
|
229
|
-
export const
|
|
229
|
+
export const LevelHigh: Story = {
|
|
230
230
|
args: {
|
|
231
|
-
status: ObcAlertFrameStatus.
|
|
231
|
+
status: ObcAlertFrameStatus.LevelHigh,
|
|
232
232
|
},
|
|
233
233
|
};
|
|
234
234
|
|
|
235
|
-
export const
|
|
235
|
+
export const LevelMedium: Story = {
|
|
236
236
|
args: {
|
|
237
|
-
status: ObcAlertFrameStatus.
|
|
237
|
+
status: ObcAlertFrameStatus.LevelMedium,
|
|
238
238
|
},
|
|
239
239
|
};
|
|
240
240
|
|
|
241
|
-
export const
|
|
241
|
+
export const LevelLow: Story = {
|
|
242
242
|
args: {
|
|
243
|
-
status: ObcAlertFrameStatus.
|
|
243
|
+
status: ObcAlertFrameStatus.LevelLow,
|
|
244
244
|
},
|
|
245
245
|
};
|
|
246
246
|
|
|
247
|
-
export const
|
|
247
|
+
export const LevelDiagnostic: Story = {
|
|
248
248
|
args: {
|
|
249
|
-
status: ObcAlertFrameStatus.
|
|
249
|
+
status: ObcAlertFrameStatus.LevelDiagnostic,
|
|
250
250
|
},
|
|
251
251
|
};
|
|
252
252
|
|
|
@@ -87,7 +87,7 @@ export interface AlertFrameConfig {
|
|
|
87
87
|
* - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.
|
|
88
88
|
* - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.
|
|
89
89
|
* - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.
|
|
90
|
-
* - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the
|
|
90
|
+
* - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the level statuses (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`).
|
|
91
91
|
* - **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.
|
|
92
92
|
* - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.
|
|
93
93
|
* - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.
|
|
@@ -105,7 +105,7 @@ export interface AlertFrameConfig {
|
|
|
105
105
|
* - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.
|
|
106
106
|
* - `bottom-flip`: Bottom flap with status icon, label, and timer.
|
|
107
107
|
* - **Thickness:** `small` (default) or `large` for border width.
|
|
108
|
-
* - **Status:** `alarm`, `warning`, `caution`, or the
|
|
108
|
+
* - **Status:** `alarm`, `warning`, `caution`, or the level severities (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`)—affects color and icon.
|
|
109
109
|
* - **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.
|
|
110
110
|
* - **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.
|
|
111
111
|
*
|
|
@@ -121,7 +121,7 @@ export interface AlertFrameConfig {
|
|
|
121
121
|
* ### Properties and Attributes
|
|
122
122
|
* - `type`: Selects the visual variant/flap style. Default is `small-side-flip`.
|
|
123
123
|
* - `thickness`: Controls border thickness (`small` or `large`). Default is `small`.
|
|
124
|
-
* - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `
|
|
124
|
+
* - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `level-*` severities). Default is `alarm`.
|
|
125
125
|
* - `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.
|
|
126
126
|
* - `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.
|
|
127
127
|
* - `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.
|
|
@@ -179,7 +179,7 @@ export class ObcAlertFrame extends LitElement {
|
|
|
179
179
|
* - `alarm`: Highest severity (default).
|
|
180
180
|
* - `warning`: Medium severity.
|
|
181
181
|
* - `caution`: Lower severity.
|
|
182
|
-
* - `
|
|
182
|
+
* - `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents.
|
|
183
183
|
*/
|
|
184
184
|
@property({type: String}) status: AlertType = AlertType.Alarm;
|
|
185
185
|
|
|
@@ -98,42 +98,42 @@ export const AlarmOutline: Story = {
|
|
|
98
98
|
},
|
|
99
99
|
};
|
|
100
100
|
|
|
101
|
-
export const
|
|
101
|
+
export const LevelCritical: Story = {
|
|
102
102
|
args: {
|
|
103
|
-
type: AlertType.
|
|
103
|
+
type: AlertType.LevelCritical,
|
|
104
104
|
acknowledged: false,
|
|
105
105
|
active: true,
|
|
106
106
|
outline: true,
|
|
107
107
|
},
|
|
108
108
|
};
|
|
109
109
|
|
|
110
|
-
export const
|
|
110
|
+
export const LevelHigh: Story = {
|
|
111
111
|
args: {
|
|
112
|
-
type: AlertType.
|
|
112
|
+
type: AlertType.LevelHigh,
|
|
113
113
|
acknowledged: false,
|
|
114
114
|
active: true,
|
|
115
115
|
},
|
|
116
116
|
};
|
|
117
117
|
|
|
118
|
-
export const
|
|
118
|
+
export const LevelMedium: Story = {
|
|
119
119
|
args: {
|
|
120
|
-
type: AlertType.
|
|
120
|
+
type: AlertType.LevelMedium,
|
|
121
121
|
acknowledged: false,
|
|
122
122
|
active: true,
|
|
123
123
|
},
|
|
124
124
|
};
|
|
125
125
|
|
|
126
|
-
export const
|
|
126
|
+
export const LevelLow: Story = {
|
|
127
127
|
args: {
|
|
128
|
-
type: AlertType.
|
|
128
|
+
type: AlertType.LevelLow,
|
|
129
129
|
acknowledged: false,
|
|
130
130
|
active: true,
|
|
131
131
|
},
|
|
132
132
|
};
|
|
133
133
|
|
|
134
|
-
export const
|
|
134
|
+
export const LevelDiagnostic: Story = {
|
|
135
135
|
args: {
|
|
136
|
-
type: AlertType.
|
|
136
|
+
type: AlertType.LevelDiagnostic,
|
|
137
137
|
acknowledged: false,
|
|
138
138
|
active: true,
|
|
139
139
|
},
|
|
@@ -112,7 +112,7 @@ export class ObcAlertIcon extends LitElement {
|
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
get icon() {
|
|
115
|
-
if (this.type === AlertType.
|
|
115
|
+
if (this.type === AlertType.LevelCritical) {
|
|
116
116
|
return mapping[AlertIconName.Critical];
|
|
117
117
|
} else if (this.bamType === AlertType.Alarm) {
|
|
118
118
|
if (this.active === false) {
|
|
@@ -153,10 +153,10 @@ export class ObcAlertIcon extends LitElement {
|
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
private renderStaticIcon(): TemplateResult | typeof nothing {
|
|
156
|
-
if (this.type === AlertType.Caution || this.type === AlertType.
|
|
156
|
+
if (this.type === AlertType.Caution || this.type === AlertType.LevelLow) {
|
|
157
157
|
return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;
|
|
158
158
|
}
|
|
159
|
-
if (this.type === AlertType.
|
|
159
|
+
if (this.type === AlertType.LevelDiagnostic) {
|
|
160
160
|
return html`<obi-diagnostic-badge
|
|
161
161
|
style="color: var(--alert-diagnostic-color);"
|
|
162
162
|
></obi-diagnostic-badge>`;
|
|
@@ -171,7 +171,7 @@ export class ObcAlertIcon extends LitElement {
|
|
|
171
171
|
if (this.outline) {
|
|
172
172
|
return html`<div class="wrapper">${this.renderOutlineIcon()}</div>`;
|
|
173
173
|
}
|
|
174
|
-
if (supportsBlinking(this.type) && !(this.type === AlertType.
|
|
174
|
+
if (supportsBlinking(this.type) && !(this.type === AlertType.LevelLow)) {
|
|
175
175
|
const icons = this.icon;
|
|
176
176
|
if (!icons) {
|
|
177
177
|
throw new Error('No icon found');
|
|
@@ -188,57 +188,57 @@ export const OneItem: Story = {
|
|
|
188
188
|
},
|
|
189
189
|
};
|
|
190
190
|
|
|
191
|
-
export const
|
|
191
|
+
export const LevelCategories: Story = {
|
|
192
192
|
args: {
|
|
193
193
|
alerts: [
|
|
194
194
|
{
|
|
195
|
-
id: '
|
|
195
|
+
id: 'level-1',
|
|
196
196
|
tagId: 'CRIT-01',
|
|
197
197
|
source: 'PCS',
|
|
198
198
|
text: 'Emergency shutdown condition detected',
|
|
199
199
|
acknowledged: false,
|
|
200
200
|
active: true,
|
|
201
|
-
type: AlertType.
|
|
201
|
+
type: AlertType.LevelCritical,
|
|
202
202
|
time: new Date('2024-01-15T14:32:15Z'),
|
|
203
203
|
},
|
|
204
204
|
{
|
|
205
|
-
id: '
|
|
205
|
+
id: 'level-2',
|
|
206
206
|
tagId: 'HIGH-02',
|
|
207
207
|
source: 'ME 1',
|
|
208
208
|
text: 'Main engine overspeed',
|
|
209
209
|
acknowledged: false,
|
|
210
210
|
active: true,
|
|
211
|
-
type: AlertType.
|
|
211
|
+
type: AlertType.LevelHigh,
|
|
212
212
|
time: new Date('2024-01-15T14:30:00Z'),
|
|
213
213
|
},
|
|
214
214
|
{
|
|
215
|
-
id: '
|
|
215
|
+
id: 'level-3',
|
|
216
216
|
tagId: 'MED-03',
|
|
217
217
|
source: 'Tank 1',
|
|
218
218
|
text: 'Tank level approaching high limit',
|
|
219
219
|
acknowledged: false,
|
|
220
220
|
active: true,
|
|
221
|
-
type: AlertType.
|
|
221
|
+
type: AlertType.LevelMedium,
|
|
222
222
|
time: new Date('2024-01-15T14:28:00Z'),
|
|
223
223
|
},
|
|
224
224
|
{
|
|
225
|
-
id: '
|
|
225
|
+
id: 'level-4',
|
|
226
226
|
tagId: 'LOW-04',
|
|
227
227
|
source: 'HVAC',
|
|
228
228
|
text: 'Filter maintenance due',
|
|
229
229
|
acknowledged: false,
|
|
230
230
|
active: true,
|
|
231
|
-
type: AlertType.
|
|
231
|
+
type: AlertType.LevelLow,
|
|
232
232
|
time: new Date('2024-01-15T14:25:00Z'),
|
|
233
233
|
},
|
|
234
234
|
{
|
|
235
|
-
id: '
|
|
235
|
+
id: 'level-5',
|
|
236
236
|
tagId: 'DIAG-05',
|
|
237
237
|
source: 'Network',
|
|
238
238
|
text: 'Redundant link diagnostic message',
|
|
239
239
|
acknowledged: false,
|
|
240
240
|
active: true,
|
|
241
|
-
type: AlertType.
|
|
241
|
+
type: AlertType.LevelDiagnostic,
|
|
242
242
|
time: new Date('2024-01-15T14:20:00Z'),
|
|
243
243
|
},
|
|
244
244
|
],
|
|
@@ -92,31 +92,31 @@
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
&.type-caution,
|
|
95
|
-
&.type-
|
|
95
|
+
&.type-level-low {
|
|
96
96
|
background-color: var(--alert-caution-color);
|
|
97
97
|
border-color: var(--alert-caution-outline-color);
|
|
98
98
|
color: var(--on-caution-color);
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
&.type-
|
|
101
|
+
&.type-level-critical {
|
|
102
102
|
background-color: var(--critical-enabled-background-color);
|
|
103
103
|
border-color: var(--critical-enabled-border-color);
|
|
104
104
|
color: var(--on-critical-color);
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
&.type-
|
|
107
|
+
&.type-level-high {
|
|
108
108
|
background-color: var(--alert-alarm-color);
|
|
109
109
|
border-color: var(--alert-alarm-outline-color);
|
|
110
110
|
color: var(--on-alarm-color);
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
&.type-
|
|
113
|
+
&.type-level-medium {
|
|
114
114
|
background-color: var(--alert-warning-color);
|
|
115
115
|
border-color: var(--alert-warning-outline-color);
|
|
116
116
|
color: var(--on-warning-color);
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
&.type-
|
|
119
|
+
&.type-level-diagnostic {
|
|
120
120
|
background-color: var(--notification-enabled-background-color);
|
|
121
121
|
border-color: var(--notification-enabled-border-color);
|
|
122
122
|
color: var(--on-notification-active-color);
|
|
@@ -173,31 +173,31 @@
|
|
|
173
173
|
background: none;
|
|
174
174
|
}
|
|
175
175
|
.icon.type-caution,
|
|
176
|
-
.icon.type-
|
|
176
|
+
.icon.type-level-low {
|
|
177
177
|
color: unset;
|
|
178
178
|
border-color: var(--alert-caution-outline-color);
|
|
179
179
|
background: none;
|
|
180
180
|
}
|
|
181
181
|
|
|
182
|
-
.icon.type-
|
|
182
|
+
.icon.type-level-critical {
|
|
183
183
|
color: unset;
|
|
184
184
|
border-color: var(--critical-enabled-border-color);
|
|
185
185
|
background: none;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
-
.icon.type-
|
|
188
|
+
.icon.type-level-high {
|
|
189
189
|
color: unset;
|
|
190
190
|
border-color: var(--alert-alarm-outline-color);
|
|
191
191
|
background: none;
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
.icon.type-
|
|
194
|
+
.icon.type-level-medium {
|
|
195
195
|
color: unset;
|
|
196
196
|
border-color: var(--alert-warning-outline-color);
|
|
197
197
|
background: none;
|
|
198
198
|
}
|
|
199
199
|
|
|
200
|
-
.icon.type-
|
|
200
|
+
.icon.type-level-diagnostic {
|
|
201
201
|
color: unset;
|
|
202
202
|
border-color: var(--notification-enabled-border-color);
|
|
203
203
|
background: none;
|
|
@@ -199,8 +199,8 @@ export const Caution: Story = {
|
|
|
199
199
|
},
|
|
200
200
|
};
|
|
201
201
|
|
|
202
|
-
export const
|
|
203
|
-
args: {type: BadgeType.
|
|
202
|
+
export const LevelCritical: Story = {
|
|
203
|
+
args: {type: BadgeType.levelCritical, showIcon: true},
|
|
204
204
|
render(args) {
|
|
205
205
|
return html`<obc-badge
|
|
206
206
|
number=${args.number}
|
|
@@ -214,8 +214,8 @@ export const IsaCritical: Story = {
|
|
|
214
214
|
},
|
|
215
215
|
};
|
|
216
216
|
|
|
217
|
-
export const
|
|
218
|
-
args: {type: BadgeType.
|
|
217
|
+
export const LevelHigh: Story = {
|
|
218
|
+
args: {type: BadgeType.levelHigh, showIcon: true},
|
|
219
219
|
render(args) {
|
|
220
220
|
return html`<obc-badge
|
|
221
221
|
number=${args.number}
|
|
@@ -229,8 +229,8 @@ export const IsaHigh: Story = {
|
|
|
229
229
|
},
|
|
230
230
|
};
|
|
231
231
|
|
|
232
|
-
export const
|
|
233
|
-
args: {type: BadgeType.
|
|
232
|
+
export const LevelMedium: Story = {
|
|
233
|
+
args: {type: BadgeType.levelMedium, showIcon: true},
|
|
234
234
|
render(args) {
|
|
235
235
|
return html`<obc-badge
|
|
236
236
|
number=${args.number}
|
|
@@ -244,8 +244,8 @@ export const IsaMedium: Story = {
|
|
|
244
244
|
},
|
|
245
245
|
};
|
|
246
246
|
|
|
247
|
-
export const
|
|
248
|
-
args: {type: BadgeType.
|
|
247
|
+
export const LevelLow: Story = {
|
|
248
|
+
args: {type: BadgeType.levelLow, showIcon: true},
|
|
249
249
|
render(args) {
|
|
250
250
|
return html`<obc-badge
|
|
251
251
|
number=${args.number}
|
|
@@ -259,8 +259,8 @@ export const IsaLow: Story = {
|
|
|
259
259
|
},
|
|
260
260
|
};
|
|
261
261
|
|
|
262
|
-
export const
|
|
263
|
-
args: {type: BadgeType.
|
|
262
|
+
export const LevelDiagnostic: Story = {
|
|
263
|
+
args: {type: BadgeType.levelDiagnostic, showIcon: true},
|
|
264
264
|
render(args) {
|
|
265
265
|
return html`<obc-badge
|
|
266
266
|
number=${args.number}
|
|
@@ -25,11 +25,11 @@ export enum BadgeSize {
|
|
|
25
25
|
* - `alarm`: Indicates a critical or urgent state.
|
|
26
26
|
* - `warning`: Indicates a warning or cautionary state.
|
|
27
27
|
* - `caution`: Indicates a less severe caution.
|
|
28
|
-
* - `
|
|
29
|
-
* - `
|
|
30
|
-
* - `
|
|
31
|
-
* - `
|
|
32
|
-
* - `
|
|
28
|
+
* - `level-critical`: level highest-severity state (critical).
|
|
29
|
+
* - `level-high`: level high-severity state (alarm-equivalent styling).
|
|
30
|
+
* - `level-medium`: level medium-severity state (warning-equivalent styling).
|
|
31
|
+
* - `level-low`: level low-severity state (caution-equivalent styling).
|
|
32
|
+
* - `level-diagnostic`: level diagnostic/notification state.
|
|
33
33
|
* - `running`: Indicates an active or running state.
|
|
34
34
|
* - `notification`: Used for general notifications.
|
|
35
35
|
* - `enhance`: Used for enhanced or secondary notifications.
|
|
@@ -42,11 +42,11 @@ export enum BadgeType {
|
|
|
42
42
|
alarm = 'alarm',
|
|
43
43
|
warning = 'warning',
|
|
44
44
|
caution = 'caution',
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
45
|
+
levelCritical = 'level-critical',
|
|
46
|
+
levelHigh = 'level-high',
|
|
47
|
+
levelMedium = 'level-medium',
|
|
48
|
+
levelLow = 'level-low',
|
|
49
|
+
levelDiagnostic = 'level-diagnostic',
|
|
50
50
|
running = 'running',
|
|
51
51
|
notification = 'notification',
|
|
52
52
|
enhance = 'enhance',
|
|
@@ -80,7 +80,7 @@ export enum BadgeVariant {
|
|
|
80
80
|
* - `alarm`: Highlights critical or urgent states.
|
|
81
81
|
* - `warning`: Indicates caution or warning.
|
|
82
82
|
* - `caution`: Used for less severe caution.
|
|
83
|
-
* - `
|
|
83
|
+
* - `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents (critical, alarm, warning, caution, notification).
|
|
84
84
|
* - `running`: Represents active or running states.
|
|
85
85
|
* - `notification`: For general notifications.
|
|
86
86
|
* - `enhance`: For secondary notifications or emphasis.
|
|
@@ -170,7 +170,7 @@ export class ObcBadge extends LitElement {
|
|
|
170
170
|
/**
|
|
171
171
|
* Visual style/type of the badge.
|
|
172
172
|
*
|
|
173
|
-
* Possible values: `regular`, `alarm`, `warning`, `caution`, `
|
|
173
|
+
* Possible values: `regular`, `alarm`, `warning`, `caution`, `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.
|
|
174
174
|
*
|
|
175
175
|
* Defaults to `regular`.
|
|
176
176
|
*/
|
|
@@ -194,7 +194,7 @@ export class ObcBadge extends LitElement {
|
|
|
194
194
|
/**
|
|
195
195
|
* Whether to show an icon in the badge.
|
|
196
196
|
*
|
|
197
|
-
* For built-in types (`alarm`, `warning`, `caution`, the `
|
|
197
|
+
* For built-in types (`alarm`, `warning`, `caution`, the `level-*` severities, and `running`), a contextual icon is shown automatically.
|
|
198
198
|
* For other types, provide a custom icon in the `badge-icon` slot.
|
|
199
199
|
*/
|
|
200
200
|
@property({type: Boolean}) showIcon = false;
|
|
@@ -244,7 +244,7 @@ export class ObcBadge extends LitElement {
|
|
|
244
244
|
/>
|
|
245
245
|
</svg>
|
|
246
246
|
`;
|
|
247
|
-
case BadgeType.
|
|
247
|
+
case BadgeType.levelHigh:
|
|
248
248
|
return html`
|
|
249
249
|
<svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
|
|
250
250
|
<path
|
|
@@ -253,7 +253,7 @@ export class ObcBadge extends LitElement {
|
|
|
253
253
|
/>
|
|
254
254
|
</svg>
|
|
255
255
|
`;
|
|
256
|
-
case BadgeType.
|
|
256
|
+
case BadgeType.levelMedium:
|
|
257
257
|
return html`
|
|
258
258
|
<svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
|
|
259
259
|
<circle
|
|
@@ -267,7 +267,7 @@ export class ObcBadge extends LitElement {
|
|
|
267
267
|
/>
|
|
268
268
|
</svg>
|
|
269
269
|
`;
|
|
270
|
-
case BadgeType.
|
|
270
|
+
case BadgeType.levelLow:
|
|
271
271
|
return html`
|
|
272
272
|
<svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
|
|
273
273
|
<path
|
|
@@ -279,7 +279,7 @@ export class ObcBadge extends LitElement {
|
|
|
279
279
|
/>
|
|
280
280
|
</svg>
|
|
281
281
|
`;
|
|
282
|
-
case BadgeType.
|
|
282
|
+
case BadgeType.levelCritical:
|
|
283
283
|
return html`
|
|
284
284
|
<svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
|
|
285
285
|
<path
|
|
@@ -290,7 +290,7 @@ export class ObcBadge extends LitElement {
|
|
|
290
290
|
/>
|
|
291
291
|
</svg>
|
|
292
292
|
`;
|
|
293
|
-
case BadgeType.
|
|
293
|
+
case BadgeType.levelDiagnostic:
|
|
294
294
|
return html`
|
|
295
295
|
<svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
|
|
296
296
|
<path
|
|
@@ -3,7 +3,7 @@ import {property} from 'lit/decorators.js';
|
|
|
3
3
|
import {customElement} from '../decorator.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
* `<obi-alerts-critical-twotone>` – Two-tone bell icon for the
|
|
6
|
+
* `<obi-alerts-critical-twotone>` – Two-tone bell icon for the level "critical" alert severity.
|
|
7
7
|
*
|
|
8
8
|
* Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and
|
|
9
9
|
* fill can be tinted independently. Used wherever a critical-severity alert needs an
|
|
@@ -3,7 +3,7 @@ import {property} from 'lit/decorators.js';
|
|
|
3
3
|
import {customElement} from '../decorator.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
* `<obi-alerts-diagnostic-twotone>` – Two-tone bell icon for the
|
|
6
|
+
* `<obi-alerts-diagnostic-twotone>` – Two-tone bell icon for the level "diagnostic" alert severity.
|
|
7
7
|
*
|
|
8
8
|
* Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and
|
|
9
9
|
* fill can be tinted independently. Used wherever a diagnostic-severity alert needs an
|
|
@@ -293,13 +293,13 @@ export const Alarm: Story = {
|
|
|
293
293
|
render: (args) => renderComponent(args as ObcReadout),
|
|
294
294
|
};
|
|
295
295
|
|
|
296
|
-
export const
|
|
296
|
+
export const LevelCritical: Story = {
|
|
297
297
|
args: {
|
|
298
298
|
value: 42,
|
|
299
299
|
label: 'RPM',
|
|
300
300
|
unit: 'rpm',
|
|
301
301
|
alert: {
|
|
302
|
-
status: '
|
|
302
|
+
status: 'level-critical',
|
|
303
303
|
mode: 'unacked-active',
|
|
304
304
|
},
|
|
305
305
|
},
|
|
@@ -468,22 +468,22 @@ export const Alarm: Story = {
|
|
|
468
468
|
},
|
|
469
469
|
};
|
|
470
470
|
|
|
471
|
-
export const
|
|
471
|
+
export const LevelCritical: Story = {
|
|
472
472
|
args: {
|
|
473
473
|
value: 123,
|
|
474
474
|
alert: {
|
|
475
|
-
status: AlertType.
|
|
475
|
+
status: AlertType.LevelCritical,
|
|
476
476
|
mode: ObcAlertFrameMode.unackedActive,
|
|
477
477
|
type: ObcAlertFrameType.Regular,
|
|
478
478
|
},
|
|
479
479
|
},
|
|
480
480
|
};
|
|
481
481
|
|
|
482
|
-
export const
|
|
482
|
+
export const LevelLowUnackedRectified: Story = {
|
|
483
483
|
args: {
|
|
484
484
|
value: 123,
|
|
485
485
|
alert: {
|
|
486
|
-
status: AlertType.
|
|
486
|
+
status: AlertType.LevelLow,
|
|
487
487
|
mode: ObcAlertFrameMode.unackedRectified,
|
|
488
488
|
type: ObcAlertFrameType.Regular,
|
|
489
489
|
},
|
package/src/types.ts
CHANGED
|
@@ -9,22 +9,22 @@ export enum AlertType {
|
|
|
9
9
|
Alarm = 'alarm',
|
|
10
10
|
Warning = 'warning',
|
|
11
11
|
Caution = 'caution',
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
LevelCritical = 'level-critical',
|
|
13
|
+
LevelHigh = 'level-high',
|
|
14
|
+
LevelMedium = 'level-medium',
|
|
15
|
+
LevelLow = 'level-low',
|
|
16
|
+
LevelDiagnostic = 'level-diagnostic',
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export const ALERT_SEVERITY_PRIORITY = [
|
|
20
|
-
AlertType.
|
|
20
|
+
AlertType.LevelCritical,
|
|
21
21
|
AlertType.Alarm,
|
|
22
|
-
AlertType.
|
|
22
|
+
AlertType.LevelHigh,
|
|
23
23
|
AlertType.Warning,
|
|
24
|
-
AlertType.
|
|
24
|
+
AlertType.LevelMedium,
|
|
25
25
|
AlertType.Caution,
|
|
26
|
-
AlertType.
|
|
27
|
-
AlertType.
|
|
26
|
+
AlertType.LevelLow,
|
|
27
|
+
AlertType.LevelDiagnostic,
|
|
28
28
|
];
|
|
29
29
|
|
|
30
30
|
export enum AlertCategory {
|