@oicl/openbridge-webcomponents 2.0.0-next.95 → 2.0.0-next.96
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 +14984 -14771
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +44 -21
- package/dist/alert-severity.d.ts +1 -1
- package/dist/alert-severity.d.ts.map +1 -1
- package/dist/alert-severity.js +4 -1
- package/dist/alert-severity.js.map +1 -1
- package/dist/components/alert-button/alert-button.js +1 -1
- package/dist/components/alert-button/alert-button.js.map +1 -1
- package/dist/components/alert-icon/alert-icon.d.ts +30 -7
- package/dist/components/alert-icon/alert-icon.d.ts.map +1 -1
- package/dist/components/alert-icon/alert-icon.js +234 -67
- package/dist/components/alert-icon/alert-icon.js.map +1 -1
- package/dist/components/alert-icon/icons/icon-critical-acknowledged.d.ts +2 -0
- package/dist/components/alert-icon/icons/icon-critical-acknowledged.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-critical-acknowledged.js +17 -0
- package/dist/components/alert-icon/icons/icon-critical-acknowledged.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-critical-rectified.d.ts +3 -0
- package/dist/components/alert-icon/icons/icon-critical-rectified.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-critical-rectified.js +28 -0
- package/dist/components/alert-icon/icons/icon-critical-rectified.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-critical-silenced.d.ts +3 -0
- package/dist/components/alert-icon/icons/icon-critical-silenced.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/{icon-warning-silenced.js → icon-critical-silenced.js} +26 -13
- package/dist/components/alert-icon/icons/icon-critical-silenced.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-critical-unacknowledged.d.ts +3 -0
- package/dist/components/alert-icon/icons/icon-critical-unacknowledged.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-critical-unacknowledged.js +28 -0
- package/dist/components/alert-icon/icons/icon-critical-unacknowledged.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-low-acknowledged.d.ts +2 -0
- package/dist/components/alert-icon/icons/icon-low-acknowledged.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-low-acknowledged.js +11 -0
- package/dist/components/alert-icon/icons/icon-low-acknowledged.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-low-rectified.d.ts +3 -0
- package/dist/components/alert-icon/icons/icon-low-rectified.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-low-rectified.js +16 -0
- package/dist/components/alert-icon/icons/icon-low-rectified.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-low-silenced.d.ts +3 -0
- package/dist/components/alert-icon/icons/icon-low-silenced.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-low-silenced.js +18 -0
- package/dist/components/alert-icon/icons/icon-low-silenced.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-low-unacknowledged.d.ts +3 -0
- package/dist/components/alert-icon/icons/icon-low-unacknowledged.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-low-unacknowledged.js +16 -0
- package/dist/components/alert-icon/icons/icon-low-unacknowledged.js.map +1 -0
- package/dist/pages/alert-detail-page/alert-detail-page.d.ts.map +1 -1
- package/dist/pages/alert-detail-page/alert-detail-page.js +1 -2
- package/dist/pages/alert-detail-page/alert-detail-page.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/alert-icon/icons/icon-alarm-rectified.d.ts +0 -3
- package/dist/components/alert-icon/icons/icon-alarm-rectified.d.ts.map +0 -1
- package/dist/components/alert-icon/icons/icon-alarm-rectified.js +0 -15
- package/dist/components/alert-icon/icons/icon-alarm-rectified.js.map +0 -1
- package/dist/components/alert-icon/icons/icon-alarm-silenced.d.ts +0 -3
- package/dist/components/alert-icon/icons/icon-alarm-silenced.d.ts.map +0 -1
- package/dist/components/alert-icon/icons/icon-alarm-silenced.js +0 -17
- package/dist/components/alert-icon/icons/icon-alarm-silenced.js.map +0 -1
- package/dist/components/alert-icon/icons/icon-alarm-unack.d.ts +0 -3
- package/dist/components/alert-icon/icons/icon-alarm-unack.d.ts.map +0 -1
- package/dist/components/alert-icon/icons/icon-alarm-unack.js +0 -15
- package/dist/components/alert-icon/icons/icon-alarm-unack.js.map +0 -1
- package/dist/components/alert-icon/icons/icon-warning-rectified.d.ts +0 -3
- package/dist/components/alert-icon/icons/icon-warning-rectified.d.ts.map +0 -1
- package/dist/components/alert-icon/icons/icon-warning-rectified.js +0 -15
- package/dist/components/alert-icon/icons/icon-warning-rectified.js.map +0 -1
- package/dist/components/alert-icon/icons/icon-warning-silenced.d.ts +0 -3
- package/dist/components/alert-icon/icons/icon-warning-silenced.d.ts.map +0 -1
- package/dist/components/alert-icon/icons/icon-warning-silenced.js.map +0 -1
- package/dist/components/alert-icon/icons/icon-warning-unack.d.ts +0 -3
- package/dist/components/alert-icon/icons/icon-warning-unack.d.ts.map +0 -1
- package/dist/components/alert-icon/icons/icon-warning-unack.js +0 -15
- package/dist/components/alert-icon/icons/icon-warning-unack.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -41574,17 +41574,25 @@
|
|
|
41574
41574
|
"members": [
|
|
41575
41575
|
{
|
|
41576
41576
|
"kind": "field",
|
|
41577
|
-
"name": "
|
|
41577
|
+
"name": "alertType",
|
|
41578
41578
|
"type": {
|
|
41579
41579
|
"text": "AlertType"
|
|
41580
41580
|
},
|
|
41581
|
+
"attribute": "alertType"
|
|
41582
|
+
},
|
|
41583
|
+
{
|
|
41584
|
+
"kind": "field",
|
|
41585
|
+
"name": "type",
|
|
41586
|
+
"type": {
|
|
41587
|
+
"text": "AlertType | undefined"
|
|
41588
|
+
},
|
|
41581
41589
|
"attribute": "type"
|
|
41582
41590
|
},
|
|
41583
41591
|
{
|
|
41584
41592
|
"kind": "field",
|
|
41585
41593
|
"name": "acknowledged",
|
|
41586
41594
|
"type": {
|
|
41587
|
-
"text": "boolean"
|
|
41595
|
+
"text": "boolean | undefined"
|
|
41588
41596
|
},
|
|
41589
41597
|
"attribute": "acknowledged"
|
|
41590
41598
|
},
|
|
@@ -41592,21 +41600,21 @@
|
|
|
41592
41600
|
"kind": "field",
|
|
41593
41601
|
"name": "active",
|
|
41594
41602
|
"type": {
|
|
41595
|
-
"text": "boolean"
|
|
41603
|
+
"text": "boolean | undefined"
|
|
41596
41604
|
},
|
|
41597
41605
|
"attribute": "active"
|
|
41598
41606
|
},
|
|
41599
41607
|
{
|
|
41600
41608
|
"kind": "field",
|
|
41601
|
-
"name": "
|
|
41609
|
+
"name": "silenced",
|
|
41602
41610
|
"type": {
|
|
41603
|
-
"text": "boolean"
|
|
41611
|
+
"text": "boolean | undefined"
|
|
41604
41612
|
},
|
|
41605
|
-
"attribute": "
|
|
41613
|
+
"attribute": "silenced"
|
|
41606
41614
|
},
|
|
41607
41615
|
{
|
|
41608
41616
|
"kind": "field",
|
|
41609
|
-
"name": "
|
|
41617
|
+
"name": "_effectiveType",
|
|
41610
41618
|
"type": {
|
|
41611
41619
|
"text": "AlertType"
|
|
41612
41620
|
},
|
|
@@ -41615,18 +41623,26 @@
|
|
|
41615
41623
|
},
|
|
41616
41624
|
{
|
|
41617
41625
|
"kind": "field",
|
|
41618
|
-
"name": "
|
|
41626
|
+
"name": "bamType",
|
|
41627
|
+
"type": {
|
|
41628
|
+
"text": "AlertType"
|
|
41629
|
+
},
|
|
41630
|
+
"privacy": "private",
|
|
41619
41631
|
"readonly": true
|
|
41620
41632
|
},
|
|
41621
41633
|
{
|
|
41622
|
-
"kind": "
|
|
41623
|
-
"name": "
|
|
41634
|
+
"kind": "field",
|
|
41635
|
+
"name": "_effectiveState",
|
|
41636
|
+
"type": {
|
|
41637
|
+
"text": "AlertIconState"
|
|
41638
|
+
},
|
|
41624
41639
|
"privacy": "private",
|
|
41625
|
-
"
|
|
41626
|
-
|
|
41627
|
-
|
|
41628
|
-
|
|
41629
|
-
|
|
41640
|
+
"readonly": true
|
|
41641
|
+
},
|
|
41642
|
+
{
|
|
41643
|
+
"kind": "field",
|
|
41644
|
+
"name": "icon",
|
|
41645
|
+
"readonly": true
|
|
41630
41646
|
},
|
|
41631
41647
|
{
|
|
41632
41648
|
"kind": "method",
|
|
@@ -41641,32 +41657,39 @@
|
|
|
41641
41657
|
],
|
|
41642
41658
|
"attributes": [
|
|
41643
41659
|
{
|
|
41644
|
-
"name": "
|
|
41660
|
+
"name": "alertType",
|
|
41645
41661
|
"type": {
|
|
41646
41662
|
"text": "AlertType"
|
|
41647
41663
|
},
|
|
41664
|
+
"fieldName": "alertType"
|
|
41665
|
+
},
|
|
41666
|
+
{
|
|
41667
|
+
"name": "type",
|
|
41668
|
+
"type": {
|
|
41669
|
+
"text": "AlertType | undefined"
|
|
41670
|
+
},
|
|
41648
41671
|
"fieldName": "type"
|
|
41649
41672
|
},
|
|
41650
41673
|
{
|
|
41651
41674
|
"name": "acknowledged",
|
|
41652
41675
|
"type": {
|
|
41653
|
-
"text": "boolean"
|
|
41676
|
+
"text": "boolean | undefined"
|
|
41654
41677
|
},
|
|
41655
41678
|
"fieldName": "acknowledged"
|
|
41656
41679
|
},
|
|
41657
41680
|
{
|
|
41658
41681
|
"name": "active",
|
|
41659
41682
|
"type": {
|
|
41660
|
-
"text": "boolean"
|
|
41683
|
+
"text": "boolean | undefined"
|
|
41661
41684
|
},
|
|
41662
41685
|
"fieldName": "active"
|
|
41663
41686
|
},
|
|
41664
41687
|
{
|
|
41665
|
-
"name": "
|
|
41688
|
+
"name": "silenced",
|
|
41666
41689
|
"type": {
|
|
41667
|
-
"text": "boolean"
|
|
41690
|
+
"text": "boolean | undefined"
|
|
41668
41691
|
},
|
|
41669
|
-
"fieldName": "
|
|
41692
|
+
"fieldName": "silenced"
|
|
41670
41693
|
}
|
|
41671
41694
|
],
|
|
41672
41695
|
"superclass": {
|
package/dist/alert-severity.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ export type AlertColorTokens = {
|
|
|
13
13
|
onActive: string;
|
|
14
14
|
};
|
|
15
15
|
export declare function requiresAcknowledgement(type: AlertType): boolean;
|
|
16
|
-
export declare function supportsBlinking(type: AlertType): boolean;
|
|
16
|
+
export declare function supportsBlinking(type: AlertType, acknowledged: boolean): boolean;
|
|
17
17
|
export declare function getAlertSeverityCssClass(type: AlertType): string;
|
|
18
18
|
export declare function getAlertColorTokens(type: AlertType): AlertColorTokens;
|
|
19
19
|
export declare function getAlertBadgeComponent(type: AlertType): AlertBadgeComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-severity.d.ts","sourceRoot":"","sources":["../src/alert-severity.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAE9D,OAAO,EAAC,uBAAuB,EAAC,CAAC;AAEjC,oBAAY,mBAAmB;IAC7B,KAAK,oBAAoB;IACzB,OAAO,sBAAsB;IAC7B,OAAO,sBAAsB;IAC7B,QAAQ,uBAAuB;IAC/B,UAAU,yBAAyB;CACpC;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAShE;AAED,wBAAgB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"alert-severity.d.ts","sourceRoot":"","sources":["../src/alert-severity.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAE9D,OAAO,EAAC,uBAAuB,EAAC,CAAC;AAEjC,oBAAY,mBAAmB;IAC7B,KAAK,oBAAoB;IACzB,OAAO,sBAAsB;IAC7B,OAAO,sBAAsB;IAC7B,QAAQ,uBAAuB;IAC/B,UAAU,yBAAyB;CACpC;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAShE;AAED,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,OAAO,GACpB,OAAO,CAaT;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAEhE;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,SAAS,GAAG,gBAAgB,CAqCrE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,SAAS,GAAG,mBAAmB,CAiB3E;AAED,oBAAY,qBAAqB;IAC/B,KAAK,6BAA6B;IAClC,OAAO,+BAA+B;IACtC,OAAO,+BAA+B;IACtC,QAAQ,gCAAgC;IACxC,UAAU,kCAAkC;CAC7C;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,SAAS,GACd,qBAAqB,CAiBvB;AAED,oBAAY,cAAc;IACxB,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,GAAG,QAAQ;CACZ;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,SAAS,GAAG,cAAc,CAejE;AAED,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,CAYrE;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAElE;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAM3D"}
|
package/dist/alert-severity.js
CHANGED
|
@@ -18,7 +18,10 @@ function requiresAcknowledgement(type) {
|
|
|
18
18
|
AlertType.LevelLow
|
|
19
19
|
].includes(type);
|
|
20
20
|
}
|
|
21
|
-
function supportsBlinking(type) {
|
|
21
|
+
function supportsBlinking(type, acknowledged) {
|
|
22
|
+
if (acknowledged) {
|
|
23
|
+
return false;
|
|
24
|
+
}
|
|
22
25
|
return [
|
|
23
26
|
AlertType.Alarm,
|
|
24
27
|
AlertType.Warning,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-severity.js","sources":["../src/alert-severity.ts"],"sourcesContent":["/**\n * `alert-severity` – Pure helper module mapping alert severities to their\n * visual, behavioral, and acknowledgement semantics.\n *\n * Centralizes the per-`AlertType` decisions shared across alert-rendering\n * components (badges, twotone icons, frames, lists) so that severity behavior\n * stays consistent everywhere. Supports both the legacy severities\n * (`alarm`, `warning`, `caution`) and the level severities\n * (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`),\n * collapsing the level set onto the legacy visual/blink treatments where they\n * share styling.\n *\n * Features:\n * - Color tokens: `getAlertColorTokens` returns background/border/on-active\n * CSS custom properties per severity.\n * - Component selectors: `getAlertBadgeComponent` and\n * `getAlertTwotoneComponent` resolve the badge/icon element tag for a\n * severity.\n * - Blinking: `supportsBlinking` reports whether a severity blinks,\n * `getAlertBlinkMode` resolves its blink mode, and\n * `getBamAlertTypeForBlinking` maps level severities onto the legacy type used\n * by the bridge alert management (BAM) blink machinery.\n * - Acknowledgement & filtering: `requiresAcknowledgement` reports whether a\n * severity needs an ACK action, `excludedFromUnackedFilter` reports whether\n * it is hidden from the \"unacked\" view, and `usesAlarmNoAckIcon` selects the\n * alarm-style no-ack icon.\n * - Priority: re-exports `ALERT_SEVERITY_PRIORITY`, the ordered severity list\n * (most → least severe) used to sort alerts.\n *\n * Usage:\n * ```ts\n * import {\n * getAlertColorTokens,\n * requiresAcknowledgement,\n * ALERT_SEVERITY_PRIORITY,\n * } from './alert-severity.js';\n * import {AlertType} from './types.js';\n *\n * const tokens = getAlertColorTokens(AlertType.LevelHigh);\n * const needsAck = requiresAcknowledgement(AlertType.LevelLow); // true\n * alerts.sort(\n * (a, b) =>\n * ALERT_SEVERITY_PRIORITY.indexOf(a.type) -\n * ALERT_SEVERITY_PRIORITY.indexOf(b.type)\n * );\n * ```\n */\nimport {AlertType, ALERT_SEVERITY_PRIORITY} from './types.js';\n\nexport {ALERT_SEVERITY_PRIORITY};\n\nexport enum AlertBadgeComponent {\n Alarm = 'obi-alarm-badge',\n Warning = 'obi-warning-badge',\n Caution = 'obi-caution-badge',\n Critical = 'obi-critical-badge',\n Diagnostic = 'obi-diagnostic-badge',\n}\n\nexport type AlertColorTokens = {\n bg: string;\n border: string;\n onActive: string;\n};\n\nexport function requiresAcknowledgement(type: AlertType): boolean {\n return [\n AlertType.Alarm,\n AlertType.Warning,\n AlertType.LevelCritical,\n AlertType.LevelHigh,\n AlertType.LevelMedium,\n AlertType.LevelLow,\n ].includes(type);\n}\n\nexport function supportsBlinking(type: AlertType): boolean {\n return [\n AlertType.Alarm,\n AlertType.Warning,\n AlertType.LevelCritical,\n AlertType.LevelHigh,\n AlertType.LevelMedium,\n AlertType.LevelLow,\n ].includes(type);\n}\n\nexport function getAlertSeverityCssClass(type: AlertType): string {\n return type;\n}\n\nexport function getAlertColorTokens(type: AlertType): AlertColorTokens {\n switch (type) {\n case AlertType.LevelCritical:\n return {\n bg: 'var(--critical-enabled-background-color)',\n border: 'var(--critical-enabled-border-color)',\n onActive: 'var(--on-critical-active-color)',\n };\n case AlertType.Warning:\n case AlertType.LevelMedium:\n return {\n bg: 'var(--alert-warning-color)',\n border: 'var(--alert-warning-outline-color)',\n onActive: 'var(--on-warning-active-color)',\n };\n case AlertType.Caution:\n case AlertType.LevelLow:\n return {\n bg: 'var(--alert-caution-color)',\n border: 'var(--alert-caution-outline-color)',\n onActive: 'var(--on-caution-active-color)',\n };\n case AlertType.LevelDiagnostic:\n return {\n bg: 'var(--notification-enabled-background-color)',\n border: 'var(--notification-enabled-border-color)',\n onActive: 'var(--on-notification-active-color)',\n };\n case AlertType.Alarm:\n case AlertType.LevelHigh:\n default:\n return {\n bg: 'var(--alert-alarm-color)',\n border: 'var(--alert-alarm-outline-color)',\n onActive: 'var(--on-alarm-active-color)',\n };\n }\n}\n\nexport function getAlertBadgeComponent(type: AlertType): AlertBadgeComponent {\n switch (type) {\n case AlertType.LevelCritical:\n return AlertBadgeComponent.Critical;\n case AlertType.Warning:\n case AlertType.LevelMedium:\n return AlertBadgeComponent.Warning;\n case AlertType.Caution:\n case AlertType.LevelLow:\n return AlertBadgeComponent.Caution;\n case AlertType.LevelDiagnostic:\n return AlertBadgeComponent.Diagnostic;\n case AlertType.Alarm:\n case AlertType.LevelHigh:\n default:\n return AlertBadgeComponent.Alarm;\n }\n}\n\nexport enum AlertTwotoneComponent {\n Alarm = 'obi-alerts-alarm-twotone',\n Warning = 'obi-alerts-warning-twotone',\n Caution = 'obi-alerts-caution-twotone',\n Critical = 'obi-alerts-critical-twotone',\n Diagnostic = 'obi-alerts-diagnostic-twotone',\n}\n\nexport function getAlertTwotoneComponent(\n type: AlertType\n): AlertTwotoneComponent {\n switch (type) {\n case AlertType.LevelCritical:\n return AlertTwotoneComponent.Critical;\n case AlertType.LevelDiagnostic:\n return AlertTwotoneComponent.Diagnostic;\n case AlertType.Warning:\n case AlertType.LevelMedium:\n return AlertTwotoneComponent.Warning;\n case AlertType.Caution:\n case AlertType.LevelLow:\n return AlertTwotoneComponent.Caution;\n case AlertType.Alarm:\n case AlertType.LevelHigh:\n default:\n return AlertTwotoneComponent.Alarm;\n }\n}\n\nexport enum AlertBlinkMode {\n Critical = 'critical',\n Alarm = 'alarm',\n Warning = 'warning',\n Low = 'low',\n}\n\nexport function getAlertBlinkMode(type: AlertType): AlertBlinkMode {\n switch (type) {\n case AlertType.LevelCritical:\n return AlertBlinkMode.Critical;\n case AlertType.Warning:\n case AlertType.LevelMedium:\n return AlertBlinkMode.Warning;\n case AlertType.Caution:\n case AlertType.LevelLow:\n return AlertBlinkMode.Low;\n case AlertType.Alarm:\n case AlertType.LevelHigh:\n default:\n return AlertBlinkMode.Alarm;\n }\n}\n\nexport function getBamAlertTypeForBlinking(type: AlertType): AlertType {\n switch (type) {\n case AlertType.LevelCritical:\n case AlertType.LevelHigh:\n return AlertType.Alarm;\n case AlertType.LevelMedium:\n return AlertType.Warning;\n case AlertType.LevelLow:\n return AlertType.Caution;\n default:\n return type;\n }\n}\n\nexport function excludedFromUnackedFilter(type: AlertType): boolean {\n return [AlertType.Caution, AlertType.LevelDiagnostic].includes(type);\n}\n\nexport function usesAlarmNoAckIcon(type: AlertType): boolean {\n return [\n AlertType.Alarm,\n AlertType.LevelCritical,\n AlertType.LevelHigh,\n ].includes(type);\n}\n"],"names":["AlertBadgeComponent","AlertTwotoneComponent","AlertBlinkMode"],"mappings":";;AAmDO,IAAK,wCAAAA,yBAAL;AACLA,uBAAA,OAAA,IAAQ;AACRA,uBAAA,SAAA,IAAU;AACVA,uBAAA,SAAA,IAAU;AACVA,uBAAA,UAAA,IAAW;AACXA,uBAAA,YAAA,IAAa;AALH,SAAAA;AAAA,GAAA,uBAAA,CAAA,CAAA;AAcL,SAAS,wBAAwB,MAA0B;AAChE,SAAO;AAAA,IACL,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,EAAA,EACV,SAAS,IAAI;AACjB;AAEO,SAAS,
|
|
1
|
+
{"version":3,"file":"alert-severity.js","sources":["../src/alert-severity.ts"],"sourcesContent":["/**\n * `alert-severity` – Pure helper module mapping alert severities to their\n * visual, behavioral, and acknowledgement semantics.\n *\n * Centralizes the per-`AlertType` decisions shared across alert-rendering\n * components (badges, twotone icons, frames, lists) so that severity behavior\n * stays consistent everywhere. Supports both the legacy severities\n * (`alarm`, `warning`, `caution`) and the level severities\n * (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`),\n * collapsing the level set onto the legacy visual/blink treatments where they\n * share styling.\n *\n * Features:\n * - Color tokens: `getAlertColorTokens` returns background/border/on-active\n * CSS custom properties per severity.\n * - Component selectors: `getAlertBadgeComponent` and\n * `getAlertTwotoneComponent` resolve the badge/icon element tag for a\n * severity.\n * - Blinking: `supportsBlinking` reports whether a severity blinks,\n * `getAlertBlinkMode` resolves its blink mode, and\n * `getBamAlertTypeForBlinking` maps level severities onto the legacy type used\n * by the bridge alert management (BAM) blink machinery.\n * - Acknowledgement & filtering: `requiresAcknowledgement` reports whether a\n * severity needs an ACK action, `excludedFromUnackedFilter` reports whether\n * it is hidden from the \"unacked\" view, and `usesAlarmNoAckIcon` selects the\n * alarm-style no-ack icon.\n * - Priority: re-exports `ALERT_SEVERITY_PRIORITY`, the ordered severity list\n * (most → least severe) used to sort alerts.\n *\n * Usage:\n * ```ts\n * import {\n * getAlertColorTokens,\n * requiresAcknowledgement,\n * ALERT_SEVERITY_PRIORITY,\n * } from './alert-severity.js';\n * import {AlertType} from './types.js';\n *\n * const tokens = getAlertColorTokens(AlertType.LevelHigh);\n * const needsAck = requiresAcknowledgement(AlertType.LevelLow); // true\n * alerts.sort(\n * (a, b) =>\n * ALERT_SEVERITY_PRIORITY.indexOf(a.type) -\n * ALERT_SEVERITY_PRIORITY.indexOf(b.type)\n * );\n * ```\n */\nimport {AlertType, ALERT_SEVERITY_PRIORITY} from './types.js';\n\nexport {ALERT_SEVERITY_PRIORITY};\n\nexport enum AlertBadgeComponent {\n Alarm = 'obi-alarm-badge',\n Warning = 'obi-warning-badge',\n Caution = 'obi-caution-badge',\n Critical = 'obi-critical-badge',\n Diagnostic = 'obi-diagnostic-badge',\n}\n\nexport type AlertColorTokens = {\n bg: string;\n border: string;\n onActive: string;\n};\n\nexport function requiresAcknowledgement(type: AlertType): boolean {\n return [\n AlertType.Alarm,\n AlertType.Warning,\n AlertType.LevelCritical,\n AlertType.LevelHigh,\n AlertType.LevelMedium,\n AlertType.LevelLow,\n ].includes(type);\n}\n\nexport function supportsBlinking(\n type: AlertType,\n acknowledged: boolean\n): boolean {\n if (acknowledged) {\n return false;\n }\n\n return [\n AlertType.Alarm,\n AlertType.Warning,\n AlertType.LevelCritical,\n AlertType.LevelHigh,\n AlertType.LevelMedium,\n AlertType.LevelLow,\n ].includes(type);\n}\n\nexport function getAlertSeverityCssClass(type: AlertType): string {\n return type;\n}\n\nexport function getAlertColorTokens(type: AlertType): AlertColorTokens {\n switch (type) {\n case AlertType.LevelCritical:\n return {\n bg: 'var(--critical-enabled-background-color)',\n border: 'var(--critical-enabled-border-color)',\n onActive: 'var(--on-critical-active-color)',\n };\n case AlertType.Warning:\n case AlertType.LevelMedium:\n return {\n bg: 'var(--alert-warning-color)',\n border: 'var(--alert-warning-outline-color)',\n onActive: 'var(--on-warning-active-color)',\n };\n case AlertType.Caution:\n case AlertType.LevelLow:\n return {\n bg: 'var(--alert-caution-color)',\n border: 'var(--alert-caution-outline-color)',\n onActive: 'var(--on-caution-active-color)',\n };\n case AlertType.LevelDiagnostic:\n return {\n bg: 'var(--notification-enabled-background-color)',\n border: 'var(--notification-enabled-border-color)',\n onActive: 'var(--on-notification-active-color)',\n };\n case AlertType.Alarm:\n case AlertType.LevelHigh:\n default:\n return {\n bg: 'var(--alert-alarm-color)',\n border: 'var(--alert-alarm-outline-color)',\n onActive: 'var(--on-alarm-active-color)',\n };\n }\n}\n\nexport function getAlertBadgeComponent(type: AlertType): AlertBadgeComponent {\n switch (type) {\n case AlertType.LevelCritical:\n return AlertBadgeComponent.Critical;\n case AlertType.Warning:\n case AlertType.LevelMedium:\n return AlertBadgeComponent.Warning;\n case AlertType.Caution:\n case AlertType.LevelLow:\n return AlertBadgeComponent.Caution;\n case AlertType.LevelDiagnostic:\n return AlertBadgeComponent.Diagnostic;\n case AlertType.Alarm:\n case AlertType.LevelHigh:\n default:\n return AlertBadgeComponent.Alarm;\n }\n}\n\nexport enum AlertTwotoneComponent {\n Alarm = 'obi-alerts-alarm-twotone',\n Warning = 'obi-alerts-warning-twotone',\n Caution = 'obi-alerts-caution-twotone',\n Critical = 'obi-alerts-critical-twotone',\n Diagnostic = 'obi-alerts-diagnostic-twotone',\n}\n\nexport function getAlertTwotoneComponent(\n type: AlertType\n): AlertTwotoneComponent {\n switch (type) {\n case AlertType.LevelCritical:\n return AlertTwotoneComponent.Critical;\n case AlertType.LevelDiagnostic:\n return AlertTwotoneComponent.Diagnostic;\n case AlertType.Warning:\n case AlertType.LevelMedium:\n return AlertTwotoneComponent.Warning;\n case AlertType.Caution:\n case AlertType.LevelLow:\n return AlertTwotoneComponent.Caution;\n case AlertType.Alarm:\n case AlertType.LevelHigh:\n default:\n return AlertTwotoneComponent.Alarm;\n }\n}\n\nexport enum AlertBlinkMode {\n Critical = 'critical',\n Alarm = 'alarm',\n Warning = 'warning',\n Low = 'low',\n}\n\nexport function getAlertBlinkMode(type: AlertType): AlertBlinkMode {\n switch (type) {\n case AlertType.LevelCritical:\n return AlertBlinkMode.Critical;\n case AlertType.Warning:\n case AlertType.LevelMedium:\n return AlertBlinkMode.Warning;\n case AlertType.Caution:\n case AlertType.LevelLow:\n return AlertBlinkMode.Low;\n case AlertType.Alarm:\n case AlertType.LevelHigh:\n default:\n return AlertBlinkMode.Alarm;\n }\n}\n\nexport function getBamAlertTypeForBlinking(type: AlertType): AlertType {\n switch (type) {\n case AlertType.LevelCritical:\n case AlertType.LevelHigh:\n return AlertType.Alarm;\n case AlertType.LevelMedium:\n return AlertType.Warning;\n case AlertType.LevelLow:\n return AlertType.Caution;\n default:\n return type;\n }\n}\n\nexport function excludedFromUnackedFilter(type: AlertType): boolean {\n return [AlertType.Caution, AlertType.LevelDiagnostic].includes(type);\n}\n\nexport function usesAlarmNoAckIcon(type: AlertType): boolean {\n return [\n AlertType.Alarm,\n AlertType.LevelCritical,\n AlertType.LevelHigh,\n ].includes(type);\n}\n"],"names":["AlertBadgeComponent","AlertTwotoneComponent","AlertBlinkMode"],"mappings":"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"}
|
|
@@ -118,7 +118,7 @@ let ObcAlertButton = class extends LitElement {
|
|
|
118
118
|
render() {
|
|
119
119
|
const hasAlerts = this.nAlerts > 0;
|
|
120
120
|
const showCounter = this.counter && hasAlerts && this.activeType !== "flat";
|
|
121
|
-
const showBlinking = this.blinking && hasAlerts && this.alertType !== void 0 && supportsBlinking(this.alertType);
|
|
121
|
+
const showBlinking = this.blinking && hasAlerts && this.alertType !== void 0 && supportsBlinking(this.alertType, false);
|
|
122
122
|
return html`
|
|
123
123
|
<div
|
|
124
124
|
class=${classMap({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-button.js","sources":["../../../src/components/alert-button/alert-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './alert-button.css?inline';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-active.js';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-notification-advice.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alerts-alarm-twotone.js';\nimport '../../icons/icon-alerts-warning-twotone.js';\nimport '../../icons/icon-alerts-caution-twotone.js';\nimport '../../manual-icon/icon-alerts-critical-twotone.js';\nimport '../../manual-icon/icon-alerts-diagnostic-twotone.js';\nimport {AlertType} from '../../types.js';\nimport {\n getAlertTwotoneComponent,\n AlertTwotoneComponent,\n supportsBlinking,\n} from '../../alert-severity.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * `ObcAlertButtonType` – Enum for alert button visual and behavioral variants.\n *\n * - `flat`: Minimal, icon-only button for compact spaces.\n * - `normal`: Standard button with icon and optional counter.\n * - `enhanced`: Emphasized button with additional styling for high-priority alerts.\n */\nexport enum ObcAlertButtonType {\n Flat = 'flat',\n Normal = 'normal',\n Enhanced = 'enhanced',\n}\n\n/**\n * `<obc-alert-button>` – A compact, icon-based button for displaying alert or notification status and count.\n *\n * This component provides a visual indicator for active alerts or notifications, supporting different alert types (such as alarm, warning, or caution) and an optional counter badge. It can also include a secondary \"silence\" action button for muting alerts, adapting its layout responsively for different screen widths.\n *\n * Appears in toolbars or notification areas to give users a quick overview of alert status and provide direct access to alert-related actions.\n *\n * ## Features\n *\n * - **Variants:**\n * - **Flat:** Minimal, icon-only button for space-constrained layouts.\n * - **Normal:** Standard button with icon and optional alert counter.\n * - **Enhanced:** Visually prominent button for high-priority alerts, with accent styling.\n * - **Alert Types:** Supports `alarm`, `warning`, `caution`, or no alert (idle). Icon and color adapt to the alert type.\n * - **Alert Counter:** Optional badge displays the number of active alerts (except in flat mode).\n * - **Silence Button:** Optional secondary button to mute or silence alerts, shown when enabled and at sufficient width.\n * - **Blinking Animation:** Can animate (blink) to draw attention to active alerts (except for caution type).\n * - **Responsive Layout:** Automatically switches to flat mode below a configurable width, and hides the silence button below another configurable width.\n * - **Large Size Option:** Increases button height and padding for touch-friendly or prominent use.\n *\n * ## Usage Guidelines\n *\n * Use `<obc-alert-button>` to provide a persistent, easily accessible indicator of alert or notification status. Ideal for toolbars, headers, or notification panels where users need to be aware of active alerts and may need to silence them quickly.\n *\n * - Use the counter to show the number of active alerts when relevant.\n * - Use the silence button to provide a quick mute action, but only when space allows.\n * - Choose the variant (`flat`, `normal`, `enhanced`) based on available space and the importance of the alert.\n * - The blinking feature should be reserved for urgent or high-priority alerts to avoid unnecessary distraction.\n *\n * **TODO(designer):** Confirm if there are recommended default behaviors for auto-blinking, and if there are any design constraints for when to use each variant.\n *\n * ## Properties\n *\n * - `nAlerts` (number): Number of active alerts to display in the counter badge.\n * - `alertType` (`AlertType`): Type of alert (`alarm`, `warning`, `caution`, or undefined for idle).\n * - `type` (`ObcAlertButtonType`): Visual variant of the button (`flat`, `normal`, `enhanced`). Default is `normal`.\n * - `counter` (boolean): Whether to show the alert counter badge (not available in flat mode).\n * - `showSilenceButton` (boolean): Whether to display the silence button (hidden in flat mode or below min breakpoint).\n * - `silenceButtonDisabled` (boolean): Disables the silence button when true.\n * - `flatMaxBreakpointPx` (number): Maximum width (in px) for normal/enhanced mode; below this, switches to flat mode.\n * - `silenceButtonMinBreakpointPx` (number): Minimum width (in px) to show the silence button; below this, it is hidden.\n * - `blinking` (boolean): Enables blinking animation for active alerts (not for caution type).\n * - `large` (boolean): Increases button size for prominent or touch-friendly use.\n *\n * ## Events\n *\n * - `click-alert` – Fired when the main alert button is clicked.\n * - `click-silence` – Fired when the silence button is clicked.\n *\n * ## Best Practices & Constraints\n *\n * - Only show the counter when there are active alerts and the button is not in flat mode.\n * - The silence button is only visible if enabled, the width is above the minimum breakpoint, and the button is not flat.\n * - Blinking should be used sparingly to avoid overwhelming the user.\n * - Use the large variant for touch interfaces or when the button needs to stand out.\n *\n * ## Example\n *\n * ```html\n * <obc-alert-button\n * nAlerts=\"3\"\n * alertType=\"alarm\"\n * type=\"enhanced\"\n * counter\n * showSilenceButton\n * blinking\n * large\n * flatMaxBreakpointPx=\"600\"\n * silenceButtonMinBreakpointPx=\"600\"\n * ></obc-alert-button>\n * ```\n *\n * In this example, the button shows an alarm icon, a counter badge with \"3\", is styled as enhanced, blinks to indicate urgency, and includes a silence button if the width allows.\n *\n * @slot - No content slots. All content is provided via properties.\n * @fires click-alert {CustomEvent<void>} Fired when the main alert button is clicked.\n * @fires click-silence {CustomEvent<void>} Fired when the silence button is clicked.\n * @stable\n */\n@customElement('obc-alert-button')\nexport class ObcAlertButton extends LitElement {\n /**\n * Number of active alerts to display in the counter badge.\n *\n * If set to 0, the button appears in the idle state.\n */\n @property({type: Number}) nAlerts = 0;\n\n /**\n * Type of alert to display.\n *\n * Determines the icon and color scheme. Can be `alarm`, `warning`, `caution`, or undefined for idle state.\n */\n @property({type: String}) alertType?: AlertType;\n\n /**\n * Visual variant of the button.\n *\n * - `flat`: Minimal, icon-only button for compact layouts.\n * - `normal`: Standard button with icon and optional counter (default).\n * - `enhanced`: Emphasized button for high-priority alerts.\n */\n @property({type: String}) type = ObcAlertButtonType.Normal;\n\n /**\n * Increases button size for touch-friendly or prominent use.\n *\n * Adds extra height and padding.\n */\n @property({type: Boolean}) large = false;\n\n /**\n * Whether to display the silence button.\n *\n * The silence button is only shown if this is true, the width is above `silenceButtonMinBreakpointPx`, and the button is not in flat mode.\n */\n @property({type: Boolean}) showSilenceButton = false;\n\n /**\n * Disables the silence button when true.\n *\n * @availableWhen showSilenceButton==true\n */\n @property({type: Boolean}) silenceButtonDisabled = false;\n\n /**\n * Whether to show the alert counter badge.\n *\n * Only shown when there are active alerts and the button is not in flat mode.\n */\n @property({type: Boolean}) counter = false;\n\n /**\n * Enables blinking animation for active alerts.\n *\n * Blinking is only shown for alarm and warning types, not for caution.\n */\n @property({type: Boolean}) blinking = false;\n\n /**\n * Maximum width (in px) for normal/enhanced mode.\n *\n * If the available width is less than this value, the button switches to flat mode.\n * Only applies when `type` is set to `normal` or `enhanced`.\n *\n * @availableWhen type!=flat\n */\n @property({type: Number}) flatMaxBreakpointPx = 0;\n\n /**\n * Minimum width (in px) to show the silence button.\n *\n * If the available width is less than this value, the silence button is hidden.\n * Only applies when `showSilenceButton` is true.\n *\n * @availableWhen showSilenceButton==true\n */\n @property({type: Number}) silenceButtonMinBreakpointPx = 0;\n\n @state() private width = window.innerWidth;\n\n private resizeListener = () => {\n this.width = window.innerWidth;\n };\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', this.resizeListener);\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', this.resizeListener);\n super.disconnectedCallback();\n }\n\n private renderAlertTwotoneIcon() {\n const twotone = this.alertType\n ? getAlertTwotoneComponent(this.alertType)\n : AlertTwotoneComponent.Caution;\n switch (twotone) {\n case AlertTwotoneComponent.Critical:\n return html`<obi-alerts-critical-twotone\n useCssColor\n class=\"icon\"\n ></obi-alerts-critical-twotone>`;\n case AlertTwotoneComponent.Diagnostic:\n return html`<obi-alerts-diagnostic-twotone\n useCssColor\n class=\"icon\"\n ></obi-alerts-diagnostic-twotone>`;\n case AlertTwotoneComponent.Warning:\n return html`<obi-alerts-warning-twotone\n useCssColor\n class=\"icon\"\n ></obi-alerts-warning-twotone>`;\n case AlertTwotoneComponent.Caution:\n return html`<obi-alerts-caution-twotone\n useCssColor\n class=\"icon\"\n ></obi-alerts-caution-twotone>`;\n default:\n return html`<obi-alerts-alarm-twotone\n useCssColor\n class=\"icon\"\n ></obi-alerts-alarm-twotone>`;\n }\n }\n\n private alertIcon() {\n const isIdle = this.nAlerts === 0;\n if (isIdle) {\n return html`<obi-alerts class=\"icon\"></obi-alerts>`;\n }\n if (this.type === ObcAlertButtonType.Enhanced) {\n return html`<obi-alerts-active class=\"icon\"></obi-alerts-active>`;\n }\n return this.renderAlertTwotoneIcon();\n }\n\n private alertIconNegative() {\n const useIdle =\n this.nAlerts === 0 || this.type !== ObcAlertButtonType.Enhanced;\n if (useIdle) {\n return html`<obi-alerts class=\"icon\"></obi-alerts>`;\n }\n return this.renderAlertTwotoneIcon();\n }\n\n private get activeType(): ObcAlertButtonType {\n if (this.type === ObcAlertButtonType.Flat) {\n return ObcAlertButtonType.Flat;\n }\n if (this.width < this.flatMaxBreakpointPx) {\n return ObcAlertButtonType.Flat;\n }\n return this.type;\n }\n\n private get showSilenceButtonDynamic(): boolean {\n return (\n this.showSilenceButton &&\n this.width >= this.silenceButtonMinBreakpointPx &&\n this.activeType !== ObcAlertButtonType.Flat\n );\n }\n\n override render() {\n const hasAlerts = this.nAlerts > 0;\n const showCounter =\n this.counter && hasAlerts && this.activeType !== ObcAlertButtonType.Flat;\n const showBlinking =\n this.blinking &&\n hasAlerts &&\n this.alertType !== undefined &&\n supportsBlinking(this.alertType);\n return html`\n <div\n class=${classMap({\n wrapper: true,\n [`alert-type-${this.alertType ?? 'none'}`]: true,\n counter: showCounter,\n 'has-silence': this.showSilenceButtonDynamic,\n [`type-${this.activeType}`]: true,\n blinking: showBlinking,\n large: this.large,\n })}\n >\n <button\n class=\"alert-button\"\n @click=${() => this.dispatchEvent(new CustomEvent('click-alert'))}\n >\n ${showBlinking\n ? html` <div class=\"blink\">\n ${this.alertIconNegative()}\n ${showCounter\n ? html`<div class=\"badge\">${this.nAlerts}</div>`\n : null}\n </div>`\n : nothing}\n <div class=\"visible-wrapper\">\n ${this.alertIcon()}\n ${showCounter\n ? html`<div class=\"badge\">${this.nAlerts}</div>`\n : nothing}\n </div>\n </button>\n\n ${this.showSilenceButtonDynamic\n ? html`\n <button\n class=\"silence-button\"\n @click=${() =>\n this.dispatchEvent(new CustomEvent('click-silence'))}\n ?disabled=${this.silenceButtonDisabled}\n >\n <div class=\"visible-wrapper\">\n <obi-silence-iec class=\"icon\"></obi-silence-iec>\n </div>\n </button>\n `\n : null}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-button': ObcAlertButton;\n }\n}\n"],"names":["ObcAlertButtonType"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"alert-button.js","sources":["../../../src/components/alert-button/alert-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './alert-button.css?inline';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-active.js';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-notification-advice.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alerts-alarm-twotone.js';\nimport '../../icons/icon-alerts-warning-twotone.js';\nimport '../../icons/icon-alerts-caution-twotone.js';\nimport '../../manual-icon/icon-alerts-critical-twotone.js';\nimport '../../manual-icon/icon-alerts-diagnostic-twotone.js';\nimport {AlertType} from '../../types.js';\nimport {\n getAlertTwotoneComponent,\n AlertTwotoneComponent,\n supportsBlinking,\n} from '../../alert-severity.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * `ObcAlertButtonType` – Enum for alert button visual and behavioral variants.\n *\n * - `flat`: Minimal, icon-only button for compact spaces.\n * - `normal`: Standard button with icon and optional counter.\n * - `enhanced`: Emphasized button with additional styling for high-priority alerts.\n */\nexport enum ObcAlertButtonType {\n Flat = 'flat',\n Normal = 'normal',\n Enhanced = 'enhanced',\n}\n\n/**\n * `<obc-alert-button>` – A compact, icon-based button for displaying alert or notification status and count.\n *\n * This component provides a visual indicator for active alerts or notifications, supporting different alert types (such as alarm, warning, or caution) and an optional counter badge. It can also include a secondary \"silence\" action button for muting alerts, adapting its layout responsively for different screen widths.\n *\n * Appears in toolbars or notification areas to give users a quick overview of alert status and provide direct access to alert-related actions.\n *\n * ## Features\n *\n * - **Variants:**\n * - **Flat:** Minimal, icon-only button for space-constrained layouts.\n * - **Normal:** Standard button with icon and optional alert counter.\n * - **Enhanced:** Visually prominent button for high-priority alerts, with accent styling.\n * - **Alert Types:** Supports `alarm`, `warning`, `caution`, or no alert (idle). Icon and color adapt to the alert type.\n * - **Alert Counter:** Optional badge displays the number of active alerts (except in flat mode).\n * - **Silence Button:** Optional secondary button to mute or silence alerts, shown when enabled and at sufficient width.\n * - **Blinking Animation:** Can animate (blink) to draw attention to active alerts (except for caution type).\n * - **Responsive Layout:** Automatically switches to flat mode below a configurable width, and hides the silence button below another configurable width.\n * - **Large Size Option:** Increases button height and padding for touch-friendly or prominent use.\n *\n * ## Usage Guidelines\n *\n * Use `<obc-alert-button>` to provide a persistent, easily accessible indicator of alert or notification status. Ideal for toolbars, headers, or notification panels where users need to be aware of active alerts and may need to silence them quickly.\n *\n * - Use the counter to show the number of active alerts when relevant.\n * - Use the silence button to provide a quick mute action, but only when space allows.\n * - Choose the variant (`flat`, `normal`, `enhanced`) based on available space and the importance of the alert.\n * - The blinking feature should be reserved for urgent or high-priority alerts to avoid unnecessary distraction.\n *\n * **TODO(designer):** Confirm if there are recommended default behaviors for auto-blinking, and if there are any design constraints for when to use each variant.\n *\n * ## Properties\n *\n * - `nAlerts` (number): Number of active alerts to display in the counter badge.\n * - `alertType` (`AlertType`): Type of alert (`alarm`, `warning`, `caution`, or undefined for idle).\n * - `type` (`ObcAlertButtonType`): Visual variant of the button (`flat`, `normal`, `enhanced`). Default is `normal`.\n * - `counter` (boolean): Whether to show the alert counter badge (not available in flat mode).\n * - `showSilenceButton` (boolean): Whether to display the silence button (hidden in flat mode or below min breakpoint).\n * - `silenceButtonDisabled` (boolean): Disables the silence button when true.\n * - `flatMaxBreakpointPx` (number): Maximum width (in px) for normal/enhanced mode; below this, switches to flat mode.\n * - `silenceButtonMinBreakpointPx` (number): Minimum width (in px) to show the silence button; below this, it is hidden.\n * - `blinking` (boolean): Enables blinking animation for active alerts (not for caution type).\n * - `large` (boolean): Increases button size for prominent or touch-friendly use.\n *\n * ## Events\n *\n * - `click-alert` – Fired when the main alert button is clicked.\n * - `click-silence` – Fired when the silence button is clicked.\n *\n * ## Best Practices & Constraints\n *\n * - Only show the counter when there are active alerts and the button is not in flat mode.\n * - The silence button is only visible if enabled, the width is above the minimum breakpoint, and the button is not flat.\n * - Blinking should be used sparingly to avoid overwhelming the user.\n * - Use the large variant for touch interfaces or when the button needs to stand out.\n *\n * ## Example\n *\n * ```html\n * <obc-alert-button\n * nAlerts=\"3\"\n * alertType=\"alarm\"\n * type=\"enhanced\"\n * counter\n * showSilenceButton\n * blinking\n * large\n * flatMaxBreakpointPx=\"600\"\n * silenceButtonMinBreakpointPx=\"600\"\n * ></obc-alert-button>\n * ```\n *\n * In this example, the button shows an alarm icon, a counter badge with \"3\", is styled as enhanced, blinks to indicate urgency, and includes a silence button if the width allows.\n *\n * @slot - No content slots. All content is provided via properties.\n * @fires click-alert {CustomEvent<void>} Fired when the main alert button is clicked.\n * @fires click-silence {CustomEvent<void>} Fired when the silence button is clicked.\n * @stable\n */\n@customElement('obc-alert-button')\nexport class ObcAlertButton extends LitElement {\n /**\n * Number of active alerts to display in the counter badge.\n *\n * If set to 0, the button appears in the idle state.\n */\n @property({type: Number}) nAlerts = 0;\n\n /**\n * Type of alert to display.\n *\n * Determines the icon and color scheme. Can be `alarm`, `warning`, `caution`, or undefined for idle state.\n */\n @property({type: String}) alertType?: AlertType;\n\n /**\n * Visual variant of the button.\n *\n * - `flat`: Minimal, icon-only button for compact layouts.\n * - `normal`: Standard button with icon and optional counter (default).\n * - `enhanced`: Emphasized button for high-priority alerts.\n */\n @property({type: String}) type = ObcAlertButtonType.Normal;\n\n /**\n * Increases button size for touch-friendly or prominent use.\n *\n * Adds extra height and padding.\n */\n @property({type: Boolean}) large = false;\n\n /**\n * Whether to display the silence button.\n *\n * The silence button is only shown if this is true, the width is above `silenceButtonMinBreakpointPx`, and the button is not in flat mode.\n */\n @property({type: Boolean}) showSilenceButton = false;\n\n /**\n * Disables the silence button when true.\n *\n * @availableWhen showSilenceButton==true\n */\n @property({type: Boolean}) silenceButtonDisabled = false;\n\n /**\n * Whether to show the alert counter badge.\n *\n * Only shown when there are active alerts and the button is not in flat mode.\n */\n @property({type: Boolean}) counter = false;\n\n /**\n * Enables blinking animation for active alerts.\n *\n * Blinking is only shown for alarm and warning types, not for caution.\n */\n @property({type: Boolean}) blinking = false;\n\n /**\n * Maximum width (in px) for normal/enhanced mode.\n *\n * If the available width is less than this value, the button switches to flat mode.\n * Only applies when `type` is set to `normal` or `enhanced`.\n *\n * @availableWhen type!=flat\n */\n @property({type: Number}) flatMaxBreakpointPx = 0;\n\n /**\n * Minimum width (in px) to show the silence button.\n *\n * If the available width is less than this value, the silence button is hidden.\n * Only applies when `showSilenceButton` is true.\n *\n * @availableWhen showSilenceButton==true\n */\n @property({type: Number}) silenceButtonMinBreakpointPx = 0;\n\n @state() private width = window.innerWidth;\n\n private resizeListener = () => {\n this.width = window.innerWidth;\n };\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', this.resizeListener);\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', this.resizeListener);\n super.disconnectedCallback();\n }\n\n private renderAlertTwotoneIcon() {\n const twotone = this.alertType\n ? getAlertTwotoneComponent(this.alertType)\n : AlertTwotoneComponent.Caution;\n switch (twotone) {\n case AlertTwotoneComponent.Critical:\n return html`<obi-alerts-critical-twotone\n useCssColor\n class=\"icon\"\n ></obi-alerts-critical-twotone>`;\n case AlertTwotoneComponent.Diagnostic:\n return html`<obi-alerts-diagnostic-twotone\n useCssColor\n class=\"icon\"\n ></obi-alerts-diagnostic-twotone>`;\n case AlertTwotoneComponent.Warning:\n return html`<obi-alerts-warning-twotone\n useCssColor\n class=\"icon\"\n ></obi-alerts-warning-twotone>`;\n case AlertTwotoneComponent.Caution:\n return html`<obi-alerts-caution-twotone\n useCssColor\n class=\"icon\"\n ></obi-alerts-caution-twotone>`;\n default:\n return html`<obi-alerts-alarm-twotone\n useCssColor\n class=\"icon\"\n ></obi-alerts-alarm-twotone>`;\n }\n }\n\n private alertIcon() {\n const isIdle = this.nAlerts === 0;\n if (isIdle) {\n return html`<obi-alerts class=\"icon\"></obi-alerts>`;\n }\n if (this.type === ObcAlertButtonType.Enhanced) {\n return html`<obi-alerts-active class=\"icon\"></obi-alerts-active>`;\n }\n return this.renderAlertTwotoneIcon();\n }\n\n private alertIconNegative() {\n const useIdle =\n this.nAlerts === 0 || this.type !== ObcAlertButtonType.Enhanced;\n if (useIdle) {\n return html`<obi-alerts class=\"icon\"></obi-alerts>`;\n }\n return this.renderAlertTwotoneIcon();\n }\n\n private get activeType(): ObcAlertButtonType {\n if (this.type === ObcAlertButtonType.Flat) {\n return ObcAlertButtonType.Flat;\n }\n if (this.width < this.flatMaxBreakpointPx) {\n return ObcAlertButtonType.Flat;\n }\n return this.type;\n }\n\n private get showSilenceButtonDynamic(): boolean {\n return (\n this.showSilenceButton &&\n this.width >= this.silenceButtonMinBreakpointPx &&\n this.activeType !== ObcAlertButtonType.Flat\n );\n }\n\n override render() {\n const hasAlerts = this.nAlerts > 0;\n const showCounter =\n this.counter && hasAlerts && this.activeType !== ObcAlertButtonType.Flat;\n const showBlinking =\n this.blinking &&\n hasAlerts &&\n this.alertType !== undefined &&\n supportsBlinking(this.alertType, false);\n return html`\n <div\n class=${classMap({\n wrapper: true,\n [`alert-type-${this.alertType ?? 'none'}`]: true,\n counter: showCounter,\n 'has-silence': this.showSilenceButtonDynamic,\n [`type-${this.activeType}`]: true,\n blinking: showBlinking,\n large: this.large,\n })}\n >\n <button\n class=\"alert-button\"\n @click=${() => this.dispatchEvent(new CustomEvent('click-alert'))}\n >\n ${showBlinking\n ? html` <div class=\"blink\">\n ${this.alertIconNegative()}\n ${showCounter\n ? html`<div class=\"badge\">${this.nAlerts}</div>`\n : null}\n </div>`\n : nothing}\n <div class=\"visible-wrapper\">\n ${this.alertIcon()}\n ${showCounter\n ? html`<div class=\"badge\">${this.nAlerts}</div>`\n : nothing}\n </div>\n </button>\n\n ${this.showSilenceButtonDynamic\n ? html`\n <button\n class=\"silence-button\"\n @click=${() =>\n this.dispatchEvent(new CustomEvent('click-silence'))}\n ?disabled=${this.silenceButtonDisabled}\n >\n <div class=\"visible-wrapper\">\n <obi-silence-iec class=\"icon\"></obi-silence-iec>\n </div>\n </button>\n `\n : null}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-button': ObcAlertButton;\n }\n}\n"],"names":["ObcAlertButtonType"],"mappings":"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"}
|
|
@@ -4,6 +4,20 @@ import '../../icons/icon-caution-color-iec.js';
|
|
|
4
4
|
import '../../icons/icon-alarm-badge-outline.js';
|
|
5
5
|
import '../../icons/icon-warning-badge-outline.js';
|
|
6
6
|
import '../../icons/icon-caution-badge-outline.js';
|
|
7
|
+
import '../../icons/icon-alarm-acknowledged-iec.js';
|
|
8
|
+
import '../../icons/icon-warning-acknowledged-iec.js';
|
|
9
|
+
import '../../icons/icon-alarm-rectified-iec.js';
|
|
10
|
+
import '../../icons/icon-warning-rectified-iec.js';
|
|
11
|
+
import '../../icons/icon-alarm-rectified-outlined.js';
|
|
12
|
+
import '../../icons/icon-warning-rectified-outlined.js';
|
|
13
|
+
import '../../icons/icon-alarm-silenced-iec.js';
|
|
14
|
+
import '../../icons/icon-alarm-silenced-outlined.js';
|
|
15
|
+
import '../../icons/icon-warning-silenced-iec.js';
|
|
16
|
+
import '../../icons/icon-warning-silenced-outlined.js';
|
|
17
|
+
import '../../icons/icon-alarm-unacknowledged-iec.js';
|
|
18
|
+
import '../../icons/icon-alarm-acknowledged-outlined.js';
|
|
19
|
+
import '../../icons/icon-warning-unacknowledged-iec.js';
|
|
20
|
+
import '../../icons/icon-warning-unacknowledged-outlined.js';
|
|
7
21
|
import '../alert-frame/critical-badge.js';
|
|
8
22
|
import '../alert-frame/diagnostic-badge.js';
|
|
9
23
|
/**
|
|
@@ -41,18 +55,27 @@ import '../alert-frame/diagnostic-badge.js';
|
|
|
41
55
|
* @stable
|
|
42
56
|
*/
|
|
43
57
|
export declare class ObcAlertIcon extends LitElement {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
58
|
+
alertType: AlertType;
|
|
59
|
+
type?: AlertType;
|
|
60
|
+
/**
|
|
61
|
+
* @availableWhen type in [Alarm, Warning, LevelHigh, LevelMedium, LevelLow]
|
|
62
|
+
*/
|
|
63
|
+
acknowledged?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* @availableWhen type in [Alarm, Warning, LevelHigh, LevelMedium, LevelLow]
|
|
66
|
+
*/
|
|
67
|
+
active?: boolean;
|
|
68
|
+
silenced?: boolean;
|
|
69
|
+
private get _effectiveType();
|
|
50
70
|
private get bamType();
|
|
71
|
+
private get _effectiveState();
|
|
51
72
|
get icon(): {
|
|
73
|
+
a: TemplateResult<1>;
|
|
74
|
+
b: TemplateResult<1>;
|
|
75
|
+
} | {
|
|
52
76
|
a: TemplateResult<2>;
|
|
53
77
|
b: TemplateResult<2>;
|
|
54
78
|
} | null;
|
|
55
|
-
private renderOutlineIcon;
|
|
56
79
|
private renderStaticIcon;
|
|
57
80
|
render(): TemplateResult<1>;
|
|
58
81
|
static styles: import('lit').CSSResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-icon.d.ts","sourceRoot":"","sources":["../../../src/components/alert-icon/alert-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAU,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"alert-icon.d.ts","sourceRoot":"","sources":["../../../src/components/alert-icon/alert-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAU,MAAM,KAAK,CAAC;AAGnE,OAAO,uCAAuC,CAAC;AAE/C,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAMzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,2CAA2C,CAAC;AACnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,8CAA8C,CAAC;AACtD,OAAO,gDAAgD,CAAC;AACxD,OAAO,wCAAwC,CAAC;AAChD,OAAO,6CAA6C,CAAC;AACrD,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,8CAA8C,CAAC;AACtD,OAAO,iDAAiD,CAAC;AACzD,OAAO,gDAAgD,CAAC;AACxD,OAAO,qDAAqD,CAAC;AAE7D,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oCAAoC,CAAC;AAsH5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,YAAa,SAAQ,UAAU;IAChB,SAAS,EAAE,SAAS,CAAmB;IAEvC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC3C;;OAEG;IACwB,YAAY,CAAC,EAAE,OAAO,CAAC;IAClD;;OAEG;IACwB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAE9C,OAAO,KAAK,cAAc,GAKzB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,eAAe,GAW1B;IAED,IAAI,IAAI;;;;;;aA6CP;IAED,OAAO,CAAC,gBAAgB;IAoDf,MAAM;IAyBf,OAAgB,MAAM,0BAyDpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|