@refinitiv-ui/elements 7.0.0 → 7.0.1

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 (207) hide show
  1. package/CHANGELOG.md +191 -456
  2. package/LICENSE +2 -2
  3. package/README.md +13 -11
  4. package/cli.mjs +5 -3
  5. package/lib/accordion/index.d.ts +1 -1
  6. package/lib/accordion/index.js +4 -7
  7. package/lib/appstate-bar/index.d.ts +2 -2
  8. package/lib/appstate-bar/index.js +10 -4
  9. package/lib/autosuggest/index.d.ts +7 -7
  10. package/lib/autosuggest/index.js +80 -80
  11. package/lib/autosuggest/themes/solar/charcoal/index.js +1 -1
  12. package/lib/autosuggest/themes/solar/pearl/index.js +1 -1
  13. package/lib/button/index.js +7 -10
  14. package/lib/button-bar/index.d.ts +1 -1
  15. package/lib/button-bar/index.js +12 -12
  16. package/lib/calendar/index.d.ts +39 -39
  17. package/lib/calendar/index.js +156 -123
  18. package/lib/calendar/utils.js +1 -1
  19. package/lib/canvas/index.d.ts +1 -1
  20. package/lib/canvas/index.js +2 -4
  21. package/lib/card/helpers/types.d.ts +2 -2
  22. package/lib/card/index.d.ts +5 -5
  23. package/lib/card/index.js +34 -28
  24. package/lib/chart/elements/chart.d.ts +4 -4
  25. package/lib/chart/elements/chart.js +39 -33
  26. package/lib/chart/plugins/doughnut-center-label.d.ts +3 -3
  27. package/lib/chart/plugins/doughnut-center-label.js +13 -9
  28. package/lib/checkbox/index.d.ts +1 -1
  29. package/lib/checkbox/index.js +12 -13
  30. package/lib/clock/index.d.ts +55 -55
  31. package/lib/clock/index.js +84 -95
  32. package/lib/clock/themes/halo/dark/index.js +1 -1
  33. package/lib/clock/themes/halo/light/index.js +1 -1
  34. package/lib/clock/themes/solar/charcoal/index.js +1 -1
  35. package/lib/clock/themes/solar/pearl/index.js +1 -1
  36. package/lib/collapse/index.d.ts +1 -1
  37. package/lib/collapse/index.js +27 -18
  38. package/lib/collapse/themes/halo/dark/index.js +1 -1
  39. package/lib/collapse/themes/halo/light/index.js +1 -1
  40. package/lib/color-dialog/elements/color-palettes.d.ts +1 -1
  41. package/lib/color-dialog/elements/color-palettes.js +5 -6
  42. package/lib/color-dialog/elements/grayscale-palettes.d.ts +1 -1
  43. package/lib/color-dialog/elements/grayscale-palettes.js +9 -9
  44. package/lib/color-dialog/elements/palettes.js +5 -4
  45. package/lib/color-dialog/helpers/value-model.js +7 -9
  46. package/lib/color-dialog/index.d.ts +6 -6
  47. package/lib/color-dialog/index.js +53 -37
  48. package/lib/color-picker/index.d.ts +2 -2
  49. package/lib/color-picker/index.js +40 -34
  50. package/lib/combo-box/helpers/filter.d.ts +2 -2
  51. package/lib/combo-box/helpers/types.d.ts +1 -1
  52. package/lib/combo-box/index.d.ts +9 -9
  53. package/lib/combo-box/index.js +61 -55
  54. package/lib/configuration/elements/configuration.js +2 -2
  55. package/lib/counter/index.d.ts +4 -4
  56. package/lib/counter/index.js +9 -7
  57. package/lib/datetime-field/index.d.ts +4 -5
  58. package/lib/datetime-field/index.js +32 -23
  59. package/lib/datetime-field/utils.js +11 -1
  60. package/lib/datetime-picker/index.d.ts +75 -75
  61. package/lib/datetime-picker/index.js +150 -131
  62. package/lib/datetime-picker/locales.js +5 -5
  63. package/lib/datetime-picker/utils.js +9 -9
  64. package/lib/dialog/draggable-element.js +1 -2
  65. package/lib/dialog/index.d.ts +5 -5
  66. package/lib/dialog/index.js +51 -47
  67. package/lib/email-field/index.d.ts +1 -1
  68. package/lib/email-field/index.js +6 -6
  69. package/lib/events.d.ts +1 -1
  70. package/lib/flag/index.d.ts +1 -1
  71. package/lib/flag/index.js +6 -5
  72. package/lib/flag/utils/FlagLoader.js +1 -1
  73. package/lib/header/index.d.ts +1 -1
  74. package/lib/header/index.js +2 -2
  75. package/lib/header/themes/halo/dark/index.js +1 -1
  76. package/lib/header/themes/halo/light/index.js +1 -1
  77. package/lib/header/themes/solar/charcoal/index.js +1 -1
  78. package/lib/header/themes/solar/pearl/index.js +1 -1
  79. package/lib/heatmap/helpers/color.d.ts +1 -1
  80. package/lib/heatmap/helpers/color.js +11 -5
  81. package/lib/heatmap/helpers/track.js +3 -3
  82. package/lib/heatmap/index.d.ts +9 -9
  83. package/lib/heatmap/index.js +51 -42
  84. package/lib/icon/index.d.ts +2 -2
  85. package/lib/icon/index.js +8 -10
  86. package/lib/interactive-chart/helpers/types.d.ts +3 -3
  87. package/lib/interactive-chart/index.d.ts +29 -29
  88. package/lib/interactive-chart/index.js +69 -55
  89. package/lib/item/helpers/types.d.ts +1 -1
  90. package/lib/item/index.d.ts +3 -3
  91. package/lib/item/index.js +24 -20
  92. package/lib/jsx.d.ts +6 -4
  93. package/lib/label/index.d.ts +1 -1
  94. package/lib/label/index.js +10 -7
  95. package/lib/layout/index.d.ts +7 -7
  96. package/lib/layout/index.js +7 -7
  97. package/lib/led-gauge/index.d.ts +1 -1
  98. package/lib/led-gauge/index.js +10 -10
  99. package/lib/list/elements/list.d.ts +3 -3
  100. package/lib/list/elements/list.js +10 -12
  101. package/lib/list/helpers/renderer.js +2 -2
  102. package/lib/list/helpers/types.d.ts +1 -1
  103. package/lib/list/index.d.ts +1 -1
  104. package/lib/list/renderer.d.ts +7 -7
  105. package/lib/loader/index.js +7 -8
  106. package/lib/multi-input/index.d.ts +6 -6
  107. package/lib/multi-input/index.js +39 -45
  108. package/lib/notification/elements/notification-tray.d.ts +2 -2
  109. package/lib/notification/elements/notification-tray.js +3 -3
  110. package/lib/notification/elements/notification.d.ts +2 -2
  111. package/lib/notification/elements/notification.js +19 -13
  112. package/lib/notification/helpers/status.js +1 -1
  113. package/lib/number-field/index.d.ts +5 -6
  114. package/lib/number-field/index.js +37 -47
  115. package/lib/overlay/elements/overlay-viewport.d.ts +1 -1
  116. package/lib/overlay/elements/overlay.d.ts +2 -2
  117. package/lib/overlay/elements/overlay.js +152 -96
  118. package/lib/overlay/helpers/types.d.ts +1 -1
  119. package/lib/overlay/managers/backdrop-manager.d.ts +1 -1
  120. package/lib/overlay/managers/backdrop-manager.js +2 -2
  121. package/lib/overlay/managers/close-manager.js +2 -1
  122. package/lib/overlay/managers/focus-manager.js +23 -13
  123. package/lib/overlay/managers/interaction-lock-manager.d.ts +4 -4
  124. package/lib/overlay/managers/interaction-lock-manager.js +33 -25
  125. package/lib/overlay/managers/viewport-manager.d.ts +2 -2
  126. package/lib/overlay/managers/viewport-manager.js +3 -2
  127. package/lib/overlay/managers/zindex-manager.js +4 -2
  128. package/lib/overlay-menu/helpers/types.d.ts +2 -2
  129. package/lib/overlay-menu/index.d.ts +1 -1
  130. package/lib/overlay-menu/index.js +44 -33
  131. package/lib/overlay-menu/managers/menu-manager.d.ts +10 -10
  132. package/lib/overlay-menu/managers/menu-manager.js +14 -13
  133. package/lib/pagination/index.d.ts +4 -4
  134. package/lib/pagination/index.js +39 -14
  135. package/lib/panel/index.js +1 -1
  136. package/lib/password-field/index.d.ts +2 -2
  137. package/lib/password-field/index.js +3 -3
  138. package/lib/pill/index.d.ts +1 -1
  139. package/lib/pill/index.js +22 -19
  140. package/lib/progress-bar/index.d.ts +1 -1
  141. package/lib/progress-bar/index.js +38 -37
  142. package/lib/radio-button/index.d.ts +2 -2
  143. package/lib/radio-button/index.js +17 -12
  144. package/lib/radio-button/radio-button-registry.js +8 -5
  145. package/lib/rating/index.d.ts +1 -1
  146. package/lib/rating/index.js +2 -5
  147. package/lib/rating/utils.d.ts +6 -6
  148. package/lib/rating/utils.js +6 -6
  149. package/lib/search-field/index.d.ts +2 -2
  150. package/lib/search-field/index.js +4 -4
  151. package/lib/select/index.d.ts +34 -34
  152. package/lib/select/index.js +68 -81
  153. package/lib/sidebar-layout/index.d.ts +2 -2
  154. package/lib/sidebar-layout/index.js +7 -9
  155. package/lib/slider/index.d.ts +2 -2
  156. package/lib/slider/index.js +57 -45
  157. package/lib/slider/utils.d.ts +10 -10
  158. package/lib/slider/utils.js +10 -10
  159. package/lib/sparkline/index.d.ts +1 -1
  160. package/lib/sparkline/index.js +7 -8
  161. package/lib/swing-gauge/helpers.js +2 -2
  162. package/lib/swing-gauge/index.d.ts +19 -19
  163. package/lib/swing-gauge/index.js +91 -81
  164. package/lib/tab/index.d.ts +1 -1
  165. package/lib/tab/index.js +16 -27
  166. package/lib/tab/themes/halo/dark/index.js +1 -1
  167. package/lib/tab/themes/halo/light/index.js +1 -1
  168. package/lib/tab/themes/solar/charcoal/index.js +1 -1
  169. package/lib/tab/themes/solar/pearl/index.js +1 -1
  170. package/lib/tab-bar/helpers/animate.js +1 -1
  171. package/lib/tab-bar/index.d.ts +1 -1
  172. package/lib/tab-bar/index.js +34 -18
  173. package/lib/tab-bar/themes/halo/dark/index.js +1 -1
  174. package/lib/tab-bar/themes/halo/light/index.js +1 -1
  175. package/lib/text-field/index.d.ts +1 -1
  176. package/lib/text-field/index.js +34 -31
  177. package/lib/time-picker/index.d.ts +6 -6
  178. package/lib/time-picker/index.js +103 -89
  179. package/lib/toggle/index.d.ts +1 -1
  180. package/lib/toggle/index.js +4 -3
  181. package/lib/tooltip/elements/title-tooltip.js +2 -2
  182. package/lib/tooltip/index.d.ts +27 -27
  183. package/lib/tooltip/index.js +42 -38
  184. package/lib/tooltip/managers/tooltip-manager.d.ts +1 -1
  185. package/lib/tornado-chart/elements/tornado-chart.d.ts +1 -1
  186. package/lib/tornado-chart/elements/tornado-chart.js +2 -2
  187. package/lib/tornado-chart/elements/tornado-item.d.ts +2 -2
  188. package/lib/tornado-chart/elements/tornado-item.js +12 -10
  189. package/lib/tree/elements/tree-item.d.ts +3 -3
  190. package/lib/tree/elements/tree-item.js +21 -19
  191. package/lib/tree/elements/tree.d.ts +1 -1
  192. package/lib/tree/elements/tree.js +12 -11
  193. package/lib/tree/helpers/renderer.js +4 -3
  194. package/lib/tree/index.d.ts +1 -1
  195. package/lib/tree/managers/tree-manager.d.ts +1 -1
  196. package/lib/tree/managers/tree-manager.js +17 -18
  197. package/lib/tree/themes/solar/charcoal/index.js +1 -1
  198. package/lib/tree/themes/solar/pearl/index.js +1 -1
  199. package/lib/tree-select/index.d.ts +9 -9
  200. package/lib/tree-select/index.js +91 -82
  201. package/lib/tree-select/themes/halo/dark/index.js +1 -1
  202. package/lib/tree-select/themes/halo/light/index.js +1 -1
  203. package/lib/tree-select/themes/solar/charcoal/index.js +1 -1
  204. package/lib/tree-select/themes/solar/pearl/index.js +1 -1
  205. package/lib/version.js +1 -1
  206. package/package.json +16 -16
  207. package/tsconfig.tsbuildinfo +1 -1
@@ -1 +1 @@
1
- dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-clock', styles: ':host{font-size:2.5em;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:0}:host [part~=segment]{padding:.15em 0;line-height:1em;align-self:flex-end}:host [part~=hours],:host [part~=minutes],:host [part~=seconds]{position:relative}:host [part~=hours][part~=shifted],:host [part~=minutes][part~=shifted],:host [part~=seconds][part~=shifted]{color:#f93}:host [part~=am-pm]{font-size:60%;line-height:1.5em;padding-left:3px}:host [part=decrement-button],:host [part=increment-button]{left:0;width:100%;height:50%;position:absolute;cursor:pointer;display:none}:host [part=decrement-button]::after,:host [part=increment-button]::after{content:"";left:0;right:0;width:0;height:0;margin:0 auto;position:absolute;border-style:solid;transform:rotate(360deg)}:host [part=decrement-button][part=increment-button],:host [part=increment-button][part=increment-button]{top:0}:host [part=decrement-button][part=increment-button]::after,:host [part=increment-button][part=increment-button]::after{top:0;border-width:0 .167em .178em;border-color:transparent transparent #f93}:host [part=decrement-button][part=decrement-button],:host [part=increment-button][part=decrement-button]{bottom:0}:host [part=decrement-button][part=decrement-button]::after,:host [part=increment-button][part=decrement-button]::after{bottom:0;border-width:.178em .167em 0;border-color:#f93 transparent transparent}:host(:focus) [part~=hours][active],:host(:focus) [part~=minutes][active],:host(:focus) [part~=seconds][active]{color:#f93}:host(:focus) [active]{display:block}:host([analogue]){border-radius:100%;width:160px;max-width:200px;background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYzIDE2MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iIzQ4NDg0OCI+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0iTTgxLjUgMHY5LjMiLz48cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTkwLjAyLjQ0Ni0uNDkyIDQuNjc1TTk4LjQ0NSAxLjc4MWwtLjk3NyA0LjU5N00xMDYuNjg1IDMuOTg5bC0xLjQ1MiA0LjQ3TTExNC42NDkgNy4wNDZsLTEuOTEyIDQuMjk0Ii8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEyMi4yNSAxMC45MTktNC42NSA4LjA1NCIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTI5LjQwNCAxNS41NjUtMi43NjIgMy44MDJNMTM2LjAzNCAyMC45MzRsLTMuMTQ1IDMuNDkyTTE0Mi4wNjYgMjYuOTY2bC0zLjQ5MiAzLjE0NU0xNDcuNDM1IDMzLjU5NmwtMy44MDIgMi43NjIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUyLjA4MSA0MC43NS04LjA1NCA0LjY1Ii8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xNTUuOTU0IDQ4LjM1MS00LjI5NCAxLjkxMk0xNTkuMDExIDU2LjMxNWwtNC40NyAxLjQ1Mk0xNjEuMjE5IDY0LjU1NWwtNC41OTcuOTc3TTE2Mi41NTQgNzIuOThsLTQuNjc1LjQ5MiIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNjMgODEuNWgtOS4zIi8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xNjIuNTU0IDkwLjAyLTQuNjc1LS40OTJNMTYxLjIxOSA5OC40NDVsLTQuNTk3LS45NzdNMTU5LjAxMSAxMDYuNjg1bC00LjQ3LTEuNDUyTTE1NS45NTQgMTE0LjY0OWwtNC4yOTQtMS45MTIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUyLjA4MSAxMjIuMjUtOC4wNTQtNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTQ3LjQzNSAxMjkuNDA0LTMuODAyLTIuNzYyTTE0Mi4wNjYgMTM2LjAzNGwtMy40OTItMy4xNDVNMTM2LjAzNCAxNDIuMDY2bC0zLjE0NS0zLjQ5Mk0xMjkuNDA0IDE0Ny40MzVsLTIuNzYyLTMuODAyIi8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEyMi4yNSAxNTIuMDgxLTQuNjUtOC4wNTQiLz48cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTExNC42NDkgMTU1Ljk1NC0xLjkxMi00LjI5NE0xMDYuNjg1IDE1OS4wMTFsLTEuNDUyLTQuNDdNOTguNDQ1IDE2MS4yMTlsLS45NzctNC41OTdNOTAuMDIgMTYyLjU1NGwtLjQ5Mi00LjY3NSIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Ik04MS41IDE2M3YtOS4zIi8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im03Mi45OC40NDYuNDkyIDQuNjc1TTY0LjU1NSAxLjc4MWwuOTc3IDQuNTk3TTU2LjMxNSAzLjk4OWwxLjQ1MiA0LjQ3TTQ4LjM1MSA3LjA0NmwxLjkxMiA0LjI5NCIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im00MC43NSAxMC45MTkgNC42NSA4LjA1NCIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMzMuNTk2IDE1LjU2NSAyLjc2MiAzLjgwMk0yNi45NjYgMjAuOTM0bDMuMTQ1IDMuNDkyTTIwLjkzNCAyNi45NjZsMy40OTIgMy4xNDVNMTUuNTY1IDMzLjU5NmwzLjgwMiAyLjc2MiIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xMC45MTkgNDAuNzUgOC4wNTQgNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtNy4wNDYgNDguMzUxIDQuMjk0IDEuOTEyTTMuOTg5IDU2LjMxNWw0LjQ3IDEuNDUyTTEuNzgxIDY0LjU1NWw0LjU5Ny45NzdNLjQ0NiA3Mi45OGw0LjY3NS40OTIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJNMCA4MS41aDkuMyIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtLjQ0NiA5MC4wMiA0LjY3NS0uNDkyTTEuNzgxIDk4LjQ0NWw0LjU5Ny0uOTc3TTMuOTg5IDEwNi42ODVsNC40Ny0xLjQ1Mk03LjA0NiAxMTQuNjQ5bDQuMjk0LTEuOTEyIi8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEwLjkxOSAxMjIuMjUgOC4wNTQtNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUuNTY1IDEyOS40MDQgMy44MDItMi43NjJNMjAuOTM0IDEzNi4wMzRsMy40OTItMy4xNDVNMjYuOTY2IDE0Mi4wNjZsMy4xNDUtMy40OTJNMzMuNTk2IDE0Ny40MzVsMi43NjItMy44MDIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtNDAuNzUgMTUyLjA4MSA0LjY1LTguMDU0Ii8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im00OC4zNTEgMTU1Ljk1NCAxLjkxMi00LjI5NE01Ni4zMTUgMTU5LjAxMWwxLjQ1Mi00LjQ3TTY0LjU1NSAxNjEuMjE5bC45NzctNC41OTdNNzIuOTggMTYyLjU1NGwuNDkyLTQuNjc1Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04MC44MTQgNC42NVYwaDF2NC42NWgtMXpNNzIuMTkyLjUybC40OTMgNC42MjMuOTk0LS4xMDYtLjQ5My00LjYyMy0uOTk0LjEwNnptMTguNDA3IDE2MS43MDQtLjQ5My00LjYyNC0uOTk0LjEwNi40OTMgNC42MjQuOTk0LS4xMDZ6TTY0LjY2IDYuNDk0bC0uOTgtNC41NDYuOTc4LS4yMS45OCA0LjU0NS0uOTc4LjIxek05OS4xMSAxNjAuNzk1bC0uOTgtNC41NDUtLjk3Ny4yMS45OCA0LjU0Ni45NzctLjIxMXpNNTYuODIgOC42ODhsLTEuNDU2LTQuNDE2Ljk1LS4zMTMgMS40NTUgNC40MTYtLjk1LjMxM3ptNTAuNjA5IDE0OS43ODMtMS40NTYtNC40MTYtLjk1LjMxMyAxLjQ1NiA0LjQxNi45NS0uMzEzek00OS4yNTYgMTEuNjk5IDQ3LjM0IDcuNDYybC45MTItLjQxMiAxLjkxNSA0LjIzNy0uOTEuNDEyem02Ni4xOTQgMTQzLjU4Mi0xLjkxNS00LjIzNy0uOTEyLjQxMiAxLjkxNiA0LjIzNy45MTEtLjQxMnptLTMzLjQ3MyA3LjQ2MnYtNC42NDloLTF2NC42NDloMXpNMzUuNzI3IDE5LjcxbC0yLjc0LTMuNzU4LjgwOC0uNTg5IDIuNzQgMy43NTgtLjgwOS41OXptOTQuMDc3IDEyNy4wODEtMi43NC0zLjc1OC0uODA4LjU4OSAyLjczOSAzLjc1OC44MDktLjU4OXpNMjkuNDU0IDI0Ljg5bC0zLjEyMi0zLjQ0Ny43NC0uNjcgMy4xMjMgMy40NDYtLjc0Mi42N3pNMTM2LjQ1OCAxNDEuM2wtMy4xMjItMy40NDctLjc0MS42NzIgMy4xMjIgMy40NDYuNzQxLS42NzF6TTIzLjc1OSAzMC43MWwtMy40Ny0zLjA5Ni42NjYtLjc0NiAzLjQ3IDMuMDk3LS42NjYuNzQ2ek0xNDIuNTAyIDEzNS4xM2wtMy40Ny0zLjA5Ni0uNjY2Ljc0NiAzLjQ2OSAzLjA5Ni42NjctLjc0NnpNMTguNzE2IDM3LjA5OWwtMy43NzktMi43MTIuNTg0LS44MTMgMy43NzggMi43MTItLjU4My44MTN6bTEyOS4xMzcgOTEuMjU4LTMuNzc4LTIuNzEyLS41ODMuODEyIDMuNzc4IDIuNzEyLjU4My0uODEyek00Mi41MiAxNS4yMTlsLTIuMzI2LTQuMDI3Ljg2Ni0uNSAyLjMyNiA0LjAyNy0uODY2LjV6bTgwLjA3NyAxMzYuMzMyLTIuMzI2LTQuMDI3LS44NjYuNSAyLjMyNSA0LjAyNy44NjctLjV6TTExLjAwNSA1MC43OTlsLTQuMjUyLTEuODg1TDcuMTYgNDhsNC4yNTIgMS44ODUtLjQwNi45MTR6bTE0NS4wMzIgNjMuMDMtNC4yNTEtMS44ODUtLjQwNi45MTQgNC4yNTIgMS44ODYuNDA1LS45MTV6TTguMTYzIDU4LjQyMWwtNC40MjctMS40MjUuMzA2LS45NTJMOC40NyA1Ny40N2wtLjMwNy45NTF6bTE1MC44OTIgNDcuMzI2LTQuNDI3LTEuNDI0LS4zMDcuOTUyIDQuNDI4IDEuNDI0LjMwNi0uOTUyek02LjE0MyA2Ni4zMDdsLTQuNTU0LS45NDcuMjA0LS45NzkgNC41NTQuOTQ4LS4yMDQuOTc5em0xNTUuMDU5IDMxLjA3Ni00LjU1NC0uOTQ3LS4yMDQuOTc5IDQuNTU0Ljk0Ny4yMDQtLjk3OXpNNC45NyA3NC4zNjEuMzQyIDczLjlsLjA5OS0uOTk1IDQuNjI4LjQ2LS4wOTkuOTk1ek0xNjIuNDUgODguODQzbC00LjYyOC0uNDYtLjA5OS45OTUgNC42MjguNDYuMDk5LS45OTV6TTE0LjY0MiA0My41MTRsLTQuMDI4LTIuMzI1LjUtLjg2NiA0LjAyOCAyLjMyNS0uNS44NjZ6bTEzNy41MzUgNzguMDQtNC4wMjgtMi4zMjUtLjUwMS44NjYgNC4wMjggMi4zMjUuNTAxLS44NjZ6TTUuMTQ1IDkwLjA4bC00LjYyNS40OTMtLjEwNi0uOTk1IDQuNjI1LS40OTMuMTA2Ljk5NXpNMTYyLjI3IDcyLjE3bC00LjYyNS40OTMuMTA2Ljk5NSA0LjYyNS0uNDkzLS4xMDYtLjk5NHpNNi40OTYgOTguMWwtNC41NDcuOTgtLjIxMS0uOTc3IDQuNTQ3LS45OC4yMS45Nzh6bTE1NC4zNDYtMzQuNDM3LTQuNTQ3Ljk4LjIxMS45NzcgNC41NDctLjk4LS4yMTEtLjk3N3pNOC42OTEgMTA1Ljk0MWwtNC40MTggMS40NTYtLjMxMy0uOTUgNC40MTctMS40NTUuMzE0Ljk0OXptMTQ5LjgyNy01MC41OTUtNC40MTggMS40NTYuMzEzLjk1IDQuNDE4LTEuNDU2LS4zMTMtLjk1ek0xMS43MDMgMTEzLjUwMWwtNC4yMzkgMS45MTYtLjQxMi0uOTEyIDQuMjM5LTEuOTE1LjQxMi45MTF6bTE0My42MjMtNjYuMTc0LTQuMjM4IDEuOTE1LjQxMi45MTEgNC4yMzgtMS45MTUtLjQxMi0uOTExek00LjY1MSA4MS45NTNIMHYtMWg0LjY1MXYxem0xNTguMTQtMS4xNjNoLTQuNjUxdjFoNC42NTF2LTF6TTE5LjcxNiAxMjcuMDI3bC0zLjc1OSAyLjczOS0uNTktLjgwOCAzLjc2LTIuNzM5LjU4OS44MDh6bTEyNy4xMTgtOTQuMDUtMy43NTkgMi43MzkuNTg5LjgwOCAzLjc1OS0yLjczOC0uNTg5LS44MDl6TTI0Ljg5NyAxMzMuMjk4bC0zLjQ0NyAzLjEyMS0uNjcyLS43NDEgMy40NDgtMy4xMjEuNjcxLjc0MXpNMTQxLjM0MSAyNi4zMjRsLTMuNDQ3IDMuMTIuNjcxLjc0MiAzLjQ0OC0zLjEyMS0uNjcyLS43NDF6TTMwLjcxOSAxMzguOTlsLTMuMDk3IDMuNDY5LS43NDYtLjY2NiAzLjA5Ny0zLjQ2OS43NDcuNjY2ek0xMzUuMTcgMjAuMjgzbC0zLjA5OCAzLjQ2OS43NDYuNjY2IDMuMDk4LTMuNDY5LS43NDYtLjY2NnptLTk4LjA2IDEyMy43NS0yLjcxMiAzLjc3Ny0uODEzLS41ODMgMi43MTMtMy43NzcuODEyLjU4M3ptOTEuMjg1LTEyOS4xLTIuNzEyIDMuNzc3LjgxMi41ODMgMi43MTMtMy43NzctLjgxMy0uNTgzek0xNS4yMjQgMTIwLjIzNmwtNC4wMjggMi4zMjUtLjUtLjg2NiA0LjAyOC0yLjMyNS41Ljg2NnptMTM2LjM3MS04MC4wNTQtNC4wMjggMi4zMjUuNS44NjYgNC4wMjgtMi4zMjUtLjUtLjg2NnpNNTAuODE0IDE1MS43NDFsLTEuODg2IDQuMjUxLS45MTQtLjQwNSAxLjg4Ni00LjI1MS45MTQuNDA1em02My4wNDktMTQ0Ljk5LTEuODg2IDQuMjUxLjkxNC40MDUgMS44ODYtNC4yNS0uOTE0LS40MDZ6TTU4LjQzOCAxNTQuNTgybC0xLjQyNSA0LjQyNy0uOTUyLS4zMDcgMS40MjUtNC40MjYuOTUyLjMwNnptNDcuMzQtMTUwLjg0Ny0xLjQyNSA0LjQyNi45NTIuMzA2IDEuNDI1LTQuNDI2LS45NTItLjMwNnpNNjYuMzI3IDE1Ni42MDJsLS45NDggNC41NTMtLjk3OS0uMjA0Ljk0OC00LjU1Mi45NzkuMjAzek05Ny40MTEgMS41ODlsLS45NDcgNC41NTIuOTc5LjIwNC45NDgtNC41NTMtLjk4LS4yMDN6TTc0LjM4MiAxNTcuNzc1bC0uNDYgNC42MjctLjk5NS0uMDk5LjQ2LTQuNjI3Ljk5NS4wOTl6TTg4Ljg2OC4zNDJsLS40NiA0LjYyNy45OTUuMDk4LjQ2LTQuNjI3LS45OTUtLjA5OHpNNDMuNTI3IDE0OC4xMDVsLTIuMzI2IDQuMDI3LS44NjYtLjUgMi4zMjYtNC4wMjcuODY2LjV6TTEyMS41OSAxMC42MTFsLTIuMzI2IDQuMDI3Ljg2Ni41IDIuMzI2LTQuMDI3LS44NjYtLjV6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNMTEyLjg4NyAyMy4wOTNjMC0uNTQ3LjAxMy0uOTU0LjA0LTEuMjJsLS4yNi4yNGMtLjEuMDg2LS40NC4zNjYtMS4wMi44NGwtLjU0LS42OCAxLjk2LTEuNTRoLjl2Ni42N2gtMS4wOHYtNC4zMXpNMTM1LjIwNSA0OC45MjdsMS43Mi0xLjczYy41MTQtLjUyLjg1NC0uODkgMS4wMi0xLjExLjE2Ny0uMjIuMjg3LS40MjQuMzYtLjYxYTEuNjkgMS42OSAwIDAgMCAuMTEtLjYxYzAtLjMwNy0uMDktLjU0Ny0uMjctLjcyLS4xOC0uMTczLS40My0uMjYtLjc1LS4yNi0uMjY2IDAtLjUyLjA1LS43Ni4xNS0uMjMzLjA5My0uNTA2LjI2My0uODIuNTFsLS41Ny0uNzJjLjM2LS4zLjcxNC0uNTE3IDEuMDYtLjY1LjM1NC0uMTMzLjczNC0uMiAxLjE0LS4yLjYyNyAwIDEuMTI3LjE2IDEuNS40OC4zNzQuMzIuNTYuNzU3LjU2IDEuMzEgMCAuMzEzLS4wNTMuNi0uMTYuODYtLjEyLjI4Ni0uMjg2LjU2Ni0uNS44NC0uMjQuMy0uNjEzLjY5LTEuMTIgMS4xN2wtMS4xNiAxLjExdi4wNWgzLjE3di45NWgtNC41M3YtLjgyek0xNDcuMTUxIDg0Ljg2NGMtLjc0IDAtMS4zNjctLjEyLTEuODgtLjM2di0uOTVhNC42IDQuNiAwIDAgMCAuOS4zMWMuMzIuMDczLjYyNi4xMS45Mi4xMS41MjYgMCAuOTEzLS4wOTMgMS4xNi0uMjguMjUzLS4xOTMuMzgtLjQ5LjM4LS44OSAwLS4zNi0uMTQtLjYyMy0uNDItLjc5LS4yOC0uMTY2LS43MjctLjI1LTEuMzQtLjI1aC0uNTd2LS44OGguNThjMS4wNzMgMCAxLjYxLS4zNjcgMS42MS0xLjEgMC0uMjkzLS4wOTQtLjUxNy0uMjgtLjY3LS4xODctLjE1My0uNDY0LS4yMy0uODMtLjIzLS4yNjcgMC0uNTE3LjAzNy0uNzUuMTEtLjIzNC4wNzMtLjUwNC4yMS0uODEuNDFsLS41My0uNzVhMy41NTggMy41NTggMCAwIDEgMi4xNC0uNjhjLjY3MyAwIDEuMi4xNDcgMS41OC40NC4zOC4yODcuNTcuNjkuNTcgMS4yMSAwIC40MTMtLjEyNy43NjQtLjM4IDEuMDUtLjI0Ny4yOC0uNTk0LjQ3LTEuMDQuNTd2LjA0Yy41MzMuMDY3LjkzNi4yMzMgMS4yMS41LjI3My4yNjcuNDEuNjIzLjQxIDEuMDcgMCAuNjQtLjIzIDEuMTM3LS42OSAxLjQ5LS40NTQuMzQ3LTEuMS41Mi0xLjk0LjUyek0xMzguMDI1IDExNS4yODNoLTMuMDR2LS44M2wzLjA0LTQuMzloMS4wNHY0LjMzaC45di44OWgtLjl2MS40NWgtMS4wNHYtMS40NXptMC0uODl2LTEuNjdjMC0uNTUzLjAxNy0xLjA0LjA1LTEuNDZoLS4wNGMtLjA5My4yMDctLjIyNi40NS0uNC43M2wtMS42NSAyLjRoMi4wNHpNMTEzLjU5NCAxMzkuMTUyYy0uNzQ3IDAtMS4zMzMtLjEyNC0xLjc2LS4zN3YtLjk2Yy4yNDcuMTMzLjUyNy4yMzYuODQuMzEuMzIuMDczLjYyLjExLjkuMTEuNDggMCAuODUtLjEwNyAxLjExLS4zMi4yNi0uMjIuMzktLjUzNC4zOS0uOTQgMC0uODA3LS41MTctMS4yMS0xLjU1LTEuMjEtLjE2NyAwLS4zNzcuMDItLjYzLjA2bC0uNDQuMDctLjQ5LS4yNy4yNy0zLjI3aDMuNDh2Ljk2aC0yLjU0bC0uMTUgMS42NmMuMzQ3LS4wNjcuNjY3LS4xLjk2LS4xLjY2NyAwIDEuMi4xOCAxLjYuNTQuNC4zNTMuNi44MzYuNiAxLjQ1IDAgLjcxMy0uMjI3IDEuMjczLS42OCAxLjY4LS40NTMuNC0xLjA5LjYtMS45MS42ek04MS43NSAxNDguMDg5Yy0uNzQgMC0xLjMyLS4yNTYtMS43NC0uNzctLjQyLS41MTMtLjYzLTEuMjQtLjYzLTIuMTggMC0yLjYyNiAxLjA3LTMuOTQgMy4yMS0zLjk0LjMyIDAgLjYwNC4wMjcuODUuMDh2Ljg5YTIuODUgMi44NSAwIDAgMC0uODEtLjFjLS43MiAwLTEuMjYuMTk3LTEuNjIuNTktLjM2LjM5NC0uNTU2IDEuMDEtLjU5IDEuODVoLjA2Yy4zMi0uNTI2LjgyNy0uNzkgMS41Mi0uNzkuNjA3IDAgMS4wOC4xODcgMS40Mi41Ni4zNDcuMzc0LjUyLjg4NC41MiAxLjUzIDAgLjctLjE5NiAxLjI1Ny0uNTkgMS42Ny0uMzkzLjQwNy0uOTI2LjYxLTEuNi42MXptLS4wMi0uODhjLjM2IDAgLjY0LS4xMi44NC0uMzYuMjA3LS4yNDYuMzEtLjU5My4zMS0xLjA0IDAtLjM4Ni0uMDk2LS42ODYtLjI5LS45LS4xOTMtLjIyLS40Ny0uMzMtLjgzLS4zMy0uMjMzIDAtLjQ1LjA1NC0uNjUuMTYtLjE5My4xLS4zNS4yMzQtLjQ3LjRhLjkxMi45MTIgMCAwIDAtLjE3LjUyYzAgLjQzNC4xMTcuODA0LjM1IDEuMTEuMjM0LjI5NC41MzcuNDQuOTEuNDR6TTQ5LjI2IDEzMy4zMDJINDUuOHYtLjk0aDQuNjF2Ljc2bC0yLjYxIDUuOTFoLTEuMTZsMi42Mi01Ljczek0yNC43MDMgMTE2Ljg1M2MtLjcyNiAwLTEuMjkzLS4xNTMtMS43LS40Ni0uNC0uMzEzLS42LS43Ni0uNi0xLjM0IDAtLjM4LjEwNy0uNzE2LjMyLTEuMDEuMjE0LS4yOTMuNTU0LS41NTYgMS4wMi0uNzktLjQtLjI0LS42OS0uNDkzLS44Ny0uNzZhMS42OTcgMS42OTcgMCAwIDEtLjI2LS45M2MwLS40OTMuMTg3LS44ODMuNTYtMS4xNy4zOC0uMjg2Ljg4NC0uNDMgMS41MS0uNDMuNjM0IDAgMS4xMzQuMTQ3IDEuNS40NC4zNzQuMjg3LjU2LjY3Ny41NiAxLjE3IDAgLjY5NC0uNDEzIDEuMjQ0LTEuMjQgMS42NS41Mi4yNTQuODkuNTI0IDEuMTEuODEuMjI3LjI4Ny4zNC42MTQuMzQuOTggMCAuNTYtLjIwMyAxLjAwNy0uNjEgMS4zNC0uNC4zMzQtLjk0Ni41LTEuNjQuNXptMC00LjA3Yy4zNi0uMTYuNjE3LS4zMy43Ny0uNTEuMTU0LS4xOC4yMy0uMzkuMjMtLjYzYS43NjIuNzYyIDAgMCAwLS4yOC0uNjJjLS4xODYtLjE1My0uNDM2LS4yMy0uNzUtLjIzLS4zMDYgMC0uNTUzLjA3Ny0uNzQuMjNhLjc2MS43NjEgMCAwIDAtLjI4LjYyYzAgLjE1NC4wMzQuMjk0LjEuNDIuMDY3LjEyNy4xNjcuMjQ0LjMuMzUuMTQuMTA3LjM1Ny4yMy42NS4zN3ptLS4wMiAzLjI1Yy4zOTQgMCAuNjk3LS4wOS45MS0uMjcuMjItLjE4Ni4zMy0uNDQuMzMtLjc2IDAtLjQ3My0uNDAzLS44ODYtMS4yMS0xLjI0bC0uMTQtLjA2Yy0uNC4xNzQtLjY5LjM2Ny0uODcuNTgtLjE4LjIwNy0uMjcuNDUtLjI3LjczIDAgLjMyLjExLjU3LjMzLjc1LjIyNy4xOC41MzQuMjcuOTIuMjd6TTE0Ljg2MiA4NC44NTRjLS40MTQgMC0uNzA0LS4wMjMtLjg3LS4wN3YtLjkxYy4yOC4wNzQuNTUuMTEuODEuMTEuNzMzIDAgMS4yNzYtLjE5MyAxLjYzLS41OC4zNi0uMzkzLjU1Ni0xLjAxLjU5LTEuODVoLS4wNWMtLjE4LjI3My0uMzk3LjQ3NC0uNjUuNi0uMjU0LjEyLS41NTQuMTgtLjkuMTgtLjU5NCAwLTEuMDYtLjE4My0xLjQtLjU1LS4zNC0uMzY3LS41MS0uODczLS41MS0xLjUyIDAtLjcwNi4xOTYtMS4yNjYuNTktMS42OC4zOTMtLjQxMy45My0uNjIgMS42MS0uNjIuNDggMCAuODk2LjExNyAxLjI1LjM1LjM1My4yMzQuNjI2LjU3NC44MiAxLjAyLjE5My40NC4yOS45NjcuMjkgMS41OCAwIDEuMzI3LS4yNjcgMi4zMTctLjggMi45Ny0uNTM0LjY0Ny0xLjMzNy45Ny0yLjQxLjk3em0uODMtMy4zOGMuMzYgMCAuNjY2LS4xMDYuOTItLjMyYS45NTYuOTU2IDAgMCAwIC4zNy0uNzZjMC0uNDMzLS4xMTctLjc5Ny0uMzUtMS4wOWExLjA5OSAxLjA5OSAwIDAgMC0uOS0uNDRjLS4zOCAwLS42Ny4xMi0uODcuMzYtLjE5NC4yNC0uMjkuNTg0LS4yOSAxLjAzIDAgLjM4Ny4wOTMuNjg3LjI4LjkuMTg2LjIxNC40NjYuMzIuODQuMzJ6TTIzLjQ0IDQ3LjY3MWMwLS41NDcuMDE0LS45NTMuMDQtMS4yMmwtLjI2LjI0Yy0uMS4wODctLjQ0LjM2Ny0xLjAyLjg0bC0uNTQtLjY4IDEuOTYtMS41NGguOXY2LjY3aC0xLjA4di00LjMxem01LjAwOCA0LjQzYy0uNzUzIDAtMS4zMjMtLjI5LTEuNzEtLjg3LS4zOC0uNTg3LS41Ny0xLjQ0My0uNTctMi41NyAwLTEuMTguMTg3LTIuMDUuNTYtMi42MS4zNzQtLjU2Ljk0Ny0uODQgMS43Mi0uODQuNzQgMCAxLjMwNC4yOTQgMS42OS44OC4zODcuNTguNTggMS40MzcuNTggMi41NyAwIDEuMTYtLjE4NiAyLjAyMy0uNTYgMi41OS0uMzczLjU2Ny0uOTQzLjg1LTEuNzEuODV6bTAtLjljLjQwNyAwIC43MDQtLjIuODktLjYuMTk0LS40LjI5LTEuMDQ3LjI5LTEuOTRzLS4wOTYtMS41NC0uMjktMS45NGMtLjE4Ni0uNDA2LS40ODMtLjYxLS44OS0uNjEtLjQyIDAtLjcyMy4yLS45MS42LS4xODYuMzk0LS4yOCAxLjA0NC0uMjggMS45NSAwIC45MDcuMDk0IDEuNTU3LjI4IDEuOTUuMTg3LjM5NC40OS41OS45MS41OXpNNDguMDE4IDIzLjA5M2MwLS41NDcuMDE0LS45NTQuMDQtMS4yMmwtLjI2LjI0Yy0uMS4wODYtLjQ0LjM2Ni0xLjAyLjg0bC0uNTQtLjY4IDEuOTYtMS41NGguOXY2LjY3aC0xLjA4di00LjMxem00Ljk5OCAwYzAtLjU0Ny4wMTQtLjk1NC4wNC0xLjIybC0uMjYuMjRjLS4xLjA4Ni0uNDQuMzY2LTEuMDIuODRsLS41NC0uNjggMS45Ni0xLjU0aC45djYuNjdoLTEuMDh2LTQuMzF6TTc4LjE4MyAxNS4zMThjMC0uNTQ3LjAxNC0uOTUzLjA0LTEuMjJsLS4yNi4yNGMtLjEuMDg3LS40NC4zNjctMS4wMi44NGwtLjU0LS42OCAxLjk2LTEuNTRoLjl2Ni42N2gtMS4wOHYtNC4zMXptMi43MzggMy40OSAxLjcyLTEuNzNjLjUxNC0uNTIuODU0LS44OSAxLjAyLTEuMTEuMTY3LS4yMi4yODctLjQyMy4zNi0uNjEuMDc0LS4xOTMuMTEtLjM5Ny4xMS0uNjEgMC0uMzA3LS4wOS0uNTQ3LS4yNy0uNzItLjE4LS4xNzMtLjQzLS4yNi0uNzUtLjI2LS4yNjYgMC0uNTIuMDUtLjc2LjE1LS4yMzMuMDkzLS41MDYuMjYzLS44Mi41MWwtLjU3LS43MmMuMzYtLjMuNzE0LS41MTcgMS4wNi0uNjUuMzU0LS4xMzMuNzM0LS4yIDEuMTQtLjIuNjI3IDAgMS4xMjcuMTYgMS41LjQ4LjM3NC4zMi41Ni43NTcuNTYgMS4zMSAwIC4zMTMtLjA1My42LS4xNi44Ni0uMTIuMjg3LS4yODYuNTY3LS41Ljg0LS4yNC4zLS42MTMuNjktMS4xMiAxLjE3bC0xLjE2IDEuMTF2LjA1aDMuMTd2Ljk1aC00LjUzdi0uODJ6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=) center center no-repeat}:host([analogue]) [part=digital]{display:flex;position:absolute;top:20%;left:0;right:0;justify-content:center;font-size:.34em}:host([analogue]) [part=digital] [part~=am-pm]{font-size:100%;line-height:1}:host([analogue]) [part=hands]::after{content:\'\';position:absolute;border-radius:50%;width:9%;height:9%;top:45.5%;left:45.5%;border:2px solid #000;box-sizing:border-box;z-index:1}:host([analogue]) [part~=hand]::after{content:\'\';position:absolute}:host([analogue]) [part~=second]::after{width:1%;height:43%;margin-top:3%;margin-left:49.5%;background-color:#f93}:host([analogue]) [part~=minute]::after{width:3%;height:43%;margin-top:3%;margin-left:48.5%;background-color:#3780bf}:host([analogue]) [part~=hour]::after{width:3%;height:28%;margin-top:18%;margin-left:48.5%;background-color:#3780bf}:host([analogue][size=small]){font-size:10px;min-width:50px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iIzAwMDAwMCI+CiAgICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMS41IiBzdHJva2U9ImN1cnJlbnRDb2xvciIvPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMS4yNjE5IDAuOTk5NTEyVjMuOTUxODlIMzIuMjYxOVYwLjk5OTUxMkgzMS4yNjE5Wk00NS4yODU4IDcuMjQ2ODdMNDYuNzYyIDQuNjkwMDNMNDcuNjI4IDUuMTkwMDNMNDYuMTUxOCA3Ljc0Njg3TDQ1LjI4NTggNy4yNDY4N1pNMTUuODM1NyA1LjU3NTUzTDE3LjMxMTkgOC4xMzIzN0wxOC4xNzc5IDcuNjMyMzdMMTYuNzAxNyA1LjA3NTUzTDE1LjgzNTcgNS41NzU1M1pNNC44MzgxIDE3LjA4OThMNy4zOTQ5NCAxOC41NjZMNy44OTQ5NCAxNy43TDUuMzM4MSAxNi4yMjM4TDQuODM4MSAxNy4wODk4Wk0zLjk1MjM4IDMyLjczNzRIMVYzMS43Mzc0SDMuOTUyMzhWMzIuNzM3NFpNNy4zNzEyNiA0NS41MDlMNC44MTQ0MiA0Ni45ODUyTDUuMzE0NDIgNDcuODUxMkw3Ljg3MTI2IDQ2LjM3NUw3LjM3MTI2IDQ1LjUwOVpNMTUuOTA5NSA1OC40NzA1TDE3LjM4NTcgNTUuOTEzNkwxOC4yNTE4IDU2LjQxMzZMMTYuNzc1NiA1OC45NzA1TDE1LjkwOTUgNTguNDcwNVpNMzEuMjYxOSA2MC4wNDY5VjYyLjk5OTNIMzIuMjYxOVY2MC4wNDY5SDMxLjI2MTlaTTQ2LjkxMDMgNTkuMjA5M0w0NS40MzQxIDU2LjY1MjVMNDYuMzAwMSA1Ni4xNTI1TDQ3Ljc3NjMgNTguNzA5M0w0Ni45MTAzIDU5LjIwOTNaTTU1LjkxNDMgNDYuNjE0TDU4LjQ3MTEgNDguMDkwMkw1OC45NzExIDQ3LjIyNDJMNTYuNDE0MyA0NS43NDhMNTUuOTE0MyA0Ni42MTRaTTYzIDMyLjczNzRINjAuMDQ3NlYzMS43Mzc0SDYzVjMyLjczNzRaTTU4LjQyMzcgMTUuODM1NEw1NS44NjY5IDE3LjMxMTZMNTYuMzY2OSAxOC4xNzc2TDU4LjkyMzcgMTYuNzAxNEw1OC40MjM3IDE1LjgzNTRaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+Cg==) center center/cover no-repeat}:host([analogue][size=small]) [part~=second]::after{width:1.5%;height:32%;margin-top:16%}:host([analogue][size=small]) [part~=minute]::after{height:37%;margin-top:12%}:host([analogue][size=small]) [part~=hour]::after{height:26%;margin-top:23%}:host([analogue][size=small]) [part~=am-pm]{padding-left:0;display:flex;position:absolute;left:0;right:0;bottom:15%;font-size:100%;justify-content:center}:host([analogue]) [part~=hour]::after,:host([analogue]) [part~=minute]::after{background-color:#000}:host([analogue][size=small]) [part=hands]::after{background-color:#000}' }}));
1
+ dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-clock', styles: ':host{font-size:2.5em;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:0}:host [part~=segment]{padding:.15em 0;line-height:1em;align-self:flex-end}:host [part~=hours],:host [part~=minutes],:host [part~=seconds]{position:relative}:host [part~=hours][part~=shifted],:host [part~=minutes][part~=shifted],:host [part~=seconds][part~=shifted]{color:#f93}:host [part~=am-pm]{font-size:60%;line-height:1.5em;padding-left:3px}:host [part=decrement-button],:host [part=increment-button]{left:0;width:100%;height:50%;position:absolute;cursor:pointer;display:none}:host [part=decrement-button]::after,:host [part=increment-button]::after{content:\'\';left:0;right:0;width:0;height:0;margin:0 auto;position:absolute;border-style:solid;transform:rotate(360deg)}:host [part=decrement-button][part=increment-button],:host [part=increment-button][part=increment-button]{top:0}:host [part=decrement-button][part=increment-button]::after,:host [part=increment-button][part=increment-button]::after{top:0;border-width:0 .167em .178em;border-color:transparent transparent #f93}:host [part=decrement-button][part=decrement-button],:host [part=increment-button][part=decrement-button]{bottom:0}:host [part=decrement-button][part=decrement-button]::after,:host [part=increment-button][part=decrement-button]::after{bottom:0;border-width:.178em .167em 0;border-color:#f93 transparent transparent}:host(:focus) [part~=hours][active],:host(:focus) [part~=minutes][active],:host(:focus) [part~=seconds][active]{color:#f93}:host(:focus) [active]{display:block}:host([analogue]){border-radius:100%;width:160px;max-width:200px;background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYzIDE2MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iIzQ4NDg0OCI+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0iTTgxLjUgMHY5LjMiLz48cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTkwLjAyLjQ0Ni0uNDkyIDQuNjc1TTk4LjQ0NSAxLjc4MWwtLjk3NyA0LjU5N00xMDYuNjg1IDMuOTg5bC0xLjQ1MiA0LjQ3TTExNC42NDkgNy4wNDZsLTEuOTEyIDQuMjk0Ii8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEyMi4yNSAxMC45MTktNC42NSA4LjA1NCIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTI5LjQwNCAxNS41NjUtMi43NjIgMy44MDJNMTM2LjAzNCAyMC45MzRsLTMuMTQ1IDMuNDkyTTE0Mi4wNjYgMjYuOTY2bC0zLjQ5MiAzLjE0NU0xNDcuNDM1IDMzLjU5NmwtMy44MDIgMi43NjIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUyLjA4MSA0MC43NS04LjA1NCA0LjY1Ii8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xNTUuOTU0IDQ4LjM1MS00LjI5NCAxLjkxMk0xNTkuMDExIDU2LjMxNWwtNC40NyAxLjQ1Mk0xNjEuMjE5IDY0LjU1NWwtNC41OTcuOTc3TTE2Mi41NTQgNzIuOThsLTQuNjc1LjQ5MiIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNjMgODEuNWgtOS4zIi8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xNjIuNTU0IDkwLjAyLTQuNjc1LS40OTJNMTYxLjIxOSA5OC40NDVsLTQuNTk3LS45NzdNMTU5LjAxMSAxMDYuNjg1bC00LjQ3LTEuNDUyTTE1NS45NTQgMTE0LjY0OWwtNC4yOTQtMS45MTIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUyLjA4MSAxMjIuMjUtOC4wNTQtNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTQ3LjQzNSAxMjkuNDA0LTMuODAyLTIuNzYyTTE0Mi4wNjYgMTM2LjAzNGwtMy40OTItMy4xNDVNMTM2LjAzNCAxNDIuMDY2bC0zLjE0NS0zLjQ5Mk0xMjkuNDA0IDE0Ny40MzVsLTIuNzYyLTMuODAyIi8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEyMi4yNSAxNTIuMDgxLTQuNjUtOC4wNTQiLz48cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTExNC42NDkgMTU1Ljk1NC0xLjkxMi00LjI5NE0xMDYuNjg1IDE1OS4wMTFsLTEuNDUyLTQuNDdNOTguNDQ1IDE2MS4yMTlsLS45NzctNC41OTdNOTAuMDIgMTYyLjU1NGwtLjQ5Mi00LjY3NSIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Ik04MS41IDE2M3YtOS4zIi8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im03Mi45OC40NDYuNDkyIDQuNjc1TTY0LjU1NSAxLjc4MWwuOTc3IDQuNTk3TTU2LjMxNSAzLjk4OWwxLjQ1MiA0LjQ3TTQ4LjM1MSA3LjA0NmwxLjkxMiA0LjI5NCIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im00MC43NSAxMC45MTkgNC42NSA4LjA1NCIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMzMuNTk2IDE1LjU2NSAyLjc2MiAzLjgwMk0yNi45NjYgMjAuOTM0bDMuMTQ1IDMuNDkyTTIwLjkzNCAyNi45NjZsMy40OTIgMy4xNDVNMTUuNTY1IDMzLjU5NmwzLjgwMiAyLjc2MiIvPjxwYXRoIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im0xMC45MTkgNDAuNzUgOC4wNTQgNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtNy4wNDYgNDguMzUxIDQuMjk0IDEuOTEyTTMuOTg5IDU2LjMxNWw0LjQ3IDEuNDUyTTEuNzgxIDY0LjU1NWw0LjU5Ny45NzdNLjQ0NiA3Mi45OGw0LjY3NS40OTIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJNMCA4MS41aDkuMyIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtLjQ0NiA5MC4wMiA0LjY3NS0uNDkyTTEuNzgxIDk4LjQ0NWw0LjU5Ny0uOTc3TTMuOTg5IDEwNi42ODVsNC40Ny0xLjQ1Mk03LjA0NiAxMTQuNjQ5bDQuMjk0LTEuOTEyIi8+PHBhdGggc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTEwLjkxOSAxMjIuMjUgOC4wNTQtNC42NSIvPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtMTUuNTY1IDEyOS40MDQgMy44MDItMi43NjJNMjAuOTM0IDEzNi4wMzRsMy40OTItMy4xNDVNMjYuOTY2IDE0Mi4wNjZsMy4xNDUtMy40OTJNMzMuNTk2IDE0Ny40MzVsMi43NjItMy44MDIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJtNDAuNzUgMTUyLjA4MSA0LjY1LTguMDU0Ii8+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGQ9Im00OC4zNTEgMTU1Ljk1NCAxLjkxMi00LjI5NE01Ni4zMTUgMTU5LjAxMWwxLjQ1Mi00LjQ3TTY0LjU1NSAxNjEuMjE5bC45NzctNC41OTdNNzIuOTggMTYyLjU1NGwuNDkyLTQuNjc1Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04MC44MTQgNC42NVYwaDF2NC42NWgtMXpNNzIuMTkyLjUybC40OTMgNC42MjMuOTk0LS4xMDYtLjQ5My00LjYyMy0uOTk0LjEwNnptMTguNDA3IDE2MS43MDQtLjQ5My00LjYyNC0uOTk0LjEwNi40OTMgNC42MjQuOTk0LS4xMDZ6TTY0LjY2IDYuNDk0bC0uOTgtNC41NDYuOTc4LS4yMS45OCA0LjU0NS0uOTc4LjIxek05OS4xMSAxNjAuNzk1bC0uOTgtNC41NDUtLjk3Ny4yMS45OCA0LjU0Ni45NzctLjIxMXpNNTYuODIgOC42ODhsLTEuNDU2LTQuNDE2Ljk1LS4zMTMgMS40NTUgNC40MTYtLjk1LjMxM3ptNTAuNjA5IDE0OS43ODMtMS40NTYtNC40MTYtLjk1LjMxMyAxLjQ1NiA0LjQxNi45NS0uMzEzek00OS4yNTYgMTEuNjk5IDQ3LjM0IDcuNDYybC45MTItLjQxMiAxLjkxNSA0LjIzNy0uOTEuNDEyem02Ni4xOTQgMTQzLjU4Mi0xLjkxNS00LjIzNy0uOTEyLjQxMiAxLjkxNiA0LjIzNy45MTEtLjQxMnptLTMzLjQ3MyA3LjQ2MnYtNC42NDloLTF2NC42NDloMXpNMzUuNzI3IDE5LjcxbC0yLjc0LTMuNzU4LjgwOC0uNTg5IDIuNzQgMy43NTgtLjgwOS41OXptOTQuMDc3IDEyNy4wODEtMi43NC0zLjc1OC0uODA4LjU4OSAyLjczOSAzLjc1OC44MDktLjU4OXpNMjkuNDU0IDI0Ljg5bC0zLjEyMi0zLjQ0Ny43NC0uNjcgMy4xMjMgMy40NDYtLjc0Mi42N3pNMTM2LjQ1OCAxNDEuM2wtMy4xMjItMy40NDctLjc0MS42NzIgMy4xMjIgMy40NDYuNzQxLS42NzF6TTIzLjc1OSAzMC43MWwtMy40Ny0zLjA5Ni42NjYtLjc0NiAzLjQ3IDMuMDk3LS42NjYuNzQ2ek0xNDIuNTAyIDEzNS4xM2wtMy40Ny0zLjA5Ni0uNjY2Ljc0NiAzLjQ2OSAzLjA5Ni42NjctLjc0NnpNMTguNzE2IDM3LjA5OWwtMy43NzktMi43MTIuNTg0LS44MTMgMy43NzggMi43MTItLjU4My44MTN6bTEyOS4xMzcgOTEuMjU4LTMuNzc4LTIuNzEyLS41ODMuODEyIDMuNzc4IDIuNzEyLjU4My0uODEyek00Mi41MiAxNS4yMTlsLTIuMzI2LTQuMDI3Ljg2Ni0uNSAyLjMyNiA0LjAyNy0uODY2LjV6bTgwLjA3NyAxMzYuMzMyLTIuMzI2LTQuMDI3LS44NjYuNSAyLjMyNSA0LjAyNy44NjctLjV6TTExLjAwNSA1MC43OTlsLTQuMjUyLTEuODg1TDcuMTYgNDhsNC4yNTIgMS44ODUtLjQwNi45MTR6bTE0NS4wMzIgNjMuMDMtNC4yNTEtMS44ODUtLjQwNi45MTQgNC4yNTIgMS44ODYuNDA1LS45MTV6TTguMTYzIDU4LjQyMWwtNC40MjctMS40MjUuMzA2LS45NTJMOC40NyA1Ny40N2wtLjMwNy45NTF6bTE1MC44OTIgNDcuMzI2LTQuNDI3LTEuNDI0LS4zMDcuOTUyIDQuNDI4IDEuNDI0LjMwNi0uOTUyek02LjE0MyA2Ni4zMDdsLTQuNTU0LS45NDcuMjA0LS45NzkgNC41NTQuOTQ4LS4yMDQuOTc5em0xNTUuMDU5IDMxLjA3Ni00LjU1NC0uOTQ3LS4yMDQuOTc5IDQuNTU0Ljk0Ny4yMDQtLjk3OXpNNC45NyA3NC4zNjEuMzQyIDczLjlsLjA5OS0uOTk1IDQuNjI4LjQ2LS4wOTkuOTk1ek0xNjIuNDUgODguODQzbC00LjYyOC0uNDYtLjA5OS45OTUgNC42MjguNDYuMDk5LS45OTV6TTE0LjY0MiA0My41MTRsLTQuMDI4LTIuMzI1LjUtLjg2NiA0LjAyOCAyLjMyNS0uNS44NjZ6bTEzNy41MzUgNzguMDQtNC4wMjgtMi4zMjUtLjUwMS44NjYgNC4wMjggMi4zMjUuNTAxLS44NjZ6TTUuMTQ1IDkwLjA4bC00LjYyNS40OTMtLjEwNi0uOTk1IDQuNjI1LS40OTMuMTA2Ljk5NXpNMTYyLjI3IDcyLjE3bC00LjYyNS40OTMuMTA2Ljk5NSA0LjYyNS0uNDkzLS4xMDYtLjk5NHpNNi40OTYgOTguMWwtNC41NDcuOTgtLjIxMS0uOTc3IDQuNTQ3LS45OC4yMS45Nzh6bTE1NC4zNDYtMzQuNDM3LTQuNTQ3Ljk4LjIxMS45NzcgNC41NDctLjk4LS4yMTEtLjk3N3pNOC42OTEgMTA1Ljk0MWwtNC40MTggMS40NTYtLjMxMy0uOTUgNC40MTctMS40NTUuMzE0Ljk0OXptMTQ5LjgyNy01MC41OTUtNC40MTggMS40NTYuMzEzLjk1IDQuNDE4LTEuNDU2LS4zMTMtLjk1ek0xMS43MDMgMTEzLjUwMWwtNC4yMzkgMS45MTYtLjQxMi0uOTEyIDQuMjM5LTEuOTE1LjQxMi45MTF6bTE0My42MjMtNjYuMTc0LTQuMjM4IDEuOTE1LjQxMi45MTEgNC4yMzgtMS45MTUtLjQxMi0uOTExek00LjY1MSA4MS45NTNIMHYtMWg0LjY1MXYxem0xNTguMTQtMS4xNjNoLTQuNjUxdjFoNC42NTF2LTF6TTE5LjcxNiAxMjcuMDI3bC0zLjc1OSAyLjczOS0uNTktLjgwOCAzLjc2LTIuNzM5LjU4OS44MDh6bTEyNy4xMTgtOTQuMDUtMy43NTkgMi43MzkuNTg5LjgwOCAzLjc1OS0yLjczOC0uNTg5LS44MDl6TTI0Ljg5NyAxMzMuMjk4bC0zLjQ0NyAzLjEyMS0uNjcyLS43NDEgMy40NDgtMy4xMjEuNjcxLjc0MXpNMTQxLjM0MSAyNi4zMjRsLTMuNDQ3IDMuMTIuNjcxLjc0MiAzLjQ0OC0zLjEyMS0uNjcyLS43NDF6TTMwLjcxOSAxMzguOTlsLTMuMDk3IDMuNDY5LS43NDYtLjY2NiAzLjA5Ny0zLjQ2OS43NDcuNjY2ek0xMzUuMTcgMjAuMjgzbC0zLjA5OCAzLjQ2OS43NDYuNjY2IDMuMDk4LTMuNDY5LS43NDYtLjY2NnptLTk4LjA2IDEyMy43NS0yLjcxMiAzLjc3Ny0uODEzLS41ODMgMi43MTMtMy43NzcuODEyLjU4M3ptOTEuMjg1LTEyOS4xLTIuNzEyIDMuNzc3LjgxMi41ODMgMi43MTMtMy43NzctLjgxMy0uNTgzek0xNS4yMjQgMTIwLjIzNmwtNC4wMjggMi4zMjUtLjUtLjg2NiA0LjAyOC0yLjMyNS41Ljg2NnptMTM2LjM3MS04MC4wNTQtNC4wMjggMi4zMjUuNS44NjYgNC4wMjgtMi4zMjUtLjUtLjg2NnpNNTAuODE0IDE1MS43NDFsLTEuODg2IDQuMjUxLS45MTQtLjQwNSAxLjg4Ni00LjI1MS45MTQuNDA1em02My4wNDktMTQ0Ljk5LTEuODg2IDQuMjUxLjkxNC40MDUgMS44ODYtNC4yNS0uOTE0LS40MDZ6TTU4LjQzOCAxNTQuNTgybC0xLjQyNSA0LjQyNy0uOTUyLS4zMDcgMS40MjUtNC40MjYuOTUyLjMwNnptNDcuMzQtMTUwLjg0Ny0xLjQyNSA0LjQyNi45NTIuMzA2IDEuNDI1LTQuNDI2LS45NTItLjMwNnpNNjYuMzI3IDE1Ni42MDJsLS45NDggNC41NTMtLjk3OS0uMjA0Ljk0OC00LjU1Mi45NzkuMjAzek05Ny40MTEgMS41ODlsLS45NDcgNC41NTIuOTc5LjIwNC45NDgtNC41NTMtLjk4LS4yMDN6TTc0LjM4MiAxNTcuNzc1bC0uNDYgNC42MjctLjk5NS0uMDk5LjQ2LTQuNjI3Ljk5NS4wOTl6TTg4Ljg2OC4zNDJsLS40NiA0LjYyNy45OTUuMDk4LjQ2LTQuNjI3LS45OTUtLjA5OHpNNDMuNTI3IDE0OC4xMDVsLTIuMzI2IDQuMDI3LS44NjYtLjUgMi4zMjYtNC4wMjcuODY2LjV6TTEyMS41OSAxMC42MTFsLTIuMzI2IDQuMDI3Ljg2Ni41IDIuMzI2LTQuMDI3LS44NjYtLjV6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCBkPSJNMTEyLjg4NyAyMy4wOTNjMC0uNTQ3LjAxMy0uOTU0LjA0LTEuMjJsLS4yNi4yNGMtLjEuMDg2LS40NC4zNjYtMS4wMi44NGwtLjU0LS42OCAxLjk2LTEuNTRoLjl2Ni42N2gtMS4wOHYtNC4zMXpNMTM1LjIwNSA0OC45MjdsMS43Mi0xLjczYy41MTQtLjUyLjg1NC0uODkgMS4wMi0xLjExLjE2Ny0uMjIuMjg3LS40MjQuMzYtLjYxYTEuNjkgMS42OSAwIDAgMCAuMTEtLjYxYzAtLjMwNy0uMDktLjU0Ny0uMjctLjcyLS4xOC0uMTczLS40My0uMjYtLjc1LS4yNi0uMjY2IDAtLjUyLjA1LS43Ni4xNS0uMjMzLjA5My0uNTA2LjI2My0uODIuNTFsLS41Ny0uNzJjLjM2LS4zLjcxNC0uNTE3IDEuMDYtLjY1LjM1NC0uMTMzLjczNC0uMiAxLjE0LS4yLjYyNyAwIDEuMTI3LjE2IDEuNS40OC4zNzQuMzIuNTYuNzU3LjU2IDEuMzEgMCAuMzEzLS4wNTMuNi0uMTYuODYtLjEyLjI4Ni0uMjg2LjU2Ni0uNS44NC0uMjQuMy0uNjEzLjY5LTEuMTIgMS4xN2wtMS4xNiAxLjExdi4wNWgzLjE3di45NWgtNC41M3YtLjgyek0xNDcuMTUxIDg0Ljg2NGMtLjc0IDAtMS4zNjctLjEyLTEuODgtLjM2di0uOTVhNC42IDQuNiAwIDAgMCAuOS4zMWMuMzIuMDczLjYyNi4xMS45Mi4xMS41MjYgMCAuOTEzLS4wOTMgMS4xNi0uMjguMjUzLS4xOTMuMzgtLjQ5LjM4LS44OSAwLS4zNi0uMTQtLjYyMy0uNDItLjc5LS4yOC0uMTY2LS43MjctLjI1LTEuMzQtLjI1aC0uNTd2LS44OGguNThjMS4wNzMgMCAxLjYxLS4zNjcgMS42MS0xLjEgMC0uMjkzLS4wOTQtLjUxNy0uMjgtLjY3LS4xODctLjE1My0uNDY0LS4yMy0uODMtLjIzLS4yNjcgMC0uNTE3LjAzNy0uNzUuMTEtLjIzNC4wNzMtLjUwNC4yMS0uODEuNDFsLS41My0uNzVhMy41NTggMy41NTggMCAwIDEgMi4xNC0uNjhjLjY3MyAwIDEuMi4xNDcgMS41OC40NC4zOC4yODcuNTcuNjkuNTcgMS4yMSAwIC40MTMtLjEyNy43NjQtLjM4IDEuMDUtLjI0Ny4yOC0uNTk0LjQ3LTEuMDQuNTd2LjA0Yy41MzMuMDY3LjkzNi4yMzMgMS4yMS41LjI3My4yNjcuNDEuNjIzLjQxIDEuMDcgMCAuNjQtLjIzIDEuMTM3LS42OSAxLjQ5LS40NTQuMzQ3LTEuMS41Mi0xLjk0LjUyek0xMzguMDI1IDExNS4yODNoLTMuMDR2LS44M2wzLjA0LTQuMzloMS4wNHY0LjMzaC45di44OWgtLjl2MS40NWgtMS4wNHYtMS40NXptMC0uODl2LTEuNjdjMC0uNTUzLjAxNy0xLjA0LjA1LTEuNDZoLS4wNGMtLjA5My4yMDctLjIyNi40NS0uNC43M2wtMS42NSAyLjRoMi4wNHpNMTEzLjU5NCAxMzkuMTUyYy0uNzQ3IDAtMS4zMzMtLjEyNC0xLjc2LS4zN3YtLjk2Yy4yNDcuMTMzLjUyNy4yMzYuODQuMzEuMzIuMDczLjYyLjExLjkuMTEuNDggMCAuODUtLjEwNyAxLjExLS4zMi4yNi0uMjIuMzktLjUzNC4zOS0uOTQgMC0uODA3LS41MTctMS4yMS0xLjU1LTEuMjEtLjE2NyAwLS4zNzcuMDItLjYzLjA2bC0uNDQuMDctLjQ5LS4yNy4yNy0zLjI3aDMuNDh2Ljk2aC0yLjU0bC0uMTUgMS42NmMuMzQ3LS4wNjcuNjY3LS4xLjk2LS4xLjY2NyAwIDEuMi4xOCAxLjYuNTQuNC4zNTMuNi44MzYuNiAxLjQ1IDAgLjcxMy0uMjI3IDEuMjczLS42OCAxLjY4LS40NTMuNC0xLjA5LjYtMS45MS42ek04MS43NSAxNDguMDg5Yy0uNzQgMC0xLjMyLS4yNTYtMS43NC0uNzctLjQyLS41MTMtLjYzLTEuMjQtLjYzLTIuMTggMC0yLjYyNiAxLjA3LTMuOTQgMy4yMS0zLjk0LjMyIDAgLjYwNC4wMjcuODUuMDh2Ljg5YTIuODUgMi44NSAwIDAgMC0uODEtLjFjLS43MiAwLTEuMjYuMTk3LTEuNjIuNTktLjM2LjM5NC0uNTU2IDEuMDEtLjU5IDEuODVoLjA2Yy4zMi0uNTI2LjgyNy0uNzkgMS41Mi0uNzkuNjA3IDAgMS4wOC4xODcgMS40Mi41Ni4zNDcuMzc0LjUyLjg4NC41MiAxLjUzIDAgLjctLjE5NiAxLjI1Ny0uNTkgMS42Ny0uMzkzLjQwNy0uOTI2LjYxLTEuNi42MXptLS4wMi0uODhjLjM2IDAgLjY0LS4xMi44NC0uMzYuMjA3LS4yNDYuMzEtLjU5My4zMS0xLjA0IDAtLjM4Ni0uMDk2LS42ODYtLjI5LS45LS4xOTMtLjIyLS40Ny0uMzMtLjgzLS4zMy0uMjMzIDAtLjQ1LjA1NC0uNjUuMTYtLjE5My4xLS4zNS4yMzQtLjQ3LjRhLjkxMi45MTIgMCAwIDAtLjE3LjUyYzAgLjQzNC4xMTcuODA0LjM1IDEuMTEuMjM0LjI5NC41MzcuNDQuOTEuNDR6TTQ5LjI2IDEzMy4zMDJINDUuOHYtLjk0aDQuNjF2Ljc2bC0yLjYxIDUuOTFoLTEuMTZsMi42Mi01Ljczek0yNC43MDMgMTE2Ljg1M2MtLjcyNiAwLTEuMjkzLS4xNTMtMS43LS40Ni0uNC0uMzEzLS42LS43Ni0uNi0xLjM0IDAtLjM4LjEwNy0uNzE2LjMyLTEuMDEuMjE0LS4yOTMuNTU0LS41NTYgMS4wMi0uNzktLjQtLjI0LS42OS0uNDkzLS44Ny0uNzZhMS42OTcgMS42OTcgMCAwIDEtLjI2LS45M2MwLS40OTMuMTg3LS44ODMuNTYtMS4xNy4zOC0uMjg2Ljg4NC0uNDMgMS41MS0uNDMuNjM0IDAgMS4xMzQuMTQ3IDEuNS40NC4zNzQuMjg3LjU2LjY3Ny41NiAxLjE3IDAgLjY5NC0uNDEzIDEuMjQ0LTEuMjQgMS42NS41Mi4yNTQuODkuNTI0IDEuMTEuODEuMjI3LjI4Ny4zNC42MTQuMzQuOTggMCAuNTYtLjIwMyAxLjAwNy0uNjEgMS4zNC0uNC4zMzQtLjk0Ni41LTEuNjQuNXptMC00LjA3Yy4zNi0uMTYuNjE3LS4zMy43Ny0uNTEuMTU0LS4xOC4yMy0uMzkuMjMtLjYzYS43NjIuNzYyIDAgMCAwLS4yOC0uNjJjLS4xODYtLjE1My0uNDM2LS4yMy0uNzUtLjIzLS4zMDYgMC0uNTUzLjA3Ny0uNzQuMjNhLjc2MS43NjEgMCAwIDAtLjI4LjYyYzAgLjE1NC4wMzQuMjk0LjEuNDIuMDY3LjEyNy4xNjcuMjQ0LjMuMzUuMTQuMTA3LjM1Ny4yMy42NS4zN3ptLS4wMiAzLjI1Yy4zOTQgMCAuNjk3LS4wOS45MS0uMjcuMjItLjE4Ni4zMy0uNDQuMzMtLjc2IDAtLjQ3My0uNDAzLS44ODYtMS4yMS0xLjI0bC0uMTQtLjA2Yy0uNC4xNzQtLjY5LjM2Ny0uODcuNTgtLjE4LjIwNy0uMjcuNDUtLjI3LjczIDAgLjMyLjExLjU3LjMzLjc1LjIyNy4xOC41MzQuMjcuOTIuMjd6TTE0Ljg2MiA4NC44NTRjLS40MTQgMC0uNzA0LS4wMjMtLjg3LS4wN3YtLjkxYy4yOC4wNzQuNTUuMTEuODEuMTEuNzMzIDAgMS4yNzYtLjE5MyAxLjYzLS41OC4zNi0uMzkzLjU1Ni0xLjAxLjU5LTEuODVoLS4wNWMtLjE4LjI3My0uMzk3LjQ3NC0uNjUuNi0uMjU0LjEyLS41NTQuMTgtLjkuMTgtLjU5NCAwLTEuMDYtLjE4My0xLjQtLjU1LS4zNC0uMzY3LS41MS0uODczLS41MS0xLjUyIDAtLjcwNi4xOTYtMS4yNjYuNTktMS42OC4zOTMtLjQxMy45My0uNjIgMS42MS0uNjIuNDggMCAuODk2LjExNyAxLjI1LjM1LjM1My4yMzQuNjI2LjU3NC44MiAxLjAyLjE5My40NC4yOS45NjcuMjkgMS41OCAwIDEuMzI3LS4yNjcgMi4zMTctLjggMi45Ny0uNTM0LjY0Ny0xLjMzNy45Ny0yLjQxLjk3em0uODMtMy4zOGMuMzYgMCAuNjY2LS4xMDYuOTItLjMyYS45NTYuOTU2IDAgMCAwIC4zNy0uNzZjMC0uNDMzLS4xMTctLjc5Ny0uMzUtMS4wOWExLjA5OSAxLjA5OSAwIDAgMC0uOS0uNDRjLS4zOCAwLS42Ny4xMi0uODcuMzYtLjE5NC4yNC0uMjkuNTg0LS4yOSAxLjAzIDAgLjM4Ny4wOTMuNjg3LjI4LjkuMTg2LjIxNC40NjYuMzIuODQuMzJ6TTIzLjQ0IDQ3LjY3MWMwLS41NDcuMDE0LS45NTMuMDQtMS4yMmwtLjI2LjI0Yy0uMS4wODctLjQ0LjM2Ny0xLjAyLjg0bC0uNTQtLjY4IDEuOTYtMS41NGguOXY2LjY3aC0xLjA4di00LjMxem01LjAwOCA0LjQzYy0uNzUzIDAtMS4zMjMtLjI5LTEuNzEtLjg3LS4zOC0uNTg3LS41Ny0xLjQ0My0uNTctMi41NyAwLTEuMTguMTg3LTIuMDUuNTYtMi42MS4zNzQtLjU2Ljk0Ny0uODQgMS43Mi0uODQuNzQgMCAxLjMwNC4yOTQgMS42OS44OC4zODcuNTguNTggMS40MzcuNTggMi41NyAwIDEuMTYtLjE4NiAyLjAyMy0uNTYgMi41OS0uMzczLjU2Ny0uOTQzLjg1LTEuNzEuODV6bTAtLjljLjQwNyAwIC43MDQtLjIuODktLjYuMTk0LS40LjI5LTEuMDQ3LjI5LTEuOTRzLS4wOTYtMS41NC0uMjktMS45NGMtLjE4Ni0uNDA2LS40ODMtLjYxLS44OS0uNjEtLjQyIDAtLjcyMy4yLS45MS42LS4xODYuMzk0LS4yOCAxLjA0NC0uMjggMS45NSAwIC45MDcuMDk0IDEuNTU3LjI4IDEuOTUuMTg3LjM5NC40OS41OS45MS41OXpNNDguMDE4IDIzLjA5M2MwLS41NDcuMDE0LS45NTQuMDQtMS4yMmwtLjI2LjI0Yy0uMS4wODYtLjQ0LjM2Ni0xLjAyLjg0bC0uNTQtLjY4IDEuOTYtMS41NGguOXY2LjY3aC0xLjA4di00LjMxem00Ljk5OCAwYzAtLjU0Ny4wMTQtLjk1NC4wNC0xLjIybC0uMjYuMjRjLS4xLjA4Ni0uNDQuMzY2LTEuMDIuODRsLS41NC0uNjggMS45Ni0xLjU0aC45djYuNjdoLTEuMDh2LTQuMzF6TTc4LjE4MyAxNS4zMThjMC0uNTQ3LjAxNC0uOTUzLjA0LTEuMjJsLS4yNi4yNGMtLjEuMDg3LS40NC4zNjctMS4wMi44NGwtLjU0LS42OCAxLjk2LTEuNTRoLjl2Ni42N2gtMS4wOHYtNC4zMXptMi43MzggMy40OSAxLjcyLTEuNzNjLjUxNC0uNTIuODU0LS44OSAxLjAyLTEuMTEuMTY3LS4yMi4yODctLjQyMy4zNi0uNjEuMDc0LS4xOTMuMTEtLjM5Ny4xMS0uNjEgMC0uMzA3LS4wOS0uNTQ3LS4yNy0uNzItLjE4LS4xNzMtLjQzLS4yNi0uNzUtLjI2LS4yNjYgMC0uNTIuMDUtLjc2LjE1LS4yMzMuMDkzLS41MDYuMjYzLS44Mi41MWwtLjU3LS43MmMuMzYtLjMuNzE0LS41MTcgMS4wNi0uNjUuMzU0LS4xMzMuNzM0LS4yIDEuMTQtLjIuNjI3IDAgMS4xMjcuMTYgMS41LjQ4LjM3NC4zMi41Ni43NTcuNTYgMS4zMSAwIC4zMTMtLjA1My42LS4xNi44Ni0uMTIuMjg3LS4yODYuNTY3LS41Ljg0LS4yNC4zLS42MTMuNjktMS4xMiAxLjE3bC0xLjE2IDEuMTF2LjA1aDMuMTd2Ljk1aC00LjUzdi0uODJ6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=) center center no-repeat}:host([analogue]) [part=digital]{display:flex;position:absolute;top:20%;left:0;right:0;justify-content:center;font-size:.34em}:host([analogue]) [part=digital] [part~=am-pm]{font-size:100%;line-height:1}:host([analogue]) [part=hands]::after{content:\'\';position:absolute;border-radius:50%;width:9%;height:9%;top:45.5%;left:45.5%;border:2px solid #000;box-sizing:border-box;z-index:1}:host([analogue]) [part~=hand]::after{content:\'\';position:absolute}:host([analogue]) [part~=second]::after{width:1%;height:43%;margin-top:3%;margin-left:49.5%;background-color:#f93}:host([analogue]) [part~=minute]::after{width:3%;height:43%;margin-top:3%;margin-left:48.5%;background-color:#3780bf}:host([analogue]) [part~=hour]::after{width:3%;height:28%;margin-top:18%;margin-left:48.5%;background-color:#3780bf}:host([analogue][size=small]){font-size:10px;min-width:50px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjb2xvcj0iIzAwMDAwMCI+CiAgICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMS41IiBzdHJva2U9ImN1cnJlbnRDb2xvciIvPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMS4yNjE5IDAuOTk5NTEyVjMuOTUxODlIMzIuMjYxOVYwLjk5OTUxMkgzMS4yNjE5Wk00NS4yODU4IDcuMjQ2ODdMNDYuNzYyIDQuNjkwMDNMNDcuNjI4IDUuMTkwMDNMNDYuMTUxOCA3Ljc0Njg3TDQ1LjI4NTggNy4yNDY4N1pNMTUuODM1NyA1LjU3NTUzTDE3LjMxMTkgOC4xMzIzN0wxOC4xNzc5IDcuNjMyMzdMMTYuNzAxNyA1LjA3NTUzTDE1LjgzNTcgNS41NzU1M1pNNC44MzgxIDE3LjA4OThMNy4zOTQ5NCAxOC41NjZMNy44OTQ5NCAxNy43TDUuMzM4MSAxNi4yMjM4TDQuODM4MSAxNy4wODk4Wk0zLjk1MjM4IDMyLjczNzRIMVYzMS43Mzc0SDMuOTUyMzhWMzIuNzM3NFpNNy4zNzEyNiA0NS41MDlMNC44MTQ0MiA0Ni45ODUyTDUuMzE0NDIgNDcuODUxMkw3Ljg3MTI2IDQ2LjM3NUw3LjM3MTI2IDQ1LjUwOVpNMTUuOTA5NSA1OC40NzA1TDE3LjM4NTcgNTUuOTEzNkwxOC4yNTE4IDU2LjQxMzZMMTYuNzc1NiA1OC45NzA1TDE1LjkwOTUgNTguNDcwNVpNMzEuMjYxOSA2MC4wNDY5VjYyLjk5OTNIMzIuMjYxOVY2MC4wNDY5SDMxLjI2MTlaTTQ2LjkxMDMgNTkuMjA5M0w0NS40MzQxIDU2LjY1MjVMNDYuMzAwMSA1Ni4xNTI1TDQ3Ljc3NjMgNTguNzA5M0w0Ni45MTAzIDU5LjIwOTNaTTU1LjkxNDMgNDYuNjE0TDU4LjQ3MTEgNDguMDkwMkw1OC45NzExIDQ3LjIyNDJMNTYuNDE0MyA0NS43NDhMNTUuOTE0MyA0Ni42MTRaTTYzIDMyLjczNzRINjAuMDQ3NlYzMS43Mzc0SDYzVjMyLjczNzRaTTU4LjQyMzcgMTUuODM1NEw1NS44NjY5IDE3LjMxMTZMNTYuMzY2OSAxOC4xNzc2TDU4LjkyMzcgMTYuNzAxNEw1OC40MjM3IDE1LjgzNTRaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+Cg==) center center/cover no-repeat}:host([analogue][size=small]) [part~=second]::after{width:1.5%;height:32%;margin-top:16%}:host([analogue][size=small]) [part~=minute]::after{height:37%;margin-top:12%}:host([analogue][size=small]) [part~=hour]::after{height:26%;margin-top:23%}:host([analogue][size=small]) [part~=am-pm]{padding-left:0;display:flex;position:absolute;left:0;right:0;bottom:15%;font-size:100%;justify-content:center}:host([analogue]) [part~=hour]::after,:host([analogue]) [part~=minute]::after{background-color:#000}:host([analogue][size=small]) [part=hands]::after{background-color:#000}' }}));
@@ -1,8 +1,8 @@
1
1
  import { JSXInterface } from '../jsx';
2
2
  import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
3
3
  import '../header/index.js';
4
- import '../panel/index.js';
5
4
  import '../icon/index.js';
5
+ import '../panel/index.js';
6
6
  /**
7
7
  * Allows users to hide non-critical information
8
8
  * or areas of the screen, maximizing the amount of real estate
@@ -1,13 +1,13 @@
1
1
  import { __decorate } from "tslib";
2
- import { BasicElement, css, nothing, html } from '@refinitiv-ui/core';
2
+ import { BasicElement, css, html, nothing } from '@refinitiv-ui/core';
3
3
  import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
4
4
  import { property } from '@refinitiv-ui/core/decorators/property.js';
5
5
  import { state } from '@refinitiv-ui/core/decorators/state.js';
6
- import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
7
- import { VERSION } from '../version.js';
6
+ import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
8
7
  import '../header/index.js';
9
- import '../panel/index.js';
10
8
  import '../icon/index.js';
9
+ import '../panel/index.js';
10
+ import { VERSION } from '../version.js';
11
11
  /**
12
12
  * Allows users to hide non-critical information
13
13
  * or areas of the screen, maximizing the amount of real estate
@@ -68,10 +68,10 @@ let Collapse = class Collapse extends BasicElement {
68
68
  :host {
69
69
  display: block;
70
70
  }
71
- :host(:not([expanded])) [part~=content] {
71
+ :host(:not([expanded])) [part~='content'] {
72
72
  visibility: hidden;
73
73
  }
74
- [part~=content] {
74
+ [part~='content'] {
75
75
  overflow: hidden;
76
76
  box-sizing: border-box;
77
77
  }
@@ -127,7 +127,8 @@ let Collapse = class Collapse extends BasicElement {
127
127
  toggle() {
128
128
  this.expanded = !this.expanded;
129
129
  const event = this.notifyPropertyChange('expanded', this.expanded, true);
130
- if (!event) { // revert expanded if event is cancelled
130
+ if (!event) {
131
+ // revert expanded if event is cancelled
131
132
  this.expanded = !this.expanded;
132
133
  }
133
134
  }
@@ -136,7 +137,7 @@ let Collapse = class Collapse extends BasicElement {
136
137
  * @returns {void}
137
138
  */
138
139
  showHide() {
139
- this.panelHolderRef.value?.removeAttribute(('no-animation'));
140
+ this.panelHolderRef.value?.removeAttribute('no-animation');
140
141
  this.setAnimationTargetHeight(this.getContentHeight());
141
142
  }
142
143
  /**
@@ -176,20 +177,28 @@ let Collapse = class Collapse extends BasicElement {
176
177
  role="heading"
177
178
  level=${this.level}
178
179
  aria-level=${this.headingLevel ?? nothing}
179
- @tap=${this.toggle}>
180
- <div
181
- id="header-label"
182
- role="button"
183
- tabindex="0"
184
- aria-expanded="${this.expanded}"
185
- aria-controls="content">
186
- ${this.header}
187
- </div>
180
+ @tap=${this.toggle}
181
+ >
182
+ <div
183
+ id="header-label"
184
+ role="button"
185
+ tabindex="0"
186
+ aria-expanded="${this.expanded}"
187
+ aria-controls="content"
188
+ >
189
+ ${this.header}
190
+ </div>
188
191
  <ef-icon icon="right" part="toggle" slot="left" aria-hidden="true"></ef-icon>
189
192
  <slot name="header-left" slot="left" @tap=${this.handleSlotTap}></slot>
190
193
  <slot name="header-right" slot="right" @tap=${this.handleSlotTap}></slot>
191
194
  </ef-header>
192
- <div ${ref(this.panelHolderRef)} id="content" part="content" role="region" aria-labelledby="header-label">
195
+ <div
196
+ ${ref(this.panelHolderRef)}
197
+ id="content"
198
+ part="content"
199
+ role="region"
200
+ aria-labelledby="header-label"
201
+ >
193
202
  <ef-panel ${ref(this.panelRef)} part="content-data" ?spacing="${this.spacing}" transparent>
194
203
  <slot></slot>
195
204
  </ef-panel>
@@ -1,4 +1,4 @@
1
1
  import '@refinitiv-ui/elements/panel/themes/halo/dark';
2
2
  import '@refinitiv-ui/elements/header/themes/halo/dark';
3
3
  import '@refinitiv-ui/elements/icon/themes/halo/dark';
4
- dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;background-color:#404040}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#5a5a5a}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#4d4d4d}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#343434}' }}));
4
+ dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;background-color:#404040}:host [part=header]:hover[level=\'1\'],:host [part~=header][focused=visible][level=\'1\'],:host([expanded]) [part=header][level=\'1\']{background-color:#5a5a5a}:host [part=header]:hover[level=\'2\'],:host [part~=header][focused=visible][level=\'2\'],:host([expanded]) [part=header][level=\'2\']{background-color:#4d4d4d}:host [part=header]:hover[level=\'4\'],:host [part~=header][focused=visible][level=\'4\'],:host([expanded]) [part=header][level=\'4\']{background-color:#343434}' }}));
@@ -1,4 +1,4 @@
1
1
  import '@refinitiv-ui/elements/panel/themes/halo/light';
2
2
  import '@refinitiv-ui/elements/header/themes/halo/light';
3
3
  import '@refinitiv-ui/elements/icon/themes/halo/light';
4
- dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;background-color:#eaeaea}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#d1d1d1}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#dedede}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#f2f2f2}' }}));
4
+ dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;background-color:#eaeaea}:host [part=header]:hover[level=\'1\'],:host [part~=header][focused=visible][level=\'1\'],:host([expanded]) [part=header][level=\'1\']{background-color:#d1d1d1}:host [part=header]:hover[level=\'2\'],:host [part~=header][focused=visible][level=\'2\'],:host([expanded]) [part=header][level=\'2\']{background-color:#dedede}:host [part=header]:hover[level=\'4\'],:host [part~=header][focused=visible][level=\'4\'],:host([expanded]) [part=header][level=\'4\']{background-color:#f2f2f2}' }}));
@@ -1,5 +1,5 @@
1
1
  import { JSXInterface } from '../../jsx';
2
- import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
2
+ import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
3
3
  import { Palettes } from './palettes.js';
4
4
  /**
5
5
  * Component that allows user to select
@@ -1,9 +1,9 @@
1
1
  import { __decorate } from "tslib";
2
- import { html, css, svg } from '@refinitiv-ui/core';
2
+ import { css, html, svg } from '@refinitiv-ui/core';
3
3
  import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
4
4
  import { VERSION } from '../../version.js';
5
- import { Palettes } from './palettes.js';
6
5
  import { COLOR_ITEMS } from '../helpers/color-helpers.js';
6
+ import { Palettes } from './palettes.js';
7
7
  /**
8
8
  * Component that allows user to select
9
9
  * any colours by tapping or dragging
@@ -50,7 +50,7 @@ let ColorPalettes = class ColorPalettes extends Palettes {
50
50
  */
51
51
  get ColorItemsTemplate() {
52
52
  return COLOR_ITEMS.map((item) => {
53
- return (svg `
53
+ return svg `
54
54
  <polygon
55
55
  data-role="color-item"
56
56
  stroke=${item[1]}
@@ -61,7 +61,7 @@ let ColorPalettes = class ColorPalettes extends Palettes {
61
61
  @touchmove=${this.onTouchmove}
62
62
  >
63
63
  </polygon>
64
- `);
64
+ `;
65
65
  });
66
66
  }
67
67
  /**
@@ -89,8 +89,7 @@ let ColorPalettes = class ColorPalettes extends Palettes {
89
89
  render() {
90
90
  return html `
91
91
  <svg id="colorPalettes" viewBox="-5 -5 245 210">
92
- ${this.ColorItemsTemplate}
93
- ${this.SelectorTemplate}
92
+ ${this.ColorItemsTemplate} ${this.SelectorTemplate}
94
93
  </svg>
95
94
  `;
96
95
  }
@@ -1,5 +1,5 @@
1
1
  import { JSXInterface } from '../../jsx';
2
- import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
2
+ import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
3
3
  import { Palettes } from './palettes.js';
4
4
  /**
5
5
  * Component that allows user to select any
@@ -1,10 +1,10 @@
1
1
  import { __decorate } from "tslib";
2
- import { html, css, svg } from '@refinitiv-ui/core';
2
+ import { css, html, svg } from '@refinitiv-ui/core';
3
3
  import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
4
4
  import { property } from '@refinitiv-ui/core/decorators/property.js';
5
5
  import { VERSION } from '../../version.js';
6
- import { Palettes } from './palettes.js';
7
6
  import { GRAYSCALE_ITEMS, NOCOLOR_POINTS } from '../helpers/color-helpers.js';
7
+ import { Palettes } from './palettes.js';
8
8
  /**
9
9
  * Component that allows user to select any
10
10
  * grayscale color by tapping or dragging
@@ -64,7 +64,7 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
64
64
  */
65
65
  get GrayscaleItemsTemplate() {
66
66
  return GRAYSCALE_ITEMS.map((item) => {
67
- return (svg `
67
+ return svg `
68
68
  <polygon
69
69
  data-role="color-item"
70
70
  stroke="rgba(0,0,0,0.4)"
@@ -75,7 +75,7 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
75
75
  @touchmove=${this.onTouchmove}
76
76
  >
77
77
  </polygon>
78
- `);
78
+ `;
79
79
  });
80
80
  }
81
81
  /**
@@ -83,7 +83,8 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
83
83
  * @return no color item template
84
84
  */
85
85
  get NoColorItemTemplate() {
86
- return this.allowNocolor ? (svg `
86
+ return this.allowNocolor
87
+ ? svg `
87
88
  <polygon
88
89
  id="nocolor-item"
89
90
  stroke="rgba(0,0,0,0.4)"
@@ -95,7 +96,8 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
95
96
  >
96
97
  </polygon>
97
98
  <line x1="15" y1="6" x2="-3" y2="17" stroke="red" stroke-width="2"></line>
98
- `) : null;
99
+ `
100
+ : null;
99
101
  }
100
102
  /**
101
103
  * Update color selector element when value has been changed
@@ -145,9 +147,7 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
145
147
  const viewBox = this.allowNocolor ? '-5 0 169 23' : '6 0 169 23';
146
148
  return html `
147
149
  <svg id="grayscale-palettes" viewBox=${viewBox}>
148
- ${this.NoColorItemTemplate}
149
- ${this.GrayscaleItemsTemplate}
150
- ${this.SelectorTemplate}
150
+ ${this.NoColorItemTemplate} ${this.GrayscaleItemsTemplate} ${this.SelectorTemplate}
151
151
  </svg>
152
152
  `;
153
153
  }
@@ -2,8 +2,8 @@ import { __decorate } from "tslib";
2
2
  import { BasicElement, svg } from '@refinitiv-ui/core';
3
3
  import { property } from '@refinitiv-ui/core/decorators/property.js';
4
4
  import { query } from '@refinitiv-ui/core/decorators/query.js';
5
+ import { isHex, rgb } from '@refinitiv-ui/utils/color.js';
5
6
  import { VERSION } from '../../version.js';
6
- import { rgb, isHex } from '@refinitiv-ui/utils/color.js';
7
7
  /**
8
8
  * Element base class usually used
9
9
  * for creating palettes elements.
@@ -28,10 +28,10 @@ export class Palettes extends BasicElement {
28
28
  * @return {SVGTemplateResult} selector template
29
29
  */
30
30
  get SelectorTemplate() {
31
- return (svg `
31
+ return svg `
32
32
  <polygon class="color-selector-shadow"></polygon>
33
33
  <polygon class="color-selector"></polygon>
34
- `);
34
+ `;
35
35
  }
36
36
  /**
37
37
  * Hide selector element
@@ -73,7 +73,8 @@ export class Palettes extends BasicElement {
73
73
  onMousemove(event) {
74
74
  const polygonElement = event.target;
75
75
  let mouseButton = event.buttons;
76
- if (mouseButton === undefined) { // buttons property is not supported in safari
76
+ if (mouseButton === undefined) {
77
+ // buttons property is not supported in safari
77
78
  mouseButton = event.which;
78
79
  }
79
80
  if (mouseButton !== 1) {
@@ -1,5 +1,5 @@
1
- import { rgb, isHex } from '@refinitiv-ui/utils/color.js';
2
- const rgbNumberToString = (value) => isNaN(value) ? '' : `${value}`; // replace NaN with empty string
1
+ import { isHex, rgb } from '@refinitiv-ui/utils/color.js';
2
+ const rgbNumberToString = (value) => (isNaN(value) ? '' : `${value}`); // replace NaN with empty string
3
3
  /**
4
4
  * A helper model in order to keep and update values between RGB and HEX
5
5
  */
@@ -17,22 +17,20 @@ class ValueModel {
17
17
  this._hex = value.slice(1);
18
18
  }
19
19
  getHexValue() {
20
- if (!this.isValidRGB() || this.red === '' && this.green === '' && this.blue === '') {
20
+ if (!this.isValidRGB() || (this.red === '' && this.green === '' && this.blue === '')) {
21
21
  return '';
22
22
  }
23
23
  const hex = rgb(Number(this.red), Number(this.green), Number(this.blue)).formatHex();
24
24
  return hex ? hex.slice(1) : '';
25
25
  }
26
26
  isValidRGBValue(value) {
27
- return value === '' || Number(value) >= 0 && Number(value) <= 255;
27
+ return value === '' || (Number(value) >= 0 && Number(value) <= 255);
28
28
  }
29
29
  isValidHexValue(value) {
30
30
  return value === '' || isHex(`#${value}`);
31
31
  }
32
32
  isValidRGB() {
33
- return this.isValidRGBValue(this.red)
34
- && this.isValidRGBValue(this.green)
35
- && this.isValidRGBValue(this.blue);
33
+ return (this.isValidRGBValue(this.red) && this.isValidRGBValue(this.green) && this.isValidRGBValue(this.blue));
36
34
  }
37
35
  isValidHex() {
38
36
  return this.isValidHexValue(this.hex);
@@ -44,8 +42,8 @@ class ValueModel {
44
42
  */
45
43
  hasChanged() {
46
44
  // Avoid the same hex color format of empty string and black color
47
- return ((this.initialValue !== this.value) && ((!!this.initialValue && !!this.value) === false))
48
- || rgb(this.initialValue).formatHex() !== rgb(this.value).formatHex();
45
+ return ((this.initialValue !== this.value && (!!this.initialValue && !!this.value) === false) ||
46
+ rgb(this.initialValue).formatHex() !== rgb(this.value).formatHex());
49
47
  }
50
48
  /**
51
49
  * Check if RGB and Hex values are valid
@@ -1,13 +1,13 @@
1
1
  import { JSXInterface } from '../jsx';
2
- import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
2
+ import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
3
+ import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
4
+ import { Translate } from '@refinitiv-ui/translate';
3
5
  import '../button/index.js';
6
+ import { Dialog } from '../dialog/index.js';
4
7
  import '../number-field/index.js';
5
8
  import '../text-field/index.js';
6
- import { Dialog } from '../dialog/index.js';
7
9
  import './elements/color-palettes.js';
8
10
  import './elements/grayscale-palettes.js';
9
- import { Translate } from '@refinitiv-ui/translate';
10
- import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
11
11
  /**
12
12
  * Displays a colour picker dialog,
13
13
  * for selecting a predefined range of colours.
@@ -64,8 +64,8 @@ export declare class ColorDialog extends Dialog {
64
64
  */
65
65
  private valueModel;
66
66
  /**
67
- * @ignore
68
- */
67
+ * @ignore
68
+ */
69
69
  draggable: boolean;
70
70
  /**
71
71
  * Set the palettes to activate no-color option
@@ -1,20 +1,20 @@
1
1
  import { __decorate } from "tslib";
2
- import { html, css, WarningNotice } from '@refinitiv-ui/core';
2
+ import { WarningNotice, css, html } from '@refinitiv-ui/core';
3
3
  import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
4
4
  import { property } from '@refinitiv-ui/core/decorators/property.js';
5
5
  import { query } from '@refinitiv-ui/core/decorators/query.js';
6
6
  import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
7
- import { rgb, isHex, removeHashSign } from '@refinitiv-ui/utils/color.js';
8
- import { VERSION } from '../version.js';
9
- import { ValueModel } from './helpers/value-model.js';
7
+ import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
8
+ import { translate } from '@refinitiv-ui/translate';
9
+ import { isHex, removeHashSign, rgb } from '@refinitiv-ui/utils/color.js';
10
10
  import '../button/index.js';
11
+ import { Dialog } from '../dialog/index.js';
11
12
  import '../number-field/index.js';
12
13
  import '../text-field/index.js';
13
- import { Dialog } from '../dialog/index.js';
14
+ import { VERSION } from '../version.js';
14
15
  import './elements/color-palettes.js';
15
16
  import './elements/grayscale-palettes.js';
16
- import { translate } from '@refinitiv-ui/translate';
17
- import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
17
+ import { ValueModel } from './helpers/value-model.js';
18
18
  /**
19
19
  * Displays a colour picker dialog,
20
20
  * for selecting a predefined range of colours.
@@ -61,8 +61,8 @@ let ColorDialog = class ColorDialog extends Dialog {
61
61
  */
62
62
  this.valueModel = new ValueModel();
63
63
  /**
64
- * @ignore
65
- */
64
+ * @ignore
65
+ */
66
66
  this.draggable = true;
67
67
  /**
68
68
  * Set the palettes to activate no-color option
@@ -90,13 +90,16 @@ let ColorDialog = class ColorDialog extends Dialog {
90
90
  :host {
91
91
  display: block;
92
92
  }
93
- [part=preview-color][no-color] {
94
- background: linear-gradient(to bottom right, transparent calc(50% - 2px),
95
- var(--no-color-line-color, #ff0000) calc(50% - 1px),
96
- var(--no-color-line-color, #ff0000) calc(50% + 1px),
97
- transparent calc(50% + 2px));
93
+ [part='preview-color'][no-color] {
94
+ background: linear-gradient(
95
+ to bottom right,
96
+ transparent calc(50% - 2px),
97
+ var(--no-color-line-color, #ff0000) calc(50% - 1px),
98
+ var(--no-color-line-color, #ff0000) calc(50% + 1px),
99
+ transparent calc(50% + 2px)
100
+ );
98
101
  }
99
- `
102
+ `
100
103
  ];
101
104
  }
102
105
  /**
@@ -140,7 +143,9 @@ let ColorDialog = class ColorDialog extends Dialog {
140
143
  */
141
144
  set red(red) {
142
145
  red = String(red);
143
- this.value = this.isValidRGB(red) ? rgb(Number(red), Number(this.green), Number(this.blue)).formatHex() : '';
146
+ this.value = this.isValidRGB(red)
147
+ ? rgb(Number(red), Number(this.green), Number(this.blue)).formatHex()
148
+ : '';
144
149
  }
145
150
  get red() {
146
151
  return this.hex ? rgb(`#${this.hex}`).r.toString() : '';
@@ -152,7 +157,9 @@ let ColorDialog = class ColorDialog extends Dialog {
152
157
  */
153
158
  set green(green) {
154
159
  green = String(green);
155
- this.value = this.isValidRGB(green) ? rgb(Number(this.red), Number(green), Number(this.blue)).formatHex() : '';
160
+ this.value = this.isValidRGB(green)
161
+ ? rgb(Number(this.red), Number(green), Number(this.blue)).formatHex()
162
+ : '';
156
163
  }
157
164
  get green() {
158
165
  return this.hex ? rgb(`#${this.hex}`).g.toString() : '';
@@ -164,7 +171,9 @@ let ColorDialog = class ColorDialog extends Dialog {
164
171
  */
165
172
  set blue(blue) {
166
173
  blue = String(blue);
167
- this.value = this.isValidRGB(blue) ? rgb(Number(this.red), Number(this.green), Number(blue)).formatHex() : '';
174
+ this.value = this.isValidRGB(blue)
175
+ ? rgb(Number(this.red), Number(this.green), Number(blue)).formatHex()
176
+ : '';
168
177
  }
169
178
  get blue() {
170
179
  return this.hex ? rgb(`#${this.hex}`).b.toString() : '';
@@ -176,14 +185,14 @@ let ColorDialog = class ColorDialog extends Dialog {
176
185
  */
177
186
  shouldUpdate(changedProperties) {
178
187
  const shouldUpdate = super.shouldUpdate(changedProperties);
179
- return shouldUpdate
180
- || changedProperties.has('allowNocolor')
181
- || changedProperties.has('red')
182
- || changedProperties.has('green')
183
- || changedProperties.has('blue')
184
- || changedProperties.has('value')
185
- || changedProperties.has('hex')
186
- || changedProperties.has('enableConfirm');
188
+ return (shouldUpdate ||
189
+ changedProperties.has('allowNocolor') ||
190
+ changedProperties.has('red') ||
191
+ changedProperties.has('green') ||
192
+ changedProperties.has('blue') ||
193
+ changedProperties.has('value') ||
194
+ changedProperties.has('hex') ||
195
+ changedProperties.has('enableConfirm'));
187
196
  }
188
197
  /**
189
198
  * Updates the element
@@ -250,7 +259,7 @@ let ColorDialog = class ColorDialog extends Dialog {
250
259
  * @returns true if value is within 0 - 255
251
260
  */
252
261
  isValidRGB(value) {
253
- const isValid = value === '' || Number(value) >= 0 && Number(value) <= 255;
262
+ const isValid = value === '' || (Number(value) >= 0 && Number(value) <= 255);
254
263
  if (!isValid) {
255
264
  new WarningNotice(`The specified RGB "${value}" is not valid color. The value should be 0 - 255.`).show();
256
265
  }
@@ -316,7 +325,11 @@ let ColorDialog = class ColorDialog extends Dialog {
316
325
  * @returns {boolean} true if disabled
317
326
  */
318
327
  isApplyDisabled() {
319
- return this.valueModel.hasChanged() && this.valueModel.isValid() ? this.allowNocolor ? false : this.valueModel.hex === '' : true;
328
+ return this.valueModel.hasChanged() && this.valueModel.isValid()
329
+ ? this.allowNocolor
330
+ ? false
331
+ : this.valueModel.hex === ''
332
+ : true;
320
333
  }
321
334
  /**
322
335
  * A `TemplateResult` that will be used
@@ -334,14 +347,16 @@ let ColorDialog = class ColorDialog extends Dialog {
334
347
  .value=${this.valueModel.value}
335
348
  @value-changed=${this.onColorChanged}
336
349
  part="color-palettes"
337
- aria-hidden="true">
350
+ aria-hidden="true"
351
+ >
338
352
  </ef-color-palettes>
339
353
  <ef-grayscale-palettes
340
354
  .value=${this.valueModel.value}
341
355
  @value-changed=${this.onColorChanged}
342
356
  ?allow-nocolor=${this.allowNocolor}
343
357
  part="grayscale-palettes"
344
- aria-hidden="true">
358
+ aria-hidden="true"
359
+ >
345
360
  </ef-grayscale-palettes>
346
361
  </div>
347
362
  <div part="inputs-container">
@@ -350,7 +365,8 @@ let ColorDialog = class ColorDialog extends Dialog {
350
365
  style=${styleMap({
351
366
  backgroundColor: this.valueModel.value || undefined
352
367
  })}
353
- ?no-color=${!this.valueModel.value}></div>
368
+ ?no-color=${!this.valueModel.value}
369
+ ></div>
354
370
  <div>
355
371
  <label for="redInput">${this.t('RED')}&nbsp;:</label>
356
372
  <ef-number-field
@@ -395,7 +411,8 @@ let ColorDialog = class ColorDialog extends Dialog {
395
411
  pattern="^([0-9a-fA-F]{3}){1,2}$"
396
412
  part="color-input"
397
413
  id="hexInput"
398
- maxlength="6">
414
+ maxlength="6"
415
+ >
399
416
  </ef-text-field>
400
417
  </div>
401
418
  </div>
@@ -417,11 +434,10 @@ let ColorDialog = class ColorDialog extends Dialog {
417
434
  part="button"
418
435
  cta
419
436
  @tap=${this.onConfirmValue}
420
- ?disabled=${this.isApplyDisabled()}>${this.t('APPLY')}</ef-button>
421
- <ef-button
422
- id="closeButton"
423
- @tap=${this.onCloseDialog}
424
- part="button">${this.t('CLOSE')}</ef-button>
437
+ ?disabled=${this.isApplyDisabled()}
438
+ >${this.t('APPLY')}</ef-button
439
+ >
440
+ <ef-button id="closeButton" @tap=${this.onCloseDialog} part="button">${this.t('CLOSE')}</ef-button>
425
441
  `;
426
442
  }
427
443
  };