@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.151 → 2.0.0-next.152

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 (136) hide show
  1. package/.storybook/vitest.setup.ts +12 -1
  2. package/bundle/openbridge-webcomponents.bundle.js +989 -319
  3. package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
  4. package/custom-elements.json +1514 -77
  5. package/dist/alert-severity.d.ts +12 -9
  6. package/dist/alert-severity.d.ts.map +1 -1
  7. package/dist/alert-severity.js +30 -38
  8. package/dist/alert-severity.js.map +1 -1
  9. package/dist/building-blocks/bar-horizontal/bar-horizontal.d.ts +6 -0
  10. package/dist/building-blocks/bar-horizontal/bar-horizontal.d.ts.map +1 -1
  11. package/dist/building-blocks/bar-horizontal/bar-horizontal.js +6 -1
  12. package/dist/building-blocks/bar-horizontal/bar-horizontal.js.map +1 -1
  13. package/dist/building-blocks/bar-vertical/bar-vertical.d.ts +6 -0
  14. package/dist/building-blocks/bar-vertical/bar-vertical.d.ts.map +1 -1
  15. package/dist/building-blocks/bar-vertical/bar-vertical.js +6 -1
  16. package/dist/building-blocks/bar-vertical/bar-vertical.js.map +1 -1
  17. package/dist/building-blocks/chart-line/chart-line-base.d.ts +129 -0
  18. package/dist/building-blocks/chart-line/chart-line-base.d.ts.map +1 -1
  19. package/dist/building-blocks/chart-line/chart-line-base.js +464 -79
  20. package/dist/building-blocks/chart-line/chart-line-base.js.map +1 -1
  21. package/dist/building-blocks/external-scale/external-scale.d.ts +11 -0
  22. package/dist/building-blocks/external-scale/external-scale.d.ts.map +1 -1
  23. package/dist/building-blocks/external-scale/external-scale.js +45 -12
  24. package/dist/building-blocks/external-scale/external-scale.js.map +1 -1
  25. package/dist/charthelpers/index.d.ts +1 -0
  26. package/dist/charthelpers/index.d.ts.map +1 -1
  27. package/dist/charthelpers/index.js +7 -1
  28. package/dist/charthelpers/index.js.map +1 -1
  29. package/dist/charthelpers/range-labels.d.ts +55 -0
  30. package/dist/charthelpers/range-labels.d.ts.map +1 -0
  31. package/dist/charthelpers/range-labels.js +36 -0
  32. package/dist/charthelpers/range-labels.js.map +1 -0
  33. package/dist/components/alert-button/alert-button.css.js +13 -21
  34. package/dist/components/alert-button/alert-button.css.js.map +1 -1
  35. package/dist/components/alert-button/alert-button.d.ts +9 -4
  36. package/dist/components/alert-button/alert-button.d.ts.map +1 -1
  37. package/dist/components/alert-button/alert-button.js +24 -15
  38. package/dist/components/alert-button/alert-button.js.map +1 -1
  39. package/dist/components/alert-frame/alert-frame.css.js +109 -33
  40. package/dist/components/alert-frame/alert-frame.css.js.map +1 -1
  41. package/dist/components/alert-frame/alert-frame.d.ts +34 -7
  42. package/dist/components/alert-frame/alert-frame.d.ts.map +1 -1
  43. package/dist/components/alert-frame/alert-frame.js +134 -30
  44. package/dist/components/alert-frame/alert-frame.js.map +1 -1
  45. package/dist/components/alert-icon/alert-icon.d.ts +10 -7
  46. package/dist/components/alert-icon/alert-icon.d.ts.map +1 -1
  47. package/dist/components/alert-icon/alert-icon.js +37 -60
  48. package/dist/components/alert-icon/alert-icon.js.map +1 -1
  49. package/dist/components/alert-menu-item/alert-menu-item.css.js +1 -4
  50. package/dist/components/alert-menu-item/alert-menu-item.css.js.map +1 -1
  51. package/dist/components/date-item/date-item.css.js +3 -3
  52. package/dist/components/keyboard-full/keyboard-full.css.js +4 -4
  53. package/dist/components/message-menu-item/message-menu-item.css.js +2 -6
  54. package/dist/components/message-menu-item/message-menu-item.css.js.map +1 -1
  55. package/dist/components/sequence-toolbar/sequence-toolbar.css.js +1 -2
  56. package/dist/components/sequence-toolbar/sequence-toolbar.css.js.map +1 -1
  57. package/dist/index.js +2 -1
  58. package/dist/navigation-instruments/gauge-trend/gauge-trend.d.ts +6 -0
  59. package/dist/navigation-instruments/gauge-trend/gauge-trend.d.ts.map +1 -1
  60. package/dist/navigation-instruments/gauge-trend/gauge-trend.js +8 -0
  61. package/dist/navigation-instruments/gauge-trend/gauge-trend.js.map +1 -1
  62. package/dist/navigation-instruments/instrument-field/instrument-field.css.js +2 -2
  63. package/dist/navigation-instruments/readout/readout.d.ts.map +1 -1
  64. package/dist/navigation-instruments/readout/readout.js +2 -1
  65. package/dist/navigation-instruments/readout/readout.js.map +1 -1
  66. package/dist/navigation-instruments/readout-list-item/readout-list-item.d.ts.map +1 -1
  67. package/dist/navigation-instruments/readout-list-item/readout-list-item.js +2 -1
  68. package/dist/navigation-instruments/readout-list-item/readout-list-item.js.map +1 -1
  69. package/dist/openbridge.css +19 -4
  70. package/dist/palettes/blinking.d.ts +14 -4
  71. package/dist/palettes/blinking.d.ts.map +1 -1
  72. package/dist/palettes/blinking.js +41 -35
  73. package/dist/palettes/blinking.js.map +1 -1
  74. package/dist/palettes/flashing-controller.d.ts +21 -0
  75. package/dist/palettes/flashing-controller.d.ts.map +1 -0
  76. package/dist/palettes/flashing-controller.js +45 -0
  77. package/dist/palettes/flashing-controller.js.map +1 -0
  78. package/dist/svghelpers/index.d.ts +1 -0
  79. package/dist/svghelpers/index.d.ts.map +1 -1
  80. package/dist/svghelpers/index.js +2 -0
  81. package/dist/svghelpers/index.js.map +1 -1
  82. package/dist/svghelpers/rounded-rect.d.ts +15 -0
  83. package/dist/svghelpers/rounded-rect.d.ts.map +1 -0
  84. package/dist/svghelpers/rounded-rect.js +29 -0
  85. package/dist/svghelpers/rounded-rect.js.map +1 -0
  86. package/dist/types.d.ts +14 -0
  87. package/dist/types.d.ts.map +1 -1
  88. package/dist/types.js +9 -0
  89. package/dist/types.js.map +1 -1
  90. package/package.json +1 -1
  91. package/script/check-css-variables.ts +2 -15
  92. package/src/alert-severity.spec.ts +56 -0
  93. package/src/alert-severity.ts +45 -43
  94. package/src/bars-graphs/area-graph/area-graph.stories.ts +235 -1
  95. package/src/bars-graphs/line-graph/line-graph.stories.ts +24 -0
  96. package/src/building-blocks/bar-horizontal/bar-horizontal.ts +7 -0
  97. package/src/building-blocks/bar-vertical/bar-vertical.ts +7 -0
  98. package/src/building-blocks/chart-line/chart-line-base.spec.ts +767 -0
  99. package/src/building-blocks/chart-line/chart-line-base.stories.ts +124 -0
  100. package/src/building-blocks/chart-line/chart-line-base.ts +671 -97
  101. package/src/building-blocks/chart-line/chart-sizing-battleground.stories.ts +17 -0
  102. package/src/building-blocks/external-scale/external-scale.spec.ts +154 -0
  103. package/src/building-blocks/external-scale/external-scale.ts +78 -20
  104. package/src/charthelpers/index.ts +1 -0
  105. package/src/charthelpers/range-labels.spec.ts +46 -0
  106. package/src/charthelpers/range-labels.ts +93 -0
  107. package/src/components/alert-button/alert-button.css +10 -23
  108. package/src/components/alert-button/alert-button.spec.ts +56 -15
  109. package/src/components/alert-button/alert-button.stories.ts +5 -1
  110. package/src/components/alert-button/alert-button.ts +33 -24
  111. package/src/components/alert-frame/alert-flash-scenario.stories.ts +669 -0
  112. package/src/components/alert-frame/alert-frame.css +106 -33
  113. package/src/components/alert-frame/alert-frame.spec.ts +176 -17
  114. package/src/components/alert-frame/alert-frame.stories.ts +61 -0
  115. package/src/components/alert-frame/alert-frame.ts +179 -41
  116. package/src/components/alert-icon/alert-icon.spec.ts +82 -27
  117. package/src/components/alert-icon/alert-icon.stories.ts +7 -1
  118. package/src/components/alert-icon/alert-icon.ts +48 -74
  119. package/src/components/alert-menu-item/alert-menu-item.css +1 -4
  120. package/src/components/date-item/date-item.css +3 -3
  121. package/src/components/keyboard-full/keyboard-full.css +4 -4
  122. package/src/components/message-menu-item/message-menu-item.css +2 -6
  123. package/src/components/sequence-toolbar/sequence-toolbar.css +1 -2
  124. package/src/navigation-instruments/gauge-trend/gauge-trend.stories.ts +29 -0
  125. package/src/navigation-instruments/gauge-trend/gauge-trend.ts +11 -0
  126. package/src/navigation-instruments/instrument-field/instrument-field.css +2 -2
  127. package/src/navigation-instruments/readout/readout.ts +2 -1
  128. package/src/navigation-instruments/readout-list-item/readout-list-item.ts +2 -1
  129. package/src/palettes/blinking.spec.ts +83 -0
  130. package/src/palettes/blinking.ts +47 -35
  131. package/src/palettes/flashing-controller.ts +62 -0
  132. package/src/palettes/manual.css +18 -4
  133. package/src/svghelpers/index.ts +1 -0
  134. package/src/svghelpers/rounded-rect.spec.ts +47 -0
  135. package/src/svghelpers/rounded-rect.ts +42 -0
  136. package/src/types.ts +20 -0
@@ -8,4 +8,5 @@ export * from './tooltip.js';
8
8
  export * from './legend.js';
9
9
  export * from './x-value.js';
10
10
  export * from './label-threshold.js';
11
+ export * from './range-labels.js';
11
12
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charthelpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charthelpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC"}
@@ -8,6 +8,7 @@ import { getChartTooltipOptions } from "./tooltip.js";
8
8
  import { generateLegendHTML } from "./legend.js";
9
9
  import { XValueMode, formatXValue, normalizeXValue } from "./x-value.js";
10
10
  import { observeLabelThreshold } from "./label-threshold.js";
11
+ import { formatRangeValue, measureRangeLabelGutters, rangeLabelFontString, rangeLabelLineHeight, yRangeLabelValues } from "./range-labels.js";
11
12
  export {
12
13
  CENTER_READOUT_CONFIG,
13
14
  CHART_AREA_BACKGROUND_COLOR_VAR,
@@ -27,14 +28,19 @@ export {
27
28
  calculateSumTotal,
28
29
  createArcOuterLabelPlugin,
29
30
  formatChartNumber,
31
+ formatRangeValue,
30
32
  formatSingleLabel,
31
33
  formatXValue,
32
34
  generateLegendHTML,
33
35
  getChartColorsOrDefault,
34
36
  getChartTooltipOptions,
35
37
  getCssVariableValue,
38
+ measureRangeLabelGutters,
36
39
  normalizeXValue,
37
40
  observeLabelThreshold,
38
- observeThemeChanges
41
+ observeThemeChanges,
42
+ rangeLabelFontString,
43
+ rangeLabelLineHeight,
44
+ yRangeLabelValues
39
45
  };
40
46
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
@@ -0,0 +1,55 @@
1
+ /**
2
+ * Min / max labels for charts below the label threshold: which values to
3
+ * show and how much gutter their text needs. Pure; the chart measures on
4
+ * its own canvas and draws with its own plugin.
5
+ */
6
+ export interface RangeLabelFont {
7
+ family: string;
8
+ sizePx: number;
9
+ weight: string;
10
+ }
11
+ /**
12
+ * @param font - Family, size in px and weight of the label text
13
+ * @returns The canvas `font` shorthand for that text
14
+ */
15
+ export declare function rangeLabelFontString(font: RangeLabelFont): string;
16
+ /**
17
+ * Chart.js' own line-height ratio, so the gutter matches its tick labels.
18
+ *
19
+ * @param font - The label font
20
+ * @returns One text line in px
21
+ */
22
+ export declare function rangeLabelLineHeight(font: RangeLabelFont): number;
23
+ /**
24
+ * One decimal only when an end of the range needs it; both ends share it.
25
+ *
26
+ * @param value - The value to print
27
+ * @param min - Lower end of the range the value belongs to
28
+ * @param max - Upper end of the range
29
+ * @returns The label text
30
+ */
31
+ export declare function formatRangeValue(value: number, min: number, max: number): string;
32
+ /**
33
+ * @param min - Lower end of the y range
34
+ * @param max - Upper end of the y range
35
+ * @returns `[min, 0, max]`, with 0 only strictly inside the range
36
+ */
37
+ export declare function yRangeLabelValues(min: number, max: number): number[];
38
+ export interface RangeLabelGutters {
39
+ /** Room on the y-axis side: the widest label plus the gap. */
40
+ side: number;
41
+ /** Room below the plot: one line plus the gap. */
42
+ bottom: number;
43
+ }
44
+ /**
45
+ * The x labels sit in a band one line tall, so only their count matters;
46
+ * their width is not measured.
47
+ *
48
+ * @param ctx - A 2d context to measure on; its font is restored afterwards
49
+ * @param font - The label font
50
+ * @param yTexts - Labels for the y side, empty when that side has none
51
+ * @param xTexts - Labels for the bottom, empty when the x side has none
52
+ * @returns Gutter sizes in px; 0 for a side without labels
53
+ */
54
+ export declare function measureRangeLabelGutters(ctx: CanvasRenderingContext2D, font: RangeLabelFont, yTexts: string[], xTexts: string[]): RangeLabelGutters;
55
+ //# sourceMappingURL=range-labels.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"range-labels.d.ts","sourceRoot":"","sources":["../../src/charthelpers/range-labels.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAEjE;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAEjE;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,GACV,MAAM,CAGR;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAEpE;AAED,MAAM,WAAW,iBAAiB;IAChC,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAC;CAChB;AAKD;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CACtC,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,MAAM,EAAE,EAChB,MAAM,EAAE,MAAM,EAAE,GACf,iBAAiB,CAYnB"}
@@ -0,0 +1,36 @@
1
+ function rangeLabelFontString(font) {
2
+ return `${font.weight} ${font.sizePx}px ${font.family}`;
3
+ }
4
+ function rangeLabelLineHeight(font) {
5
+ return Math.round(font.sizePx * 1.2);
6
+ }
7
+ function formatRangeValue(value, min, max) {
8
+ const decimals = Number.isInteger(min) && Number.isInteger(max) ? 0 : 1;
9
+ return value.toFixed(decimals);
10
+ }
11
+ function yRangeLabelValues(min, max) {
12
+ return min < 0 && max > 0 ? [min, 0, max] : [min, max];
13
+ }
14
+ const SIDE_GAP = 8;
15
+ const BOTTOM_GAP = 4;
16
+ function measureRangeLabelGutters(ctx, font, yTexts, xTexts) {
17
+ ctx.save();
18
+ ctx.font = rangeLabelFontString(font);
19
+ const widest = yTexts.reduce(
20
+ (width, text) => Math.max(width, ctx.measureText(text).width),
21
+ 0
22
+ );
23
+ ctx.restore();
24
+ return {
25
+ side: yTexts.length ? Math.ceil(widest) + SIDE_GAP : 0,
26
+ bottom: xTexts.length ? rangeLabelLineHeight(font) + BOTTOM_GAP : 0
27
+ };
28
+ }
29
+ export {
30
+ formatRangeValue,
31
+ measureRangeLabelGutters,
32
+ rangeLabelFontString,
33
+ rangeLabelLineHeight,
34
+ yRangeLabelValues
35
+ };
36
+ //# sourceMappingURL=range-labels.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"range-labels.js","sources":["../../src/charthelpers/range-labels.ts"],"sourcesContent":["/**\n * Min / max labels for charts below the label threshold: which values to\n * show and how much gutter their text needs. Pure; the chart measures on\n * its own canvas and draws with its own plugin.\n */\nexport interface RangeLabelFont {\n family: string;\n sizePx: number;\n weight: string;\n}\n\n/**\n * @param font - Family, size in px and weight of the label text\n * @returns The canvas `font` shorthand for that text\n */\nexport function rangeLabelFontString(font: RangeLabelFont): string {\n return `${font.weight} ${font.sizePx}px ${font.family}`;\n}\n\n/**\n * Chart.js' own line-height ratio, so the gutter matches its tick labels.\n *\n * @param font - The label font\n * @returns One text line in px\n */\nexport function rangeLabelLineHeight(font: RangeLabelFont): number {\n return Math.round(font.sizePx * 1.2);\n}\n\n/**\n * One decimal only when an end of the range needs it; both ends share it.\n *\n * @param value - The value to print\n * @param min - Lower end of the range the value belongs to\n * @param max - Upper end of the range\n * @returns The label text\n */\nexport function formatRangeValue(\n value: number,\n min: number,\n max: number\n): string {\n const decimals = Number.isInteger(min) && Number.isInteger(max) ? 0 : 1;\n return value.toFixed(decimals);\n}\n\n/**\n * @param min - Lower end of the y range\n * @param max - Upper end of the y range\n * @returns `[min, 0, max]`, with 0 only strictly inside the range\n */\nexport function yRangeLabelValues(min: number, max: number): number[] {\n return min < 0 && max > 0 ? [min, 0, max] : [min, max];\n}\n\nexport interface RangeLabelGutters {\n /** Room on the y-axis side: the widest label plus the gap. */\n side: number;\n /** Room below the plot: one line plus the gap. */\n bottom: number;\n}\n\nconst SIDE_GAP = 8;\nconst BOTTOM_GAP = 4;\n\n/**\n * The x labels sit in a band one line tall, so only their count matters;\n * their width is not measured.\n *\n * @param ctx - A 2d context to measure on; its font is restored afterwards\n * @param font - The label font\n * @param yTexts - Labels for the y side, empty when that side has none\n * @param xTexts - Labels for the bottom, empty when the x side has none\n * @returns Gutter sizes in px; 0 for a side without labels\n */\nexport function measureRangeLabelGutters(\n ctx: CanvasRenderingContext2D,\n font: RangeLabelFont,\n yTexts: string[],\n xTexts: string[]\n): RangeLabelGutters {\n ctx.save();\n ctx.font = rangeLabelFontString(font);\n const widest = yTexts.reduce(\n (width, text) => Math.max(width, ctx.measureText(text).width),\n 0\n );\n ctx.restore();\n return {\n side: yTexts.length ? Math.ceil(widest) + SIDE_GAP : 0,\n bottom: xTexts.length ? rangeLabelLineHeight(font) + BOTTOM_GAP : 0,\n };\n}\n"],"names":[],"mappings":"AAeO,SAAS,qBAAqB,MAA8B;AACjE,SAAO,GAAG,KAAK,MAAM,IAAI,KAAK,MAAM,MAAM,KAAK,MAAM;AACvD;AAQO,SAAS,qBAAqB,MAA8B;AACjE,SAAO,KAAK,MAAM,KAAK,SAAS,GAAG;AACrC;AAUO,SAAS,iBACd,OACA,KACA,KACQ;AACR,QAAM,WAAW,OAAO,UAAU,GAAG,KAAK,OAAO,UAAU,GAAG,IAAI,IAAI;AACtE,SAAO,MAAM,QAAQ,QAAQ;AAC/B;AAOO,SAAS,kBAAkB,KAAa,KAAuB;AACpE,SAAO,MAAM,KAAK,MAAM,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG;AACvD;AASA,MAAM,WAAW;AACjB,MAAM,aAAa;AAYZ,SAAS,yBACd,KACA,MACA,QACA,QACmB;AACnB,MAAI,KAAA;AACJ,MAAI,OAAO,qBAAqB,IAAI;AACpC,QAAM,SAAS,OAAO;AAAA,IACpB,CAAC,OAAO,SAAS,KAAK,IAAI,OAAO,IAAI,YAAY,IAAI,EAAE,KAAK;AAAA,IAC5D;AAAA,EAAA;AAEF,MAAI,QAAA;AACJ,SAAO;AAAA,IACL,MAAM,OAAO,SAAS,KAAK,KAAK,MAAM,IAAI,WAAW;AAAA,IACrD,QAAQ,OAAO,SAAS,qBAAqB,IAAI,IAAI,aAAa;AAAA,EAAA;AAEtE;"}
@@ -1495,42 +1495,34 @@ button {
1495
1495
  width: min-content;
1496
1496
  }
1497
1497
 
1498
- :is(.blinking.alert-type-warning .alert-button,.blinking.alert-type-level-medium .alert-button) .visible-wrapper {
1499
- opacity: var(--warning-blink-on);
1498
+ :is(.flash-fast .alert-button) .visible-wrapper {
1499
+ opacity: var(--flash-fast-on);
1500
1500
  }
1501
1501
 
1502
- :is(.blinking.alert-type-warning .alert-button,.blinking.alert-type-level-medium .alert-button) .blink {
1503
- opacity: var(--warning-blink-off);
1502
+ :is(.flash-fast .alert-button) .blink {
1503
+ opacity: var(--flash-fast-off);
1504
1504
  }
1505
1505
 
1506
- :is(.blinking.alert-type-level-critical .alert-button) .visible-wrapper {
1507
- opacity: var(--critical-blink-on);
1506
+ :is(.flash-slow .alert-button) .visible-wrapper {
1507
+ opacity: var(--flash-slow-on);
1508
1508
  }
1509
1509
 
1510
- :is(.blinking.alert-type-level-critical .alert-button) .blink {
1511
- opacity: var(--critical-blink-off);
1510
+ :is(.flash-slow .alert-button) .blink {
1511
+ opacity: var(--flash-slow-off);
1512
1512
  }
1513
1513
 
1514
- :is(.blinking.alert-type-alarm .alert-button,.blinking.alert-type-level-high .alert-button) .visible-wrapper {
1515
- opacity: var(--alarm-blink-on);
1514
+ :is(.flash-very-slow .alert-button) .visible-wrapper {
1515
+ opacity: var(--flash-very-slow-on);
1516
1516
  }
1517
1517
 
1518
- :is(.blinking.alert-type-alarm .alert-button,.blinking.alert-type-level-high .alert-button) .blink {
1519
- opacity: var(--alarm-blink-off);
1520
- }
1521
-
1522
- :is(.blinking.alert-type-caution .alert-button,.blinking.alert-type-level-low .alert-button) .visible-wrapper {
1523
- opacity: var(--low-blink-on);
1524
- }
1525
-
1526
- :is(.blinking.alert-type-caution .alert-button,.blinking.alert-type-level-low .alert-button) .blink {
1527
- opacity: var(--low-blink-off);
1518
+ :is(.flash-very-slow .alert-button) .blink {
1519
+ opacity: var(--flash-very-slow-off);
1528
1520
  }
1529
1521
 
1530
1522
  .counter .alert-button .visible-wrapper,
1531
1523
  .counter .alert-button .blink {
1532
1524
  padding: 0px var(--ui-components-button-padding-horizontal);
1533
- gap: var(--app-components-global-alert-item-counter-spacing);
1525
+ gap: var(--app-components-alert-button-item-counter-spacing);
1534
1526
  }
1535
1527
 
1536
1528
  .alert-type-alarm {
@@ -1 +1 @@
1
- {"version":3,"file":"alert-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"alert-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,5 +1,6 @@
1
1
  import { LitElement } from 'lit';
2
- import { AlertType } from '../../types.js';
2
+ import { AlertType, FlashingSpeed, ResolvedFlashingSpeed } from '../../types.js';
3
+ import { FlashingController } from '../../palettes/flashing-controller.js';
3
4
  import '../../icons/icon-alerts.js';
4
5
  import '../../icons/icon-alerts-active.js';
5
6
  import '../../icons/icon-notification.js';
@@ -65,6 +66,7 @@ export declare enum ObcAlertButtonType {
65
66
  * - `flatMaxBreakpointPx` (number): Maximum width (in px) for normal/enhanced mode; below this, switches to flat mode.
66
67
  * - `silenceButtonMinBreakpointPx` (number): Minimum width (in px) to show the silence button; below this, it is hidden.
67
68
  * - `blinking` (boolean): Enables blinking animation for active alerts (not for caution type).
69
+ * - `flashingSpeed`: tempo of the blink (`default` follows the alert type: critical/alarm/high fast, warning/medium slow, low very slow; `fixed` never flashes).
68
70
  * - `large` (boolean): Increases button size for prominent or touch-friendly use.
69
71
  *
70
72
  * ## Events
@@ -97,6 +99,8 @@ export declare enum ObcAlertButtonType {
97
99
  *
98
100
  * 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.
99
101
  *
102
+ * @property flashingSpeed - Flash tempo while `blinking` is on: `default` resolves from
103
+ * `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.
100
104
  * @property silenceButtonDisabled - Disables the silence button when true.
101
105
  * @availableWhen silenceButtonDisabled showSilenceButton==true
102
106
  * @slot - No content slots. All content is provided via properties.
@@ -151,6 +155,10 @@ export declare class ObcAlertButton extends LitElement {
151
155
  * Blinking is only shown for alarm and warning types, not for caution.
152
156
  */
153
157
  blinking: boolean;
158
+ /** Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. */
159
+ flashingSpeed: FlashingSpeed;
160
+ protected readonly flashing: FlashingController;
161
+ get resolvedFlashingSpeed(): ResolvedFlashingSpeed;
154
162
  /**
155
163
  * Maximum width (in px) for normal/enhanced mode.
156
164
  *
@@ -178,9 +186,6 @@ export declare class ObcAlertButton extends LitElement {
178
186
  private alertIconNegative;
179
187
  private get activeType();
180
188
  private get showSilenceButtonDynamic();
181
- private _blinkAnimationCancel?;
182
- private installBlinking;
183
- updated(): void;
184
189
  render(): import('lit-html').TemplateResult<1>;
185
190
  static styles: import('lit').CSSResult;
186
191
  }
@@ -1 +1 @@
1
- {"version":3,"file":"alert-button.d.ts","sourceRoot":"","sources":["../../../src/components/alert-button/alert-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AACjD,OAAO,gDAAgD,CAAC;AACxD,OAAO,iCAAiC,CAAC;AACzC,OAAO,0CAA0C,CAAC;AAClD,OAAO,4CAA4C,CAAC;AACpD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAUzC;;;;;;GAMG;AACH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;;;OAIG;IACuB,OAAO,SAAK;IAEtC;;;;OAIG;IACuB,SAAS,CAAC,EAAE,SAAS,CAAC;IAEhD;;;;;;OAMG;IACuB,IAAI,qBAA6B;IAE3D;;;;OAIG;IACwB,KAAK,UAAS;IAEzC;;;;OAIG;IACwB,iBAAiB,UAAS;IAE1B,qBAAqB,UAAS;IAEzD;;;;OAIG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACwB,QAAQ,UAAS;IAE5C;;;;;;;OAOG;IACuB,mBAAmB,SAAK;IAElD;;;;;;;OAOG;IACuB,4BAA4B,SAAK;IAElD,OAAO,CAAC,KAAK,CAAqB;IAE3C,OAAO,CAAC,cAAc,CAEpB;IAEO,iBAAiB;IAQjB,oBAAoB;IAM7B,OAAO,CAAC,sBAAsB;IAiC9B,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,iBAAiB;IASzB,OAAO,KAAK,UAAU,GAQrB;IAED,OAAO,KAAK,wBAAwB,GAMnC;IAED,OAAO,CAAC,qBAAqB,CAAC,CAAa;IAE3C,OAAO,CAAC,eAAe;IAKd,OAAO;IAIP,MAAM;IA2Df,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
1
+ {"version":3,"file":"alert-button.d.ts","sourceRoot":"","sources":["../../../src/components/alert-button/alert-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AACjD,OAAO,gDAAgD,CAAC;AACxD,OAAO,iCAAiC,CAAC;AACzC,OAAO,0CAA0C,CAAC;AAClD,OAAO,4CAA4C,CAAC;AACpD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,EACL,SAAS,EACT,aAAa,EACb,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AASxB,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AAEzE;;;;;;GAMG;AACH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;;;OAIG;IACuB,OAAO,SAAK;IAEtC;;;;OAIG;IACuB,SAAS,CAAC,EAAE,SAAS,CAAC;IAEhD;;;;;;OAMG;IACuB,IAAI,qBAA6B;IAE3D;;;;OAIG;IACwB,KAAK,UAAS;IAEzC;;;;OAIG;IACwB,iBAAiB,UAAS;IAE1B,qBAAqB,UAAS;IAEzD;;;;OAIG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACwB,QAAQ,UAAS;IAElB,aAAa,EAAE,aAAa,CAC9B;IAExB,SAAS,CAAC,QAAQ,CAAC,QAAQ,qBAGzB;IAEF,IAAI,qBAAqB,IAAI,qBAAqB,CASjD;IAED;;;;;;;OAOG;IACuB,mBAAmB,SAAK;IAElD;;;;;;;OAOG;IACuB,4BAA4B,SAAK;IAElD,OAAO,CAAC,KAAK,CAAqB;IAE3C,OAAO,CAAC,cAAc,CAEpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,sBAAsB;IAiC9B,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,iBAAiB;IASzB,OAAO,KAAK,UAAU,GAQrB;IAED,OAAO,KAAK,wBAAwB,GAMnC;IAEQ,MAAM;IAwDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
@@ -12,10 +12,11 @@ import "../../icons/icon-alerts-warning-twotone.js";
12
12
  import "../../icons/icon-alerts-caution-twotone.js";
13
13
  import "../../manual-icon/icon-alerts-critical-twotone.js";
14
14
  import "../../manual-icon/icon-alerts-diagnostic-twotone.js";
15
- import { getAlertTwotoneComponent, AlertTwotoneComponent, supportsBlinking } from "../../alert-severity.js";
15
+ import { FlashingSpeed } from "../../types.js";
16
+ import { resolveFlashingSpeed, AlertFlashPhase, getAlertTwotoneComponent, AlertTwotoneComponent } from "../../alert-severity.js";
16
17
  import { classMap } from "lit/directives/class-map.js";
17
18
  import { customElement } from "../../decorator.js";
18
- import { blinkingAll } from "../../palettes/blinking.js";
19
+ import { FlashingController } from "../../palettes/flashing-controller.js";
19
20
  var __defProp = Object.defineProperty;
20
21
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
21
22
  var __decorateClass = (decorators, target, key, kind) => {
@@ -42,6 +43,11 @@ let ObcAlertButton = class extends LitElement {
42
43
  this.silenceButtonDisabled = false;
43
44
  this.counter = false;
44
45
  this.blinking = false;
46
+ this.flashingSpeed = FlashingSpeed.Default;
47
+ this.flashing = new FlashingController(
48
+ this,
49
+ () => this.resolvedFlashingSpeed
50
+ );
45
51
  this.flatMaxBreakpointPx = 0;
46
52
  this.silenceButtonMinBreakpointPx = 0;
47
53
  this.width = window.innerWidth;
@@ -49,16 +55,22 @@ let ObcAlertButton = class extends LitElement {
49
55
  this.width = window.innerWidth;
50
56
  };
51
57
  }
58
+ get resolvedFlashingSpeed() {
59
+ if (!this.blinking || this.nAlerts <= 0 || this.alertType === void 0) {
60
+ return FlashingSpeed.Fixed;
61
+ }
62
+ return resolveFlashingSpeed(
63
+ this.flashingSpeed,
64
+ this.alertType,
65
+ AlertFlashPhase.Active
66
+ );
67
+ }
52
68
  connectedCallback() {
53
69
  super.connectedCallback();
54
70
  window.addEventListener("resize", this.resizeListener);
55
- if (this.hasUpdated) {
56
- this.installBlinking();
57
- }
58
71
  }
59
72
  disconnectedCallback() {
60
73
  window.removeEventListener("resize", this.resizeListener);
61
- this._blinkAnimationCancel?.();
62
74
  super.disconnectedCallback();
63
75
  }
64
76
  renderAlertTwotoneIcon() {
@@ -120,17 +132,11 @@ let ObcAlertButton = class extends LitElement {
120
132
  get showSilenceButtonDynamic() {
121
133
  return this.showSilenceButton && this.width >= this.silenceButtonMinBreakpointPx && this.activeType !== "flat";
122
134
  }
123
- installBlinking() {
124
- this._blinkAnimationCancel?.();
125
- this._blinkAnimationCancel = blinkingAll(this);
126
- }
127
- updated() {
128
- this.installBlinking();
129
- }
130
135
  render() {
131
136
  const hasAlerts = this.nAlerts > 0;
132
137
  const showCounter = this.counter && hasAlerts && this.activeType !== "flat";
133
- const showBlinking = this.blinking && hasAlerts && this.alertType !== void 0 && supportsBlinking(this.alertType, false);
138
+ const tempo = this.resolvedFlashingSpeed;
139
+ const showBlinking = tempo !== FlashingSpeed.Fixed;
134
140
  return html`
135
141
  <div
136
142
  class=${classMap({
@@ -139,7 +145,7 @@ let ObcAlertButton = class extends LitElement {
139
145
  counter: showCounter,
140
146
  "has-silence": this.showSilenceButtonDynamic,
141
147
  [`type-${this.activeType}`]: true,
142
- blinking: showBlinking,
148
+ [`flash-${tempo}`]: true,
143
149
  large: this.large
144
150
  })}
145
151
  >
@@ -197,6 +203,9 @@ __decorateClass([
197
203
  __decorateClass([
198
204
  property({ type: Boolean })
199
205
  ], ObcAlertButton.prototype, "blinking", 2);
206
+ __decorateClass([
207
+ property({ type: String })
208
+ ], ObcAlertButton.prototype, "flashingSpeed", 2);
200
209
  __decorateClass([
201
210
  property({ type: Number })
202
211
  ], ObcAlertButton.prototype, "flatMaxBreakpointPx", 2);
@@ -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';\nimport {blinkingAll} from '../../palettes/blinking.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 * @property silenceButtonDisabled - Disables the silence button when true.\n * @availableWhen silenceButtonDisabled showSilenceButton==true\n * @slot - No content slots. All content is provided via properties.\n * @fires {CustomEvent<void>} click-alert - Fired when the main alert button is clicked.\n * @fires {CustomEvent<void>} click-silence - 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 @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 if (this.hasUpdated) {\n this.installBlinking();\n }\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', this.resizeListener);\n this._blinkAnimationCancel?.();\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 private _blinkAnimationCancel?: () => void;\n\n private installBlinking() {\n this._blinkAnimationCancel?.();\n this._blinkAnimationCancel = blinkingAll(this);\n }\n\n override updated() {\n this.installBlinking();\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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"}
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 {\n AlertType,\n FlashingSpeed,\n type ResolvedFlashingSpeed,\n} from '../../types.js';\nimport {\n AlertFlashPhase,\n getAlertTwotoneComponent,\n AlertTwotoneComponent,\n resolveFlashingSpeed,\n} from '../../alert-severity.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport {FlashingController} from '../../palettes/flashing-controller.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 * - `flashingSpeed`: tempo of the blink (`default` follows the alert type: critical/alarm/high fast, warning/medium slow, low very slow; `fixed` never flashes).\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 * @property flashingSpeed - Flash tempo while `blinking` is on: `default` resolves from\n * `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.\n * @property silenceButtonDisabled - Disables the silence button when true.\n * @availableWhen silenceButtonDisabled showSilenceButton==true\n * @slot - No content slots. All content is provided via properties.\n * @fires {CustomEvent<void>} click-alert - Fired when the main alert button is clicked.\n * @fires {CustomEvent<void>} click-silence - 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 @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 @property({type: String}) flashingSpeed: FlashingSpeed =\n FlashingSpeed.Default;\n\n protected readonly flashing = new FlashingController(\n this,\n () => this.resolvedFlashingSpeed\n );\n\n get resolvedFlashingSpeed(): ResolvedFlashingSpeed {\n if (!this.blinking || this.nAlerts <= 0 || this.alertType === undefined) {\n return FlashingSpeed.Fixed;\n }\n return resolveFlashingSpeed(\n this.flashingSpeed,\n this.alertType,\n AlertFlashPhase.Active\n );\n }\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 tempo = this.resolvedFlashingSpeed;\n const showBlinking = tempo !== FlashingSpeed.Fixed;\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 [`flash-${tempo}`]: true,\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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"}