@esri/solutions-components 0.2.6 → 0.2.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (314) hide show
  1. package/dist/cjs/deduct-calculator.cjs.entry.js +1 -1
  2. package/dist/cjs/pci-calculator.cjs.entry.js +1 -1
  3. package/dist/cjs/{pciUtils-6a806ba4.js → pciUtils-423cfc68.js} +25 -7
  4. package/dist/collection/demos/deduct-calculator.html +2 -5
  5. package/dist/collection/demos/new-public-notification.html +6 -4
  6. package/dist/collection/utils/pciUtils.js +25 -7
  7. package/dist/collection/utils/pciUtils.ts +30 -7
  8. package/dist/components/ExpandToggle.js +110 -0
  9. package/dist/components/Heading.js +22 -0
  10. package/dist/components/_commonjsHelpers.js +22 -0
  11. package/dist/components/action-bar.js +276 -0
  12. package/dist/components/action-group.js +149 -0
  13. package/dist/components/action-menu.js +356 -0
  14. package/dist/components/action.js +214 -0
  15. package/dist/components/add-record-modal.d.ts +11 -0
  16. package/dist/components/add-record-modal.js +171 -0
  17. package/dist/components/array.js +15 -0
  18. package/dist/components/block.js +272 -0
  19. package/dist/components/buffer-tools.d.ts +11 -0
  20. package/dist/components/buffer-tools.js +11 -0
  21. package/dist/components/buffer-tools2.js +262 -0
  22. package/dist/components/button.js +263 -0
  23. package/dist/components/calcite-accordion-item.js +244 -0
  24. package/dist/components/calcite-accordion.js +180 -0
  25. package/dist/components/calcite-action-bar.js +11 -0
  26. package/dist/components/calcite-action-group.js +11 -0
  27. package/dist/components/calcite-action-menu.js +11 -0
  28. package/dist/components/calcite-action-pad.js +197 -0
  29. package/dist/components/calcite-action.js +11 -0
  30. package/dist/components/calcite-alert.js +297 -0
  31. package/dist/components/calcite-avatar.js +182 -0
  32. package/dist/components/calcite-block-section.js +155 -0
  33. package/dist/components/calcite-block.js +11 -0
  34. package/dist/components/calcite-button.js +11 -0
  35. package/dist/components/calcite-card.js +187 -0
  36. package/dist/components/calcite-checkbox.js +11 -0
  37. package/dist/components/calcite-chip.js +11 -0
  38. package/dist/components/calcite-color-picker-hex-input.js +11 -0
  39. package/dist/components/calcite-color-picker-swatch.js +11 -0
  40. package/dist/components/calcite-color-picker.js +1036 -0
  41. package/dist/components/calcite-combobox-item-group.js +75 -0
  42. package/dist/components/calcite-combobox-item.js +11 -0
  43. package/dist/components/calcite-combobox.js +11 -0
  44. package/dist/components/calcite-date-picker-day.js +11 -0
  45. package/dist/components/calcite-date-picker-month-header.js +11 -0
  46. package/dist/components/calcite-date-picker-month.js +11 -0
  47. package/dist/components/calcite-date-picker.js +11 -0
  48. package/dist/components/calcite-dropdown-group.js +11 -0
  49. package/dist/components/calcite-dropdown-item.js +11 -0
  50. package/dist/components/calcite-dropdown.js +11 -0
  51. package/dist/components/calcite-fab.js +144 -0
  52. package/dist/components/calcite-filter.js +195 -0
  53. package/dist/components/calcite-flow-item.js +243 -0
  54. package/dist/components/calcite-flow.js +147 -0
  55. package/dist/components/calcite-graph.js +11 -0
  56. package/dist/components/calcite-handle.js +11 -0
  57. package/dist/components/calcite-icon.js +11 -0
  58. package/dist/components/calcite-inline-editable.js +294 -0
  59. package/dist/components/calcite-input-date-picker.js +713 -0
  60. package/dist/components/calcite-input-message.js +11 -0
  61. package/dist/components/calcite-input-number.js +637 -0
  62. package/dist/components/calcite-input-text.js +400 -0
  63. package/dist/components/calcite-input-time-picker.js +434 -0
  64. package/dist/components/calcite-input.js +11 -0
  65. package/dist/components/calcite-label.js +11 -0
  66. package/dist/components/calcite-link.js +11 -0
  67. package/dist/components/calcite-list-item-group.js +65 -0
  68. package/dist/components/calcite-list-item.js +11 -0
  69. package/dist/components/calcite-list.js +11 -0
  70. package/dist/components/calcite-loader.js +11 -0
  71. package/dist/components/calcite-modal.js +11 -0
  72. package/dist/components/calcite-notice.js +11 -0
  73. package/dist/components/calcite-option-group.js +64 -0
  74. package/dist/components/calcite-option.js +11 -0
  75. package/dist/components/calcite-pagination.js +258 -0
  76. package/dist/components/calcite-panel.js +11 -0
  77. package/dist/components/calcite-pick-list-group.js +74 -0
  78. package/dist/components/calcite-pick-list-item.js +11 -0
  79. package/dist/components/calcite-pick-list.js +11 -0
  80. package/dist/components/calcite-popover-manager.js +94 -0
  81. package/dist/components/calcite-popover.js +11 -0
  82. package/dist/components/calcite-progress.js +11 -0
  83. package/dist/components/calcite-radio-button-group.js +132 -0
  84. package/dist/components/calcite-radio-button.js +310 -0
  85. package/dist/components/calcite-radio-group-item.js +11 -0
  86. package/dist/components/calcite-radio-group.js +11 -0
  87. package/dist/components/calcite-rating.js +201 -0
  88. package/dist/components/calcite-scrim.js +11 -0
  89. package/dist/components/calcite-select.js +11 -0
  90. package/dist/components/calcite-shell-center-row.js +100 -0
  91. package/dist/components/calcite-shell-panel.js +11 -0
  92. package/dist/components/calcite-shell.js +11 -0
  93. package/dist/components/calcite-slider.js +11 -0
  94. package/dist/components/calcite-sortable-list.js +202 -0
  95. package/dist/components/calcite-split-button.js +11 -0
  96. package/dist/components/calcite-stepper-item.js +271 -0
  97. package/dist/components/calcite-stepper.js +256 -0
  98. package/dist/components/calcite-switch.js +11 -0
  99. package/dist/components/calcite-tab-nav.js +11 -0
  100. package/dist/components/calcite-tab-title.js +11 -0
  101. package/dist/components/calcite-tab.js +11 -0
  102. package/dist/components/calcite-tabs.js +11 -0
  103. package/dist/components/calcite-tile-select-group.js +65 -0
  104. package/dist/components/calcite-tile-select.js +266 -0
  105. package/dist/components/calcite-tile.js +11 -0
  106. package/dist/components/calcite-time-picker.js +11 -0
  107. package/dist/components/calcite-tip-group.js +41 -0
  108. package/dist/components/calcite-tip-manager.js +223 -0
  109. package/dist/components/calcite-tip.js +162 -0
  110. package/dist/components/calcite-tooltip-manager.js +57 -0
  111. package/dist/components/calcite-tooltip.js +11 -0
  112. package/dist/components/calcite-tree-item.js +11 -0
  113. package/dist/components/calcite-tree.js +11 -0
  114. package/dist/components/calcite-value-list-item.js +11 -0
  115. package/dist/components/calcite-value-list.js +11 -0
  116. package/dist/components/card-manager.d.ts +11 -0
  117. package/dist/components/card-manager.js +143 -0
  118. package/dist/components/check-list.d.ts +11 -0
  119. package/dist/components/check-list.js +11 -0
  120. package/dist/components/check-list2.js +131 -0
  121. package/dist/components/checkbox.js +165 -0
  122. package/dist/components/chip.js +170 -0
  123. package/dist/components/color-picker-hex-input.js +363 -0
  124. package/dist/components/color-picker-swatch.js +2034 -0
  125. package/dist/components/combobox-item.js +182 -0
  126. package/dist/components/combobox.js +912 -0
  127. package/dist/components/comment-card.d.ts +11 -0
  128. package/dist/components/comment-card.js +90 -0
  129. package/dist/components/conditionalSlot.js +50 -0
  130. package/dist/components/config-buffer-tools.d.ts +11 -0
  131. package/dist/components/config-buffer-tools.js +187 -0
  132. package/dist/components/config-draw-tools.d.ts +11 -0
  133. package/dist/components/config-draw-tools.js +121 -0
  134. package/dist/components/config-layer-picker.d.ts +11 -0
  135. package/dist/components/config-layer-picker.js +163 -0
  136. package/dist/components/config-pdf-download.d.ts +11 -0
  137. package/dist/components/config-pdf-download.js +154 -0
  138. package/dist/components/crowdsource-manager.d.ts +11 -0
  139. package/dist/components/crowdsource-manager.js +90 -0
  140. package/dist/components/crowdsource-reporter.d.ts +11 -0
  141. package/dist/components/crowdsource-reporter.js +90 -0
  142. package/dist/components/csvUtils.js +74 -0
  143. package/dist/components/date-picker-day.js +111 -0
  144. package/dist/components/date-picker-month-header.js +224 -0
  145. package/dist/components/date-picker-month.js +344 -0
  146. package/dist/components/date-picker.js +575 -0
  147. package/dist/components/date.js +180 -0
  148. package/dist/components/debounce.js +487 -0
  149. package/dist/components/deduct-calculator.d.ts +11 -0
  150. package/dist/components/deduct-calculator.js +11 -0
  151. package/dist/components/deduct-calculator2.js +1002 -0
  152. package/dist/components/dom.js +231 -0
  153. package/dist/components/dropdown-group.js +96 -0
  154. package/dist/components/dropdown-item.js +232 -0
  155. package/dist/components/dropdown.js +505 -0
  156. package/dist/components/edit-record-modal.d.ts +11 -0
  157. package/dist/components/edit-record-modal.js +11 -0
  158. package/dist/components/edit-record-modal2.js +161 -0
  159. package/dist/components/filter.js +763 -0
  160. package/dist/components/floating-ui.js +1768 -0
  161. package/dist/components/form.js +228 -0
  162. package/dist/components/graph.js +254 -0
  163. package/dist/components/guid.js +24 -0
  164. package/dist/components/handle.js +119 -0
  165. package/dist/components/icon.js +202 -0
  166. package/dist/components/index.d.ts +61 -0
  167. package/dist/components/index.js +196 -0
  168. package/dist/components/index2.js +199 -0
  169. package/dist/components/info-card.d.ts +11 -0
  170. package/dist/components/info-card.js +11 -0
  171. package/dist/components/info-card2.js +97 -0
  172. package/dist/components/input-message.js +101 -0
  173. package/dist/components/input.js +740 -0
  174. package/dist/components/interactive.js +51 -0
  175. package/dist/components/interfaces.js +19 -0
  176. package/dist/components/interfaces2.js +21 -0
  177. package/dist/components/interfaces3.js +80 -0
  178. package/dist/components/json-editor.d.ts +11 -0
  179. package/dist/components/json-editor.js +11 -0
  180. package/dist/components/json-editor2.js +441 -0
  181. package/dist/components/key.js +16 -0
  182. package/dist/components/label.js +106 -0
  183. package/dist/components/label2.js +131 -0
  184. package/dist/components/labelFormats.js +210 -0
  185. package/dist/components/layer-table.d.ts +11 -0
  186. package/dist/components/layer-table.js +453 -0
  187. package/dist/components/link.js +123 -0
  188. package/dist/components/list-item.d.ts +11 -0
  189. package/dist/components/list-item.js +90 -0
  190. package/dist/components/list-item2.js +149 -0
  191. package/dist/components/list.js +83 -0
  192. package/dist/components/loadModules.js +28 -0
  193. package/dist/components/loader.js +116 -0
  194. package/dist/components/locale.js +412 -0
  195. package/dist/components/locale2.js +413 -0
  196. package/dist/components/map-card.d.ts +11 -0
  197. package/dist/components/map-card.js +354 -0
  198. package/dist/components/map-draw-tools.d.ts +11 -0
  199. package/dist/components/map-draw-tools.js +11 -0
  200. package/dist/components/map-draw-tools2.js +228 -0
  201. package/dist/components/map-layer-picker.d.ts +11 -0
  202. package/dist/components/map-layer-picker.js +11 -0
  203. package/dist/components/map-layer-picker2.js +188 -0
  204. package/dist/components/map-search.d.ts +11 -0
  205. package/dist/components/map-search.js +155 -0
  206. package/dist/components/map-select-tools.d.ts +11 -0
  207. package/dist/components/map-select-tools.js +11 -0
  208. package/dist/components/map-select-tools2.js +588 -0
  209. package/dist/components/mapViewUtils.js +129 -0
  210. package/dist/components/math.js +24 -0
  211. package/dist/components/media-card.d.ts +11 -0
  212. package/dist/components/media-card.js +11 -0
  213. package/dist/components/media-card2.js +177 -0
  214. package/dist/components/modal.js +495 -0
  215. package/dist/components/nonChromiumPlatformUtils.js +503 -0
  216. package/dist/components/notice.js +192 -0
  217. package/dist/components/observers.js +56 -0
  218. package/dist/components/openCloseComponent.js +56 -0
  219. package/dist/components/option.js +109 -0
  220. package/dist/components/panel.js +459 -0
  221. package/dist/components/pci-calculator.d.ts +11 -0
  222. package/dist/components/pci-calculator.js +193 -0
  223. package/dist/components/pdf-download.d.ts +11 -0
  224. package/dist/components/pdf-download.js +11 -0
  225. package/dist/components/pdf-download2.js +189 -0
  226. package/dist/components/pick-list-item.js +255 -0
  227. package/dist/components/pick-list.js +170 -0
  228. package/dist/components/popover.js +500 -0
  229. package/dist/components/progress.js +60 -0
  230. package/dist/components/public-notification.d.ts +11 -0
  231. package/dist/components/public-notification.js +825 -0
  232. package/dist/components/publicNotificationStore.js +38 -0
  233. package/dist/components/queryUtils.js +187 -0
  234. package/dist/components/radio-group-item.js +101 -0
  235. package/dist/components/radio-group.js +235 -0
  236. package/dist/components/refine-selection-tools.d.ts +11 -0
  237. package/dist/components/refine-selection-tools.js +11 -0
  238. package/dist/components/refine-selection-tools2.js +492 -0
  239. package/dist/components/refine-selection.d.ts +11 -0
  240. package/dist/components/refine-selection.js +11 -0
  241. package/dist/components/refine-selection2.js +376 -0
  242. package/dist/components/resources.js +24 -0
  243. package/dist/components/resources2.js +21 -0
  244. package/dist/components/resources3.js +38 -0
  245. package/dist/components/scrim.js +83 -0
  246. package/dist/components/select.js +259 -0
  247. package/dist/components/shared-list-render.js +319 -0
  248. package/dist/components/shell-panel.js +281 -0
  249. package/dist/components/shell.js +121 -0
  250. package/dist/components/slider.js +896 -0
  251. package/dist/components/solution-configuration.d.ts +11 -0
  252. package/dist/components/solution-configuration.js +2233 -0
  253. package/dist/components/solution-contents.d.ts +11 -0
  254. package/dist/components/solution-contents.js +11 -0
  255. package/dist/components/solution-contents2.js +128 -0
  256. package/dist/components/solution-item-details.d.ts +11 -0
  257. package/dist/components/solution-item-details.js +11 -0
  258. package/dist/components/solution-item-details2.js +234 -0
  259. package/dist/components/solution-item-icon.d.ts +11 -0
  260. package/dist/components/solution-item-icon.js +11 -0
  261. package/dist/components/solution-item-icon2.js +342 -0
  262. package/dist/components/solution-item-sharing.d.ts +11 -0
  263. package/dist/components/solution-item-sharing.js +11 -0
  264. package/dist/components/solution-item-sharing2.js +167 -0
  265. package/dist/components/solution-item.d.ts +11 -0
  266. package/dist/components/solution-item.js +11 -0
  267. package/dist/components/solution-item2.js +315 -0
  268. package/dist/components/solution-organization-variables.d.ts +11 -0
  269. package/dist/components/solution-organization-variables.js +11 -0
  270. package/dist/components/solution-organization-variables2.js +132 -0
  271. package/dist/components/solution-resource-item.d.ts +11 -0
  272. package/dist/components/solution-resource-item.js +11 -0
  273. package/dist/components/solution-resource-item2.js +356 -0
  274. package/dist/components/solution-spatial-ref.d.ts +11 -0
  275. package/dist/components/solution-spatial-ref.js +11 -0
  276. package/dist/components/solution-spatial-ref2.js +21446 -0
  277. package/dist/components/solution-store.js +4092 -0
  278. package/dist/components/solution-template-data.d.ts +11 -0
  279. package/dist/components/solution-template-data.js +11 -0
  280. package/dist/components/solution-template-data2.js +233 -0
  281. package/dist/components/solution-variables.d.ts +11 -0
  282. package/dist/components/solution-variables.js +11 -0
  283. package/dist/components/solution-variables2.js +150 -0
  284. package/dist/components/sortable.esm.js +3026 -0
  285. package/dist/components/split-button.js +165 -0
  286. package/dist/components/store-manager.d.ts +11 -0
  287. package/dist/components/store-manager.js +83 -0
  288. package/dist/components/switch.js +139 -0
  289. package/dist/components/tab-nav.js +241 -0
  290. package/dist/components/tab-title.js +276 -0
  291. package/dist/components/tab.js +154 -0
  292. package/dist/components/tabs.js +188 -0
  293. package/dist/components/tile.js +129 -0
  294. package/dist/components/time-picker.js +943 -0
  295. package/dist/components/tooltip.js +399 -0
  296. package/dist/components/tree-item.js +294 -0
  297. package/dist/components/tree.js +327 -0
  298. package/dist/components/utils.js +119 -0
  299. package/dist/components/utils2.js +51 -0
  300. package/dist/components/value-list-item.js +204 -0
  301. package/dist/components/value-list.js +333 -0
  302. package/dist/esm/deduct-calculator.entry.js +1 -1
  303. package/dist/esm/pci-calculator.entry.js +1 -1
  304. package/dist/esm/{pciUtils-e3007a1c.js → pciUtils-ecda46e5.js} +25 -7
  305. package/dist/solutions-components/demos/deduct-calculator.html +2 -5
  306. package/dist/solutions-components/demos/new-public-notification.html +6 -4
  307. package/dist/solutions-components/{p-ff80ffbb.entry.js → p-0512635b.entry.js} +1 -1
  308. package/dist/solutions-components/{p-5ec407c2.entry.js → p-0c088725.entry.js} +1 -1
  309. package/dist/solutions-components/p-cc815aca.js +21 -0
  310. package/dist/solutions-components/solutions-components.esm.js +1 -1
  311. package/dist/solutions-components/utils/pciUtils.ts +30 -7
  312. package/dist/types/utils/pciUtils.d.ts +2 -1
  313. package/package.json +4 -3
  314. package/dist/solutions-components/p-647bbd18.js +0 -21
@@ -0,0 +1,1036 @@
1
+ /*!
2
+ * Copyright 2022 Esri
3
+ * Licensed under the Apache License, Version 2.0
4
+ * http://www.apache.org/licenses/LICENSE-2.0
5
+ */
6
+ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
7
+ import { c as color, d as defineCustomElement$a } from './color-picker-swatch.js';
8
+ import { D as DEFAULT_COLOR, T as TEXT, a as DIMENSIONS, H as HSV_LIMITS, C as CSS, d as defineCustomElement$b, b as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './color-picker-hex-input.js';
9
+ import { i as isPrimaryPointerButton, c as getElementDir, f as focusElement } from './dom.js';
10
+ import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual } from './utils.js';
11
+ import { c as clamp } from './math.js';
12
+ import { u as updateHostInteraction } from './interactive.js';
13
+ import { i as isActivationKey } from './key.js';
14
+ import { d as defineCustomElement$c } from './button.js';
15
+ import { d as defineCustomElement$9 } from './icon.js';
16
+ import { d as defineCustomElement$8 } from './input.js';
17
+ import { d as defineCustomElement$7 } from './loader.js';
18
+ import { d as defineCustomElement$6 } from './progress.js';
19
+ import { d as defineCustomElement$5 } from './tab.js';
20
+ import { d as defineCustomElement$4 } from './tab-nav.js';
21
+ import { d as defineCustomElement$3 } from './tab-title.js';
22
+ import { d as defineCustomElement$2 } from './tabs.js';
23
+ import { d as debounce, i as isObject } from './debounce.js';
24
+
25
+ /** Error message constants. */
26
+ var FUNC_ERROR_TEXT = 'Expected a function';
27
+
28
+ /**
29
+ * Creates a throttled function that only invokes `func` at most once per
30
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
31
+ * method to cancel delayed `func` invocations and a `flush` method to
32
+ * immediately invoke them. Provide `options` to indicate whether `func`
33
+ * should be invoked on the leading and/or trailing edge of the `wait`
34
+ * timeout. The `func` is invoked with the last arguments provided to the
35
+ * throttled function. Subsequent calls to the throttled function return the
36
+ * result of the last `func` invocation.
37
+ *
38
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
39
+ * invoked on the trailing edge of the timeout only if the throttled function
40
+ * is invoked more than once during the `wait` timeout.
41
+ *
42
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
43
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
44
+ *
45
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
46
+ * for details over the differences between `_.throttle` and `_.debounce`.
47
+ *
48
+ * @static
49
+ * @memberOf _
50
+ * @since 0.1.0
51
+ * @category Function
52
+ * @param {Function} func The function to throttle.
53
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
54
+ * @param {Object} [options={}] The options object.
55
+ * @param {boolean} [options.leading=true]
56
+ * Specify invoking on the leading edge of the timeout.
57
+ * @param {boolean} [options.trailing=true]
58
+ * Specify invoking on the trailing edge of the timeout.
59
+ * @returns {Function} Returns the new throttled function.
60
+ * @example
61
+ *
62
+ * // Avoid excessively updating the position while scrolling.
63
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
64
+ *
65
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
66
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
67
+ * jQuery(element).on('click', throttled);
68
+ *
69
+ * // Cancel the trailing throttled invocation.
70
+ * jQuery(window).on('popstate', throttled.cancel);
71
+ */
72
+ function throttle(func, wait, options) {
73
+ var leading = true,
74
+ trailing = true;
75
+
76
+ if (typeof func != 'function') {
77
+ throw new TypeError(FUNC_ERROR_TEXT);
78
+ }
79
+ if (isObject(options)) {
80
+ leading = 'leading' in options ? !!options.leading : leading;
81
+ trailing = 'trailing' in options ? !!options.trailing : trailing;
82
+ }
83
+ return debounce(func, wait, {
84
+ 'leading': leading,
85
+ 'maxWait': wait,
86
+ 'trailing': trailing
87
+ });
88
+ }
89
+
90
+ const colorPickerCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]) .container{inline-size:160px}:host([scale=s]) .saved-colors{grid-template-columns:repeat(auto-fill, minmax(20px, 1fr))}:host([scale=s]) .channels{flex-direction:column}:host([scale=s]) .channel{inline-size:100%;-webkit-margin-after:4px;margin-block-end:4px}:host([scale=s]) .channel:last-child{-webkit-margin-after:0;margin-block-end:0}:host([scale=m]) .container{inline-size:272px}:host([scale=l]) .header{-webkit-padding-after:0px;padding-block-end:0px}:host([scale=l]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{inline-size:464px}:host([scale=l]) .color-field-and-slider{-webkit-margin-after:-20px;margin-block-end:-20px}:host([scale=l]) .section{padding-block:0 16px;padding-inline:16px}:host([scale=l]) .section:first-of-type{-webkit-padding-before:16px;padding-block-start:16px}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, minmax(28px, 1fr));grid-gap:12px;-webkit-padding-before:16px;padding-block-start:16px}:host([scale=l]) .control-section{flex-wrap:nowrap;align-items:baseline}:host([scale=l]) .control-section>:nth-child(2){-webkit-margin-start:12px;margin-inline-start:12px}:host([scale=l]) .color-hex-options{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around;min-block-size:98px;inline-size:160px}:host([scale=l]) .color-mode-container{flex-shrink:3}:host([appearance=minimal]) .container{border:none}.container{background-color:var(--calcite-ui-foreground-1);display:inline-block;border:1px solid var(--calcite-ui-border-1)}.color-field-and-slider-wrap{position:relative}.scope{pointer-events:none;position:absolute;font-size:var(--calcite-font-size--1);outline-color:transparent;outline-offset:14px}.scope:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:16px}.color-field-and-slider{-webkit-margin-after:-16px;margin-block-end:-16px;touch-action:none}.color-field-and-slider--interactive{cursor:pointer}.control-section{display:flex;flex-direction:row;flex-wrap:wrap}.section{padding-block:0 12px;padding-inline:12px}.section:first-of-type{-webkit-padding-before:12px;padding-block-start:12px}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;-webkit-padding-after:0.25rem;padding-block-end:0.25rem;color:var(--calcite-ui-text-1)}.header--hex,.color-mode-container{-webkit-padding-before:12px;padding-block-start:12px}.channels{display:flex;justify-content:space-between}.channel{inline-size:31%}.saved-colors{-webkit-padding-before:12px;padding-block-start:12px;display:grid;grid-template-columns:repeat(auto-fill, minmax(24px, 1fr));grid-gap:8px;inline-size:100%}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-ui-border-2);outline-offset:2px}";
91
+
92
+ const throttleFor60FpsInMs = 16;
93
+ const defaultValue = normalizeHex(DEFAULT_COLOR.hex());
94
+ const defaultFormat = "auto";
95
+ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
96
+ constructor() {
97
+ super();
98
+ this.__registerHost();
99
+ this.__attachShadow();
100
+ this.calciteColorPickerChange = createEvent(this, "calciteColorPickerChange", 6);
101
+ this.calciteColorPickerInput = createEvent(this, "calciteColorPickerInput", 6);
102
+ //--------------------------------------------------------------------------
103
+ //
104
+ // Public properties
105
+ //
106
+ //--------------------------------------------------------------------------
107
+ /**
108
+ * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
109
+ *
110
+ * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
111
+ */
112
+ this.allowEmpty = false;
113
+ /**
114
+ * Specifies the appearance style of the component -
115
+ *
116
+ * `"solid"` (containing border) or `"minimal"` (no containing border).
117
+ */
118
+ this.appearance = "solid";
119
+ /**
120
+ * Internal prop for advanced use-cases.
121
+ *
122
+ * @internal
123
+ */
124
+ this.color = DEFAULT_COLOR;
125
+ /**
126
+ * When `true`, interaction is prevented and the component is displayed with lower opacity.
127
+ */
128
+ this.disabled = false;
129
+ /**
130
+ * The format of `value`.
131
+ *
132
+ * When `"auto"`, the format will be inferred from `value` when set.
133
+ *
134
+ * @default "auto"
135
+ */
136
+ this.format = defaultFormat;
137
+ /** When `true`, hides the Hex input. */
138
+ this.hideHex = false;
139
+ /** When `true`, hides the RGB/HSV channel inputs. */
140
+ this.hideChannels = false;
141
+ /** When `true`, hides the saved colors section. */
142
+ this.hideSaved = false;
143
+ /**
144
+ * Accessible name for the RGB section's blue channel.
145
+ *
146
+ * @default "B"
147
+ */
148
+ this.intlB = TEXT.b;
149
+ /**
150
+ * Accessible name for the RGB section's blue channel description.
151
+ *
152
+ * @default "Blue"
153
+ */
154
+ this.intlBlue = TEXT.blue;
155
+ /**
156
+ * Accessible name for the delete color button.
157
+ *
158
+ * @default "Delete color"
159
+ */
160
+ this.intlDeleteColor = TEXT.deleteColor;
161
+ /**
162
+ * Accessible name for the RGB section's green channel.
163
+ *
164
+ * @default "G"
165
+ */
166
+ this.intlG = TEXT.g;
167
+ /**
168
+ * Accessible name for the RGB section's green channel description.
169
+ *
170
+ * @default "Green"
171
+ */
172
+ this.intlGreen = TEXT.green;
173
+ /**
174
+ * Accessible name for the HSV section's hue channel.
175
+ *
176
+ * @default "H"
177
+ */
178
+ this.intlH = TEXT.h;
179
+ /**
180
+ * Accessible name for the HSV mode.
181
+ *
182
+ * @default "HSV"
183
+ */
184
+ this.intlHsv = TEXT.hsv;
185
+ /**
186
+ * Accessible name for the Hex input.
187
+ *
188
+ * @default "Hex"
189
+ */
190
+ this.intlHex = TEXT.hex;
191
+ /**
192
+ * Accessible name for the HSV section's hue channel description.
193
+ *
194
+ * @default "Hue"
195
+ */
196
+ this.intlHue = TEXT.hue;
197
+ /**
198
+ * Accessible name for the Hex input when there is no color selected.
199
+ *
200
+ * @default "No color"
201
+ */
202
+ this.intlNoColor = TEXT.noColor;
203
+ /**
204
+ * Accessible name for the RGB section's red channel.
205
+ *
206
+ * @default "R"
207
+ */
208
+ this.intlR = TEXT.r;
209
+ /**
210
+ * Accessible name for the RGB section's red channel description.
211
+ *
212
+ * @default "Red"
213
+ */
214
+ this.intlRed = TEXT.red;
215
+ /**
216
+ * Accessible name for the RGB mode.
217
+ *
218
+ * @default "RGB"
219
+ */
220
+ this.intlRgb = TEXT.rgb;
221
+ /**
222
+ * Accessible name for the HSV section's saturation channel.
223
+ *
224
+ * @default "S"
225
+ */
226
+ this.intlS = TEXT.s;
227
+ /**
228
+ * Accessible name for the HSV section's saturation channel description.
229
+ *
230
+ * @default "Saturation"
231
+ */
232
+ this.intlSaturation = TEXT.saturation;
233
+ /**
234
+ * Accessible name for the save color button.
235
+ *
236
+ * @default "Save color"
237
+ */
238
+ this.intlSaveColor = TEXT.saveColor;
239
+ /**
240
+ * Accessible name for the saved colors section.
241
+ *
242
+ * @default "Saved"
243
+ */
244
+ this.intlSaved = TEXT.saved;
245
+ /**
246
+ * Accessible name for the HSV section's value channel.
247
+ *
248
+ * @default "V"
249
+ */
250
+ this.intlV = TEXT.v;
251
+ /**
252
+ * Accessible name for the HSV section's value channel description.
253
+ *
254
+ * @default "Value"
255
+ */
256
+ this.intlValue = TEXT.value;
257
+ /** Specifies the size of the component. */
258
+ this.scale = "m";
259
+ /**
260
+ * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.
261
+ *
262
+ * The type will be preserved as the color is updated.
263
+ *
264
+ * @default "#007ac2"
265
+ * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
266
+ * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)
267
+ */
268
+ this.value = defaultValue;
269
+ this.colorFieldAndSliderHovered = false;
270
+ this.hueThumbState = "idle";
271
+ this.internalColorUpdateContext = null;
272
+ this.mode = CSSColorMode.HEX;
273
+ this.shiftKeyChannelAdjustment = 0;
274
+ this.sliderThumbState = "idle";
275
+ this.colorFieldAndSliderInteractive = false;
276
+ this.channelMode = "rgb";
277
+ this.channels = this.toChannels(DEFAULT_COLOR);
278
+ this.dimensions = DIMENSIONS.m;
279
+ this.savedColors = [];
280
+ this.handleTabActivate = (event) => {
281
+ this.channelMode = event.currentTarget.getAttribute("data-color-mode");
282
+ this.updateChannelsFromColor(this.color);
283
+ };
284
+ this.handleColorFieldScopeKeyDown = (event) => {
285
+ const { key } = event;
286
+ const arrowKeyToXYOffset = {
287
+ ArrowUp: { x: 0, y: -10 },
288
+ ArrowRight: { x: 10, y: 0 },
289
+ ArrowDown: { x: 0, y: 10 },
290
+ ArrowLeft: { x: -10, y: 0 }
291
+ };
292
+ if (arrowKeyToXYOffset[key]) {
293
+ event.preventDefault();
294
+ this.scopeOrientation = key === "ArrowDown" || key === "ArrowUp" ? "vertical" : "horizontal";
295
+ this.captureColorFieldColor(this.colorFieldScopeLeft + arrowKeyToXYOffset[key].x || 0, this.colorFieldScopeTop + arrowKeyToXYOffset[key].y || 0, false);
296
+ }
297
+ };
298
+ this.handleHueScopeKeyDown = (event) => {
299
+ const modifier = event.shiftKey ? 10 : 1;
300
+ const { key } = event;
301
+ const arrowKeyToXOffset = {
302
+ ArrowUp: 1,
303
+ ArrowRight: 1,
304
+ ArrowDown: -1,
305
+ ArrowLeft: -1
306
+ };
307
+ if (arrowKeyToXOffset[key]) {
308
+ event.preventDefault();
309
+ const delta = arrowKeyToXOffset[key] * modifier;
310
+ const hue = this.baseColorFieldColor.hue();
311
+ const color = this.baseColorFieldColor.hue(hue + delta);
312
+ this.internalColorSet(color, false);
313
+ }
314
+ };
315
+ this.handleHexInputChange = (event) => {
316
+ event.stopPropagation();
317
+ const { allowEmpty, color: color$1 } = this;
318
+ const input = event.target;
319
+ const hex = input.value;
320
+ if (allowEmpty && !hex) {
321
+ this.internalColorSet(null);
322
+ return;
323
+ }
324
+ const normalizedHex = color$1 && normalizeHex(color$1.hex());
325
+ if (hex !== normalizedHex) {
326
+ this.internalColorSet(color(hex));
327
+ }
328
+ };
329
+ this.handleSavedColorSelect = (event) => {
330
+ const swatch = event.currentTarget;
331
+ this.internalColorSet(color(swatch.color));
332
+ };
333
+ this.handleChannelInput = (event) => {
334
+ const input = event.currentTarget;
335
+ const internalInput = event.detail.nativeEvent.target;
336
+ const channelIndex = Number(input.getAttribute("data-channel-index"));
337
+ const limit = this.channelMode === "rgb"
338
+ ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
339
+ : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
340
+ let inputValue;
341
+ if (this.allowEmpty && !input.value) {
342
+ inputValue = "";
343
+ }
344
+ else {
345
+ const value = Number(input.value) + this.shiftKeyChannelAdjustment;
346
+ const clamped = clamp(value, 0, limit);
347
+ inputValue = clamped.toString();
348
+ }
349
+ input.value = inputValue;
350
+ internalInput.value = inputValue;
351
+ };
352
+ this.handleChannelChange = (event) => {
353
+ const input = event.currentTarget;
354
+ const channelIndex = Number(input.getAttribute("data-channel-index"));
355
+ const channels = [...this.channels];
356
+ const shouldClearChannels = this.allowEmpty && !input.value;
357
+ if (shouldClearChannels) {
358
+ this.channels = [null, null, null];
359
+ this.internalColorSet(null);
360
+ return;
361
+ }
362
+ channels[channelIndex] = Number(input.value);
363
+ this.updateColorFromChannels(channels);
364
+ };
365
+ this.handleSavedColorKeyDown = (event) => {
366
+ if (isActivationKey(event.key)) {
367
+ event.preventDefault();
368
+ this.handleSavedColorSelect(event);
369
+ }
370
+ };
371
+ this.handleColorFieldAndSliderPointerLeave = () => {
372
+ this.colorFieldAndSliderInteractive = false;
373
+ this.colorFieldAndSliderHovered = false;
374
+ if (this.sliderThumbState !== "drag" && this.hueThumbState !== "drag") {
375
+ this.hueThumbState = "idle";
376
+ this.sliderThumbState = "idle";
377
+ this.drawColorFieldAndSlider();
378
+ }
379
+ };
380
+ this.handleColorFieldAndSliderPointerDown = (event) => {
381
+ var _a, _b;
382
+ if (!isPrimaryPointerButton(event)) {
383
+ return;
384
+ }
385
+ const { offsetX, offsetY } = event;
386
+ const region = this.getCanvasRegion(offsetY);
387
+ if (region === "color-field") {
388
+ this.hueThumbState = "drag";
389
+ this.captureColorFieldColor(offsetX, offsetY);
390
+ (_a = this.colorFieldScopeNode) === null || _a === void 0 ? void 0 : _a.focus();
391
+ }
392
+ else if (region === "slider") {
393
+ this.sliderThumbState = "drag";
394
+ this.captureHueSliderColor(offsetX);
395
+ (_b = this.hueScopeNode) === null || _b === void 0 ? void 0 : _b.focus();
396
+ }
397
+ // prevent text selection outside of color field & slider area
398
+ event.preventDefault();
399
+ document.addEventListener("pointermove", this.globalPointerMoveHandler);
400
+ document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
401
+ this.activeColorFieldAndSliderRect =
402
+ this.fieldAndSliderRenderingContext.canvas.getBoundingClientRect();
403
+ };
404
+ this.globalPointerUpHandler = (event) => {
405
+ if (!isPrimaryPointerButton(event)) {
406
+ return;
407
+ }
408
+ const previouslyDragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
409
+ this.hueThumbState = "idle";
410
+ this.sliderThumbState = "idle";
411
+ this.activeColorFieldAndSliderRect = null;
412
+ this.drawColorFieldAndSlider();
413
+ if (previouslyDragging) {
414
+ this.calciteColorPickerChange.emit();
415
+ }
416
+ };
417
+ this.globalPointerMoveHandler = (event) => {
418
+ const { el, dimensions } = this;
419
+ const sliderThumbDragging = this.sliderThumbState === "drag";
420
+ const hueThumbDragging = this.hueThumbState === "drag";
421
+ if (!el.isConnected || (!sliderThumbDragging && !hueThumbDragging)) {
422
+ return;
423
+ }
424
+ let samplingX;
425
+ let samplingY;
426
+ const colorFieldAndSliderRect = this.activeColorFieldAndSliderRect;
427
+ const { clientX, clientY } = event;
428
+ if (this.colorFieldAndSliderHovered) {
429
+ samplingX = clientX - colorFieldAndSliderRect.x;
430
+ samplingY = clientY - colorFieldAndSliderRect.y;
431
+ }
432
+ else {
433
+ const colorFieldWidth = dimensions.colorField.width;
434
+ const colorFieldHeight = dimensions.colorField.height;
435
+ const hueSliderHeight = dimensions.slider.height;
436
+ if (clientX < colorFieldAndSliderRect.x + colorFieldWidth &&
437
+ clientX > colorFieldAndSliderRect.x) {
438
+ samplingX = clientX - colorFieldAndSliderRect.x;
439
+ }
440
+ else if (clientX < colorFieldAndSliderRect.x) {
441
+ samplingX = 0;
442
+ }
443
+ else {
444
+ samplingX = colorFieldWidth - 1;
445
+ }
446
+ if (clientY < colorFieldAndSliderRect.y + colorFieldHeight + hueSliderHeight &&
447
+ clientY > colorFieldAndSliderRect.y) {
448
+ samplingY = clientY - colorFieldAndSliderRect.y;
449
+ }
450
+ else if (clientY < colorFieldAndSliderRect.y) {
451
+ samplingY = 0;
452
+ }
453
+ else {
454
+ samplingY = colorFieldHeight + hueSliderHeight;
455
+ }
456
+ }
457
+ if (hueThumbDragging) {
458
+ this.captureColorFieldColor(samplingX, samplingY, false);
459
+ }
460
+ else {
461
+ this.captureHueSliderColor(samplingX);
462
+ }
463
+ };
464
+ this.handleColorFieldAndSliderPointerEnterOrMove = ({ offsetX, offsetY }) => {
465
+ const { dimensions: { colorField, slider, thumb } } = this;
466
+ this.colorFieldAndSliderInteractive = offsetY <= colorField.height + slider.height;
467
+ this.colorFieldAndSliderHovered = true;
468
+ const region = this.getCanvasRegion(offsetY);
469
+ if (region === "color-field") {
470
+ const prevHueThumbState = this.hueThumbState;
471
+ const color = this.baseColorFieldColor.hsv();
472
+ const centerX = Math.round(color.saturationv() / (HSV_LIMITS.s / colorField.width));
473
+ const centerY = Math.round(colorField.height - color.value() / (HSV_LIMITS.v / colorField.height));
474
+ const hoveringThumb = this.containsPoint(offsetX, offsetY, centerX, centerY, thumb.radius);
475
+ let transitionedBetweenHoverAndIdle = false;
476
+ if (prevHueThumbState === "idle" && hoveringThumb) {
477
+ this.hueThumbState = "hover";
478
+ transitionedBetweenHoverAndIdle = true;
479
+ }
480
+ else if (prevHueThumbState === "hover" && !hoveringThumb) {
481
+ this.hueThumbState = "idle";
482
+ transitionedBetweenHoverAndIdle = true;
483
+ }
484
+ if (this.hueThumbState !== "drag") {
485
+ if (transitionedBetweenHoverAndIdle) {
486
+ // refresh since we won't update color and thus no redraw
487
+ this.drawColorFieldAndSlider();
488
+ }
489
+ }
490
+ }
491
+ else if (region === "slider") {
492
+ const sliderThumbColor = this.baseColorFieldColor.hsv().saturationv(100).value(100);
493
+ const prevSliderThumbState = this.sliderThumbState;
494
+ const sliderThumbCenterX = Math.round(sliderThumbColor.hue() / (360 / slider.width));
495
+ const sliderThumbCenterY = Math.round((slider.height + this.getSliderCapSpacing()) / 2) + colorField.height;
496
+ const hoveringSliderThumb = this.containsPoint(offsetX, offsetY, sliderThumbCenterX, sliderThumbCenterY, thumb.radius);
497
+ let sliderThumbTransitionedBetweenHoverAndIdle = false;
498
+ if (prevSliderThumbState === "idle" && hoveringSliderThumb) {
499
+ this.sliderThumbState = "hover";
500
+ sliderThumbTransitionedBetweenHoverAndIdle = true;
501
+ }
502
+ else if (prevSliderThumbState === "hover" && !hoveringSliderThumb) {
503
+ this.sliderThumbState = "idle";
504
+ sliderThumbTransitionedBetweenHoverAndIdle = true;
505
+ }
506
+ if (this.sliderThumbState !== "drag") {
507
+ if (sliderThumbTransitionedBetweenHoverAndIdle) {
508
+ // refresh since we won't update color and thus no redraw
509
+ this.drawColorFieldAndSlider();
510
+ }
511
+ }
512
+ }
513
+ };
514
+ this.storeColorFieldScope = (node) => {
515
+ this.colorFieldScopeNode = node;
516
+ };
517
+ this.storeHueScope = (node) => {
518
+ this.hueScopeNode = node;
519
+ };
520
+ this.renderChannelsTabTitle = (channelMode) => {
521
+ const { channelMode: activeChannelMode, intlRgb, intlHsv } = this;
522
+ const active = channelMode === activeChannelMode;
523
+ const label = channelMode === "rgb" ? intlRgb : intlHsv;
524
+ return (h("calcite-tab-title", { active: active, class: CSS.colorMode, "data-color-mode": channelMode, key: channelMode, onCalciteTabsActivate: this.handleTabActivate }, label));
525
+ };
526
+ this.renderChannelsTab = (channelMode) => {
527
+ const { channelMode: activeChannelMode, channels, intlB, intlBlue, intlG, intlGreen, intlH, intlHue, intlR, intlRed, intlS, intlSaturation, intlV, intlValue } = this;
528
+ const active = channelMode === activeChannelMode;
529
+ const isRgb = channelMode === "rgb";
530
+ const channelLabels = isRgb ? [intlR, intlG, intlB] : [intlH, intlS, intlV];
531
+ const channelAriaLabels = isRgb
532
+ ? [intlRed, intlGreen, intlBlue]
533
+ : [intlHue, intlSaturation, intlValue];
534
+ const direction = getElementDir(this.el);
535
+ return (h("calcite-tab", { active: active, class: CSS.control, key: channelMode }, h("div", { class: CSS.channels, dir: "ltr" }, channels.map((channel, index) =>
536
+ /* the channel container is ltr, so we apply the host's direction */
537
+ this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index], direction)))));
538
+ };
539
+ this.renderChannel = (value, index, label, ariaLabel, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
540
+ this.deleteColor = () => {
541
+ const colorToDelete = this.color.hex();
542
+ const inStorage = this.savedColors.indexOf(colorToDelete) > -1;
543
+ if (!inStorage) {
544
+ return;
545
+ }
546
+ const savedColors = this.savedColors.filter((color) => color !== colorToDelete);
547
+ this.savedColors = savedColors;
548
+ const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
549
+ if (this.storageId) {
550
+ localStorage.setItem(storageKey, JSON.stringify(savedColors));
551
+ }
552
+ };
553
+ this.saveColor = () => {
554
+ const colorToSave = this.color.hex();
555
+ const alreadySaved = this.savedColors.indexOf(colorToSave) > -1;
556
+ if (alreadySaved) {
557
+ return;
558
+ }
559
+ const savedColors = [...this.savedColors, colorToSave];
560
+ this.savedColors = savedColors;
561
+ const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
562
+ if (this.storageId) {
563
+ localStorage.setItem(storageKey, JSON.stringify(savedColors));
564
+ }
565
+ };
566
+ this.drawColorFieldAndSlider = throttle(() => {
567
+ if (!this.fieldAndSliderRenderingContext) {
568
+ return;
569
+ }
570
+ this.drawColorField();
571
+ this.drawHueSlider();
572
+ }, throttleFor60FpsInMs);
573
+ this.captureColorFieldColor = (x, y, skipEqual = true) => {
574
+ const { dimensions: { colorField: { height, width } } } = this;
575
+ const saturation = Math.round((HSV_LIMITS.s / width) * x);
576
+ const value = Math.round((HSV_LIMITS.v / height) * (height - y));
577
+ this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(saturation).value(value), skipEqual);
578
+ };
579
+ this.initColorFieldAndSlider = (canvas) => {
580
+ this.fieldAndSliderRenderingContext = canvas.getContext("2d");
581
+ this.updateCanvasSize(canvas);
582
+ };
583
+ }
584
+ handleColorChange(color, oldColor) {
585
+ this.drawColorFieldAndSlider();
586
+ this.updateChannelsFromColor(color);
587
+ this.previousColor = oldColor;
588
+ }
589
+ handleFormatChange(format) {
590
+ this.setMode(format);
591
+ this.internalColorSet(this.color, false, "internal");
592
+ }
593
+ handleScaleChange(scale = "m") {
594
+ var _a;
595
+ this.updateDimensions(scale);
596
+ this.updateCanvasSize((_a = this.fieldAndSliderRenderingContext) === null || _a === void 0 ? void 0 : _a.canvas);
597
+ }
598
+ handleValueChange(value, oldValue) {
599
+ const { allowEmpty, format } = this;
600
+ const checkMode = !allowEmpty || value;
601
+ let modeChanged = false;
602
+ if (checkMode) {
603
+ const nextMode = parseMode(value);
604
+ if (!nextMode || (format !== "auto" && nextMode !== format)) {
605
+ this.showIncompatibleColorWarning(value, format);
606
+ this.value = oldValue;
607
+ return;
608
+ }
609
+ modeChanged = this.mode !== nextMode;
610
+ this.setMode(nextMode);
611
+ }
612
+ const dragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
613
+ if (this.internalColorUpdateContext === "initial") {
614
+ return;
615
+ }
616
+ if (this.internalColorUpdateContext === "user-interaction") {
617
+ this.calciteColorPickerInput.emit();
618
+ if (!dragging) {
619
+ this.calciteColorPickerChange.emit();
620
+ }
621
+ return;
622
+ }
623
+ const color$1 = allowEmpty && !value ? null : color(value);
624
+ const colorChanged = !colorEqual(color$1, this.color);
625
+ if (modeChanged || colorChanged) {
626
+ this.internalColorSet(color$1, true, "internal");
627
+ }
628
+ }
629
+ //--------------------------------------------------------------------------
630
+ //
631
+ // Internal State/Props
632
+ //
633
+ //--------------------------------------------------------------------------
634
+ get baseColorFieldColor() {
635
+ return this.color || this.previousColor || DEFAULT_COLOR;
636
+ }
637
+ // using @Listen as a workaround for VDOM listener not firing
638
+ handleChannelKeyUpOrDown(event) {
639
+ this.shiftKeyChannelAdjustment = 0;
640
+ const { key } = event;
641
+ if ((key !== "ArrowUp" && key !== "ArrowDown") ||
642
+ !event.composedPath().some((node) => { var _a; return (_a = node.classList) === null || _a === void 0 ? void 0 : _a.contains(CSS.channel); })) {
643
+ return;
644
+ }
645
+ const { shiftKey } = event;
646
+ event.preventDefault();
647
+ if (!this.color) {
648
+ this.internalColorSet(this.previousColor);
649
+ event.stopPropagation();
650
+ return;
651
+ }
652
+ // this gets applied to the input's up/down arrow increment/decrement
653
+ const complementaryBump = 9;
654
+ this.shiftKeyChannelAdjustment =
655
+ key === "ArrowUp" && shiftKey
656
+ ? complementaryBump
657
+ : key === "ArrowDown" && shiftKey
658
+ ? -complementaryBump
659
+ : 0;
660
+ }
661
+ //--------------------------------------------------------------------------
662
+ //
663
+ // Public Methods
664
+ //
665
+ //--------------------------------------------------------------------------
666
+ /** Sets focus on the component. */
667
+ async setFocus() {
668
+ return focusElement(this.colorFieldScopeNode);
669
+ }
670
+ //--------------------------------------------------------------------------
671
+ //
672
+ // Lifecycle
673
+ //
674
+ //--------------------------------------------------------------------------
675
+ componentWillLoad() {
676
+ const { allowEmpty, color: color$1, format, value } = this;
677
+ const willSetNoColor = allowEmpty && !value;
678
+ const parsedMode = parseMode(value);
679
+ const valueIsCompatible = willSetNoColor || (format === "auto" && parsedMode) || format === parsedMode;
680
+ const initialColor = willSetNoColor ? null : valueIsCompatible ? color(value) : color$1;
681
+ if (!valueIsCompatible) {
682
+ this.showIncompatibleColorWarning(value, format);
683
+ }
684
+ this.setMode(format);
685
+ this.internalColorSet(initialColor, false, "initial");
686
+ this.updateDimensions(this.scale);
687
+ const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
688
+ if (this.storageId && localStorage.getItem(storageKey)) {
689
+ this.savedColors = JSON.parse(localStorage.getItem(storageKey));
690
+ }
691
+ }
692
+ disconnectedCallback() {
693
+ document.removeEventListener("pointermove", this.globalPointerMoveHandler);
694
+ document.removeEventListener("pointerup", this.globalPointerUpHandler);
695
+ }
696
+ componentDidRender() {
697
+ updateHostInteraction(this);
698
+ }
699
+ //--------------------------------------------------------------------------
700
+ //
701
+ // Render Methods
702
+ //
703
+ //--------------------------------------------------------------------------
704
+ render() {
705
+ const { allowEmpty, color, intlDeleteColor, hideHex, hideChannels, hideSaved, intlHex, intlSaved, intlSaveColor, savedColors, scale } = this;
706
+ const selectedColorInHex = color ? color.hex() : null;
707
+ const hexInputScale = scale === "l" ? "m" : "s";
708
+ const { colorFieldAndSliderInteractive, colorFieldScopeTop, colorFieldScopeLeft, hueScopeLeft, hueScopeTop, scopeOrientation, dimensions: { colorField: { height: colorFieldHeight, width: colorFieldWidth }, slider: { height: sliderHeight } } } = this;
709
+ const hueTop = hueScopeTop !== null && hueScopeTop !== void 0 ? hueScopeTop : sliderHeight / 2 + colorFieldHeight;
710
+ const hueLeft = hueScopeLeft !== null && hueScopeLeft !== void 0 ? hueScopeLeft : (colorFieldWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
711
+ const noColor = color === null;
712
+ const vertical = scopeOrientation === "vertical";
713
+ return (h("div", { class: CSS.container }, h("div", { class: CSS.colorFieldAndSliderWrap }, h("canvas", { class: {
714
+ [CSS.colorFieldAndSlider]: true,
715
+ [CSS.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
716
+ }, onPointerDown: this.handleColorFieldAndSliderPointerDown, onPointerEnter: this.handleColorFieldAndSliderPointerEnterOrMove, onPointerLeave: this.handleColorFieldAndSliderPointerLeave, onPointerMove: this.handleColorFieldAndSliderPointerEnterOrMove, ref: this.initColorFieldAndSlider }), h("div", { "aria-label": vertical ? this.intlValue : this.intlSaturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0" }), h("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })), hideHex && hideChannels ? null : (h("div", { class: {
717
+ [CSS.controlSection]: true,
718
+ [CSS.section]: true
719
+ } }, hideHex ? null : (h("div", { class: CSS.hexOptions }, h("span", { class: {
720
+ [CSS.header]: true,
721
+ [CSS.headerHex]: true
722
+ } }, intlHex), h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))), hideChannels ? null : (h("calcite-tabs", { class: {
723
+ [CSS.colorModeContainer]: true,
724
+ [CSS.splitSection]: true
725
+ }, scale: hexInputScale }, h("calcite-tab-nav", { slot: "tab-nav" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv"))))), hideSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } }, h("div", { class: CSS.header }, h("label", null, intlSaved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: intlDeleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: intlSaveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
726
+ ...savedColors.map((color) => (h("calcite-color-picker-swatch", { active: selectedColorInHex === color, class: CSS.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 })))
727
+ ])) : null))));
728
+ }
729
+ // --------------------------------------------------------------------------
730
+ //
731
+ // Private Methods
732
+ //
733
+ //--------------------------------------------------------------------------
734
+ handleKeyDown(event) {
735
+ if (event.key === "Enter") {
736
+ event.preventDefault();
737
+ }
738
+ }
739
+ showIncompatibleColorWarning(value, format) {
740
+ console.warn(`ignoring color value (${value}) as it is not compatible with the current format (${format})`);
741
+ }
742
+ setMode(format) {
743
+ this.mode = format === "auto" ? this.mode : format;
744
+ }
745
+ captureHueSliderColor(x) {
746
+ const { dimensions: { slider: { width } } } = this;
747
+ const hue = (360 / width) * x;
748
+ this.internalColorSet(this.baseColorFieldColor.hue(hue), false);
749
+ }
750
+ getCanvasRegion(y) {
751
+ const { dimensions: { colorField: { height: colorFieldHeight }, slider: { height: sliderHeight } } } = this;
752
+ if (y <= colorFieldHeight) {
753
+ return "color-field";
754
+ }
755
+ if (y <= colorFieldHeight + sliderHeight) {
756
+ return "slider";
757
+ }
758
+ return "none";
759
+ }
760
+ internalColorSet(color, skipEqual = true, context = "user-interaction") {
761
+ if (skipEqual && colorEqual(color, this.color)) {
762
+ return;
763
+ }
764
+ this.internalColorUpdateContext = context;
765
+ this.color = color;
766
+ this.value = this.toValue(color);
767
+ this.internalColorUpdateContext = null;
768
+ }
769
+ toValue(color, format = this.mode) {
770
+ if (!color) {
771
+ return null;
772
+ }
773
+ const hexMode = "hex";
774
+ if (format.includes(hexMode)) {
775
+ return normalizeHex(color.round()[hexMode]());
776
+ }
777
+ if (format.includes("-css")) {
778
+ return color[format.replace("-css", "").replace("a", "")]().round().string();
779
+ }
780
+ const colorObject = color[format]().round().object();
781
+ if (format.endsWith("a")) {
782
+ // normalize alpha prop
783
+ colorObject.a = colorObject.alpha;
784
+ delete colorObject.alpha;
785
+ }
786
+ return colorObject;
787
+ }
788
+ getSliderCapSpacing() {
789
+ const { dimensions: { slider: { height }, thumb: { radius } } } = this;
790
+ return radius * 2 - height;
791
+ }
792
+ updateDimensions(scale = "m") {
793
+ this.dimensions = DIMENSIONS[scale];
794
+ }
795
+ drawColorField() {
796
+ const context = this.fieldAndSliderRenderingContext;
797
+ const { dimensions: { colorField: { height, width } } } = this;
798
+ context.fillStyle = this.baseColorFieldColor.hsv().saturationv(100).value(100).string();
799
+ context.fillRect(0, 0, width, height);
800
+ const whiteGradient = context.createLinearGradient(0, 0, width, 0);
801
+ whiteGradient.addColorStop(0, "rgba(255,255,255,1)");
802
+ whiteGradient.addColorStop(1, "rgba(255,255,255,0)");
803
+ context.fillStyle = whiteGradient;
804
+ context.fillRect(0, 0, width, height);
805
+ const blackGradient = context.createLinearGradient(0, 0, 0, height);
806
+ blackGradient.addColorStop(0, "rgba(0,0,0,0)");
807
+ blackGradient.addColorStop(1, "rgba(0,0,0,1)");
808
+ context.fillStyle = blackGradient;
809
+ context.fillRect(0, 0, width, height);
810
+ this.drawActiveColorFieldColor();
811
+ }
812
+ setCanvasContextSize(canvas, { height, width }) {
813
+ const devicePixelRatio = window.devicePixelRatio || 1;
814
+ canvas.width = width * devicePixelRatio;
815
+ canvas.height = height * devicePixelRatio;
816
+ canvas.style.height = `${height}px`;
817
+ canvas.style.width = `${width}px`;
818
+ const context = canvas.getContext("2d");
819
+ context.scale(devicePixelRatio, devicePixelRatio);
820
+ }
821
+ updateCanvasSize(canvas) {
822
+ if (!canvas) {
823
+ return;
824
+ }
825
+ this.setCanvasContextSize(canvas, {
826
+ width: this.dimensions.colorField.width,
827
+ height: this.dimensions.colorField.height +
828
+ this.dimensions.slider.height +
829
+ this.getSliderCapSpacing() * 2
830
+ });
831
+ this.drawColorFieldAndSlider();
832
+ }
833
+ containsPoint(testPointX, testPointY, boundsX, boundsY, boundsRadius) {
834
+ return (Math.pow(testPointX - boundsX, 2) + Math.pow(testPointY - boundsY, 2) <=
835
+ Math.pow(boundsRadius, 2));
836
+ }
837
+ drawActiveColorFieldColor() {
838
+ const { color } = this;
839
+ if (!color) {
840
+ return;
841
+ }
842
+ const hsvColor = color.hsv();
843
+ const { dimensions: { colorField: { height, width }, thumb: { radius } } } = this;
844
+ const x = hsvColor.saturationv() / (HSV_LIMITS.s / width);
845
+ const y = height - hsvColor.value() / (HSV_LIMITS.v / height);
846
+ requestAnimationFrame(() => {
847
+ this.colorFieldScopeLeft = x;
848
+ this.colorFieldScopeTop = y;
849
+ });
850
+ this.drawThumb(this.fieldAndSliderRenderingContext, radius, x, y, hsvColor, this.hueThumbState);
851
+ }
852
+ drawThumb(context, radius, x, y, color, state) {
853
+ const startAngle = 0;
854
+ const endAngle = 2 * Math.PI;
855
+ context.beginPath();
856
+ context.arc(x, y, radius, startAngle, endAngle);
857
+ context.shadowBlur = state === "hover" ? 32 : 16;
858
+ context.shadowColor = `rgba(0, 0, 0, ${state === "drag" ? 0.32 : 0.16})`;
859
+ context.fillStyle = "#fff";
860
+ context.fill();
861
+ context.beginPath();
862
+ context.arc(x, y, radius - 3, startAngle, endAngle);
863
+ context.shadowBlur = 0;
864
+ context.shadowColor = "transparent";
865
+ context.fillStyle = color.rgb().string();
866
+ context.fill();
867
+ }
868
+ drawActiveHueSliderColor() {
869
+ const { color } = this;
870
+ if (!color) {
871
+ return;
872
+ }
873
+ const hsvColor = color.hsv().saturationv(100).value(100);
874
+ const { dimensions: { colorField: { height: colorFieldHeight }, slider: { height, width }, thumb: { radius } } } = this;
875
+ const x = hsvColor.hue() / (360 / width);
876
+ const y = height / 2 + colorFieldHeight;
877
+ requestAnimationFrame(() => {
878
+ this.hueScopeLeft = x;
879
+ this.hueScopeTop = y;
880
+ });
881
+ this.drawThumb(this.fieldAndSliderRenderingContext, radius, x, y, hsvColor, this.sliderThumbState);
882
+ }
883
+ drawHueSlider() {
884
+ const context = this.fieldAndSliderRenderingContext;
885
+ const { dimensions: { colorField: { height: colorFieldHeight }, slider: { height, width } } } = this;
886
+ const gradient = context.createLinearGradient(0, 0, width, 0);
887
+ const hueSliderColorStopKeywords = ["red", "yellow", "lime", "cyan", "blue", "magenta", "red"];
888
+ const offset = 1 / (hueSliderColorStopKeywords.length - 1);
889
+ let currentOffset = 0;
890
+ hueSliderColorStopKeywords.forEach((keyword) => {
891
+ gradient.addColorStop(currentOffset, color(keyword).string());
892
+ currentOffset += offset;
893
+ });
894
+ context.fillStyle = gradient;
895
+ context.clearRect(0, colorFieldHeight, width, height + this.getSliderCapSpacing() * 2);
896
+ context.fillRect(0, colorFieldHeight, width, height);
897
+ this.drawActiveHueSliderColor();
898
+ }
899
+ updateColorFromChannels(channels) {
900
+ this.internalColorSet(color(channels, this.channelMode));
901
+ }
902
+ updateChannelsFromColor(color) {
903
+ this.channels = color ? this.toChannels(color) : [null, null, null];
904
+ }
905
+ toChannels(color) {
906
+ const { channelMode } = this;
907
+ return color[channelMode]()
908
+ .array()
909
+ .map((value) => Math.floor(value));
910
+ }
911
+ get el() { return this; }
912
+ static get watchers() { return {
913
+ "color": ["handleColorChange"],
914
+ "format": ["handleFormatChange"],
915
+ "scale": ["handleScaleChange"],
916
+ "value": ["handleValueChange"]
917
+ }; }
918
+ static get style() { return colorPickerCss; }
919
+ }, [1, "calcite-color-picker", {
920
+ "allowEmpty": [516, "allow-empty"],
921
+ "appearance": [513],
922
+ "color": [1040],
923
+ "disabled": [516],
924
+ "format": [513],
925
+ "hideHex": [516, "hide-hex"],
926
+ "hideChannels": [516, "hide-channels"],
927
+ "hideSaved": [516, "hide-saved"],
928
+ "intlB": [1, "intl-b"],
929
+ "intlBlue": [1, "intl-blue"],
930
+ "intlDeleteColor": [1, "intl-delete-color"],
931
+ "intlG": [1, "intl-g"],
932
+ "intlGreen": [1, "intl-green"],
933
+ "intlH": [1, "intl-h"],
934
+ "intlHsv": [1, "intl-hsv"],
935
+ "intlHex": [1, "intl-hex"],
936
+ "intlHue": [1, "intl-hue"],
937
+ "intlNoColor": [1, "intl-no-color"],
938
+ "intlR": [1, "intl-r"],
939
+ "intlRed": [1, "intl-red"],
940
+ "intlRgb": [1, "intl-rgb"],
941
+ "intlS": [1, "intl-s"],
942
+ "intlSaturation": [1, "intl-saturation"],
943
+ "intlSaveColor": [1, "intl-save-color"],
944
+ "intlSaved": [1, "intl-saved"],
945
+ "intlV": [1, "intl-v"],
946
+ "intlValue": [1, "intl-value"],
947
+ "scale": [513],
948
+ "storageId": [513, "storage-id"],
949
+ "numberingSystem": [513, "numbering-system"],
950
+ "value": [1025],
951
+ "colorFieldAndSliderInteractive": [32],
952
+ "channelMode": [32],
953
+ "channels": [32],
954
+ "dimensions": [32],
955
+ "savedColors": [32],
956
+ "colorFieldScopeTop": [32],
957
+ "colorFieldScopeLeft": [32],
958
+ "scopeOrientation": [32],
959
+ "hueScopeLeft": [32],
960
+ "hueScopeTop": [32],
961
+ "setFocus": [64]
962
+ }, [[2, "keydown", "handleChannelKeyUpOrDown"], [2, "keyup", "handleChannelKeyUpOrDown"]]]);
963
+ function defineCustomElement$1() {
964
+ if (typeof customElements === "undefined") {
965
+ return;
966
+ }
967
+ const components = ["calcite-color-picker", "calcite-button", "calcite-color-picker-hex-input", "calcite-color-picker-swatch", "calcite-icon", "calcite-input", "calcite-loader", "calcite-progress", "calcite-tab", "calcite-tab-nav", "calcite-tab-title", "calcite-tabs"];
968
+ components.forEach(tagName => { switch (tagName) {
969
+ case "calcite-color-picker":
970
+ if (!customElements.get(tagName)) {
971
+ customElements.define(tagName, ColorPicker);
972
+ }
973
+ break;
974
+ case "calcite-button":
975
+ if (!customElements.get(tagName)) {
976
+ defineCustomElement$c();
977
+ }
978
+ break;
979
+ case "calcite-color-picker-hex-input":
980
+ if (!customElements.get(tagName)) {
981
+ defineCustomElement$b();
982
+ }
983
+ break;
984
+ case "calcite-color-picker-swatch":
985
+ if (!customElements.get(tagName)) {
986
+ defineCustomElement$a();
987
+ }
988
+ break;
989
+ case "calcite-icon":
990
+ if (!customElements.get(tagName)) {
991
+ defineCustomElement$9();
992
+ }
993
+ break;
994
+ case "calcite-input":
995
+ if (!customElements.get(tagName)) {
996
+ defineCustomElement$8();
997
+ }
998
+ break;
999
+ case "calcite-loader":
1000
+ if (!customElements.get(tagName)) {
1001
+ defineCustomElement$7();
1002
+ }
1003
+ break;
1004
+ case "calcite-progress":
1005
+ if (!customElements.get(tagName)) {
1006
+ defineCustomElement$6();
1007
+ }
1008
+ break;
1009
+ case "calcite-tab":
1010
+ if (!customElements.get(tagName)) {
1011
+ defineCustomElement$5();
1012
+ }
1013
+ break;
1014
+ case "calcite-tab-nav":
1015
+ if (!customElements.get(tagName)) {
1016
+ defineCustomElement$4();
1017
+ }
1018
+ break;
1019
+ case "calcite-tab-title":
1020
+ if (!customElements.get(tagName)) {
1021
+ defineCustomElement$3();
1022
+ }
1023
+ break;
1024
+ case "calcite-tabs":
1025
+ if (!customElements.get(tagName)) {
1026
+ defineCustomElement$2();
1027
+ }
1028
+ break;
1029
+ } });
1030
+ }
1031
+ defineCustomElement$1();
1032
+
1033
+ const CalciteColorPicker = ColorPicker;
1034
+ const defineCustomElement = defineCustomElement$1;
1035
+
1036
+ export { CalciteColorPicker, defineCustomElement };