@oicl/openbridge-webcomponents 2.0.0-next.57 → 2.0.0-next.59

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.
Files changed (133) hide show
  1. package/bundle/openbridge-webcomponents.bundle.js +6585 -4581
  2. package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
  3. package/custom-elements.json +1047 -83
  4. package/dist/alert-severity.d.ts +38 -0
  5. package/dist/alert-severity.d.ts.map +1 -0
  6. package/dist/alert-severity.js +176 -0
  7. package/dist/alert-severity.js.map +1 -0
  8. package/dist/ar/building-blocks/poi-header/poi-header.css.js +38 -7
  9. package/dist/ar/building-blocks/poi-header/poi-header.css.js.map +1 -1
  10. package/dist/ar/building-blocks/poi-header/poi-header.d.ts +7 -2
  11. package/dist/ar/building-blocks/poi-header/poi-header.d.ts.map +1 -1
  12. package/dist/ar/building-blocks/poi-header/poi-header.js +5 -0
  13. package/dist/ar/building-blocks/poi-header/poi-header.js.map +1 -1
  14. package/dist/ar/poi-button/poi-button.css.js +110 -32
  15. package/dist/ar/poi-button/poi-button.css.js.map +1 -1
  16. package/dist/ar/poi-button/poi-button.d.ts +7 -2
  17. package/dist/ar/poi-button/poi-button.d.ts.map +1 -1
  18. package/dist/ar/poi-button/poi-button.js +15 -0
  19. package/dist/ar/poi-button/poi-button.js.map +1 -1
  20. package/dist/ar/types.d.ts +6 -1
  21. package/dist/ar/types.d.ts.map +1 -1
  22. package/dist/ar/types.js +5 -0
  23. package/dist/ar/types.js.map +1 -1
  24. package/dist/automation/automation-badge/automation-badge.d.ts +9 -1
  25. package/dist/automation/automation-badge/automation-badge.d.ts.map +1 -1
  26. package/dist/automation/automation-badge/automation-badge.js +119 -12
  27. package/dist/automation/automation-badge/automation-badge.js.map +1 -1
  28. package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.d.ts +25 -1
  29. package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.d.ts.map +1 -1
  30. package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.js +7 -2
  31. package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.js.map +1 -1
  32. package/dist/automation/automation-button/abstract-automation-button.d.ts +10 -3
  33. package/dist/automation/automation-button/abstract-automation-button.d.ts.map +1 -1
  34. package/dist/automation/automation-button/abstract-automation-button.js +23 -2
  35. package/dist/automation/automation-button/abstract-automation-button.js.map +1 -1
  36. package/dist/automation/automation-button/automation-button.css.js +9 -4
  37. package/dist/automation/automation-button/automation-button.css.js.map +1 -1
  38. package/dist/automation/automation-button/automation-button.d.ts +4 -2
  39. package/dist/automation/automation-button/automation-button.d.ts.map +1 -1
  40. package/dist/automation/automation-button/automation-button.js +24 -6
  41. package/dist/automation/automation-button/automation-button.js.map +1 -1
  42. package/dist/automation/automation-tank/automation-tank.d.ts +3 -2
  43. package/dist/automation/automation-tank/automation-tank.d.ts.map +1 -1
  44. package/dist/automation/automation-tank/automation-tank.js +13 -2
  45. package/dist/automation/automation-tank/automation-tank.js.map +1 -1
  46. package/dist/building-blocks/instrument-radial/instrument-radial.d.ts +10 -0
  47. package/dist/building-blocks/instrument-radial/instrument-radial.d.ts.map +1 -1
  48. package/dist/building-blocks/instrument-radial/instrument-radial.js +86 -21
  49. package/dist/building-blocks/instrument-radial/instrument-radial.js.map +1 -1
  50. package/dist/components/accordion-card/accordion-card.css.js +34 -0
  51. package/dist/components/accordion-card/accordion-card.css.js.map +1 -1
  52. package/dist/components/accordion-card/accordion-card.d.ts +3 -2
  53. package/dist/components/accordion-card/accordion-card.d.ts.map +1 -1
  54. package/dist/components/accordion-card/accordion-card.js +4 -3
  55. package/dist/components/accordion-card/accordion-card.js.map +1 -1
  56. package/dist/components/alert-button/alert-button.css.js +744 -7
  57. package/dist/components/alert-button/alert-button.css.js.map +1 -1
  58. package/dist/components/alert-button/alert-button.d.ts +3 -1
  59. package/dist/components/alert-button/alert-button.d.ts.map +1 -1
  60. package/dist/components/alert-button/alert-button.js +33 -31
  61. package/dist/components/alert-button/alert-button.js.map +1 -1
  62. package/dist/components/alert-frame/alert-frame.css.js +116 -29
  63. package/dist/components/alert-frame/alert-frame.css.js.map +1 -1
  64. package/dist/components/alert-frame/alert-frame.d.ts +42 -15
  65. package/dist/components/alert-frame/alert-frame.d.ts.map +1 -1
  66. package/dist/components/alert-frame/alert-frame.js +68 -17
  67. package/dist/components/alert-frame/alert-frame.js.map +1 -1
  68. package/dist/components/alert-frame/critical-badge.d.ts +12 -0
  69. package/dist/components/alert-frame/critical-badge.d.ts.map +1 -0
  70. package/dist/components/alert-frame/critical-badge.js +47 -0
  71. package/dist/components/alert-frame/critical-badge.js.map +1 -0
  72. package/dist/components/alert-frame/diagnostic-badge.d.ts +12 -0
  73. package/dist/components/alert-frame/diagnostic-badge.d.ts.map +1 -0
  74. package/dist/components/alert-frame/diagnostic-badge.js +60 -0
  75. package/dist/components/alert-frame/diagnostic-badge.js.map +1 -0
  76. package/dist/components/alert-icon/alert-icon.d.ts +6 -1
  77. package/dist/components/alert-icon/alert-icon.d.ts.map +1 -1
  78. package/dist/components/alert-icon/alert-icon.js +96 -38
  79. package/dist/components/alert-icon/alert-icon.js.map +1 -1
  80. package/dist/components/alert-icon/icons/icon-critical.d.ts +3 -0
  81. package/dist/components/alert-icon/icons/icon-critical.d.ts.map +1 -0
  82. package/dist/components/alert-icon/icons/icon-critical.js +26 -0
  83. package/dist/components/alert-icon/icons/icon-critical.js.map +1 -0
  84. package/dist/components/alert-list-details/alert-list-details.d.ts.map +1 -1
  85. package/dist/components/alert-list-details/alert-list-details.js +6 -7
  86. package/dist/components/alert-list-details/alert-list-details.js.map +1 -1
  87. package/dist/components/badge/badge.css.js +50 -2
  88. package/dist/components/badge/badge.css.js.map +1 -1
  89. package/dist/components/badge/badge.d.ts +13 -2
  90. package/dist/components/badge/badge.d.ts.map +1 -1
  91. package/dist/components/badge/badge.js +54 -0
  92. package/dist/components/badge/badge.js.map +1 -1
  93. package/dist/index.js +2 -1
  94. package/dist/manual-icon/icon-alerts-critical-twotone.d.ts +30 -0
  95. package/dist/manual-icon/icon-alerts-critical-twotone.d.ts.map +1 -0
  96. package/dist/manual-icon/icon-alerts-critical-twotone.js +55 -0
  97. package/dist/manual-icon/icon-alerts-critical-twotone.js.map +1 -0
  98. package/dist/manual-icon/icon-alerts-diagnostic-twotone.d.ts +30 -0
  99. package/dist/manual-icon/icon-alerts-diagnostic-twotone.d.ts.map +1 -0
  100. package/dist/manual-icon/icon-alerts-diagnostic-twotone.js +55 -0
  101. package/dist/manual-icon/icon-alerts-diagnostic-twotone.js.map +1 -0
  102. package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js +99 -0
  103. package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js.map +1 -0
  104. package/dist/navigation-instruments/gauge-radial/gauge-radial.d.ts +42 -7
  105. package/dist/navigation-instruments/gauge-radial/gauge-radial.d.ts.map +1 -1
  106. package/dist/navigation-instruments/gauge-radial/gauge-radial.js +178 -31
  107. package/dist/navigation-instruments/gauge-radial/gauge-radial.js.map +1 -1
  108. package/dist/navigation-instruments/readout/readout.css.js +7 -18
  109. package/dist/navigation-instruments/readout/readout.css.js.map +1 -1
  110. package/dist/navigation-instruments/readout/readout.d.ts +6 -7
  111. package/dist/navigation-instruments/readout/readout.d.ts.map +1 -1
  112. package/dist/navigation-instruments/readout/readout.js +54 -52
  113. package/dist/navigation-instruments/readout/readout.js.map +1 -1
  114. package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js +9 -36
  115. package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js.map +1 -1
  116. package/dist/navigation-instruments/readout-list-item/readout-list-item.d.ts +8 -8
  117. package/dist/navigation-instruments/readout-list-item/readout-list-item.d.ts.map +1 -1
  118. package/dist/navigation-instruments/readout-list-item/readout-list-item.js +49 -42
  119. package/dist/navigation-instruments/readout-list-item/readout-list-item.js.map +1 -1
  120. package/dist/navigation-instruments/watch/tickmark.d.ts +2 -1
  121. package/dist/navigation-instruments/watch/tickmark.d.ts.map +1 -1
  122. package/dist/navigation-instruments/watch/tickmark.js +24 -4
  123. package/dist/navigation-instruments/watch/tickmark.js.map +1 -1
  124. package/dist/navigation-instruments/watch/watch.d.ts +23 -1
  125. package/dist/navigation-instruments/watch/watch.d.ts.map +1 -1
  126. package/dist/navigation-instruments/watch/watch.js +48 -20
  127. package/dist/navigation-instruments/watch/watch.js.map +1 -1
  128. package/dist/openbridge.css +155 -0
  129. package/dist/types.d.ts +7 -1
  130. package/dist/types.d.ts.map +1 -1
  131. package/dist/types.js +18 -7
  132. package/dist/types.js.map +1 -1
  133. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"alert-icon.js","sources":["../../../src/components/alert-icon/alert-icon.ts"],"sourcesContent":["import {LitElement, html, css, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {alarmRectifiedA} from './icons/icon-alarm-rectified.js';\nimport {warningRectifiedA} from './icons/icon-warning-rectified.js';\nimport {alarmSilencedA, alarmSilencedB} from './icons/icon-alarm-silenced.js';\nimport {\n warningSilencedA,\n warningSilencedB,\n} from './icons/icon-warning-silenced.js';\nimport {alarmUnackA, alarmUnackB} from './icons/icon-alarm-unack.js';\nimport {warningUnackA, warningUnackB} from './icons/icon-warning-unack.js';\nimport '../../icons/icon-caution-color-iec.js';\nimport {customElement} from '../../decorator.js';\nimport {AlertType} from '../../types.js';\nimport '../../icons/icon-alarm-badge-outline.js';\nimport '../../icons/icon-warning-badge-outline.js';\nimport '../../icons/icon-caution-badge-outline.js';\n\nenum AlertIconName {\n AlarmSilenced = 'alarm-silenced',\n AlarmUnack = 'alarm-unack',\n AlarmRectified = 'alarm-rectified',\n WarningUnack = 'warning-unack',\n WarningRectified = 'warning-rectified',\n WarningSilenced = 'warning-silenced',\n}\n\nconst mapping = {\n [AlertIconName.AlarmSilenced]: {\n a: alarmSilencedA,\n b: alarmSilencedB,\n },\n [AlertIconName.AlarmUnack]: {\n a: alarmUnackA,\n b: alarmUnackB,\n },\n [AlertIconName.AlarmRectified]: {\n a: alarmRectifiedA,\n b: alarmRectifiedA,\n },\n [AlertIconName.WarningUnack]: {\n a: warningUnackA,\n b: warningUnackB,\n },\n [AlertIconName.WarningRectified]: {\n a: warningRectifiedA,\n b: warningRectifiedA,\n },\n [AlertIconName.WarningSilenced]: {\n a: warningSilencedA,\n b: warningSilencedB,\n },\n};\n/**\n * `obc-alert-icon` – Animated alert icon for signaling alarm and warning states.\n *\n * Displays a specialized icon with a blinking effect to visually indicate alert or warning conditions. The icon type is determined by the `name` property, supporting both alarm and warning variants in different states (such as silenced, unacknowledged, or rectified).\n *\n * Appears in notification areas, alert banners, or status panels to draw attention to active or historical alert conditions. The blinking animation helps highlight urgency or status changes without requiring user interaction.\n *\n * ## Features\n * - **Multiple Icon Types:** Supports all alarm and warning types.\n * - **Blinking Animation:** Uses two SVG layers with alternating opacity to create a blinking effect, visually emphasizing the alert or warning state.\n * - **Adaptive Styling:** Applies different CSS variables for alarm and warning types to allow for distinct visual cues (e.g., color, blink timing).\n * - **Scalable:** Designed to fit any container size; scales with its parent element.\n *\n * ## Usage Guidelines\n * Use `obc-alert-icon` to visually represent the status of alarms or warnings in notification panels, alert lists, or system status areas. The blinking effect is intended to draw user attention to active or recent alert conditions. Select the appropriate `name` value to match the alert state you wish to indicate.\n *\n * **TODO(designer):** Provide guidance on when to use each icon variant (e.g., when to use \"rectified\" vs. \"silenced\"), and any best practices for icon placement or blink timing.\n *\n * ## Properties\n * - `type` (AlertType): The type of alarm to display.\n * - `status` (AlarmStatus): The status of the alarm to display.\n *\n * ## Best Practices\n * - Only use the blinking alert icon for states that require immediate or prominent user attention.\n * - Ensure the icon is sized appropriately for its context (e.g., 32x32px or 64x64px for status panels).\n * - Avoid using multiple blinking icons in close proximity to prevent visual overload.\n *\n * ## Example\n * ```html\n * <obc-alert-icon .alarmType=${alarm.type} .alarmStatus=${alarm.status}></obc-alert-icon>\n * ```\n *\n */\n@customElement('obc-alert-icon')\nexport class ObcAlertIcon extends LitElement {\n @property({type: String}) type!: AlertType;\n @property({type: Boolean}) acknowledged!: boolean;\n @property({type: Boolean}) active!: boolean;\n @property({type: Boolean}) outline!: boolean;\n\n get icon() {\n if (this.type === AlertType.Alarm) {\n if (this.active === false) {\n return mapping[AlertIconName.AlarmRectified];\n } else if (this.acknowledged) {\n return mapping[AlertIconName.AlarmSilenced];\n } else {\n return mapping[AlertIconName.AlarmUnack];\n }\n } else {\n if (this.active === false) {\n return mapping[AlertIconName.WarningRectified];\n } else if (this.acknowledged) {\n return mapping[AlertIconName.WarningSilenced];\n } else {\n return mapping[AlertIconName.WarningUnack];\n }\n }\n }\n\n override render() {\n if (!this.type) {\n return html`<div>No alarm</div>`;\n }\n let icon: TemplateResult | undefined;\n if (this.outline) {\n switch (this.type) {\n case AlertType.Alarm:\n icon = html`<obi-alarm-badge-outline></obi-alarm-badge-outline>`;\n break;\n case AlertType.Warning:\n icon = html`<obi-warning-badge-outline></obi-warning-badge-outline>`;\n break;\n case AlertType.Caution:\n icon = html`<obi-caution-badge-outline></obi-caution-badge-outline>`;\n break;\n }\n } else if (this.type === AlertType.Caution) {\n icon = html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;\n } else if ([AlertType.Alarm, AlertType.Warning].includes(this.type)) {\n const icons = this.icon;\n const isWarning = this.type === AlertType.Warning;\n return html`\n <div\n class=${classMap({\n wrapper: true,\n warning: isWarning,\n })}\n >\n <span class=\"a\">${icons.a}</span>\n <span class=\"b\">${icons.b}</span>\n </div>\n `;\n } else {\n return html`<div>No alarm</div>`;\n }\n return html`<div class=\"wrapper\">${icon}</div>`;\n }\n\n static override styles = css`\n .wrapper {\n height: 100%;\n width: 100%;\n position: relative;\n }\n .wrapper svg {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n :not(.warning) {\n .a {\n opacity: var(--alarm-blink-on);\n }\n\n .b {\n opacity: var(--alarm-blink-off);\n }\n }\n\n .warning {\n .a {\n opacity: var(--warning-blink-on);\n }\n\n .b {\n opacity: var(--warning-blink-off);\n }\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-icon': ObcAlertIcon;\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"alert-icon.js","sources":["../../../src/components/alert-icon/alert-icon.ts"],"sourcesContent":["import {LitElement, html, css, TemplateResult, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {alarmRectifiedA} from './icons/icon-alarm-rectified.js';\nimport {warningRectifiedA} from './icons/icon-warning-rectified.js';\nimport {alarmSilencedA, alarmSilencedB} from './icons/icon-alarm-silenced.js';\nimport {\n warningSilencedA,\n warningSilencedB,\n} from './icons/icon-warning-silenced.js';\nimport {alarmUnackA, alarmUnackB} from './icons/icon-alarm-unack.js';\nimport {warningUnackA, warningUnackB} from './icons/icon-warning-unack.js';\nimport '../../icons/icon-caution-color-iec.js';\nimport {customElement} from '../../decorator.js';\nimport {AlertType} from '../../types.js';\nimport {\n getAlertBadgeComponent,\n AlertBadgeComponent,\n getAlertBlinkMode,\n getBamAlertTypeForBlinking,\n supportsBlinking,\n} from '../../alert-severity.js';\nimport '../../icons/icon-alarm-badge-outline.js';\nimport '../../icons/icon-warning-badge-outline.js';\nimport '../../icons/icon-caution-badge-outline.js';\nimport '../alert-frame/critical-badge.js';\nimport '../alert-frame/diagnostic-badge.js';\nimport {criticalA, criticalB} from './icons/icon-critical.js';\n\nenum AlertIconName {\n AlarmSilenced = 'alarm-silenced',\n AlarmUnack = 'alarm-unack',\n AlarmRectified = 'alarm-rectified',\n WarningUnack = 'warning-unack',\n WarningRectified = 'warning-rectified',\n WarningSilenced = 'warning-silenced',\n Critical = 'critical',\n}\n\nconst mapping = {\n [AlertIconName.AlarmSilenced]: {\n a: alarmSilencedA,\n b: alarmSilencedB,\n },\n [AlertIconName.AlarmUnack]: {\n a: alarmUnackA,\n b: alarmUnackB,\n },\n [AlertIconName.AlarmRectified]: {\n a: alarmRectifiedA,\n b: alarmRectifiedA,\n },\n [AlertIconName.WarningUnack]: {\n a: warningUnackA,\n b: warningUnackB,\n },\n [AlertIconName.WarningRectified]: {\n a: warningRectifiedA,\n b: warningRectifiedA,\n },\n [AlertIconName.WarningSilenced]: {\n a: warningSilencedA,\n b: warningSilencedB,\n },\n [AlertIconName.Critical]: {\n a: criticalA,\n b: criticalB,\n },\n};\n/**\n * `obc-alert-icon` – Animated alert icon for signaling alarm and warning states.\n *\n * Displays a specialized icon with a blinking effect to visually indicate alert or warning conditions. The icon type is determined by the `name` property, supporting both alarm and warning variants in different states (such as silenced, unacknowledged, or rectified).\n *\n * Appears in notification areas, alert banners, or status panels to draw attention to active or historical alert conditions. The blinking animation helps highlight urgency or status changes without requiring user interaction.\n *\n * ## Features\n * - **Multiple Icon Types:** Supports all alarm and warning types.\n * - **Blinking Animation:** Uses two SVG layers with alternating opacity to create a blinking effect, visually emphasizing the alert or warning state.\n * - **Adaptive Styling:** Applies different CSS variables for alarm and warning types to allow for distinct visual cues (e.g., color, blink timing).\n * - **Scalable:** Designed to fit any container size; scales with its parent element.\n *\n * ## Usage Guidelines\n * Use `obc-alert-icon` to visually represent the status of alarms or warnings in notification panels, alert lists, or system status areas. The blinking effect is intended to draw user attention to active or recent alert conditions. Select the appropriate `name` value to match the alert state you wish to indicate.\n *\n * **TODO(designer):** Provide guidance on when to use each icon variant (e.g., when to use \"rectified\" vs. \"silenced\"), and any best practices for icon placement or blink timing.\n *\n * ## Properties\n * - `type` (AlertType): The type of alarm to display.\n * - `status` (AlarmStatus): The status of the alarm to display.\n *\n * ## Best Practices\n * - Only use the blinking alert icon for states that require immediate or prominent user attention.\n * - Ensure the icon is sized appropriately for its context (e.g., 32x32px or 64x64px for status panels).\n * - Avoid using multiple blinking icons in close proximity to prevent visual overload.\n *\n * ## Example\n * ```html\n * <obc-alert-icon .alarmType=${alarm.type} .alarmStatus=${alarm.status}></obc-alert-icon>\n * ```\n *\n */\n@customElement('obc-alert-icon')\nexport class ObcAlertIcon extends LitElement {\n @property({type: String}) type!: AlertType;\n @property({type: Boolean}) acknowledged!: boolean;\n @property({type: Boolean}) active!: boolean;\n @property({type: Boolean}) outline!: boolean;\n\n private get bamType(): AlertType {\n return getBamAlertTypeForBlinking(this.type);\n }\n\n get icon() {\n if (this.type === AlertType.IsaCritical) {\n return mapping[AlertIconName.Critical];\n } else if (this.bamType === AlertType.Alarm) {\n if (this.active === false) {\n return mapping[AlertIconName.AlarmRectified];\n } else if (this.acknowledged) {\n return mapping[AlertIconName.AlarmSilenced];\n } else {\n return mapping[AlertIconName.AlarmUnack];\n }\n } else if (this.bamType === AlertType.Warning) {\n if (this.active === false) {\n return mapping[AlertIconName.WarningRectified];\n } else if (this.acknowledged) {\n return mapping[AlertIconName.WarningSilenced];\n } else {\n return mapping[AlertIconName.WarningUnack];\n }\n }\n\n return null;\n }\n\n private renderOutlineIcon(): TemplateResult {\n switch (getAlertBadgeComponent(this.type)) {\n case AlertBadgeComponent.Critical:\n return html`<obi-critical-badge></obi-critical-badge>`;\n case AlertBadgeComponent.Warning:\n return html`<obi-warning-badge-outline></obi-warning-badge-outline>`;\n case AlertBadgeComponent.Caution:\n return html`<obi-caution-badge-outline></obi-caution-badge-outline>`;\n case AlertBadgeComponent.Diagnostic:\n return html`<obi-diagnostic-badge\n style=\"color: var(--alert-diagnostic-color);\"\n ></obi-diagnostic-badge>`;\n default:\n return html`<obi-alarm-badge-outline></obi-alarm-badge-outline>`;\n }\n }\n\n private renderStaticIcon(): TemplateResult | typeof nothing {\n if (this.type === AlertType.Caution || this.type === AlertType.IsaLow) {\n return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;\n }\n if (this.type === AlertType.IsaDiagnostic) {\n return html`<obi-diagnostic-badge\n style=\"color: var(--alert-diagnostic-color);\"\n ></obi-diagnostic-badge>`;\n }\n return nothing;\n }\n\n override render() {\n if (!this.type) {\n return html`<div>No alarm</div>`;\n }\n if (this.outline) {\n return html`<div class=\"wrapper\">${this.renderOutlineIcon()}</div>`;\n }\n if (supportsBlinking(this.type) && !(this.type === AlertType.IsaLow)) {\n const icons = this.icon;\n if (!icons) {\n throw new Error('No icon found');\n }\n const blinkMode = getAlertBlinkMode(this.type);\n return html`\n <div\n class=${classMap({\n wrapper: true,\n [`blink-${blinkMode}`]: true,\n })}\n >\n <span class=\"a\">${icons.a}</span>\n <span class=\"b\">${icons.b}</span>\n </div>\n `;\n }\n return html`<div class=\"wrapper\">${this.renderStaticIcon()}</div>`;\n }\n\n static override styles = css`\n .wrapper {\n height: 100%;\n width: 100%;\n position: relative;\n\n obi-diagnostic-badge,\n obi-critical-badge {\n display: block;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n svg {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n &.blink-alarm .a {\n opacity: var(--alarm-blink-on);\n }\n\n &.blink-alarm .b {\n opacity: var(--alarm-blink-off);\n }\n\n &.blink-critical .a {\n opacity: var(--critical-blink-on);\n }\n\n &.blink-critical .b {\n opacity: var(--critical-blink-off);\n }\n\n &.blink-warning .a {\n opacity: var(--warning-blink-on);\n }\n\n &.blink-warning .b {\n opacity: var(--warning-blink-off);\n }\n\n &.blink-low .a {\n opacity: var(--low-blink-on);\n }\n\n &.blink-low .b {\n opacity: var(--low-blink-off);\n }\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-icon': ObcAlertIcon;\n }\n}\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ export declare const criticalA: import('lit-html').TemplateResult<2>;
2
+ export declare const criticalB: import('lit-html').TemplateResult<2>;
3
+ //# sourceMappingURL=icon-critical.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-critical.d.ts","sourceRoot":"","sources":["../../../../src/components/alert-icon/icons/icon-critical.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,sCASf,CAAC;AAER,eAAO,MAAM,SAAS,sCASf,CAAC"}
@@ -0,0 +1,26 @@
1
+ import { svg } from "lit";
2
+ const criticalA = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
3
+ <path d="M 22,12
4
+ L 17,20.66
5
+ L 7,20.66
6
+ L 2,12
7
+ L 7,3.34
8
+ L 17,3.34
9
+ Z"
10
+ fill="var(--alert-critical-color)" stroke="var(--alert-critical-outline-color)" />
11
+ </svg>`;
12
+ const criticalB = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
13
+ <path d="M 22,12
14
+ L 17,20.66
15
+ L 7,20.66
16
+ L 2,12
17
+ L 7,3.34
18
+ L 17,3.34
19
+ Z"
20
+ fill="none" stroke="var(--element-active-color)" />
21
+ </svg>`;
22
+ export {
23
+ criticalA,
24
+ criticalB
25
+ };
26
+ //# sourceMappingURL=icon-critical.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-critical.js","sources":["../../../../src/components/alert-icon/icons/icon-critical.ts"],"sourcesContent":["import {svg} from 'lit';\n\nexport const criticalA = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M 22,12 \n L 17,20.66 \n L 7,20.66 \n L 2,12 \n L 7,3.34 \n L 17,3.34 \n Z\" \n fill=\"var(--alert-critical-color)\" stroke=\"var(--alert-critical-outline-color)\" />\n</svg>`;\n\nexport const criticalB = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M 22,12 \n L 17,20.66 \n L 7,20.66 \n L 2,12 \n L 7,3.34 \n L 17,3.34 \n Z\" \n fill=\"none\" stroke=\"var(--element-active-color)\" />\n</svg>`;\n"],"names":[],"mappings":";AAEO,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWlB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
@@ -1 +1 @@
1
- {"version":3,"file":"alert-list-details.d.ts","sourceRoot":"","sources":["../../../src/components/alert-list-details/alert-list-details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,+BAA+B,CAAC;AACvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,6BAA6B,CAAC;AACrC,OAAO,EACL,KAAK,EAON,MAAM,gBAAgB,CAAC;AAUxB,OAAO,2BAA2B,CAAC;AAEnC,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACzC,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACzC,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,aAAa;;;;;oBAO1C,KAAK;EAuC1B;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,IACpD,OAAO,KAAK,aAKrB;AAED;;;GAGG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACvB,YAAY,EAAE,aAAa,CAAqB;IACjD,MAAM,EAAE,KAAK,EAAE,CAAM;IACnB,QAAQ,EAAE,OAAO,CAAS;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAEV;IAC9B,KAAK,EAAE,OAAO,CAAS;IAGlD,OAAO,CAAC,SAAS,CAAY;IAEtB,gBAAgB,IAAI,KAAK,EAAE;IAQlC,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,KAAK,OAAO,GAkFlB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,cAAc,GAEzB;IAEQ,MAAM;IA4Ff,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
1
+ {"version":3,"file":"alert-list-details.d.ts","sourceRoot":"","sources":["../../../src/components/alert-list-details/alert-list-details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,+BAA+B,CAAC;AACvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,6BAA6B,CAAC;AACrC,OAAO,EACL,KAAK,EAMN,MAAM,gBAAgB,CAAC;AAexB,OAAO,2BAA2B,CAAC;AAEnC,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACzC,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACzC,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,aAAa;;;;;oBAO1C,KAAK;EAuC1B;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,IACpD,OAAO,KAAK,aAKrB;AAED;;;GAGG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACvB,YAAY,EAAE,aAAa,CAAqB;IACjD,MAAM,EAAE,KAAK,EAAE,CAAM;IACnB,QAAQ,EAAE,OAAO,CAAS;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAEV;IAC9B,KAAK,EAAE,OAAO,CAAS;IAGlD,OAAO,CAAC,SAAS,CAAY;IAEtB,gBAAgB,IAAI,KAAK,EAAE;IAQlC,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,KAAK,OAAO,GAkFlB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,cAAc,GAEzB;IAEQ,MAAM;IAyFf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
@@ -14,7 +14,8 @@ import "../../icons/icon-unacknowledged.js";
14
14
  import "../../icons/icon-alarm-noack-iec.js";
15
15
  import "../../icons/icon-warning-noack-iec.js";
16
16
  import "../alert-icon/alert-icon.js";
17
- import { isAcknowledged, isActive, AlertType, comparePriorityAlerts, isShelved, isBlocked } from "../../types.js";
17
+ import { isAcknowledged, isActive, comparePriorityAlerts, isShelved, isBlocked } from "../../types.js";
18
+ import { requiresAcknowledgement, usesAlarmNoAckIcon, excludedFromUnackedFilter } from "../../alert-severity.js";
18
19
  import { ObcTableCellType } from "../table/table.js";
19
20
  import "../scrollbar/scrollbar.js";
20
21
  var __defProp = Object.defineProperty;
@@ -50,7 +51,7 @@ function getAlertListModeData(selectedMode) {
50
51
  title: msg("Unacked"),
51
52
  emptyTitle: msg("No unacknowledged alerts"),
52
53
  emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,
53
- filter: (alert) => !isAcknowledged(alert) && isActive(alert) && alert.type !== AlertType.Caution && !isShelved(alert)
54
+ filter: (alert) => !isAcknowledged(alert) && isActive(alert) && !excludedFromUnackedFilter(alert.type) && !isShelved(alert)
54
55
  };
55
56
  else if (selectedMode === "shelved")
56
57
  return {
@@ -79,7 +80,7 @@ function getAlertListModeData(selectedMode) {
79
80
  else throw new Error("Invalid selected mode");
80
81
  }
81
82
  function canAckFilter(filter) {
82
- return (alert) => !isAcknowledged(alert) && !alert.noAck && alert.type !== AlertType.Caution && filter(alert);
83
+ return (alert) => !isAcknowledged(alert) && !alert.noAck && !excludedFromUnackedFilter(alert.type) && filter(alert);
83
84
  }
84
85
  let ObcAlertListDetails = class extends LitElement {
85
86
  constructor() {
@@ -206,11 +207,9 @@ let ObcAlertListDetails = class extends LitElement {
206
207
  let action = {
207
208
  type: ObcTableCellType.Regular
208
209
  };
209
- if (!isAcknowledged(alert) && isActive(alert) && [AlertType.Alarm, AlertType.Warning].includes(alert.type)) {
210
+ if (!isAcknowledged(alert) && isActive(alert) && requiresAcknowledgement(alert.type)) {
210
211
  if (alert.noAck) {
211
- const icon = alert.type === AlertType.Alarm ? html`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>` : html`<obi-warning-noack-iec
212
- usecsscolor
213
- ></obi-warning-noack-iec>`;
212
+ 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>`;
214
213
  action = {
215
214
  type: ObcTableCellType.Regular,
216
215
  largeIcon: 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 AlertType,\n comparePriorityAlerts,\n isActive,\n isAcknowledged,\n isBlocked,\n isShelved,\n} from '../../types.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 alert.type !== AlertType.Caution &&\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 alert.type !== AlertType.Caution &&\n filter(alert);\n}\n\n/**\n * @fires ack-click {ObcAckClickEvent} - Fired when the user clicks the \"ACK\" button.\n * @fires row-click {ObcRowClickEvent} - Fired when the user clicks a row.\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 [AlertType.Alarm, AlertType.Warning].includes(alert.type)\n ) {\n if (alert.noAck) {\n const icon =\n alert.type === AlertType.Alarm\n ? html`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>`\n : html`<obi-warning-noack-iec\n usecsscolor\n ></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 * @fires ack-click {ObcAckClickEvent} - Fired when the user clicks the \"ACK\" button.\n * @fires row-click {ObcRowClickEvent} - Fired when the user clicks a row.\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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"}
@@ -112,12 +112,36 @@ const compentStyle = css`
112
112
  color: var(--on-warning-color);
113
113
  }
114
114
 
115
- .wrapper.type-caution {
115
+ .wrapper.type-caution,.wrapper.type-isa-low {
116
116
  background-color: var(--alert-caution-color);
117
117
  border-color: var(--alert-caution-outline-color);
118
118
  color: var(--on-caution-color);
119
119
  }
120
120
 
121
+ .wrapper.type-isa-critical {
122
+ background-color: var(--critical-enabled-background-color);
123
+ border-color: var(--critical-enabled-border-color);
124
+ color: var(--on-critical-color);
125
+ }
126
+
127
+ .wrapper.type-isa-high {
128
+ background-color: var(--alert-alarm-color);
129
+ border-color: var(--alert-alarm-outline-color);
130
+ color: var(--on-alarm-color);
131
+ }
132
+
133
+ .wrapper.type-isa-medium {
134
+ background-color: var(--alert-warning-color);
135
+ border-color: var(--alert-warning-outline-color);
136
+ color: var(--on-warning-color);
137
+ }
138
+
139
+ .wrapper.type-isa-diagnostic {
140
+ background-color: var(--notification-enabled-background-color);
141
+ border-color: var(--notification-enabled-border-color);
142
+ color: var(--on-notification-active-color);
143
+ }
144
+
121
145
  .wrapper.type-running {
122
146
  background-color: var(--alert-running-color);
123
147
  border-color: var(--alert-running-color);
@@ -170,12 +194,36 @@ const compentStyle = css`
170
194
  background: none;
171
195
  }
172
196
 
173
- .wrapper.variant-flat .icon.type-caution {
197
+ .wrapper.variant-flat .icon.type-caution,.wrapper.variant-flat .icon.type-isa-low {
174
198
  color: unset;
175
199
  border-color: var(--alert-caution-outline-color);
176
200
  background: none;
177
201
  }
178
202
 
203
+ .wrapper.variant-flat .icon.type-isa-critical {
204
+ color: unset;
205
+ border-color: var(--critical-enabled-border-color);
206
+ background: none;
207
+ }
208
+
209
+ .wrapper.variant-flat .icon.type-isa-high {
210
+ color: unset;
211
+ border-color: var(--alert-alarm-outline-color);
212
+ background: none;
213
+ }
214
+
215
+ .wrapper.variant-flat .icon.type-isa-medium {
216
+ color: unset;
217
+ border-color: var(--alert-warning-outline-color);
218
+ background: none;
219
+ }
220
+
221
+ .wrapper.variant-flat .icon.type-isa-diagnostic {
222
+ color: unset;
223
+ border-color: var(--notification-enabled-border-color);
224
+ background: none;
225
+ }
226
+
179
227
  .wrapper.variant-flat .icon.type-regular {
180
228
  color: unset;
181
229
  border-color: var(--normal-enabled-border-color);
@@ -1 +1 @@
1
- {"version":3,"file":"badge.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"badge.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -19,6 +19,11 @@ export declare enum BadgeSize {
19
19
  * - `alarm`: Indicates a critical or urgent state.
20
20
  * - `warning`: Indicates a warning or cautionary state.
21
21
  * - `caution`: Indicates a less severe caution.
22
+ * - `isa-critical`: ISA highest-severity state (critical).
23
+ * - `isa-high`: ISA high-severity state (alarm-equivalent styling).
24
+ * - `isa-medium`: ISA medium-severity state (warning-equivalent styling).
25
+ * - `isa-low`: ISA low-severity state (caution-equivalent styling).
26
+ * - `isa-diagnostic`: ISA diagnostic/notification state.
22
27
  * - `running`: Indicates an active or running state.
23
28
  * - `notification`: Used for general notifications.
24
29
  * - `enhance`: Used for enhanced or secondary notifications.
@@ -31,6 +36,11 @@ export declare enum BadgeType {
31
36
  alarm = "alarm",
32
37
  warning = "warning",
33
38
  caution = "caution",
39
+ isaCritical = "isa-critical",
40
+ isaHigh = "isa-high",
41
+ isaMedium = "isa-medium",
42
+ isaLow = "isa-low",
43
+ isaDiagnostic = "isa-diagnostic",
34
44
  running = "running",
35
45
  notification = "notification",
36
46
  enhance = "enhance",
@@ -62,6 +72,7 @@ export declare enum BadgeVariant {
62
72
  * - `alarm`: Highlights critical or urgent states.
63
73
  * - `warning`: Indicates caution or warning.
64
74
  * - `caution`: Used for less severe caution.
75
+ * - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents (critical, alarm, warning, caution, notification).
65
76
  * - `running`: Represents active or running states.
66
77
  * - `notification`: For general notifications.
67
78
  * - `enhance`: For secondary notifications or emphasis.
@@ -148,7 +159,7 @@ export declare class ObcBadge extends LitElement {
148
159
  /**
149
160
  * Visual style/type of the badge.
150
161
  *
151
- * Possible values: `regular`, `alarm`, `warning`, `caution`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.
162
+ * Possible values: `regular`, `alarm`, `warning`, `caution`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.
152
163
  *
153
164
  * Defaults to `regular`.
154
165
  */
@@ -169,7 +180,7 @@ export declare class ObcBadge extends LitElement {
169
180
  /**
170
181
  * Whether to show an icon in the badge.
171
182
  *
172
- * For built-in types (`alarm`, `warning`, `caution`, `running`), a contextual icon is shown automatically.
183
+ * For built-in types (`alarm`, `warning`, `caution`, the `isa-*` severities, and `running`), a contextual icon is shown automatically.
173
184
  * For other types, provide a custom icon in the `badge-icon` slot.
174
185
  */
175
186
  showIcon: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,uCAAuC,CAAC;AAE/C;;;;;GAKG;AACH,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,OAAO,YAAY;CACpB;AAED;;;;;GAKG;AACH,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC;;;;OAIG;IACuB,MAAM,SAAK;IAErC;;;;OAIG;IAC0C,UAAU,EAAE,OAAO,CAAQ;IAExE;;;;;;OAMG;IACuB,IAAI,EAAE,MAAM,CAAqB;IAE3D;;;;OAIG;IACuB,IAAI,EAAE,MAAM,CAAqB;IAE3D;;;;;OAKG;IACuB,OAAO,EAAE,YAAY,CAAwB;IAEvE;;;;;OAKG;IACwB,QAAQ,UAAS;IAE5C,OAAO,KAAK,aAAa,GAKxB;IAED,OAAO,CAAC,UAAU;IAsDT,MAAM;IAqCf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1
+ {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,uCAAuC,CAAC;AAE/C;;;;;GAKG;AACH,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,WAAW,iBAAiB;IAC5B,OAAO,aAAa;IACpB,SAAS,eAAe;IACxB,MAAM,YAAY;IAClB,aAAa,mBAAmB;IAChC,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,OAAO,YAAY;CACpB;AAED;;;;;GAKG;AACH,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC;;;;OAIG;IACuB,MAAM,SAAK;IAErC;;;;OAIG;IAC0C,UAAU,EAAE,OAAO,CAAQ;IAExE;;;;;;OAMG;IACuB,IAAI,EAAE,MAAM,CAAqB;IAE3D;;;;OAIG;IACuB,IAAI,EAAE,MAAM,CAAqB;IAE3D;;;;;OAKG;IACuB,OAAO,EAAE,YAAY,CAAwB;IAEvE;;;;;OAKG;IACwB,QAAQ,UAAS;IAE5C,OAAO,KAAK,aAAa,GAKxB;IAED,OAAO,CAAC,UAAU;IA+GT,MAAM;IAqCf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
@@ -26,6 +26,11 @@ var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
26
26
  BadgeType2["alarm"] = "alarm";
27
27
  BadgeType2["warning"] = "warning";
28
28
  BadgeType2["caution"] = "caution";
29
+ BadgeType2["isaCritical"] = "isa-critical";
30
+ BadgeType2["isaHigh"] = "isa-high";
31
+ BadgeType2["isaMedium"] = "isa-medium";
32
+ BadgeType2["isaLow"] = "isa-low";
33
+ BadgeType2["isaDiagnostic"] = "isa-diagnostic";
29
34
  BadgeType2["running"] = "running";
30
35
  BadgeType2["notification"] = "notification";
31
36
  BadgeType2["enhance"] = "enhance";
@@ -90,6 +95,55 @@ let ObcBadge = class extends LitElement {
90
95
  />
91
96
  </svg>
92
97
  `;
98
+ case "isa-high":
99
+ return html`
100
+ <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
101
+ <path
102
+ d="M5.29694 1.72622L1.05702 9.32693C0.838739 9.71823 0.729598 9.91388 0.748108 10.0741C0.764257 10.2138 0.83853 10.3403 0.952704 10.4225C1.08357 10.5167 1.3076 10.5167 1.75567 10.5167H10.233C10.6809 10.5167 10.9049 10.5167 11.0357 10.4225C11.1499 10.3403 11.2242 10.2139 11.2404 10.0741C11.2589 9.914 11.1498 9.71837 10.9317 9.3271L6.69433 1.7264C6.46616 1.31712 6.35207 1.11247 6.20181 1.04447C6.07082 0.985194 5.92064 0.985175 5.78964 1.04442C5.63936 1.11238 5.52522 1.317 5.29694 1.72622Z"
103
+ fill=${isFlat ? "var(--alert-alarm-color)" : "currentColor"}
104
+ />
105
+ </svg>
106
+ `;
107
+ case "isa-medium":
108
+ return html`
109
+ <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
110
+ <circle
111
+ cx="6"
112
+ cy="6"
113
+ r="4.5"
114
+ fill=${isFlat ? "var(--alert-warning-color)" : "currentColor"}
115
+ stroke=${isFlat ? "var(--alert-warning-outline-color)" : "currentColor"}
116
+ />
117
+ </svg>
118
+ `;
119
+ case "isa-low":
120
+ return html`
121
+ <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
122
+ <path
123
+ d="M2.2998 2H9.7002C9.848 2 9.92907 2.00015 9.9873 2.00488C9.98955 2.00507 9.99213 2.0047 9.99414 2.00488C9.99436 2.0072 9.9949 2.01006 9.99512 2.0127C9.99985 2.07093 10 2.152 10 2.2998V9.7002C10 9.848 9.99985 9.92907 9.99512 9.9873C9.99493 9.98958 9.99433 9.9921 9.99414 9.99414C9.9921 9.99433 9.98958 9.99493 9.9873 9.99512C9.92907 9.99985 9.848 10 9.7002 10H2.2998C2.152 10 2.07093 9.99985 2.0127 9.99512C2.01006 9.9949 2.0072 9.99436 2.00488 9.99414C2.0047 9.99213 2.00507 9.98955 2.00488 9.9873C2.00015 9.92907 2 9.848 2 9.7002V2.2998L2.00488 2.0127C2.0051 2.01009 2.00467 2.00718 2.00488 2.00488C2.00718 2.00467 2.01009 2.0051 2.0127 2.00488L2.2998 2Z"
124
+ fill=${isFlat ? "var(--alert-caution-color)" : "currentColor"}
125
+ stroke=${isFlat ? "var(--alert-caution-outline-color)" : "currentColor"}
126
+ />
127
+ </svg>
128
+ `;
129
+ case "isa-critical":
130
+ return html`
131
+ <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
132
+ <path
133
+ d="M11 6L8.5 10.33H3.5L1 6L3.5 1.67H8.5L11 6Z"
134
+ fill=${isFlat ? "var(--critical-enabled-background-color)" : "currentColor"}
135
+ />
136
+ </svg>
137
+ `;
138
+ case "isa-diagnostic":
139
+ return html`
140
+ <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
141
+ <path
142
+ d="M5.25 1H6.75V5.7L9.955 3.85L10.705 5.15L7.5 7L10.705 8.85L9.955 10.15L6.75 8.3V11H5.25V8.3L2.045 10.15L1.295 8.85L4.5 7L1.295 5.15L2.045 3.85L5.25 5.7V1Z"
143
+ fill=${isFlat ? "var(--notification-enabled-background-color)" : "currentColor"}
144
+ />
145
+ </svg>
146
+ `;
93
147
  case "running":
94
148
  return html`
95
149
  <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
@@ -1 +1 @@
1
- {"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './badge.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-alarm-badge.js';\nimport '../../icons/icon-warning-badge.js';\nimport '../../icons/icon-caution-badge.js';\nimport '../../icons/icon-running-color-iec.js';\n\n/**\n * `BadgeSize` – Enum for badge size options.\n *\n * - `regular`: Standard badge size.\n * - `large`: Larger badge size for increased prominence.\n */\nexport enum BadgeSize {\n regular = 'regular',\n large = 'large',\n}\n\n/**\n * `BadgeType` – Enum for badge visual types.\n *\n * - `alarm`: Indicates a critical or urgent state.\n * - `warning`: Indicates a warning or cautionary state.\n * - `caution`: Indicates a less severe caution.\n * - `running`: Indicates an active or running state.\n * - `notification`: Used for general notifications.\n * - `enhance`: Used for enhanced or secondary notifications.\n * - `regular`: Default badge style.\n * - `empty`: Minimal badge with no icon or number.\n * - `automation`: Used for automation-related status.\n * - `outline`: Outline-only style for flat variant.\n */\nexport enum BadgeType {\n alarm = 'alarm',\n warning = 'warning',\n caution = 'caution',\n running = 'running',\n notification = 'notification',\n enhance = 'enhance',\n regular = 'regular',\n empty = 'empty',\n automation = 'automation',\n outline = 'outline',\n}\n\n/**\n * `BadgeVariant` – Enum for badge visual variants.\n *\n * - `default`: Standard filled badge.\n * - `flat`: Flat badge with minimal background and outline.\n */\nexport enum BadgeVariant {\n default = 'default',\n flat = 'flat',\n}\n\n/**\n * `<obc-badge>` – A compact visual indicator for status, alerts, or notifications, optionally displaying a number and/or icon.\n *\n * Badges are used to draw attention to status changes, counts, or important information in a concise format. They can represent alert states (such as alarm, warning, or running), notification counts, or other contextual statuses. The badge adapts its appearance based on type, size, and variant, and can display an icon, a number, or both.\n *\n * ---\n *\n * ### Features\n * - **Type options:** Supports multiple visual types:\n * - `regular`: Default neutral badge.\n * - `alarm`: Highlights critical or urgent states.\n * - `warning`: Indicates caution or warning.\n * - `caution`: Used for less severe caution.\n * - `running`: Represents active or running states.\n * - `notification`: For general notifications.\n * - `enhance`: For secondary notifications or emphasis.\n * - `automation`: For automation-related status.\n * - `outline`: Outline-only style (flat variant only).\n * - `empty`: Minimal badge with no icon or number.\n * - **Size options:** `regular` (default) and `large` for increased visibility.\n * - **Variants:**\n * - `default`: Filled background and border.\n * - `flat`: Minimal background, outline, and lighter appearance.\n * - **Icon support:** Can display a contextual icon (built-in for alarm, warning, caution, running; custom via slot for others).\n * - **Number display:** Optionally shows a number (e.g., count of notifications).\n * - **Hide number:** Can suppress the number for a purely symbolic badge.\n * - **Custom icon slot:** For types without a built-in icon, developers can provide a custom icon using the `badge-icon` slot.\n * - **Responsive layout:** Adjusts size and spacing based on the `size` property.\n *\n * ---\n *\n * ### Usage Guidelines\n * - Use `obc-badge` to highlight status, counts, or alerts in a compact form, such as notification indicators, unread message counts, or system status.\n * - Choose the `type` that matches the semantic meaning (e.g., `alarm` for critical, `warning` for caution, `running` for active).\n * - Use the `number` property to show counts; set `showNumber` to false for symbolic-only badges.\n * - Use the `flat` variant for less prominent or secondary contexts.\n * - For custom icons, provide an icon element in the `badge-icon` slot.\n * - Avoid using badges for persistent or detailed information; they are intended for brief, glanceable status.\n * - **TODO(designer):** Confirm recommended use cases for `enhance`, `automation`, and `outline` types, and clarify when to use `empty` type versus hiding the badge entirely.\n *\n * ---\n *\n * ### Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |---------------|-------------------------------|-----------------------------------------------------|\n * | `badge-icon` | `showIcon` is true and `type` is not one of `alarm`, `warning`, `caution`, `running` | Custom icon for the badge (e.g., `<obi-placeholder>`). |\n *\n * ---\n *\n * ### Properties and Attributes\n * - `number` (number): The numeric value to display in the badge. Defaults to 0.\n * - `showNumber` (boolean): If true, the number is shown. Set to `false` for symbolic or icon-only badges.\n * - `type` (string): Visual style of the badge. See **Type options** above for possible values. Defaults to `regular`.\n * - `size` (string): Badge size, either `regular` (default) or `large`.\n * - `variant` (string): Visual variant, either `default` (filled) or `flat` (minimal). Defaults to `default`.\n * - `showIcon` (boolean): If true, displays an icon appropriate to the badge type. For custom types, supply an icon in the `badge-icon` slot.\n *\n * ---\n *\n * ### Best Practices and Constraints\n * - Use badge types consistently to communicate status meaningfully.\n * - For accessibility, ensure the badge's meaning is also conveyed via text or ARIA attributes if used as a status indicator.\n * - Avoid overloading the badge with large numbers or excessive detail; keep content concise.\n * - The `empty` type is intended for minimal presence—use when a placeholder badge is needed without icon or number.\n * - For custom icons, use OpenBridge icon elements such as `<obi-placeholder>` in the `badge-icon` slot.\n * - The badge does not emit any custom events.\n *\n * ---\n *\n * ### Example\n *\n * ```html\n * <obc-badge type=\"alarm\" number=\"3\" showIcon>\n * <!-- For custom types, provide an icon: -->\n * <obi-placeholder slot=\"badge-icon\"></obi-placeholder>\n * </obc-badge>\n * ```\n *\n * In this example, the badge displays an alarm icon and the number 3.\n *\n * @slot badge-icon - Custom icon slot for badge types that do not have a built-in icon (e.g., notification, enhance, automation, outline, or custom types).\n */\n@customElement('obc-badge')\nexport class ObcBadge extends LitElement {\n /**\n * The number to display in the badge. Set to 0 for no count.\n *\n * If `showNumber` is false, the number is hidden.\n */\n @property({type: Number}) number = 0;\n\n /**\n * Shows the number in the badge when true.\n *\n * Set to `false` for symbolic or icon-only badges.\n */\n @property({type: Boolean, attribute: false}) showNumber: boolean = true;\n\n /**\n * Visual style/type of the badge.\n *\n * Possible values: `regular`, `alarm`, `warning`, `caution`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.\n *\n * Defaults to `regular`.\n */\n @property({type: String}) type: string = BadgeType.regular;\n\n /**\n * Badge size.\n *\n * Possible values: `regular` (default), `large`.\n */\n @property({type: String}) size: string = BadgeSize.regular;\n\n /**\n * Badge variant.\n *\n * - `default`: Filled background and border (default).\n * - `flat`: Minimal background and outline.\n */\n @property({type: String}) variant: BadgeVariant = BadgeVariant.default;\n\n /**\n * Whether to show an icon in the badge.\n *\n * For built-in types (`alarm`, `warning`, `caution`, `running`), a contextual icon is shown automatically.\n * For other types, provide a custom icon in the `badge-icon` slot.\n */\n @property({type: Boolean}) showIcon = false;\n\n private get effectiveType(): string {\n if (!this.showIcon && !this.showNumber) {\n return BadgeType.empty;\n }\n return this.type;\n }\n\n private renderIcon() {\n const isFlat = this.variant === BadgeVariant.flat;\n switch (this.type) {\n case BadgeType.alarm:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n d=\"M5.29694 1.72622L1.05702 9.32693C0.838739 9.71823 0.729598 9.91388 0.748108 10.0741C0.764257 10.2138 0.83853 10.3403 0.952704 10.4225C1.08357 10.5167 1.3076 10.5167 1.75567 10.5167H10.233C10.6809 10.5167 10.9049 10.5167 11.0357 10.4225C11.1499 10.3403 11.2242 10.2139 11.2404 10.0741C11.2589 9.914 11.1498 9.71837 10.9317 9.3271L6.69433 1.7264C6.46616 1.31712 6.35207 1.11247 6.20181 1.04447C6.07082 0.985194 5.92064 0.985175 5.78964 1.04442C5.63936 1.11238 5.52522 1.317 5.29694 1.72622Z\"\n fill=${isFlat ? 'var(--alert-alarm-color)' : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.warning:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"4.5\"\n fill=${isFlat ? 'var(--alert-warning-color)' : 'currentColor'}\n stroke=${isFlat\n ? 'var(--alert-warning-outline-color)'\n : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.caution:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n d=\"M2.2998 2H9.7002C9.848 2 9.92907 2.00015 9.9873 2.00488C9.98955 2.00507 9.99213 2.0047 9.99414 2.00488C9.99436 2.0072 9.9949 2.01006 9.99512 2.0127C9.99985 2.07093 10 2.152 10 2.2998V9.7002C10 9.848 9.99985 9.92907 9.99512 9.9873C9.99493 9.98958 9.99433 9.9921 9.99414 9.99414C9.9921 9.99433 9.98958 9.99493 9.9873 9.99512C9.92907 9.99985 9.848 10 9.7002 10H2.2998C2.152 10 2.07093 9.99985 2.0127 9.99512C2.01006 9.9949 2.0072 9.99436 2.00488 9.99414C2.0047 9.99213 2.00507 9.98955 2.00488 9.9873C2.00015 9.92907 2 9.848 2 9.7002V2.2998L2.00488 2.0127C2.0051 2.01009 2.00467 2.00718 2.00488 2.00488C2.00718 2.00467 2.01009 2.0051 2.0127 2.00488L2.2998 2Z\"\n fill=${isFlat ? 'var(--alert-caution-color)' : 'currentColor'}\n stroke=${isFlat\n ? 'var(--alert-caution-outline-color)'\n : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.running:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6ZM2.89624 6.10353L3.60335 5.39642L5.24979 7.04287L8.39624 3.89642L9.10335 4.60353L5.24979 8.45708L2.89624 6.10353Z\"\n fill=${isFlat ? 'var(--alert-running-color)' : 'currentColor'}\n />\n </svg>\n `;\n default:\n return html`<slot class=\"badge-icon\" name=\"badge-icon\"></slot>`;\n }\n }\n\n override render() {\n const isFlat = this.variant === BadgeVariant.flat;\n return html`\n <div\n class=${classMap({\n wrapper: true,\n ['size-' + this.size]: true,\n ['type-' + this.effectiveType]: !isFlat,\n ['variant-flat']: isFlat,\n hideNumber: !this.showNumber,\n })}\n >\n ${this.effectiveType !== BadgeType.empty\n ? html`\n ${this.showIcon\n ? html`\n <div\n class=${classMap({\n icon: true,\n ['type-' + this.type]: isFlat,\n })}\n >\n ${this.renderIcon()}\n </div>\n `\n : nothing}\n ${this.showNumber\n ? html`<div class=\"number\">\n <span class=\"number-text\">${this.number}</span>\n </div>`\n : ''}\n `\n : ''}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-badge': ObcBadge;\n }\n}\n"],"names":["BadgeSize","BadgeType","BadgeVariant"],"mappings":"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"}
1
+ {"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './badge.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-alarm-badge.js';\nimport '../../icons/icon-warning-badge.js';\nimport '../../icons/icon-caution-badge.js';\nimport '../../icons/icon-running-color-iec.js';\n\n/**\n * `BadgeSize` – Enum for badge size options.\n *\n * - `regular`: Standard badge size.\n * - `large`: Larger badge size for increased prominence.\n */\nexport enum BadgeSize {\n regular = 'regular',\n large = 'large',\n}\n\n/**\n * `BadgeType` – Enum for badge visual types.\n *\n * - `alarm`: Indicates a critical or urgent state.\n * - `warning`: Indicates a warning or cautionary state.\n * - `caution`: Indicates a less severe caution.\n * - `isa-critical`: ISA highest-severity state (critical).\n * - `isa-high`: ISA high-severity state (alarm-equivalent styling).\n * - `isa-medium`: ISA medium-severity state (warning-equivalent styling).\n * - `isa-low`: ISA low-severity state (caution-equivalent styling).\n * - `isa-diagnostic`: ISA diagnostic/notification state.\n * - `running`: Indicates an active or running state.\n * - `notification`: Used for general notifications.\n * - `enhance`: Used for enhanced or secondary notifications.\n * - `regular`: Default badge style.\n * - `empty`: Minimal badge with no icon or number.\n * - `automation`: Used for automation-related status.\n * - `outline`: Outline-only style for flat variant.\n */\nexport enum BadgeType {\n alarm = 'alarm',\n warning = 'warning',\n caution = 'caution',\n isaCritical = 'isa-critical',\n isaHigh = 'isa-high',\n isaMedium = 'isa-medium',\n isaLow = 'isa-low',\n isaDiagnostic = 'isa-diagnostic',\n running = 'running',\n notification = 'notification',\n enhance = 'enhance',\n regular = 'regular',\n empty = 'empty',\n automation = 'automation',\n outline = 'outline',\n}\n\n/**\n * `BadgeVariant` – Enum for badge visual variants.\n *\n * - `default`: Standard filled badge.\n * - `flat`: Flat badge with minimal background and outline.\n */\nexport enum BadgeVariant {\n default = 'default',\n flat = 'flat',\n}\n\n/**\n * `<obc-badge>` – A compact visual indicator for status, alerts, or notifications, optionally displaying a number and/or icon.\n *\n * Badges are used to draw attention to status changes, counts, or important information in a concise format. They can represent alert states (such as alarm, warning, or running), notification counts, or other contextual statuses. The badge adapts its appearance based on type, size, and variant, and can display an icon, a number, or both.\n *\n * ---\n *\n * ### Features\n * - **Type options:** Supports multiple visual types:\n * - `regular`: Default neutral badge.\n * - `alarm`: Highlights critical or urgent states.\n * - `warning`: Indicates caution or warning.\n * - `caution`: Used for less severe caution.\n * - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents (critical, alarm, warning, caution, notification).\n * - `running`: Represents active or running states.\n * - `notification`: For general notifications.\n * - `enhance`: For secondary notifications or emphasis.\n * - `automation`: For automation-related status.\n * - `outline`: Outline-only style (flat variant only).\n * - `empty`: Minimal badge with no icon or number.\n * - **Size options:** `regular` (default) and `large` for increased visibility.\n * - **Variants:**\n * - `default`: Filled background and border.\n * - `flat`: Minimal background, outline, and lighter appearance.\n * - **Icon support:** Can display a contextual icon (built-in for alarm, warning, caution, running; custom via slot for others).\n * - **Number display:** Optionally shows a number (e.g., count of notifications).\n * - **Hide number:** Can suppress the number for a purely symbolic badge.\n * - **Custom icon slot:** For types without a built-in icon, developers can provide a custom icon using the `badge-icon` slot.\n * - **Responsive layout:** Adjusts size and spacing based on the `size` property.\n *\n * ---\n *\n * ### Usage Guidelines\n * - Use `obc-badge` to highlight status, counts, or alerts in a compact form, such as notification indicators, unread message counts, or system status.\n * - Choose the `type` that matches the semantic meaning (e.g., `alarm` for critical, `warning` for caution, `running` for active).\n * - Use the `number` property to show counts; set `showNumber` to false for symbolic-only badges.\n * - Use the `flat` variant for less prominent or secondary contexts.\n * - For custom icons, provide an icon element in the `badge-icon` slot.\n * - Avoid using badges for persistent or detailed information; they are intended for brief, glanceable status.\n * - **TODO(designer):** Confirm recommended use cases for `enhance`, `automation`, and `outline` types, and clarify when to use `empty` type versus hiding the badge entirely.\n *\n * ---\n *\n * ### Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |---------------|-------------------------------|-----------------------------------------------------|\n * | `badge-icon` | `showIcon` is true and `type` is not one of `alarm`, `warning`, `caution`, `running` | Custom icon for the badge (e.g., `<obi-placeholder>`). |\n *\n * ---\n *\n * ### Properties and Attributes\n * - `number` (number): The numeric value to display in the badge. Defaults to 0.\n * - `showNumber` (boolean): If true, the number is shown. Set to `false` for symbolic or icon-only badges.\n * - `type` (string): Visual style of the badge. See **Type options** above for possible values. Defaults to `regular`.\n * - `size` (string): Badge size, either `regular` (default) or `large`.\n * - `variant` (string): Visual variant, either `default` (filled) or `flat` (minimal). Defaults to `default`.\n * - `showIcon` (boolean): If true, displays an icon appropriate to the badge type. For custom types, supply an icon in the `badge-icon` slot.\n *\n * ---\n *\n * ### Best Practices and Constraints\n * - Use badge types consistently to communicate status meaningfully.\n * - For accessibility, ensure the badge's meaning is also conveyed via text or ARIA attributes if used as a status indicator.\n * - Avoid overloading the badge with large numbers or excessive detail; keep content concise.\n * - The `empty` type is intended for minimal presence—use when a placeholder badge is needed without icon or number.\n * - For custom icons, use OpenBridge icon elements such as `<obi-placeholder>` in the `badge-icon` slot.\n * - The badge does not emit any custom events.\n *\n * ---\n *\n * ### Example\n *\n * ```html\n * <obc-badge type=\"alarm\" number=\"3\" showIcon>\n * <!-- For custom types, provide an icon: -->\n * <obi-placeholder slot=\"badge-icon\"></obi-placeholder>\n * </obc-badge>\n * ```\n *\n * In this example, the badge displays an alarm icon and the number 3.\n *\n * @slot badge-icon - Custom icon slot for badge types that do not have a built-in icon (e.g., notification, enhance, automation, outline, or custom types).\n */\n@customElement('obc-badge')\nexport class ObcBadge extends LitElement {\n /**\n * The number to display in the badge. Set to 0 for no count.\n *\n * If `showNumber` is false, the number is hidden.\n */\n @property({type: Number}) number = 0;\n\n /**\n * Shows the number in the badge when true.\n *\n * Set to `false` for symbolic or icon-only badges.\n */\n @property({type: Boolean, attribute: false}) showNumber: boolean = true;\n\n /**\n * Visual style/type of the badge.\n *\n * Possible values: `regular`, `alarm`, `warning`, `caution`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.\n *\n * Defaults to `regular`.\n */\n @property({type: String}) type: string = BadgeType.regular;\n\n /**\n * Badge size.\n *\n * Possible values: `regular` (default), `large`.\n */\n @property({type: String}) size: string = BadgeSize.regular;\n\n /**\n * Badge variant.\n *\n * - `default`: Filled background and border (default).\n * - `flat`: Minimal background and outline.\n */\n @property({type: String}) variant: BadgeVariant = BadgeVariant.default;\n\n /**\n * Whether to show an icon in the badge.\n *\n * For built-in types (`alarm`, `warning`, `caution`, the `isa-*` severities, and `running`), a contextual icon is shown automatically.\n * For other types, provide a custom icon in the `badge-icon` slot.\n */\n @property({type: Boolean}) showIcon = false;\n\n private get effectiveType(): string {\n if (!this.showIcon && !this.showNumber) {\n return BadgeType.empty;\n }\n return this.type;\n }\n\n private renderIcon() {\n const isFlat = this.variant === BadgeVariant.flat;\n switch (this.type) {\n case BadgeType.alarm:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n d=\"M5.29694 1.72622L1.05702 9.32693C0.838739 9.71823 0.729598 9.91388 0.748108 10.0741C0.764257 10.2138 0.83853 10.3403 0.952704 10.4225C1.08357 10.5167 1.3076 10.5167 1.75567 10.5167H10.233C10.6809 10.5167 10.9049 10.5167 11.0357 10.4225C11.1499 10.3403 11.2242 10.2139 11.2404 10.0741C11.2589 9.914 11.1498 9.71837 10.9317 9.3271L6.69433 1.7264C6.46616 1.31712 6.35207 1.11247 6.20181 1.04447C6.07082 0.985194 5.92064 0.985175 5.78964 1.04442C5.63936 1.11238 5.52522 1.317 5.29694 1.72622Z\"\n fill=${isFlat ? 'var(--alert-alarm-color)' : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.warning:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"4.5\"\n fill=${isFlat ? 'var(--alert-warning-color)' : 'currentColor'}\n stroke=${isFlat\n ? 'var(--alert-warning-outline-color)'\n : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.caution:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n d=\"M2.2998 2H9.7002C9.848 2 9.92907 2.00015 9.9873 2.00488C9.98955 2.00507 9.99213 2.0047 9.99414 2.00488C9.99436 2.0072 9.9949 2.01006 9.99512 2.0127C9.99985 2.07093 10 2.152 10 2.2998V9.7002C10 9.848 9.99985 9.92907 9.99512 9.9873C9.99493 9.98958 9.99433 9.9921 9.99414 9.99414C9.9921 9.99433 9.98958 9.99493 9.9873 9.99512C9.92907 9.99985 9.848 10 9.7002 10H2.2998C2.152 10 2.07093 9.99985 2.0127 9.99512C2.01006 9.9949 2.0072 9.99436 2.00488 9.99414C2.0047 9.99213 2.00507 9.98955 2.00488 9.9873C2.00015 9.92907 2 9.848 2 9.7002V2.2998L2.00488 2.0127C2.0051 2.01009 2.00467 2.00718 2.00488 2.00488C2.00718 2.00467 2.01009 2.0051 2.0127 2.00488L2.2998 2Z\"\n fill=${isFlat ? 'var(--alert-caution-color)' : 'currentColor'}\n stroke=${isFlat\n ? 'var(--alert-caution-outline-color)'\n : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.isaHigh:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n d=\"M5.29694 1.72622L1.05702 9.32693C0.838739 9.71823 0.729598 9.91388 0.748108 10.0741C0.764257 10.2138 0.83853 10.3403 0.952704 10.4225C1.08357 10.5167 1.3076 10.5167 1.75567 10.5167H10.233C10.6809 10.5167 10.9049 10.5167 11.0357 10.4225C11.1499 10.3403 11.2242 10.2139 11.2404 10.0741C11.2589 9.914 11.1498 9.71837 10.9317 9.3271L6.69433 1.7264C6.46616 1.31712 6.35207 1.11247 6.20181 1.04447C6.07082 0.985194 5.92064 0.985175 5.78964 1.04442C5.63936 1.11238 5.52522 1.317 5.29694 1.72622Z\"\n fill=${isFlat ? 'var(--alert-alarm-color)' : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.isaMedium:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"4.5\"\n fill=${isFlat ? 'var(--alert-warning-color)' : 'currentColor'}\n stroke=${isFlat\n ? 'var(--alert-warning-outline-color)'\n : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.isaLow:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n d=\"M2.2998 2H9.7002C9.848 2 9.92907 2.00015 9.9873 2.00488C9.98955 2.00507 9.99213 2.0047 9.99414 2.00488C9.99436 2.0072 9.9949 2.01006 9.99512 2.0127C9.99985 2.07093 10 2.152 10 2.2998V9.7002C10 9.848 9.99985 9.92907 9.99512 9.9873C9.99493 9.98958 9.99433 9.9921 9.99414 9.99414C9.9921 9.99433 9.98958 9.99493 9.9873 9.99512C9.92907 9.99985 9.848 10 9.7002 10H2.2998C2.152 10 2.07093 9.99985 2.0127 9.99512C2.01006 9.9949 2.0072 9.99436 2.00488 9.99414C2.0047 9.99213 2.00507 9.98955 2.00488 9.9873C2.00015 9.92907 2 9.848 2 9.7002V2.2998L2.00488 2.0127C2.0051 2.01009 2.00467 2.00718 2.00488 2.00488C2.00718 2.00467 2.01009 2.0051 2.0127 2.00488L2.2998 2Z\"\n fill=${isFlat ? 'var(--alert-caution-color)' : 'currentColor'}\n stroke=${isFlat\n ? 'var(--alert-caution-outline-color)'\n : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.isaCritical:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n d=\"M11 6L8.5 10.33H3.5L1 6L3.5 1.67H8.5L11 6Z\"\n fill=${isFlat\n ? 'var(--critical-enabled-background-color)'\n : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.isaDiagnostic:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n d=\"M5.25 1H6.75V5.7L9.955 3.85L10.705 5.15L7.5 7L10.705 8.85L9.955 10.15L6.75 8.3V11H5.25V8.3L2.045 10.15L1.295 8.85L4.5 7L1.295 5.15L2.045 3.85L5.25 5.7V1Z\"\n fill=${isFlat\n ? 'var(--notification-enabled-background-color)'\n : 'currentColor'}\n />\n </svg>\n `;\n case BadgeType.running:\n return html`\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6ZM2.89624 6.10353L3.60335 5.39642L5.24979 7.04287L8.39624 3.89642L9.10335 4.60353L5.24979 8.45708L2.89624 6.10353Z\"\n fill=${isFlat ? 'var(--alert-running-color)' : 'currentColor'}\n />\n </svg>\n `;\n default:\n return html`<slot class=\"badge-icon\" name=\"badge-icon\"></slot>`;\n }\n }\n\n override render() {\n const isFlat = this.variant === BadgeVariant.flat;\n return html`\n <div\n class=${classMap({\n wrapper: true,\n ['size-' + this.size]: true,\n ['type-' + this.effectiveType]: !isFlat,\n ['variant-flat']: isFlat,\n hideNumber: !this.showNumber,\n })}\n >\n ${this.effectiveType !== BadgeType.empty\n ? html`\n ${this.showIcon\n ? html`\n <div\n class=${classMap({\n icon: true,\n ['type-' + this.type]: isFlat,\n })}\n >\n ${this.renderIcon()}\n </div>\n `\n : nothing}\n ${this.showNumber\n ? html`<div class=\"number\">\n <span class=\"number-text\">${this.number}</span>\n </div>`\n : ''}\n `\n : ''}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-badge': ObcBadge;\n }\n}\n"],"names":["BadgeSize","BadgeType","BadgeVariant"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,5 +1,6 @@
1
- import { AlertCategory, AlertType, Direction, comparePriorityAlerts, formatTimeSince, isAcknowledged, isActive, isBlocked, isShelved } from "./types.js";
1
+ import { ALERT_SEVERITY_PRIORITY, AlertCategory, AlertType, Direction, comparePriorityAlerts, formatTimeSince, isAcknowledged, isActive, isBlocked, isShelved } from "./types.js";
2
2
  export {
3
+ ALERT_SEVERITY_PRIORITY,
3
4
  AlertCategory,
4
5
  AlertType,
5
6
  Direction,
@@ -0,0 +1,30 @@
1
+ import { LitElement } from 'lit';
2
+ /**
3
+ * `<obi-alerts-critical-twotone>` – Two-tone bell icon for the ISA "critical" alert severity.
4
+ *
5
+ * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and
6
+ * fill can be tinted independently. Used wherever a critical-severity alert needs an
7
+ * icon representation (badges, frames, lists).
8
+ *
9
+ * ### Features
10
+ * - **Color modes:** Set `useCssColor` to render with the critical design tokens
11
+ * (`--alert-critical-color` / `--alert-critical-outline-color`); leave it `false`
12
+ * (default) to render with `currentColor` so the icon inherits its parent's color.
13
+ *
14
+ * ### Properties and Attributes
15
+ * - `useCssColor` (boolean): When true, fills the two tones with the critical color
16
+ * tokens instead of `currentColor`. Defaults to `false`.
17
+ */
18
+ export declare class ObiAlertsCriticalTwotone extends LitElement {
19
+ useCssColor: boolean;
20
+ private icon;
21
+ private iconCss;
22
+ render(): import('lit-html').TemplateResult<1>;
23
+ static styles: import('lit').CSSResult;
24
+ }
25
+ declare global {
26
+ interface HTMLElementTagNameMap {
27
+ 'obi-alerts-critical-twotone': ObiAlertsCriticalTwotone;
28
+ }
29
+ }
30
+ //# sourceMappingURL=icon-alerts-critical-twotone.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-alerts-critical-twotone.d.ts","sourceRoot":"","sources":["../../src/manual-icon/icon-alerts-critical-twotone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAI/C;;;;;;;;;;;;;;;GAeG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAC3B,WAAW,UAAS;IAE/C,OAAO,CAAC,IAAI,CAIZ;IAEA,OAAO,CAAC,OAAO,CAIf;IAES,MAAM;IAMf,OAAgB,MAAM,0BAUpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}