@dnncommunity/dnn-elements 0.14.0-beta.4 → 0.14.0-beta.8

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 (213) hide show
  1. package/dist/cjs/dnn-button.cjs.entry.js +2 -2
  2. package/dist/cjs/dnn-button.cjs.entry.js.map +1 -1
  3. package/dist/cjs/dnn-button_16.cjs.entry.js +58 -100
  4. package/dist/cjs/dnn-button_16.cjs.entry.js.map +1 -1
  5. package/dist/cjs/dnn-checkbox.cjs.entry.js +2 -2
  6. package/dist/cjs/dnn-checkbox.cjs.entry.js.map +1 -1
  7. package/dist/cjs/dnn-chevron.cjs.entry.js +2 -2
  8. package/dist/cjs/dnn-chevron.cjs.entry.js.map +1 -1
  9. package/dist/cjs/dnn-collapsible.cjs.entry.js +22 -73
  10. package/dist/cjs/dnn-collapsible.cjs.entry.js.map +1 -1
  11. package/dist/cjs/dnn-color-picker.cjs.entry.js +2 -2
  12. package/dist/cjs/dnn-color-picker.cjs.entry.js.map +1 -1
  13. package/dist/cjs/dnn-dropzone.cjs.entry.js +2 -2
  14. package/dist/cjs/dnn-dropzone.cjs.entry.js.map +1 -1
  15. package/dist/cjs/dnn-image-cropper.cjs.entry.js +2 -2
  16. package/dist/cjs/dnn-image-cropper.cjs.entry.js.map +1 -1
  17. package/dist/cjs/dnn-modal.cjs.entry.js +2 -2
  18. package/dist/cjs/dnn-modal.cjs.entry.js.map +1 -1
  19. package/dist/cjs/dnn-searchbox.cjs.entry.js +2 -2
  20. package/dist/cjs/dnn-searchbox.cjs.entry.js.map +1 -1
  21. package/dist/cjs/dnn-sort-icon.cjs.entry.js +1 -1
  22. package/dist/cjs/dnn-tab.cjs.entry.js +1 -1
  23. package/dist/cjs/dnn-tabs.cjs.entry.js +2 -2
  24. package/dist/cjs/dnn-tabs.cjs.entry.js.map +1 -1
  25. package/dist/cjs/dnn-toggle.cjs.entry.js +2 -2
  26. package/dist/cjs/dnn-toggle.cjs.entry.js.map +1 -1
  27. package/dist/cjs/dnn-treeview-item.cjs.entry.js +6 -2
  28. package/dist/cjs/dnn-treeview-item.cjs.entry.js.map +1 -1
  29. package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js +15 -16
  30. package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js.map +1 -1
  31. package/dist/cjs/dnn-vertical-splitview.cjs.entry.js +8 -3
  32. package/dist/cjs/dnn-vertical-splitview.cjs.entry.js.map +1 -1
  33. package/dist/cjs/dnn.cjs.js +2 -2
  34. package/dist/cjs/{index-6a6ac523.js → index-7505bd72.js} +1 -5
  35. package/dist/cjs/index-7505bd72.js.map +1 -0
  36. package/dist/cjs/{index-ba8b86b1.js → index-aff4d89a.js} +2 -2
  37. package/dist/cjs/index-aff4d89a.js.map +1 -0
  38. package/dist/cjs/loader.cjs.js +2 -2
  39. package/dist/collection/components/dnn-collapsible/dnn-collapsible.css +4 -3
  40. package/dist/collection/components/dnn-collapsible/dnn-collapsible.js +22 -72
  41. package/dist/collection/components/dnn-collapsible/dnn-collapsible.js.map +1 -1
  42. package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.css +1 -2
  43. package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js +34 -1
  44. package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js.map +1 -1
  45. package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.css +4 -25
  46. package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js +14 -14
  47. package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js.map +1 -1
  48. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.css +8 -1
  49. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js +6 -1
  50. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js.map +1 -1
  51. package/dist/dnn/app-globals-497eb362.system.js +2 -0
  52. package/dist/dnn/app-globals-497eb362.system.js.map +1 -0
  53. package/dist/dnn/css-shim-856c55de.system.js +2 -0
  54. package/dist/dnn/css-shim-856c55de.system.js.map +1 -0
  55. package/dist/dnn/debounce-eef81bf7.system.js +2 -0
  56. package/dist/dnn/debounce-eef81bf7.system.js.map +1 -0
  57. package/dist/dnn/dnn-button.entry.js +2 -2
  58. package/dist/dnn/dnn-button.entry.js.map +1 -1
  59. package/dist/dnn/dnn-button.system.entry.js +2 -0
  60. package/dist/dnn/dnn-button.system.entry.js.map +1 -0
  61. package/dist/dnn/dnn-checkbox.entry.js +2 -2
  62. package/dist/dnn/dnn-checkbox.entry.js.map +1 -1
  63. package/dist/dnn/dnn-checkbox.system.entry.js +2 -0
  64. package/dist/dnn/dnn-checkbox.system.entry.js.map +1 -0
  65. package/dist/dnn/dnn-chevron.entry.js +2 -2
  66. package/dist/dnn/dnn-chevron.entry.js.map +1 -1
  67. package/dist/dnn/dnn-chevron.system.entry.js +2 -0
  68. package/dist/dnn/dnn-chevron.system.entry.js.map +1 -0
  69. package/dist/dnn/dnn-collapsible.entry.js +22 -73
  70. package/dist/dnn/dnn-collapsible.entry.js.map +1 -1
  71. package/dist/dnn/dnn-collapsible.system.entry.js +2 -0
  72. package/dist/dnn/dnn-collapsible.system.entry.js.map +1 -0
  73. package/dist/dnn/dnn-color-picker.entry.js +2 -2
  74. package/dist/dnn/dnn-color-picker.entry.js.map +1 -1
  75. package/dist/dnn/dnn-color-picker.system.entry.js +12 -0
  76. package/dist/dnn/dnn-color-picker.system.entry.js.map +1 -0
  77. package/dist/dnn/dnn-dropzone.entry.js +2 -2
  78. package/dist/dnn/dnn-dropzone.entry.js.map +1 -1
  79. package/dist/dnn/dnn-dropzone.system.entry.js +2 -0
  80. package/dist/dnn/dnn-dropzone.system.entry.js.map +1 -0
  81. package/dist/dnn/dnn-image-cropper.entry.js +2 -2
  82. package/dist/dnn/dnn-image-cropper.entry.js.map +1 -1
  83. package/dist/dnn/dnn-image-cropper.system.entry.js +2 -0
  84. package/dist/dnn/dnn-image-cropper.system.entry.js.map +1 -0
  85. package/dist/dnn/dnn-modal.entry.js +2 -2
  86. package/dist/dnn/dnn-modal.entry.js.map +1 -1
  87. package/dist/dnn/dnn-modal.system.entry.js +2 -0
  88. package/dist/dnn/dnn-modal.system.entry.js.map +1 -0
  89. package/dist/dnn/dnn-searchbox.entry.js +2 -2
  90. package/dist/dnn/dnn-searchbox.entry.js.map +1 -1
  91. package/dist/dnn/dnn-searchbox.system.entry.js +2 -0
  92. package/dist/dnn/dnn-searchbox.system.entry.js.map +1 -0
  93. package/dist/dnn/dnn-sort-icon.entry.js +1 -1
  94. package/dist/dnn/dnn-sort-icon.system.entry.js +2 -0
  95. package/dist/dnn/dnn-sort-icon.system.entry.js.map +1 -0
  96. package/dist/dnn/dnn-tab.entry.js +1 -1
  97. package/dist/dnn/dnn-tab.system.entry.js +2 -0
  98. package/dist/dnn/dnn-tab.system.entry.js.map +1 -0
  99. package/dist/dnn/dnn-tabs.entry.js +2 -2
  100. package/dist/dnn/dnn-tabs.entry.js.map +1 -1
  101. package/dist/dnn/dnn-tabs.system.entry.js +2 -0
  102. package/dist/dnn/dnn-tabs.system.entry.js.map +1 -0
  103. package/dist/dnn/dnn-toggle.entry.js +2 -2
  104. package/dist/dnn/dnn-toggle.entry.js.map +1 -1
  105. package/dist/dnn/dnn-toggle.system.entry.js +2 -0
  106. package/dist/dnn/dnn-toggle.system.entry.js.map +1 -0
  107. package/dist/dnn/dnn-treeview-item.entry.js +6 -2
  108. package/dist/dnn/dnn-treeview-item.entry.js.map +1 -1
  109. package/dist/dnn/dnn-treeview-item.system.entry.js +2 -0
  110. package/dist/dnn/dnn-treeview-item.system.entry.js.map +1 -0
  111. package/dist/dnn/dnn-vertical-overflow-menu.entry.js +15 -16
  112. package/dist/dnn/dnn-vertical-overflow-menu.entry.js.map +1 -1
  113. package/dist/dnn/dnn-vertical-overflow-menu.system.entry.js +2 -0
  114. package/dist/dnn/dnn-vertical-overflow-menu.system.entry.js.map +1 -0
  115. package/dist/dnn/dnn-vertical-splitview.entry.js +8 -3
  116. package/dist/dnn/dnn-vertical-splitview.entry.js.map +1 -1
  117. package/dist/dnn/dnn-vertical-splitview.system.entry.js +2 -0
  118. package/dist/dnn/dnn-vertical-splitview.system.entry.js.map +1 -0
  119. package/dist/dnn/dnn.esm.js +2 -2
  120. package/dist/dnn/dnn.js +130 -0
  121. package/dist/dnn/dnn.system.js +2 -0
  122. package/dist/dnn/dnn.system.js.map +1 -0
  123. package/dist/dnn/dom-938307ec.system.js +22 -0
  124. package/dist/dnn/dom-938307ec.system.js.map +1 -0
  125. package/dist/dnn/index-a3a55419.system.js +2 -0
  126. package/dist/dnn/index-a3a55419.system.js.map +1 -0
  127. package/dist/dnn/{index-3e56049b.js → index-b5a28c1d.js} +2 -2
  128. package/dist/dnn/index-b5a28c1d.js.map +1 -0
  129. package/dist/dnn/index.system.js +2 -0
  130. package/dist/dnn/index.system.js.map +1 -0
  131. package/dist/dnn/mouseUtilities-e7e4e78f.system.js +2 -0
  132. package/dist/dnn/mouseUtilities-e7e4e78f.system.js.map +1 -0
  133. package/dist/dnn/p-058ba146.system.js +2 -0
  134. package/dist/dnn/p-058ba146.system.js.map +1 -0
  135. package/dist/dnn/p-21d6ceae.entry.js +11 -0
  136. package/dist/dnn/p-21d6ceae.entry.js.map +1 -0
  137. package/dist/dnn/{p-d10994a3.js → p-45ce2139.js} +2 -2
  138. package/dist/dnn/p-45ce2139.js.map +1 -0
  139. package/dist/dnn/p-48e6d5e6.system.entry.js +11 -0
  140. package/dist/dnn/p-48e6d5e6.system.entry.js.map +1 -0
  141. package/dist/dnn/p-646cfb1b.system.js +2 -0
  142. package/dist/dnn/p-646cfb1b.system.js.map +1 -0
  143. package/dist/dnn/p-f91193e2.system.js +2 -0
  144. package/dist/dnn/p-f91193e2.system.js.map +1 -0
  145. package/dist/dnn/p-fb637662.system.js +2 -0
  146. package/dist/dnn/p-fb637662.system.js.map +1 -0
  147. package/dist/dnn/shadow-css-d573707f.system.js +14 -0
  148. package/dist/dnn/shadow-css-d573707f.system.js.map +1 -0
  149. package/dist/esm/dnn-button.entry.js +2 -2
  150. package/dist/esm/dnn-button.entry.js.map +1 -1
  151. package/dist/esm/dnn-button_16.entry.js +58 -100
  152. package/dist/esm/dnn-button_16.entry.js.map +1 -1
  153. package/dist/esm/dnn-checkbox.entry.js +2 -2
  154. package/dist/esm/dnn-checkbox.entry.js.map +1 -1
  155. package/dist/esm/dnn-chevron.entry.js +2 -2
  156. package/dist/esm/dnn-chevron.entry.js.map +1 -1
  157. package/dist/esm/dnn-collapsible.entry.js +22 -73
  158. package/dist/esm/dnn-collapsible.entry.js.map +1 -1
  159. package/dist/esm/dnn-color-picker.entry.js +2 -2
  160. package/dist/esm/dnn-color-picker.entry.js.map +1 -1
  161. package/dist/esm/dnn-dropzone.entry.js +2 -2
  162. package/dist/esm/dnn-dropzone.entry.js.map +1 -1
  163. package/dist/esm/dnn-image-cropper.entry.js +2 -2
  164. package/dist/esm/dnn-image-cropper.entry.js.map +1 -1
  165. package/dist/esm/dnn-modal.entry.js +2 -2
  166. package/dist/esm/dnn-modal.entry.js.map +1 -1
  167. package/dist/esm/dnn-searchbox.entry.js +2 -2
  168. package/dist/esm/dnn-searchbox.entry.js.map +1 -1
  169. package/dist/esm/dnn-sort-icon.entry.js +1 -1
  170. package/dist/esm/dnn-tab.entry.js +1 -1
  171. package/dist/esm/dnn-tabs.entry.js +2 -2
  172. package/dist/esm/dnn-tabs.entry.js.map +1 -1
  173. package/dist/esm/dnn-toggle.entry.js +2 -2
  174. package/dist/esm/dnn-toggle.entry.js.map +1 -1
  175. package/dist/esm/dnn-treeview-item.entry.js +6 -2
  176. package/dist/esm/dnn-treeview-item.entry.js.map +1 -1
  177. package/dist/esm/dnn-vertical-overflow-menu.entry.js +15 -16
  178. package/dist/esm/dnn-vertical-overflow-menu.entry.js.map +1 -1
  179. package/dist/esm/dnn-vertical-splitview.entry.js +8 -3
  180. package/dist/esm/dnn-vertical-splitview.entry.js.map +1 -1
  181. package/dist/esm/dnn.js +2 -2
  182. package/dist/esm/{index-3e56049b.js → index-b5a28c1d.js} +2 -2
  183. package/dist/esm/index-b5a28c1d.js.map +1 -0
  184. package/dist/esm/{index-212d30ec.js → index-cdbad319.js} +1 -5
  185. package/dist/esm/index-cdbad319.js.map +1 -0
  186. package/dist/esm/loader.js +2 -2
  187. package/dist/esm-es5/debounce-06f55268.js +2 -0
  188. package/dist/esm-es5/debounce-06f55268.js.map +1 -0
  189. package/dist/esm-es5/dnn-button_16.entry.js +11 -0
  190. package/dist/esm-es5/dnn-button_16.entry.js.map +1 -0
  191. package/dist/esm-es5/dnn.js +2 -0
  192. package/dist/esm-es5/dnn.js.map +1 -0
  193. package/dist/esm-es5/index-cdbad319.js +2 -0
  194. package/dist/esm-es5/index-cdbad319.js.map +1 -0
  195. package/dist/esm-es5/index.js +2 -0
  196. package/dist/esm-es5/index.js.map +1 -0
  197. package/dist/esm-es5/loader.js +2 -0
  198. package/dist/esm-es5/loader.js.map +1 -0
  199. package/dist/types/components/dnn-collapsible/dnn-collapsible.d.ts +7 -11
  200. package/dist/types/components/dnn-treeview-item/dnn-treeview-item.d.ts +5 -0
  201. package/dist/types/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.d.ts +0 -1
  202. package/dist/types/components/dnn-vertical-splitview/dnn-vertical-splitview.d.ts +1 -0
  203. package/dist/types/components.d.ts +8 -0
  204. package/loader/index.js +1 -1
  205. package/package.json +1 -1
  206. package/dist/cjs/index-6a6ac523.js.map +0 -1
  207. package/dist/cjs/index-ba8b86b1.js.map +0 -1
  208. package/dist/dnn/index-3e56049b.js.map +0 -1
  209. package/dist/dnn/p-d03a0f3e.entry.js +0 -11
  210. package/dist/dnn/p-d03a0f3e.entry.js.map +0 -1
  211. package/dist/dnn/p-d10994a3.js.map +0 -1
  212. package/dist/esm/index-212d30ec.js.map +0 -1
  213. package/dist/esm/index-3e56049b.js.map +0 -1
package/dist/dnn/dnn-color-picker.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"dnn-color-picker.entry.esm.js","mappings":"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","names":[],"sources":["./src/utilities/colorInfo.ts","./src/components/dnn-color-picker/dnn-color-picker.scss?tag=dnn-color-picker&encapsulation=shadow","./src/components/dnn-color-picker/dnn-color-picker.tsx"],"sourcesContent":["/** Color utility class with hsl and rgb converters\r\n * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nexport class ColorInfo{\r\n\r\n private _hue: number = 0;\r\n /** gets the color hue\r\n * @returns a number between 0 and 359, could contain decimals\r\n */\r\n get hue() { return this._hue; }\r\n set hue(value: number){\r\n if (value < 0) { value = 0; }\r\n if (value > 359) { value = 359; }\r\n this._hue = value;\r\n }\r\n\r\n private _saturation: number = 0;\r\n /** gets the color saturation\r\n * @returns a number between 0 and 1, could contain decimals\r\n */\r\n get saturation() { return this._saturation; }\r\n set saturation(value: number) {\r\n if (value < 0) { value = 0; }\r\n if (value > 1) { value = 1; }\r\n this._saturation = value;\r\n }\r\n\r\n private _lightness: number = 0;\r\n /** gets the color lightness\r\n * @returns a number between 0 and 1, could contain decimals\r\n */\r\n get lightness() { return this._lightness; }\r\n set lightness(value: number) {\r\n if (value < 0) { value = 0; }\r\n if (value > 1) { value = 1; }\r\n this._lightness = value;\r\n }\r\n\r\n /** gets or sets the red component \r\n * @returns an integer between 0 and 255\r\n */\r\n get red() {\r\n return this.getRGB().red;\r\n }\r\n set red(value) {\r\n this.setHSL(value, this.green, this.blue);\r\n }\r\n\r\n /** gets or sets the green component\r\n * @returns an integer between 0 and 255\r\n */\r\n get green() {\r\n return this.getRGB().green;\r\n }\r\n set green(value: number) {\r\n this.setHSL(this.red, value, this.blue);\r\n }\r\n\r\n /** gets or sets the blue component\r\n * @returns an integer between 0 and 255\r\n */\r\n get blue() {\r\n return this.getRGB().blue;\r\n }\r\n set blue(value: number) {\r\n this.setHSL(this.red, this.green, value);\r\n }\r\n\r\n /** gets or sets the hex color value, expresses as 6 hexadecimal characters.\r\n * @returns hex representation of the color\r\n */\r\n get hex() {\r\n var r = this.getHex(this.red);\r\n var g = this.getHex(this.green);\r\n var b = this.getHex(this.blue);\r\n return r + g + b;\r\n }\r\n set hex(value: string){\r\n this.red = parseInt(value.substr(0,2));\r\n this.green = parseInt(value.substr(2,2));\r\n this.blue = parseInt(value.substr(4,2));\r\n }\r\n\r\n /** gets white or black color that is a good oposite to the current color\r\n * @returns - \"000000\" or \"FFFFFF\"\r\n */\r\n get contrastColor() {\r\n const brightness = (this.red*299 + this.green*587 + this.blue*114) / 1000\r\n if (brightness > 127){\r\n return \"000000\";\r\n }\r\n return \"FFFFFF\";\r\n }\r\n\r\n private getRGB() {\r\n const chroma = (1 - Math.abs((2 * this._lightness) - 1)) * this.saturation;\r\n // find the quandrant of the hue\r\n const quadrant = this._hue / 60;\r\n // calculate the offset from the quandrant center\r\n const offset = chroma * (1 - Math.abs(quadrant % 2 - 1));\r\n\r\n // Apply the chroma to the primary component and the offset to the 2nd most important component\r\n let r = 0, g = 0, b = 0;\r\n if (0 <= quadrant && quadrant <= 1) {\r\n r = chroma; g = offset; // red to yellow\r\n } else if (1 <= quadrant && quadrant <= 2) {\r\n g = chroma; r = offset; // yellow to green\r\n } else if (2 <= quadrant && quadrant <= 3) {\r\n g = chroma; b = offset; // green to cyan\r\n } else if (3 <= quadrant && quadrant <= 4) {\r\n b = chroma; g = offset; // cyan to blue\r\n } else if (4 <= quadrant && quadrant <= 5) {\r\n b = chroma; r = offset; // blue to magenta\r\n } else if (5 <= quadrant && quadrant <= 6) {\r\n r = chroma; b = offset; // magenta to red\r\n }\r\n // calculate the bias to add to all channels to match the lightness\r\n const bias = this._lightness - (chroma / 2);\r\n\r\n return {\r\n red: Math.round((r + bias) * 255),\r\n green: Math.round((g + bias) * 255),\r\n blue: Math.round((b + bias) * 255)\r\n }\r\n }\r\n\r\n private setHSL(red: number, green: number, blue: number) {\r\n // GENERAL DATA\r\n // all math is based on values from 0 to 1\r\n const r = red/255, g = green/255, b = blue/255;\r\n // we need to max, min and the difference between them to derive hsl\r\n const min = Math.min(r, g, b);\r\n const max = Math.max(r, g, b);\r\n const diff = max - min;\r\n let h = 0, s = 0, l = 0;\r\n\r\n // HUE\r\n if (diff === 0) { // neutral\r\n h = 0;\r\n } else if (max === r) { // red (magenta to yellow range)\r\n h = 60 * ((g - b) / diff);\r\n } else if (max === g) { // green (yellow to cyan range)\r\n h = 60 * (2 + ((b - r) / diff));\r\n } else if (max === b) { // blue (cyan to magenta range)\r\n h = 60 * (4 + ((r - g) / diff));\r\n }\r\n if (h < 0) { h = h + 360} // ensures positive hues only\r\n if (h > 359) { h = 359} // ensures we never return 360 for simplicity since it is the same as 0\r\n\r\n // LIGHTNESS\r\n l = (max + min) / 2;\r\n\r\n // SATURATION\r\n if (max === 0 || min === 1) { // pure black or white have no saturation\r\n s = 0;\r\n } else {\r\n s = (max - l) / (Math.min(l, 1 - l));\r\n }\r\n\r\n this._hue = h;\r\n this._saturation = s;\r\n this._lightness = l;\r\n }\r\n\r\n private getHex(value: number){\r\n var hex = value.toString(16);\r\n if (hex.length < 2){\r\n hex = \"0\" + hex;\r\n }\r\n return hex;\r\n }\r\n} ",".dnn-color-picker{\r\n padding: 15px;\r\n max-width: 400px;\r\n .dnn-color-sliders{\r\n display:flex;\r\n flex-direction: column;\r\n min-width: 200px;\r\n .dnn-color-s-b{\r\n border: 1px solid #ccc;\r\n padding-bottom: var(--color-box-height, 50%);\r\n position: relative;\r\n background-color: red;\r\n &:before{\r\n content: '';\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height:100%;\r\n z-index:1;\r\n background: linear-gradient(to right, white, red);\r\n mix-blend-mode: saturation;\r\n }\r\n &:after{\r\n content: '';\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height:100%;\r\n z-index:2;\r\n background: linear-gradient(to bottom, white, black);\r\n mix-blend-mode: luminosity;\r\n }\r\n button{\r\n position: absolute;\r\n bottom: calc(50% - 4px);\r\n left: calc(50% - 4px);\r\n width: 8px;\r\n height: 8px;\r\n z-index: 3;\r\n display: block;\r\n background: none;\r\n border: none;\r\n margin-left: -4px;\r\n margin-bottom: -4px;\r\n padding: 7px;\r\n background-color: #fff;\r\n border-radius: 50%;\r\n &:before{\r\n content:'';\r\n position: absolute;\r\n top: -1px;\r\n left: -1px;\r\n border-radius: 50%;\r\n }\r\n &:after{\r\n content:'';\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n border-radius: 50%;\r\n width: 10px;\r\n height: 10px;\r\n border: 2px solid #ccc;\r\n }\r\n } \r\n }\r\n .dnn-color-bar {\r\n display: flex;\r\n align-items: center;\r\n margin-top: 15px;\r\n .dnn-color-result {\r\n flex-direction: column;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n background: red;\r\n }\r\n .dnn-color-hue{\r\n flex: auto;\r\n margin-left: 10px;\r\n height: 16px;\r\n border: 1px solid #ccc;\r\n position: relative;\r\n background: linear-gradient(\r\n to right, \r\n #f00 0, \r\n #ff0 17%,\r\n #0f0 33%,\r\n #0ff 50%,\r\n #00f 67%,\r\n #f0f 84%,\r\n #f00 100%\r\n );\r\n button{\r\n width: 10px;\r\n height: 20px;\r\n position: absolute;\r\n top: -2px;\r\n left: calc(50% - 4px);\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n padding-left: -8px;\r\n &:before{\r\n content:'';\r\n position: absolute;\r\n top: -2px;\r\n left: 0px;\r\n border-radius: 3px;\r\n width: 100%;\r\n height: 100%;\r\n border: 1px solid #ccc;\r\n background-color: #fff;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .dnn-color-fields{\r\n display:flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n .dnn-color-mode-switch {\r\n display: flex;\r\n align-items: flex-end;\r\n padding: .5em;\r\n button {\r\n background-color: transparent;\r\n border: none;\r\n svg {\r\n width: 3em;\r\n height: 3em;\r\n pointer-events: none;\r\n outline: none;\r\n }\r\n }\r\n }\r\n .dnn-rgb-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-rgb-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n input{\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.5em;\r\n padding-left: 1.3em;\r\n text-align: center;\r\n &.red{\r\n border-color: red;\r\n }\r\n &.green{\r\n border-color: green; \r\n }\r\n &.blue{\r\n border-color: blue;\r\n } \r\n }\r\n }\r\n }\r\n .dnn-hsl-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-hsl-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n input{\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.5em;\r\n padding-left: 1.3em;\r\n text-align: center;\r\n }\r\n }\r\n }\r\n .dnn-hex-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-hex-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n .hex-input{\r\n position: relative;\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.323em;\r\n text-align: center;\r\n input{\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n width:100%;\r\n height:100%;\r\n text-align:center;\r\n }\r\n button{\r\n position: absolute;\r\n height: 100%;\r\n top: 0;\r\n right: 1em;\r\n background-color: transparent;\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n svg{\r\n min-width: 1em;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n} ","/** Reusable DNN UI component to pick a color\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nimport { Component, h, State, Element, Prop, EventEmitter, Event, Watch } from \"@stencil/core\";\r\nimport { ColorInfo } from '../../utilities/colorInfo';\r\nimport { Debounce } from \"../../utilities/debounce\";\r\n\r\n/** Color Picker for Dnn */\r\n@Component({\r\n tag: 'dnn-color-picker',\r\n styleUrl: 'dnn-color-picker.scss',\r\n shadow: true\r\n})\r\nexport class DnnColorPicker {\r\n\r\n @Element() el: HTMLDnnColorPickerElement;\r\n\r\n /** Sets the initial color, must be a valid 8 character hexadecimal string without the # sign. */\r\n @Prop() color: string = \"FFFFFF\";\r\n\r\n /** Sets the width-height ratio of the color picker saturation-lightness box.\r\n * @example 100% renders a perfect square\r\n */\r\n @Prop() colorBoxHeight: string = \"50%\";\r\n \r\n @State() currentColor: ColorInfo;\r\n @State() rgbDisplay: string = \"flex\";\r\n @State() hslDisplay: string = \"none\";\r\n @State() hexDisplay: string = \"none\";\r\n\r\n /** Fires up when the color is changed and emits a ColorInfo object\r\n * @see ../../utilities/colorInfo.ts\r\n */\r\n @Event() colorChanged: EventEmitter<ColorInfo>;\r\n\r\n @Debounce(100)\r\n private colorChangedHandler(color: ColorInfo) {\r\n this.colorChanged.emit(color);\r\n }\r\n\r\n @Watch(\"currentColor\")\r\n handeCurrentColorChanged(newValue: ColorInfo){\r\n this.colorChangedHandler(newValue);\r\n }\r\n \r\n private saturationLightnessBox?: HTMLDivElement;\r\n private hueRange?: HTMLDivElement;\r\n\r\n\r\n componentWillLoad() {\r\n this.handleHexChange(this.color);\r\n }\r\n\r\n componentDidLoad() {\r\n (this.el as unknown as HTMLElement).style.setProperty(\"--color-box-height\", this.colorBoxHeight.toString());\r\n }\r\n \r\n private getHex() {\r\n return this.getDoublet(this.currentColor.red) + this.getDoublet(this.currentColor.green) + this.getDoublet(this.currentColor.blue);\r\n }\r\n\r\n private getContrast() {\r\n return this.currentColor.contrastColor;\r\n }\r\n\r\n private getDoublet(value: number){\r\n const valueString = value.toString(16).toUpperCase();\r\n if (valueString.length === 1){\r\n return '0' + valueString;\r\n }\r\n return valueString;\r\n }\r\n\r\n private handleSaturationLightnessMouseDown = (e) => {\r\n e.preventDefault();\r\n this.handleDragLightnessSaturation(e);\r\n window.addEventListener('mousemove', this.handleDragLightnessSaturation);\r\n window.addEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n }\r\n\r\n private handleDragLightnessSaturation = (e) => {\r\n const rect = this.saturationLightnessBox.getBoundingClientRect(); \r\n\r\n let x = e.clientX - rect.left; \r\n if (x < 0) { x = 0}\r\n if (x > rect.width) { x = rect.width}\r\n x = x/rect.width;\r\n\r\n let y = e.clientY - rect.top;\r\n if (y < 0) { y = 0}\r\n if (y > rect.height) { y = rect.height}\r\n y = 1 - (y/rect.height);\r\n\r\n const newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = x;\r\n newColor.lightness = y;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleSaturationLightnessMouseUp = () => {\r\n window.removeEventListener('mousemove', this.handleDragLightnessSaturation);\r\n window.removeEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n }\r\n\r\n private handleHueMouseDown = (e) => {\r\n e.preventDefault();\r\n this.handleDragHue(e);\r\n window.addEventListener('mousemove', this.handleDragHue);\r\n window.addEventListener('mouseup', this.handleHueMouseUp); \r\n }\r\n\r\n private handleHueMouseUp = () => {\r\n window.removeEventListener('mousemove', this.handleDragHue);\r\n window.removeEventListener('mouseup', this.handleHueMouseUp); \r\n }\r\n\r\n private handleDragHue = (e) => {\r\n const rect = this.hueRange.getBoundingClientRect(); \r\n\r\n let x = e.clientX - rect.left;\r\n if (x < 0) { x = 0}\r\n if (x > rect.width) { x = rect.width}\r\n x = x/rect.width*360; \r\n\r\n const newColor = new ColorInfo();\r\n newColor.hue = x;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleComponentValueChange = (e, channel) => {\r\n let value = parseInt(e.target.value);\r\n if (isNaN(value)) { return }\r\n const newColor = new ColorInfo();\r\n if (value < 0) { value = 0; }\r\n if (value > 255) { value = 255; }\r\n let r = this.currentColor.red;\r\n let g = this.currentColor.green;\r\n let b = this.currentColor.blue;\r\n switch (channel) {\r\n case 'red':\r\n r = value;\r\n break;\r\n case 'green':\r\n g = value;\r\n break;\r\n case 'blue':\r\n b = value;\r\n break;\r\n default:\r\n break;\r\n }\r\n newColor.green = g;\r\n newColor.red = r;\r\n newColor.blue = b;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleHSLChange = (e, component) => { \r\n let value = parseInt(e.target.value);\r\n if (isNaN(value)) {return}\r\n const newColor = new ColorInfo();\r\n if (value != null) { \r\n let h = this.currentColor.hue;\r\n let s = this.currentColor.saturation;\r\n let l = this.currentColor.lightness;\r\n switch (component) {\r\n case \"hue\":\r\n if (value < 0) { value = 0}\r\n if (value > 359) { value = 0}\r\n h = value;\r\n break;\r\n case \"saturation\":\r\n if (value < 0) { value = 0}\r\n if (value > 100) { value = 100}\r\n s = value / 100;\r\n break;\r\n case \"lightness\":\r\n if (value < 0) { value = 0}\r\n if (value > 100) { value = 100}\r\n l = value / 100;\r\n break; \r\n default:\r\n break; \r\n }\r\n newColor.hue = h;\r\n newColor.saturation = s;\r\n newColor.lightness = l;\r\n this.currentColor = newColor;\r\n }\r\n }\r\n\r\n private handleHexChange(value: string){\r\n const newColor = new ColorInfo();\r\n if (value.match(/^(?:[\\da-f]{3}|[\\da-f]{6})$/i).length > 0) {\r\n if (value.length === 3){\r\n let expanded = value[0] + value[0] + value[1] + value[1] + value[2] + value [2];\r\n value = expanded;\r\n }\r\n newColor.red = parseInt(value.substr(0,2), 16);\r\n newColor.green = parseInt(value.substr(2,2), 16);\r\n newColor.blue = parseInt(value.substr(4,2), 16);\r\n }\r\n else{\r\n newColor.red = this.currentColor.red;\r\n newColor.green = this.currentColor.green;\r\n newColor.blue = this.currentColor.blue;\r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n private switchColorMode(e) {\r\n switch(e.target.id) {\r\n case \"rgb-switch\":\r\n this.rgbDisplay = \"none\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"flex\";\r\n break;\r\n case \"hex-switch\":\r\n this.rgbDisplay = \"none\";\r\n this.hslDisplay = \"flex\";\r\n this.hexDisplay = \"none\";\r\n break;\r\n case \"hsl-switch\":\r\n this.rgbDisplay = \"flex\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"none\";\r\n break;\r\n default:\r\n this.rgbDisplay = \"flex\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"none\";\r\n }\r\n }\r\n\r\n private handleSaturationLightnessKeyDown = (e) => { \r\n let newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n\r\n let value = 0.01;\r\n if (e.shiftKey) { value = 0.1 ;}\r\n\r\n switch (e.key) {\r\n case \"ArrowUp\":\r\n newColor.lightness += value;\r\n break;\r\n case \"ArrowDown\":\r\n newColor.lightness -= value;\r\n break;\r\n case \"ArrowLeft\":\r\n newColor.saturation -= value;\r\n break;\r\n case \"ArrowRight\":\r\n newColor.saturation += value;\r\n default:\r\n break; \r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleHueKeyDown = (e) => {\r\n let newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n\r\n let value = 1;\r\n if (e.shiftKey) { value = 10}\r\n\r\n switch (e.key) {\r\n case \"ArrowLeft\":\r\n newColor.hue -= value;\r\n break;\r\n case \"ArrowRight\":\r\n newColor.hue += value;\r\n default:\r\n break;\r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n render() {\r\n const hue = this.currentColor.hue;\r\n const saturation = this.currentColor.saturation;\r\n const lightness = this.currentColor.lightness;\r\n const red = this.currentColor.red;\r\n const green = this.currentColor.green;\r\n const blue = this.currentColor.blue;\r\n\r\n return (\r\n <div class=\"dnn-color-picker\">\r\n <div class=\"dnn-color-sliders\">\r\n <div class=\"dnn-color-s-b\" ref={(element) => this.saturationLightnessBox = element as HTMLDivElement}\r\n style={{backgroundColor: `hsl(${hue},100%,50%)`}}\r\n onMouseDown={this.handleSaturationLightnessMouseDown.bind(this)}\r\n >\r\n <button class=\"dnn-s-b-picker\"\r\n aria-label=\"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%\"\r\n role=\"slider\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n aria-valuetext={`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`}\r\n style={{\r\n left: Math.round(saturation * 100) + \"%\",\r\n bottom: Math.round(lightness * 100) + \"%\"\r\n }}\r\n onKeyDown={(e) => this.handleSaturationLightnessKeyDown(e)}\r\n />\r\n </div>\r\n <div class=\"dnn-color-bar\">\r\n <div class=\"dnn-color-result\" style={{\r\n backgroundColor: '#' + this.getHex(),\r\n boxShadow: \"0 0 2px 1px \" + \"#\" + this.getContrast()\r\n }} \r\n />\r\n <div class=\"dnn-color-hue\"\r\n ref={(element) => this.hueRange = element as HTMLDivElement}\r\n onMouseDown={this.handleHueMouseDown.bind(this)}\r\n >\r\n <button class=\"dnn-hue-picker\"\r\n aria-label=\"Press left or right to adjust hue, hold shift to move by 10 degrees\"\r\n role=\"slider\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"359\"\r\n aria-valuenow={Math.round(hue)}\r\n style={{left: (hue/359*100).toString() + \"%\"}}\r\n onKeyDown={(e) => this.handleHueKeyDown(e)}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dnn-color-fields\">\r\n <div class=\"dnn-rgb-color-fields\" style={{display: this.rgbDisplay}}>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>R</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" step=\"1\" class=\"red\" value={red} aria-label=\"red value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'red')}\r\n />\r\n </div>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>G</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" class=\"green\" value={green} aria-label=\"green value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'green')}\r\n />\r\n </div>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>B</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" class=\"blue\" value={blue} aria-label=\"blue value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'blue')}\r\n />\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"rgb-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"switch to hexadecimal value entry\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-hsl-color-fields\" style={{display: this.hslDisplay}}>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>H</label>\r\n <input type=\"number\" min=\"0\" max=\"359\" step={1} value={Math.round(hue)} aria-label=\"Hue\"\r\n onChange={(e) => this.handleHSLChange(e, 'hue')}\r\n />\r\n </div>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>S</label>\r\n <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(saturation*100)} aria-label=\"Saturation\"\r\n onChange={(e) => this.handleHSLChange(e, 'saturation')}\r\n />\r\n </div>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>L</label>\r\n <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(lightness*100)} aria-label=\"Lightness\"\r\n onChange={(e) => this.handleHSLChange(e, 'lightness')}\r\n />\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"hsl-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"Switch to red, green, blue entry mode\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-hex-color-fields\" style={{display: this.hexDisplay}}>\r\n <div class=\"dnn-hex-color-field\">\r\n <label>HEX</label>\r\n <div class=\"hex-input\">\r\n <input type=\"text\" aria-label=\"Hexadecimal value\"\r\n value={this.getHex()}\r\n onChange={e => this.handleHexChange((e.target as HTMLInputElement).value)}\r\n />\r\n <button\r\n class=\"copy\"\r\n aria-label=\"copy value\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"hex-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"Switch to hue saturation lightness values\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
1
+ {"file":"dnn-color-picker.entry.esm.js","mappings":"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","names":[],"sources":["./src/utilities/colorInfo.ts","./src/components/dnn-color-picker/dnn-color-picker.scss?tag=dnn-color-picker&encapsulation=shadow","./src/components/dnn-color-picker/dnn-color-picker.tsx"],"sourcesContent":["/** Color utility class with hsl and rgb converters\r\n * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nexport class ColorInfo{\r\n\r\n private _hue: number = 0;\r\n /** gets the color hue\r\n * @returns a number between 0 and 359, could contain decimals\r\n */\r\n get hue() { return this._hue; }\r\n set hue(value: number){\r\n if (value < 0) { value = 0; }\r\n if (value > 359) { value = 359; }\r\n this._hue = value;\r\n }\r\n\r\n private _saturation: number = 0;\r\n /** gets the color saturation\r\n * @returns a number between 0 and 1, could contain decimals\r\n */\r\n get saturation() { return this._saturation; }\r\n set saturation(value: number) {\r\n if (value < 0) { value = 0; }\r\n if (value > 1) { value = 1; }\r\n this._saturation = value;\r\n }\r\n\r\n private _lightness: number = 0;\r\n /** gets the color lightness\r\n * @returns a number between 0 and 1, could contain decimals\r\n */\r\n get lightness() { return this._lightness; }\r\n set lightness(value: number) {\r\n if (value < 0) { value = 0; }\r\n if (value > 1) { value = 1; }\r\n this._lightness = value;\r\n }\r\n\r\n /** gets or sets the red component \r\n * @returns an integer between 0 and 255\r\n */\r\n get red() {\r\n return this.getRGB().red;\r\n }\r\n set red(value) {\r\n this.setHSL(value, this.green, this.blue);\r\n }\r\n\r\n /** gets or sets the green component\r\n * @returns an integer between 0 and 255\r\n */\r\n get green() {\r\n return this.getRGB().green;\r\n }\r\n set green(value: number) {\r\n this.setHSL(this.red, value, this.blue);\r\n }\r\n\r\n /** gets or sets the blue component\r\n * @returns an integer between 0 and 255\r\n */\r\n get blue() {\r\n return this.getRGB().blue;\r\n }\r\n set blue(value: number) {\r\n this.setHSL(this.red, this.green, value);\r\n }\r\n\r\n /** gets or sets the hex color value, expresses as 6 hexadecimal characters.\r\n * @returns hex representation of the color\r\n */\r\n get hex() {\r\n var r = this.getHex(this.red);\r\n var g = this.getHex(this.green);\r\n var b = this.getHex(this.blue);\r\n return r + g + b;\r\n }\r\n set hex(value: string){\r\n this.red = parseInt(value.substr(0,2));\r\n this.green = parseInt(value.substr(2,2));\r\n this.blue = parseInt(value.substr(4,2));\r\n }\r\n\r\n /** gets white or black color that is a good oposite to the current color\r\n * @returns - \"000000\" or \"FFFFFF\"\r\n */\r\n get contrastColor() {\r\n const brightness = (this.red*299 + this.green*587 + this.blue*114) / 1000\r\n if (brightness > 127){\r\n return \"000000\";\r\n }\r\n return \"FFFFFF\";\r\n }\r\n\r\n private getRGB() {\r\n const chroma = (1 - Math.abs((2 * this._lightness) - 1)) * this.saturation;\r\n // find the quandrant of the hue\r\n const quadrant = this._hue / 60;\r\n // calculate the offset from the quandrant center\r\n const offset = chroma * (1 - Math.abs(quadrant % 2 - 1));\r\n\r\n // Apply the chroma to the primary component and the offset to the 2nd most important component\r\n let r = 0, g = 0, b = 0;\r\n if (0 <= quadrant && quadrant <= 1) {\r\n r = chroma; g = offset; // red to yellow\r\n } else if (1 <= quadrant && quadrant <= 2) {\r\n g = chroma; r = offset; // yellow to green\r\n } else if (2 <= quadrant && quadrant <= 3) {\r\n g = chroma; b = offset; // green to cyan\r\n } else if (3 <= quadrant && quadrant <= 4) {\r\n b = chroma; g = offset; // cyan to blue\r\n } else if (4 <= quadrant && quadrant <= 5) {\r\n b = chroma; r = offset; // blue to magenta\r\n } else if (5 <= quadrant && quadrant <= 6) {\r\n r = chroma; b = offset; // magenta to red\r\n }\r\n // calculate the bias to add to all channels to match the lightness\r\n const bias = this._lightness - (chroma / 2);\r\n\r\n return {\r\n red: Math.round((r + bias) * 255),\r\n green: Math.round((g + bias) * 255),\r\n blue: Math.round((b + bias) * 255)\r\n }\r\n }\r\n\r\n private setHSL(red: number, green: number, blue: number) {\r\n // GENERAL DATA\r\n // all math is based on values from 0 to 1\r\n const r = red/255, g = green/255, b = blue/255;\r\n // we need to max, min and the difference between them to derive hsl\r\n const min = Math.min(r, g, b);\r\n const max = Math.max(r, g, b);\r\n const diff = max - min;\r\n let h = 0, s = 0, l = 0;\r\n\r\n // HUE\r\n if (diff === 0) { // neutral\r\n h = 0;\r\n } else if (max === r) { // red (magenta to yellow range)\r\n h = 60 * ((g - b) / diff);\r\n } else if (max === g) { // green (yellow to cyan range)\r\n h = 60 * (2 + ((b - r) / diff));\r\n } else if (max === b) { // blue (cyan to magenta range)\r\n h = 60 * (4 + ((r - g) / diff));\r\n }\r\n if (h < 0) { h = h + 360} // ensures positive hues only\r\n if (h > 359) { h = 359} // ensures we never return 360 for simplicity since it is the same as 0\r\n\r\n // LIGHTNESS\r\n l = (max + min) / 2;\r\n\r\n // SATURATION\r\n if (max === 0 || min === 1) { // pure black or white have no saturation\r\n s = 0;\r\n } else {\r\n s = (max - l) / (Math.min(l, 1 - l));\r\n }\r\n\r\n this._hue = h;\r\n this._saturation = s;\r\n this._lightness = l;\r\n }\r\n\r\n private getHex(value: number){\r\n var hex = value.toString(16);\r\n if (hex.length < 2){\r\n hex = \"0\" + hex;\r\n }\r\n return hex;\r\n }\r\n} ",".dnn-color-picker{\r\n padding: 15px;\r\n max-width: 400px;\r\n .dnn-color-sliders{\r\n display:flex;\r\n flex-direction: column;\r\n min-width: 200px;\r\n .dnn-color-s-b{\r\n border: 1px solid #ccc;\r\n padding-bottom: var(--color-box-height, 50%);\r\n position: relative;\r\n background-color: red;\r\n &:before{\r\n content: '';\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height:100%;\r\n z-index:1;\r\n background: linear-gradient(to right, white, red);\r\n mix-blend-mode: saturation;\r\n }\r\n &:after{\r\n content: '';\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height:100%;\r\n z-index:2;\r\n background: linear-gradient(to bottom, white, black);\r\n mix-blend-mode: luminosity;\r\n }\r\n button{\r\n position: absolute;\r\n bottom: calc(50% - 4px);\r\n left: calc(50% - 4px);\r\n width: 8px;\r\n height: 8px;\r\n z-index: 3;\r\n display: block;\r\n background: none;\r\n border: none;\r\n margin-left: -4px;\r\n margin-bottom: -4px;\r\n padding: 7px;\r\n background-color: #fff;\r\n border-radius: 50%;\r\n &:before{\r\n content:'';\r\n position: absolute;\r\n top: -1px;\r\n left: -1px;\r\n border-radius: 50%;\r\n }\r\n &:after{\r\n content:'';\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n border-radius: 50%;\r\n width: 10px;\r\n height: 10px;\r\n border: 2px solid #ccc;\r\n }\r\n } \r\n }\r\n .dnn-color-bar {\r\n display: flex;\r\n align-items: center;\r\n margin-top: 15px;\r\n .dnn-color-result {\r\n flex-direction: column;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n background: red;\r\n }\r\n .dnn-color-hue{\r\n flex: auto;\r\n margin-left: 10px;\r\n height: 16px;\r\n border: 1px solid #ccc;\r\n position: relative;\r\n background: linear-gradient(\r\n to right, \r\n #f00 0, \r\n #ff0 17%,\r\n #0f0 33%,\r\n #0ff 50%,\r\n #00f 67%,\r\n #f0f 84%,\r\n #f00 100%\r\n );\r\n button{\r\n width: 10px;\r\n height: 20px;\r\n position: absolute;\r\n top: -2px;\r\n left: calc(50% - 4px);\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n padding-left: -8px;\r\n &:before{\r\n content:'';\r\n position: absolute;\r\n top: -2px;\r\n left: 0px;\r\n border-radius: 3px;\r\n width: 100%;\r\n height: 100%;\r\n border: 1px solid #ccc;\r\n background-color: #fff;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .dnn-color-fields{\r\n display:flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n .dnn-color-mode-switch {\r\n display: flex;\r\n align-items: flex-end;\r\n padding: .5em;\r\n button {\r\n background-color: transparent;\r\n border: none;\r\n svg {\r\n width: 3em;\r\n height: 3em;\r\n pointer-events: none;\r\n outline: none;\r\n }\r\n }\r\n }\r\n .dnn-rgb-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-rgb-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n input{\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.5em;\r\n padding-left: 1.3em;\r\n text-align: center;\r\n &.red{\r\n border-color: red;\r\n }\r\n &.green{\r\n border-color: green; \r\n }\r\n &.blue{\r\n border-color: blue;\r\n } \r\n }\r\n }\r\n }\r\n .dnn-hsl-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-hsl-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n input{\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.5em;\r\n padding-left: 1.3em;\r\n text-align: center;\r\n }\r\n }\r\n }\r\n .dnn-hex-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-hex-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n .hex-input{\r\n position: relative;\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.323em;\r\n text-align: center;\r\n input{\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n width:100%;\r\n height:100%;\r\n text-align:center;\r\n }\r\n button{\r\n position: absolute;\r\n height: 100%;\r\n top: 0;\r\n right: 1em;\r\n background-color: transparent;\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n svg{\r\n min-width: 1em;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n} ","/** Reusable DNN UI component to pick a color\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nimport { Component, h, State, Element, Prop, EventEmitter, Event, Watch } from \"@stencil/core\";\r\nimport { ColorInfo } from '../../utilities/colorInfo';\r\nimport { Debounce } from \"../../utilities/debounce\";\r\n\r\n/** Color Picker for Dnn */\r\n@Component({\r\n tag: 'dnn-color-picker',\r\n styleUrl: 'dnn-color-picker.scss',\r\n shadow: true\r\n})\r\nexport class DnnColorPicker {\r\n\r\n @Element() el: HTMLDnnColorPickerElement;\r\n\r\n /** Sets the initial color, must be a valid 8 character hexadecimal string without the # sign. */\r\n @Prop() color: string = \"FFFFFF\";\r\n\r\n /** Sets the width-height ratio of the color picker saturation-lightness box.\r\n * @example 100% renders a perfect square\r\n */\r\n @Prop() colorBoxHeight: string = \"50%\";\r\n \r\n @State() currentColor: ColorInfo;\r\n @State() rgbDisplay: string = \"flex\";\r\n @State() hslDisplay: string = \"none\";\r\n @State() hexDisplay: string = \"none\";\r\n\r\n /** Fires up when the color is changed and emits a ColorInfo object\r\n * @see ../../utilities/colorInfo.ts\r\n */\r\n @Event() colorChanged: EventEmitter<ColorInfo>;\r\n\r\n @Debounce(100)\r\n private colorChangedHandler(color: ColorInfo) {\r\n this.colorChanged.emit(color);\r\n }\r\n\r\n @Watch(\"currentColor\")\r\n handeCurrentColorChanged(newValue: ColorInfo){\r\n this.colorChangedHandler(newValue);\r\n }\r\n \r\n private saturationLightnessBox?: HTMLDivElement;\r\n private hueRange?: HTMLDivElement;\r\n\r\n\r\n componentWillLoad() {\r\n this.handleHexChange(this.color);\r\n }\r\n\r\n componentDidLoad() {\r\n (this.el as unknown as HTMLElement).style.setProperty(\"--color-box-height\", this.colorBoxHeight.toString());\r\n }\r\n \r\n private getHex() {\r\n return this.getDoublet(this.currentColor.red) + this.getDoublet(this.currentColor.green) + this.getDoublet(this.currentColor.blue);\r\n }\r\n\r\n private getContrast() {\r\n return this.currentColor.contrastColor;\r\n }\r\n\r\n private getDoublet(value: number){\r\n const valueString = value.toString(16).toUpperCase();\r\n if (valueString.length === 1){\r\n return '0' + valueString;\r\n }\r\n return valueString;\r\n }\r\n\r\n private handleSaturationLightnessMouseDown = (e) => {\r\n e.preventDefault();\r\n this.handleDragLightnessSaturation(e);\r\n window.addEventListener('mousemove', this.handleDragLightnessSaturation);\r\n window.addEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n }\r\n\r\n private handleDragLightnessSaturation = (e) => {\r\n const rect = this.saturationLightnessBox.getBoundingClientRect(); \r\n\r\n let x = e.clientX - rect.left; \r\n if (x < 0) { x = 0}\r\n if (x > rect.width) { x = rect.width}\r\n x = x/rect.width;\r\n\r\n let y = e.clientY - rect.top;\r\n if (y < 0) { y = 0}\r\n if (y > rect.height) { y = rect.height}\r\n y = 1 - (y/rect.height);\r\n\r\n const newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = x;\r\n newColor.lightness = y;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleSaturationLightnessMouseUp = () => {\r\n window.removeEventListener('mousemove', this.handleDragLightnessSaturation);\r\n window.removeEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n }\r\n\r\n private handleHueMouseDown = (e) => {\r\n e.preventDefault();\r\n this.handleDragHue(e);\r\n window.addEventListener('mousemove', this.handleDragHue);\r\n window.addEventListener('mouseup', this.handleHueMouseUp); \r\n }\r\n\r\n private handleHueMouseUp = () => {\r\n window.removeEventListener('mousemove', this.handleDragHue);\r\n window.removeEventListener('mouseup', this.handleHueMouseUp); \r\n }\r\n\r\n private handleDragHue = (e) => {\r\n const rect = this.hueRange.getBoundingClientRect(); \r\n\r\n let x = e.clientX - rect.left;\r\n if (x < 0) { x = 0}\r\n if (x > rect.width) { x = rect.width}\r\n x = x/rect.width*360; \r\n\r\n const newColor = new ColorInfo();\r\n newColor.hue = x;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleComponentValueChange = (e, channel) => {\r\n let value = parseInt(e.target.value);\r\n if (isNaN(value)) { return }\r\n const newColor = new ColorInfo();\r\n if (value < 0) { value = 0; }\r\n if (value > 255) { value = 255; }\r\n let r = this.currentColor.red;\r\n let g = this.currentColor.green;\r\n let b = this.currentColor.blue;\r\n switch (channel) {\r\n case 'red':\r\n r = value;\r\n break;\r\n case 'green':\r\n g = value;\r\n break;\r\n case 'blue':\r\n b = value;\r\n break;\r\n default:\r\n break;\r\n }\r\n newColor.green = g;\r\n newColor.red = r;\r\n newColor.blue = b;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleHSLChange = (e, component) => { \r\n let value = parseInt(e.target.value);\r\n if (isNaN(value)) {return}\r\n const newColor = new ColorInfo();\r\n if (value != null) { \r\n let h = this.currentColor.hue;\r\n let s = this.currentColor.saturation;\r\n let l = this.currentColor.lightness;\r\n switch (component) {\r\n case \"hue\":\r\n if (value < 0) { value = 0}\r\n if (value > 359) { value = 0}\r\n h = value;\r\n break;\r\n case \"saturation\":\r\n if (value < 0) { value = 0}\r\n if (value > 100) { value = 100}\r\n s = value / 100;\r\n break;\r\n case \"lightness\":\r\n if (value < 0) { value = 0}\r\n if (value > 100) { value = 100}\r\n l = value / 100;\r\n break; \r\n default:\r\n break; \r\n }\r\n newColor.hue = h;\r\n newColor.saturation = s;\r\n newColor.lightness = l;\r\n this.currentColor = newColor;\r\n }\r\n }\r\n\r\n private handleHexChange(value: string){\r\n const newColor = new ColorInfo();\r\n if (value.match(/^(?:[\\da-f]{3}|[\\da-f]{6})$/i).length > 0) {\r\n if (value.length === 3){\r\n let expanded = value[0] + value[0] + value[1] + value[1] + value[2] + value [2];\r\n value = expanded;\r\n }\r\n newColor.red = parseInt(value.substr(0,2), 16);\r\n newColor.green = parseInt(value.substr(2,2), 16);\r\n newColor.blue = parseInt(value.substr(4,2), 16);\r\n }\r\n else{\r\n newColor.red = this.currentColor.red;\r\n newColor.green = this.currentColor.green;\r\n newColor.blue = this.currentColor.blue;\r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n private switchColorMode(e) {\r\n switch(e.target.id) {\r\n case \"rgb-switch\":\r\n this.rgbDisplay = \"none\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"flex\";\r\n break;\r\n case \"hex-switch\":\r\n this.rgbDisplay = \"none\";\r\n this.hslDisplay = \"flex\";\r\n this.hexDisplay = \"none\";\r\n break;\r\n case \"hsl-switch\":\r\n this.rgbDisplay = \"flex\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"none\";\r\n break;\r\n default:\r\n this.rgbDisplay = \"flex\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"none\";\r\n }\r\n }\r\n\r\n private handleSaturationLightnessKeyDown = (e) => { \r\n let newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n\r\n let value = 0.01;\r\n if (e.shiftKey) { value = 0.1 ;}\r\n\r\n switch (e.key) {\r\n case \"ArrowUp\":\r\n newColor.lightness += value;\r\n break;\r\n case \"ArrowDown\":\r\n newColor.lightness -= value;\r\n break;\r\n case \"ArrowLeft\":\r\n newColor.saturation -= value;\r\n break;\r\n case \"ArrowRight\":\r\n newColor.saturation += value;\r\n default:\r\n break; \r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleHueKeyDown = (e) => {\r\n let newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n\r\n let value = 1;\r\n if (e.shiftKey) { value = 10}\r\n\r\n switch (e.key) {\r\n case \"ArrowLeft\":\r\n newColor.hue -= value;\r\n break;\r\n case \"ArrowRight\":\r\n newColor.hue += value;\r\n default:\r\n break;\r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n render() {\r\n const hue = this.currentColor.hue;\r\n const saturation = this.currentColor.saturation;\r\n const lightness = this.currentColor.lightness;\r\n const red = this.currentColor.red;\r\n const green = this.currentColor.green;\r\n const blue = this.currentColor.blue;\r\n\r\n return (\r\n <div class=\"dnn-color-picker\">\r\n <div class=\"dnn-color-sliders\">\r\n <div class=\"dnn-color-s-b\" ref={(element) => this.saturationLightnessBox = element as HTMLDivElement}\r\n style={{backgroundColor: `hsl(${hue},100%,50%)`}}\r\n onMouseDown={this.handleSaturationLightnessMouseDown.bind(this)}\r\n >\r\n <button class=\"dnn-s-b-picker\"\r\n aria-label=\"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%\"\r\n role=\"slider\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n aria-valuetext={`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`}\r\n style={{\r\n left: Math.round(saturation * 100) + \"%\",\r\n bottom: Math.round(lightness * 100) + \"%\"\r\n }}\r\n onKeyDown={(e) => this.handleSaturationLightnessKeyDown(e)}\r\n />\r\n </div>\r\n <div class=\"dnn-color-bar\">\r\n <div class=\"dnn-color-result\" style={{\r\n backgroundColor: '#' + this.getHex(),\r\n boxShadow: \"0 0 2px 1px \" + \"#\" + this.getContrast()\r\n }} \r\n />\r\n <div class=\"dnn-color-hue\"\r\n ref={(element) => this.hueRange = element as HTMLDivElement}\r\n onMouseDown={this.handleHueMouseDown.bind(this)}\r\n >\r\n <button class=\"dnn-hue-picker\"\r\n aria-label=\"Press left or right to adjust hue, hold shift to move by 10 degrees\"\r\n role=\"slider\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"359\"\r\n aria-valuenow={Math.round(hue)}\r\n style={{left: (hue/359*100).toString() + \"%\"}}\r\n onKeyDown={(e) => this.handleHueKeyDown(e)}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dnn-color-fields\">\r\n <div class=\"dnn-rgb-color-fields\" style={{display: this.rgbDisplay}}>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>R</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" step=\"1\" class=\"red\" value={red} aria-label=\"red value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'red')}\r\n />\r\n </div>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>G</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" class=\"green\" value={green} aria-label=\"green value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'green')}\r\n />\r\n </div>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>B</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" class=\"blue\" value={blue} aria-label=\"blue value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'blue')}\r\n />\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"rgb-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"switch to hexadecimal value entry\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-hsl-color-fields\" style={{display: this.hslDisplay}}>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>H</label>\r\n <input type=\"number\" min=\"0\" max=\"359\" step={1} value={Math.round(hue)} aria-label=\"Hue\"\r\n onChange={(e) => this.handleHSLChange(e, 'hue')}\r\n />\r\n </div>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>S</label>\r\n <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(saturation*100)} aria-label=\"Saturation\"\r\n onChange={(e) => this.handleHSLChange(e, 'saturation')}\r\n />\r\n </div>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>L</label>\r\n <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(lightness*100)} aria-label=\"Lightness\"\r\n onChange={(e) => this.handleHSLChange(e, 'lightness')}\r\n />\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"hsl-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"Switch to red, green, blue entry mode\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-hex-color-fields\" style={{display: this.hexDisplay}}>\r\n <div class=\"dnn-hex-color-field\">\r\n <label>HEX</label>\r\n <div class=\"hex-input\">\r\n <input type=\"text\" aria-label=\"Hexadecimal value\"\r\n value={this.getHex()}\r\n onChange={e => this.handleHexChange((e.target as HTMLInputElement).value)}\r\n />\r\n <button\r\n class=\"copy\"\r\n aria-label=\"copy value\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"hex-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"Switch to hue saturation lightness values\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
package/dist/dnn/dnn-color-picker.system.entry.js ADDED
@@ -0,0 +1,12 @@
1
+ System.register(["./index-a3a55419.system.js","./debounce-eef81bf7.system.js"],(function(e){"use strict";var n,t,o,r,i;return{setters:[function(e){n=e.r;t=e.e;o=e.h;r=e.g},function(e){i=e.D}],execute:function(){
2
+ /** Color utility class with hsl and rgb converters
3
+ * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV
4
+ * @copyright Copyright (c) .NET Foundation. All rights reserved.
5
+ * @license MIT
6
+ */
7
+ var l=function(){function e(){this._hue=0;this._saturation=0;this._lightness=0}Object.defineProperty(e.prototype,"hue",{get:function(){return this._hue},set:function(e){if(e<0){e=0}if(e>359){e=359}this._hue=e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"saturation",{get:function(){return this._saturation},set:function(e){if(e<0){e=0}if(e>1){e=1}this._saturation=e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"lightness",{get:function(){return this._lightness},set:function(e){if(e<0){e=0}if(e>1){e=1}this._lightness=e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"red",{get:function(){return this.getRGB().red},set:function(e){this.setHSL(e,this.green,this.blue)},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"green",{get:function(){return this.getRGB().green},set:function(e){this.setHSL(this.red,e,this.blue)},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"blue",{get:function(){return this.getRGB().blue},set:function(e){this.setHSL(this.red,this.green,e)},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"hex",{get:function(){var e=this.getHex(this.red);var n=this.getHex(this.green);var t=this.getHex(this.blue);return e+n+t},set:function(e){this.red=parseInt(e.substr(0,2));this.green=parseInt(e.substr(2,2));this.blue=parseInt(e.substr(4,2))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"contrastColor",{get:function(){var e=(this.red*299+this.green*587+this.blue*114)/1e3;if(e>127){return"000000"}return"FFFFFF"},enumerable:false,configurable:true});e.prototype.getRGB=function(){var e=(1-Math.abs(2*this._lightness-1))*this.saturation;var n=this._hue/60;var t=e*(1-Math.abs(n%2-1));var o=0,r=0,i=0;if(0<=n&&n<=1){o=e;r=t}else if(1<=n&&n<=2){r=e;o=t}else if(2<=n&&n<=3){r=e;i=t}else if(3<=n&&n<=4){i=e;r=t}else if(4<=n&&n<=5){i=e;o=t}else if(5<=n&&n<=6){o=e;i=t}var l=this._lightness-e/2;return{red:Math.round((o+l)*255),green:Math.round((r+l)*255),blue:Math.round((i+l)*255)}};e.prototype.setHSL=function(e,n,t){var o=e/255,r=n/255,i=t/255;var l=Math.min(o,r,i);var s=Math.max(o,r,i);var a=s-l;var d=0,c=0,u=0;if(a===0){d=0}else if(s===o){d=60*((r-i)/a)}else if(s===r){d=60*(2+(i-o)/a)}else if(s===i){d=60*(4+(o-r)/a)}if(d<0){d=d+360}if(d>359){d=359}u=(s+l)/2;if(s===0||l===1){c=0}else{c=(s-u)/Math.min(u,1-u)}this._hue=d;this._saturation=c;this._lightness=u};e.prototype.getHex=function(e){var n=e.toString(16);if(n.length<2){n="0"+n}return n};return e}();var s='.dnn-color-picker{padding:15px;max-width:400px}.dnn-color-picker .dnn-color-sliders{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:200px}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b{border:1px solid #ccc;padding-bottom:var(--color-box-height, 50%);position:relative;background-color:red}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:-webkit-gradient(linear, left top, right top, from(white), to(red));background:linear-gradient(to right, white, red);mix-blend-mode:saturation}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:-webkit-gradient(linear, left top, left bottom, from(white), to(black));background:linear-gradient(to bottom, white, black);mix-blend-mode:luminosity}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button{position:absolute;bottom:calc(50% - 4px);left:calc(50% - 4px);width:8px;height:8px;z-index:3;display:block;background:none;border:none;margin-left:-4px;margin-bottom:-4px;padding:7px;background-color:#fff;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:before{content:"";position:absolute;top:-1px;left:-1px;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:after{content:"";position:absolute;top:0px;left:0px;border-radius:50%;width:10px;height:10px;border:2px solid #ccc}.dnn-color-picker .dnn-color-sliders .dnn-color-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:15px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-result{-ms-flex-direction:column;flex-direction:column;width:50px;height:50px;border-radius:50%;background:red}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue{-ms-flex:auto;flex:auto;margin-left:10px;height:16px;border:1px solid #ccc;position:relative;background:-webkit-gradient(linear, left top, right top, color-stop(0, #f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#f00));background:linear-gradient(to right, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button{width:10px;height:20px;position:absolute;top:-2px;left:calc(50% - 4px);border:0;padding:0;background-color:transparent;padding-left:-8px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button:before{content:"";position:absolute;top:-2px;left:0px;border-radius:3px;width:100%;height:100%;border:1px solid #ccc;background-color:#fff}.dnn-color-picker .dnn-color-fields{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button{background-color:transparent;border:none}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button svg{width:3em;height:3em;pointer-events:none;outline:none}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.red{border-color:red}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.green{border-color:green}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.blue{border-color:blue}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input{position:relative;border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.323em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input input{border:0;padding:0;margin:0;width:100%;height:100%;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button{position:absolute;height:100%;top:0;right:1em;background-color:transparent;border:0;padding:0;margin:0}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button svg{min-width:1em}';
8
+ /** Reusable DNN UI component to pick a color
9
+ * @copyright Copyright (c) .NET Foundation. All rights reserved.
10
+ * @license MIT
11
+ */var a=undefined&&undefined.__decorate||function(e,n,t,o){var r=arguments.length,i=r<3?n:o===null?o=Object.getOwnPropertyDescriptor(n,t):o,l;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(e,n,t,o);else for(var s=e.length-1;s>=0;s--)if(l=e[s])i=(r<3?l(i):r>3?l(n,t,i):l(n,t))||i;return r>3&&i&&Object.defineProperty(n,t,i),i};var d=e("dnn_color_picker",function(){function e(e){var o=this;n(this,e);this.colorChanged=t(this,"colorChanged",7);this.color="FFFFFF";this.colorBoxHeight="50%";this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";this.handleSaturationLightnessMouseDown=function(e){e.preventDefault();o.handleDragLightnessSaturation(e);window.addEventListener("mousemove",o.handleDragLightnessSaturation);window.addEventListener("mouseup",o.handleSaturationLightnessMouseUp)};this.handleDragLightnessSaturation=function(e){var n=o.saturationLightnessBox.getBoundingClientRect();var t=e.clientX-n.left;if(t<0){t=0}if(t>n.width){t=n.width}t=t/n.width;var r=e.clientY-n.top;if(r<0){r=0}if(r>n.height){r=n.height}r=1-r/n.height;var i=new l;i.hue=o.currentColor.hue;i.saturation=t;i.lightness=r;o.currentColor=i};this.handleSaturationLightnessMouseUp=function(){window.removeEventListener("mousemove",o.handleDragLightnessSaturation);window.removeEventListener("mouseup",o.handleSaturationLightnessMouseUp)};this.handleHueMouseDown=function(e){e.preventDefault();o.handleDragHue(e);window.addEventListener("mousemove",o.handleDragHue);window.addEventListener("mouseup",o.handleHueMouseUp)};this.handleHueMouseUp=function(){window.removeEventListener("mousemove",o.handleDragHue);window.removeEventListener("mouseup",o.handleHueMouseUp)};this.handleDragHue=function(e){var n=o.hueRange.getBoundingClientRect();var t=e.clientX-n.left;if(t<0){t=0}if(t>n.width){t=n.width}t=t/n.width*360;var r=new l;r.hue=t;r.saturation=o.currentColor.saturation;r.lightness=o.currentColor.lightness;o.currentColor=r};this.handleComponentValueChange=function(e,n){var t=parseInt(e.target.value);if(isNaN(t)){return}var r=new l;if(t<0){t=0}if(t>255){t=255}var i=o.currentColor.red;var s=o.currentColor.green;var a=o.currentColor.blue;switch(n){case"red":i=t;break;case"green":s=t;break;case"blue":a=t;break;default:break}r.green=s;r.red=i;r.blue=a;o.currentColor=r};this.handleHSLChange=function(e,n){var t=parseInt(e.target.value);if(isNaN(t)){return}var r=new l;if(t!=null){var i=o.currentColor.hue;var s=o.currentColor.saturation;var a=o.currentColor.lightness;switch(n){case"hue":if(t<0){t=0}if(t>359){t=0}i=t;break;case"saturation":if(t<0){t=0}if(t>100){t=100}s=t/100;break;case"lightness":if(t<0){t=0}if(t>100){t=100}a=t/100;break;default:break}r.hue=i;r.saturation=s;r.lightness=a;o.currentColor=r}};this.handleSaturationLightnessKeyDown=function(e){var n=new l;n.hue=o.currentColor.hue;n.saturation=o.currentColor.saturation;n.lightness=o.currentColor.lightness;var t=.01;if(e.shiftKey){t=.1}switch(e.key){case"ArrowUp":n.lightness+=t;break;case"ArrowDown":n.lightness-=t;break;case"ArrowLeft":n.saturation-=t;break;case"ArrowRight":n.saturation+=t;default:break}o.currentColor=n};this.handleHueKeyDown=function(e){var n=new l;n.hue=o.currentColor.hue;n.saturation=o.currentColor.saturation;n.lightness=o.currentColor.lightness;var t=1;if(e.shiftKey){t=10}switch(e.key){case"ArrowLeft":n.hue-=t;break;case"ArrowRight":n.hue+=t;default:break}o.currentColor=n}}e.prototype.colorChangedHandler=function(e){this.colorChanged.emit(e)};e.prototype.handeCurrentColorChanged=function(e){this.colorChangedHandler(e)};e.prototype.componentWillLoad=function(){this.handleHexChange(this.color)};e.prototype.componentDidLoad=function(){this.el.style.setProperty("--color-box-height",this.colorBoxHeight.toString())};e.prototype.getHex=function(){return this.getDoublet(this.currentColor.red)+this.getDoublet(this.currentColor.green)+this.getDoublet(this.currentColor.blue)};e.prototype.getContrast=function(){return this.currentColor.contrastColor};e.prototype.getDoublet=function(e){var n=e.toString(16).toUpperCase();if(n.length===1){return"0"+n}return n};e.prototype.handleHexChange=function(e){var n=new l;if(e.match(/^(?:[\da-f]{3}|[\da-f]{6})$/i).length>0){if(e.length===3){var t=e[0]+e[0]+e[1]+e[1]+e[2]+e[2];e=t}n.red=parseInt(e.substr(0,2),16);n.green=parseInt(e.substr(2,2),16);n.blue=parseInt(e.substr(4,2),16)}else{n.red=this.currentColor.red;n.green=this.currentColor.green;n.blue=this.currentColor.blue}this.currentColor=n};e.prototype.switchColorMode=function(e){switch(e.target.id){case"rgb-switch":this.rgbDisplay="none";this.hslDisplay="none";this.hexDisplay="flex";break;case"hex-switch":this.rgbDisplay="none";this.hslDisplay="flex";this.hexDisplay="none";break;case"hsl-switch":this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";break;default:this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none"}};e.prototype.render=function(){var e=this;var n=this.currentColor.hue;var t=this.currentColor.saturation;var r=this.currentColor.lightness;var i=this.currentColor.red;var l=this.currentColor.green;var s=this.currentColor.blue;return o("div",{class:"dnn-color-picker"},o("div",{class:"dnn-color-sliders"},o("div",{class:"dnn-color-s-b",ref:function(n){return e.saturationLightnessBox=n},style:{backgroundColor:"hsl("+n+",100%,50%)"},onMouseDown:this.handleSaturationLightnessMouseDown.bind(this)},o("button",{class:"dnn-s-b-picker","aria-label":"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%",role:"slider","aria-valuemin":"0","aria-valuemax":"100","aria-valuetext":"Saturation: "+Math.round(this.currentColor.saturation*100)+"%, Lightness: "+Math.round(this.currentColor.lightness*100)+"%",style:{left:Math.round(t*100)+"%",bottom:Math.round(r*100)+"%"},onKeyDown:function(n){return e.handleSaturationLightnessKeyDown(n)}})),o("div",{class:"dnn-color-bar"},o("div",{class:"dnn-color-result",style:{backgroundColor:"#"+this.getHex(),boxShadow:"0 0 2px 1px "+"#"+this.getContrast()}}),o("div",{class:"dnn-color-hue",ref:function(n){return e.hueRange=n},onMouseDown:this.handleHueMouseDown.bind(this)},o("button",{class:"dnn-hue-picker","aria-label":"Press left or right to adjust hue, hold shift to move by 10 degrees",role:"slider","aria-valuemin":"0","aria-valuemax":"359","aria-valuenow":Math.round(n),style:{left:(n/359*100).toString()+"%"},onKeyDown:function(n){return e.handleHueKeyDown(n)}})))),o("div",{class:"dnn-color-fields"},o("div",{class:"dnn-rgb-color-fields",style:{display:this.rgbDisplay}},o("div",{class:"dnn-rgb-color-field"},o("label",null,"R"),o("input",{type:"number",min:"0",max:"255",step:"1",class:"red",value:i,"aria-label":"red value",onChange:function(n){return e.handleComponentValueChange(n,"red")}})),o("div",{class:"dnn-rgb-color-field"},o("label",null,"G"),o("input",{type:"number",min:"0",max:"255",class:"green",value:l,"aria-label":"green value",onChange:function(n){return e.handleComponentValueChange(n,"green")}})),o("div",{class:"dnn-rgb-color-field"},o("label",null,"B"),o("input",{type:"number",min:"0",max:"255",class:"blue",value:s,"aria-label":"blue value",onChange:function(n){return e.handleComponentValueChange(n,"blue")}})),o("div",{class:"dnn-color-mode-switch"},o("button",{id:"rgb-switch",onClick:this.switchColorMode.bind(this),"aria-label":"switch to hexadecimal value entry"},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))),o("div",{class:"dnn-hsl-color-fields",style:{display:this.hslDisplay}},o("div",{class:"dnn-hsl-color-field"},o("label",null,"H"),o("input",{type:"number",min:"0",max:"359",step:1,value:Math.round(n),"aria-label":"Hue",onChange:function(n){return e.handleHSLChange(n,"hue")}})),o("div",{class:"dnn-hsl-color-field"},o("label",null,"S"),o("input",{type:"number",min:"0",max:"100",step:1,value:Math.round(t*100),"aria-label":"Saturation",onChange:function(n){return e.handleHSLChange(n,"saturation")}})),o("div",{class:"dnn-hsl-color-field"},o("label",null,"L"),o("input",{type:"number",min:"0",max:"100",step:1,value:Math.round(r*100),"aria-label":"Lightness",onChange:function(n){return e.handleHSLChange(n,"lightness")}})),o("div",{class:"dnn-color-mode-switch"},o("button",{id:"hsl-switch",onClick:this.switchColorMode.bind(this),"aria-label":"Switch to red, green, blue entry mode"},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))),o("div",{class:"dnn-hex-color-fields",style:{display:this.hexDisplay}},o("div",{class:"dnn-hex-color-field"},o("label",null,"HEX"),o("div",{class:"hex-input"},o("input",{type:"text","aria-label":"Hexadecimal value",value:this.getHex(),onChange:function(n){return e.handleHexChange(n.target.value)}}),o("button",{class:"copy","aria-label":"copy value"},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"}))))),o("div",{class:"dnn-color-mode-switch"},o("button",{id:"hex-switch",onClick:this.switchColorMode.bind(this),"aria-label":"Switch to hue saturation lightness values"},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"})))))))};Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{currentColor:["handeCurrentColorChanged"]}},enumerable:false,configurable:true});return e}());a([i(100)],d.prototype,"colorChangedHandler",null);d.style=s}}}));
12
+ //# sourceMappingURL=dnn-color-picker.system.entry.js.map
package/dist/dnn/dnn-color-picker.system.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["src/utilities/colorInfo.ts","src/components/dnn-color-picker/dnn-color-picker.scss?tag=dnn-color-picker&encapsulation=shadow","src/components/dnn-color-picker/dnn-color-picker.tsx"],"names":["ColorInfo","this","_hue","_saturation","_lightness","Object","defineProperty","prototype","value","getRGB","red","setHSL","green","blue","r","getHex","g","b","parseInt","substr","brightness","chroma","Math","abs","saturation","quadrant","offset","bias","round","min","max","diff","h","s","l","hex","toString","length","dnnColorPickerCss","DnnColorPicker","exports","class_1","hostRef","_this","color","colorBoxHeight","rgbDisplay","hslDisplay","hexDisplay","handleSaturationLightnessMouseDown","e","preventDefault","handleDragLightnessSaturation","window","addEventListener","handleSaturationLightnessMouseUp","rect","saturationLightnessBox","getBoundingClientRect","x","clientX","left","width","y","clientY","top","height","newColor","hue","currentColor","lightness","removeEventListener","handleHueMouseDown","handleDragHue","handleHueMouseUp","hueRange","handleComponentValueChange","channel","target","isNaN","handleHSLChange","component","h_1","handleSaturationLightnessKeyDown","shiftKey","key","handleHueKeyDown","colorChangedHandler","colorChanged","emit","handeCurrentColorChanged","newValue","componentWillLoad","handleHexChange","componentDidLoad","el","style","setProperty","getDoublet","getContrast","contrastColor","valueString","toUpperCase","match","expanded","switchColorMode","id","render","class","ref","element","backgroundColor","onMouseDown","bind","aria-label","role","aria-valuemin","aria-valuemax","aria-valuetext","bottom","onKeyDown","boxShadow","aria-valuenow","display","type","step","onChange","onClick","xmlns","viewBox","fill","d","__decorate","Debounce"],"mappings":"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","sourcesContent":["/** Color utility class with hsl and rgb converters\r\n * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nexport class ColorInfo{\r\n\r\n private _hue: number = 0;\r\n /** gets the color hue\r\n * @returns a number between 0 and 359, could contain decimals\r\n */\r\n get hue() { return this._hue; }\r\n set hue(value: number){\r\n if (value < 0) { value = 0; }\r\n if (value > 359) { value = 359; }\r\n this._hue = value;\r\n }\r\n\r\n private _saturation: number = 0;\r\n /** gets the color saturation\r\n * @returns a number between 0 and 1, could contain decimals\r\n */\r\n get saturation() { return this._saturation; }\r\n set saturation(value: number) {\r\n if (value < 0) { value = 0; }\r\n if (value > 1) { value = 1; }\r\n this._saturation = value;\r\n }\r\n\r\n private _lightness: number = 0;\r\n /** gets the color lightness\r\n * @returns a number between 0 and 1, could contain decimals\r\n */\r\n get lightness() { return this._lightness; }\r\n set lightness(value: number) {\r\n if (value < 0) { value = 0; }\r\n if (value > 1) { value = 1; }\r\n this._lightness = value;\r\n }\r\n\r\n /** gets or sets the red component \r\n * @returns an integer between 0 and 255\r\n */\r\n get red() {\r\n return this.getRGB().red;\r\n }\r\n set red(value) {\r\n this.setHSL(value, this.green, this.blue);\r\n }\r\n\r\n /** gets or sets the green component\r\n * @returns an integer between 0 and 255\r\n */\r\n get green() {\r\n return this.getRGB().green;\r\n }\r\n set green(value: number) {\r\n this.setHSL(this.red, value, this.blue);\r\n }\r\n\r\n /** gets or sets the blue component\r\n * @returns an integer between 0 and 255\r\n */\r\n get blue() {\r\n return this.getRGB().blue;\r\n }\r\n set blue(value: number) {\r\n this.setHSL(this.red, this.green, value);\r\n }\r\n\r\n /** gets or sets the hex color value, expresses as 6 hexadecimal characters.\r\n * @returns hex representation of the color\r\n */\r\n get hex() {\r\n var r = this.getHex(this.red);\r\n var g = this.getHex(this.green);\r\n var b = this.getHex(this.blue);\r\n return r + g + b;\r\n }\r\n set hex(value: string){\r\n this.red = parseInt(value.substr(0,2));\r\n this.green = parseInt(value.substr(2,2));\r\n this.blue = parseInt(value.substr(4,2));\r\n }\r\n\r\n /** gets white or black color that is a good oposite to the current color\r\n * @returns - \"000000\" or \"FFFFFF\"\r\n */\r\n get contrastColor() {\r\n const brightness = (this.red*299 + this.green*587 + this.blue*114) / 1000\r\n if (brightness > 127){\r\n return \"000000\";\r\n }\r\n return \"FFFFFF\";\r\n }\r\n\r\n private getRGB() {\r\n const chroma = (1 - Math.abs((2 * this._lightness) - 1)) * this.saturation;\r\n // find the quandrant of the hue\r\n const quadrant = this._hue / 60;\r\n // calculate the offset from the quandrant center\r\n const offset = chroma * (1 - Math.abs(quadrant % 2 - 1));\r\n\r\n // Apply the chroma to the primary component and the offset to the 2nd most important component\r\n let r = 0, g = 0, b = 0;\r\n if (0 <= quadrant && quadrant <= 1) {\r\n r = chroma; g = offset; // red to yellow\r\n } else if (1 <= quadrant && quadrant <= 2) {\r\n g = chroma; r = offset; // yellow to green\r\n } else if (2 <= quadrant && quadrant <= 3) {\r\n g = chroma; b = offset; // green to cyan\r\n } else if (3 <= quadrant && quadrant <= 4) {\r\n b = chroma; g = offset; // cyan to blue\r\n } else if (4 <= quadrant && quadrant <= 5) {\r\n b = chroma; r = offset; // blue to magenta\r\n } else if (5 <= quadrant && quadrant <= 6) {\r\n r = chroma; b = offset; // magenta to red\r\n }\r\n // calculate the bias to add to all channels to match the lightness\r\n const bias = this._lightness - (chroma / 2);\r\n\r\n return {\r\n red: Math.round((r + bias) * 255),\r\n green: Math.round((g + bias) * 255),\r\n blue: Math.round((b + bias) * 255)\r\n }\r\n }\r\n\r\n private setHSL(red: number, green: number, blue: number) {\r\n // GENERAL DATA\r\n // all math is based on values from 0 to 1\r\n const r = red/255, g = green/255, b = blue/255;\r\n // we need to max, min and the difference between them to derive hsl\r\n const min = Math.min(r, g, b);\r\n const max = Math.max(r, g, b);\r\n const diff = max - min;\r\n let h = 0, s = 0, l = 0;\r\n\r\n // HUE\r\n if (diff === 0) { // neutral\r\n h = 0;\r\n } else if (max === r) { // red (magenta to yellow range)\r\n h = 60 * ((g - b) / diff);\r\n } else if (max === g) { // green (yellow to cyan range)\r\n h = 60 * (2 + ((b - r) / diff));\r\n } else if (max === b) { // blue (cyan to magenta range)\r\n h = 60 * (4 + ((r - g) / diff));\r\n }\r\n if (h < 0) { h = h + 360} // ensures positive hues only\r\n if (h > 359) { h = 359} // ensures we never return 360 for simplicity since it is the same as 0\r\n\r\n // LIGHTNESS\r\n l = (max + min) / 2;\r\n\r\n // SATURATION\r\n if (max === 0 || min === 1) { // pure black or white have no saturation\r\n s = 0;\r\n } else {\r\n s = (max - l) / (Math.min(l, 1 - l));\r\n }\r\n\r\n this._hue = h;\r\n this._saturation = s;\r\n this._lightness = l;\r\n }\r\n\r\n private getHex(value: number){\r\n var hex = value.toString(16);\r\n if (hex.length < 2){\r\n hex = \"0\" + hex;\r\n }\r\n return hex;\r\n }\r\n} ",".dnn-color-picker{\r\n padding: 15px;\r\n max-width: 400px;\r\n .dnn-color-sliders{\r\n display:flex;\r\n flex-direction: column;\r\n min-width: 200px;\r\n .dnn-color-s-b{\r\n border: 1px solid #ccc;\r\n padding-bottom: var(--color-box-height, 50%);\r\n position: relative;\r\n background-color: red;\r\n &:before{\r\n content: '';\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height:100%;\r\n z-index:1;\r\n background: linear-gradient(to right, white, red);\r\n mix-blend-mode: saturation;\r\n }\r\n &:after{\r\n content: '';\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height:100%;\r\n z-index:2;\r\n background: linear-gradient(to bottom, white, black);\r\n mix-blend-mode: luminosity;\r\n }\r\n button{\r\n position: absolute;\r\n bottom: calc(50% - 4px);\r\n left: calc(50% - 4px);\r\n width: 8px;\r\n height: 8px;\r\n z-index: 3;\r\n display: block;\r\n background: none;\r\n border: none;\r\n margin-left: -4px;\r\n margin-bottom: -4px;\r\n padding: 7px;\r\n background-color: #fff;\r\n border-radius: 50%;\r\n &:before{\r\n content:'';\r\n position: absolute;\r\n top: -1px;\r\n left: -1px;\r\n border-radius: 50%;\r\n }\r\n &:after{\r\n content:'';\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n border-radius: 50%;\r\n width: 10px;\r\n height: 10px;\r\n border: 2px solid #ccc;\r\n }\r\n } \r\n }\r\n .dnn-color-bar {\r\n display: flex;\r\n align-items: center;\r\n margin-top: 15px;\r\n .dnn-color-result {\r\n flex-direction: column;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n background: red;\r\n }\r\n .dnn-color-hue{\r\n flex: auto;\r\n margin-left: 10px;\r\n height: 16px;\r\n border: 1px solid #ccc;\r\n position: relative;\r\n background: linear-gradient(\r\n to right, \r\n #f00 0, \r\n #ff0 17%,\r\n #0f0 33%,\r\n #0ff 50%,\r\n #00f 67%,\r\n #f0f 84%,\r\n #f00 100%\r\n );\r\n button{\r\n width: 10px;\r\n height: 20px;\r\n position: absolute;\r\n top: -2px;\r\n left: calc(50% - 4px);\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n padding-left: -8px;\r\n &:before{\r\n content:'';\r\n position: absolute;\r\n top: -2px;\r\n left: 0px;\r\n border-radius: 3px;\r\n width: 100%;\r\n height: 100%;\r\n border: 1px solid #ccc;\r\n background-color: #fff;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .dnn-color-fields{\r\n display:flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n .dnn-color-mode-switch {\r\n display: flex;\r\n align-items: flex-end;\r\n padding: .5em;\r\n button {\r\n background-color: transparent;\r\n border: none;\r\n svg {\r\n width: 3em;\r\n height: 3em;\r\n pointer-events: none;\r\n outline: none;\r\n }\r\n }\r\n }\r\n .dnn-rgb-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-rgb-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n input{\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.5em;\r\n padding-left: 1.3em;\r\n text-align: center;\r\n &.red{\r\n border-color: red;\r\n }\r\n &.green{\r\n border-color: green; \r\n }\r\n &.blue{\r\n border-color: blue;\r\n } \r\n }\r\n }\r\n }\r\n .dnn-hsl-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-hsl-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n input{\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.5em;\r\n padding-left: 1.3em;\r\n text-align: center;\r\n }\r\n }\r\n }\r\n .dnn-hex-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-hex-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n .hex-input{\r\n position: relative;\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.323em;\r\n text-align: center;\r\n input{\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n width:100%;\r\n height:100%;\r\n text-align:center;\r\n }\r\n button{\r\n position: absolute;\r\n height: 100%;\r\n top: 0;\r\n right: 1em;\r\n background-color: transparent;\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n svg{\r\n min-width: 1em;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n} ","/** Reusable DNN UI component to pick a color\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nimport { Component, h, State, Element, Prop, EventEmitter, Event, Watch } from \"@stencil/core\";\r\nimport { ColorInfo } from '../../utilities/colorInfo';\r\nimport { Debounce } from \"../../utilities/debounce\";\r\n\r\n/** Color Picker for Dnn */\r\n@Component({\r\n tag: 'dnn-color-picker',\r\n styleUrl: 'dnn-color-picker.scss',\r\n shadow: true\r\n})\r\nexport class DnnColorPicker {\r\n\r\n @Element() el: HTMLDnnColorPickerElement;\r\n\r\n /** Sets the initial color, must be a valid 8 character hexadecimal string without the # sign. */\r\n @Prop() color: string = \"FFFFFF\";\r\n\r\n /** Sets the width-height ratio of the color picker saturation-lightness box.\r\n * @example 100% renders a perfect square\r\n */\r\n @Prop() colorBoxHeight: string = \"50%\";\r\n \r\n @State() currentColor: ColorInfo;\r\n @State() rgbDisplay: string = \"flex\";\r\n @State() hslDisplay: string = \"none\";\r\n @State() hexDisplay: string = \"none\";\r\n\r\n /** Fires up when the color is changed and emits a ColorInfo object\r\n * @see ../../utilities/colorInfo.ts\r\n */\r\n @Event() colorChanged: EventEmitter<ColorInfo>;\r\n\r\n @Debounce(100)\r\n private colorChangedHandler(color: ColorInfo) {\r\n this.colorChanged.emit(color);\r\n }\r\n\r\n @Watch(\"currentColor\")\r\n handeCurrentColorChanged(newValue: ColorInfo){\r\n this.colorChangedHandler(newValue);\r\n }\r\n \r\n private saturationLightnessBox?: HTMLDivElement;\r\n private hueRange?: HTMLDivElement;\r\n\r\n\r\n componentWillLoad() {\r\n this.handleHexChange(this.color);\r\n }\r\n\r\n componentDidLoad() {\r\n (this.el as unknown as HTMLElement).style.setProperty(\"--color-box-height\", this.colorBoxHeight.toString());\r\n }\r\n \r\n private getHex() {\r\n return this.getDoublet(this.currentColor.red) + this.getDoublet(this.currentColor.green) + this.getDoublet(this.currentColor.blue);\r\n }\r\n\r\n private getContrast() {\r\n return this.currentColor.contrastColor;\r\n }\r\n\r\n private getDoublet(value: number){\r\n const valueString = value.toString(16).toUpperCase();\r\n if (valueString.length === 1){\r\n return '0' + valueString;\r\n }\r\n return valueString;\r\n }\r\n\r\n private handleSaturationLightnessMouseDown = (e) => {\r\n e.preventDefault();\r\n this.handleDragLightnessSaturation(e);\r\n window.addEventListener('mousemove', this.handleDragLightnessSaturation);\r\n window.addEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n }\r\n\r\n private handleDragLightnessSaturation = (e) => {\r\n const rect = this.saturationLightnessBox.getBoundingClientRect(); \r\n\r\n let x = e.clientX - rect.left; \r\n if (x < 0) { x = 0}\r\n if (x > rect.width) { x = rect.width}\r\n x = x/rect.width;\r\n\r\n let y = e.clientY - rect.top;\r\n if (y < 0) { y = 0}\r\n if (y > rect.height) { y = rect.height}\r\n y = 1 - (y/rect.height);\r\n\r\n const newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = x;\r\n newColor.lightness = y;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleSaturationLightnessMouseUp = () => {\r\n window.removeEventListener('mousemove', this.handleDragLightnessSaturation);\r\n window.removeEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n }\r\n\r\n private handleHueMouseDown = (e) => {\r\n e.preventDefault();\r\n this.handleDragHue(e);\r\n window.addEventListener('mousemove', this.handleDragHue);\r\n window.addEventListener('mouseup', this.handleHueMouseUp); \r\n }\r\n\r\n private handleHueMouseUp = () => {\r\n window.removeEventListener('mousemove', this.handleDragHue);\r\n window.removeEventListener('mouseup', this.handleHueMouseUp); \r\n }\r\n\r\n private handleDragHue = (e) => {\r\n const rect = this.hueRange.getBoundingClientRect(); \r\n\r\n let x = e.clientX - rect.left;\r\n if (x < 0) { x = 0}\r\n if (x > rect.width) { x = rect.width}\r\n x = x/rect.width*360; \r\n\r\n const newColor = new ColorInfo();\r\n newColor.hue = x;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleComponentValueChange = (e, channel) => {\r\n let value = parseInt(e.target.value);\r\n if (isNaN(value)) { return }\r\n const newColor = new ColorInfo();\r\n if (value < 0) { value = 0; }\r\n if (value > 255) { value = 255; }\r\n let r = this.currentColor.red;\r\n let g = this.currentColor.green;\r\n let b = this.currentColor.blue;\r\n switch (channel) {\r\n case 'red':\r\n r = value;\r\n break;\r\n case 'green':\r\n g = value;\r\n break;\r\n case 'blue':\r\n b = value;\r\n break;\r\n default:\r\n break;\r\n }\r\n newColor.green = g;\r\n newColor.red = r;\r\n newColor.blue = b;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleHSLChange = (e, component) => { \r\n let value = parseInt(e.target.value);\r\n if (isNaN(value)) {return}\r\n const newColor = new ColorInfo();\r\n if (value != null) { \r\n let h = this.currentColor.hue;\r\n let s = this.currentColor.saturation;\r\n let l = this.currentColor.lightness;\r\n switch (component) {\r\n case \"hue\":\r\n if (value < 0) { value = 0}\r\n if (value > 359) { value = 0}\r\n h = value;\r\n break;\r\n case \"saturation\":\r\n if (value < 0) { value = 0}\r\n if (value > 100) { value = 100}\r\n s = value / 100;\r\n break;\r\n case \"lightness\":\r\n if (value < 0) { value = 0}\r\n if (value > 100) { value = 100}\r\n l = value / 100;\r\n break; \r\n default:\r\n break; \r\n }\r\n newColor.hue = h;\r\n newColor.saturation = s;\r\n newColor.lightness = l;\r\n this.currentColor = newColor;\r\n }\r\n }\r\n\r\n private handleHexChange(value: string){\r\n const newColor = new ColorInfo();\r\n if (value.match(/^(?:[\\da-f]{3}|[\\da-f]{6})$/i).length > 0) {\r\n if (value.length === 3){\r\n let expanded = value[0] + value[0] + value[1] + value[1] + value[2] + value [2];\r\n value = expanded;\r\n }\r\n newColor.red = parseInt(value.substr(0,2), 16);\r\n newColor.green = parseInt(value.substr(2,2), 16);\r\n newColor.blue = parseInt(value.substr(4,2), 16);\r\n }\r\n else{\r\n newColor.red = this.currentColor.red;\r\n newColor.green = this.currentColor.green;\r\n newColor.blue = this.currentColor.blue;\r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n private switchColorMode(e) {\r\n switch(e.target.id) {\r\n case \"rgb-switch\":\r\n this.rgbDisplay = \"none\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"flex\";\r\n break;\r\n case \"hex-switch\":\r\n this.rgbDisplay = \"none\";\r\n this.hslDisplay = \"flex\";\r\n this.hexDisplay = \"none\";\r\n break;\r\n case \"hsl-switch\":\r\n this.rgbDisplay = \"flex\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"none\";\r\n break;\r\n default:\r\n this.rgbDisplay = \"flex\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"none\";\r\n }\r\n }\r\n\r\n private handleSaturationLightnessKeyDown = (e) => { \r\n let newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n\r\n let value = 0.01;\r\n if (e.shiftKey) { value = 0.1 ;}\r\n\r\n switch (e.key) {\r\n case \"ArrowUp\":\r\n newColor.lightness += value;\r\n break;\r\n case \"ArrowDown\":\r\n newColor.lightness -= value;\r\n break;\r\n case \"ArrowLeft\":\r\n newColor.saturation -= value;\r\n break;\r\n case \"ArrowRight\":\r\n newColor.saturation += value;\r\n default:\r\n break; \r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleHueKeyDown = (e) => {\r\n let newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n\r\n let value = 1;\r\n if (e.shiftKey) { value = 10}\r\n\r\n switch (e.key) {\r\n case \"ArrowLeft\":\r\n newColor.hue -= value;\r\n break;\r\n case \"ArrowRight\":\r\n newColor.hue += value;\r\n default:\r\n break;\r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n render() {\r\n const hue = this.currentColor.hue;\r\n const saturation = this.currentColor.saturation;\r\n const lightness = this.currentColor.lightness;\r\n const red = this.currentColor.red;\r\n const green = this.currentColor.green;\r\n const blue = this.currentColor.blue;\r\n\r\n return (\r\n <div class=\"dnn-color-picker\">\r\n <div class=\"dnn-color-sliders\">\r\n <div class=\"dnn-color-s-b\" ref={(element) => this.saturationLightnessBox = element as HTMLDivElement}\r\n style={{backgroundColor: `hsl(${hue},100%,50%)`}}\r\n onMouseDown={this.handleSaturationLightnessMouseDown.bind(this)}\r\n >\r\n <button class=\"dnn-s-b-picker\"\r\n aria-label=\"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%\"\r\n role=\"slider\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n aria-valuetext={`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`}\r\n style={{\r\n left: Math.round(saturation * 100) + \"%\",\r\n bottom: Math.round(lightness * 100) + \"%\"\r\n }}\r\n onKeyDown={(e) => this.handleSaturationLightnessKeyDown(e)}\r\n />\r\n </div>\r\n <div class=\"dnn-color-bar\">\r\n <div class=\"dnn-color-result\" style={{\r\n backgroundColor: '#' + this.getHex(),\r\n boxShadow: \"0 0 2px 1px \" + \"#\" + this.getContrast()\r\n }} \r\n />\r\n <div class=\"dnn-color-hue\"\r\n ref={(element) => this.hueRange = element as HTMLDivElement}\r\n onMouseDown={this.handleHueMouseDown.bind(this)}\r\n >\r\n <button class=\"dnn-hue-picker\"\r\n aria-label=\"Press left or right to adjust hue, hold shift to move by 10 degrees\"\r\n role=\"slider\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"359\"\r\n aria-valuenow={Math.round(hue)}\r\n style={{left: (hue/359*100).toString() + \"%\"}}\r\n onKeyDown={(e) => this.handleHueKeyDown(e)}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dnn-color-fields\">\r\n <div class=\"dnn-rgb-color-fields\" style={{display: this.rgbDisplay}}>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>R</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" step=\"1\" class=\"red\" value={red} aria-label=\"red value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'red')}\r\n />\r\n </div>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>G</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" class=\"green\" value={green} aria-label=\"green value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'green')}\r\n />\r\n </div>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>B</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" class=\"blue\" value={blue} aria-label=\"blue value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'blue')}\r\n />\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"rgb-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"switch to hexadecimal value entry\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-hsl-color-fields\" style={{display: this.hslDisplay}}>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>H</label>\r\n <input type=\"number\" min=\"0\" max=\"359\" step={1} value={Math.round(hue)} aria-label=\"Hue\"\r\n onChange={(e) => this.handleHSLChange(e, 'hue')}\r\n />\r\n </div>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>S</label>\r\n <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(saturation*100)} aria-label=\"Saturation\"\r\n onChange={(e) => this.handleHSLChange(e, 'saturation')}\r\n />\r\n </div>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>L</label>\r\n <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(lightness*100)} aria-label=\"Lightness\"\r\n onChange={(e) => this.handleHSLChange(e, 'lightness')}\r\n />\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"hsl-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"Switch to red, green, blue entry mode\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-hex-color-fields\" style={{display: this.hexDisplay}}>\r\n <div class=\"dnn-hex-color-field\">\r\n <label>HEX</label>\r\n <div class=\"hex-input\">\r\n <input type=\"text\" aria-label=\"Hexadecimal value\"\r\n value={this.getHex()}\r\n onChange={e => this.handleHexChange((e.target as HTMLInputElement).value)}\r\n />\r\n <button\r\n class=\"copy\"\r\n aria-label=\"copy value\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"hex-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"Switch to hue saturation lightness values\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"]}
package/dist/dnn/dnn-dropzone.entry.js CHANGED
@@ -1,6 +1,6 @@
1
- import { r as registerInstance, e as createEvent, h, f as Host } from './index-3e56049b.js';
1
+ import { r as registerInstance, e as createEvent, h, f as Host } from './index-b5a28c1d.js';
2
2
 
3
- const dnnDropzoneCss = ":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:flex;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:flex;justify-content:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:flex;justify-content:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:flex;flex-direction:column;align-items:center}.video-preview button{margin:1rem}";
3
+ const dnnDropzoneCss = ":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.video-preview button{margin:1rem}";
4
4
 
5
5
  let DnnDropzone = class {
6
6
  constructor(hostRef) {
package/dist/dnn/dnn-dropzone.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"dnn-dropzone.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-dropzone/dnn-dropzone.scss?tag=dnn-dropzone&encapsulation=shadow","./src/components/dnn-dropzone/dnn-dropzone.tsx"],"sourcesContent":["\r\n:host {\r\n /** \r\n * @prop --border-color: The color of the border.\r\n * @prop --border-radius: The radius of the controls borders.\r\n * @prop --drop-background-color: The color of the background when a file is dropping.\r\n */\r\n --border-color: var(--dnn-color-tertiary-contrast, lightgray);\r\n --border-radius: var(--dnn-controls-radius, 5px);\r\n --drop-background-color: var(--dnn-color-tertiary, lightblue);\r\n\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n text-align: center;\r\n border: 2px dashed var(--border-color);\r\n border-radius: var(--border-radius);\r\n padding: 1rem;\r\n transition: all 300ms ease-in-out;\r\n}\r\n\r\n:host(.dropping){\r\n background-color: var(--drop-background-color);\r\n}\r\np{\r\n margin: 0;\r\n padding: 0;\r\n}\r\nbutton{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border: 0px;\r\n margin: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n &:hover{\r\n cursor: pointer;\r\n }\r\n svg{\r\n margin-right: 0.5rem;\r\n }\r\n}\r\nlabel.upload-file{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n input{\r\n display: none;\r\n }\r\n}\r\n.video-preview{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n button{\r\n margin: 1rem;\r\n }\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-dropzone',\r\n styleUrl: 'dnn-dropzone.scss',\r\n shadow: true,\r\n})\r\nexport class DnnDropzone {\r\n /** Localization strings */\r\n @Prop() resx:{\r\n dragAndDropFile: string;\r\n capture: string;\r\n or: string;\r\n takePicture: string;\r\n uploadFile: string;\r\n } = {\r\n dragAndDropFile: \"Drag and drop a file\",\r\n capture: \"Capture\",\r\n or: \"or\",\r\n takePicture: \"Take a picture\",\r\n uploadFile: \"Upload a file\",\r\n }\r\n\r\n /** A list of allowed file extensions.\r\n * If not specified, any file is allowed.\r\n * Ex: [\"jpg\", \"jped\", \"gif\", \"png\"]\r\n */\r\n @Prop() allowedExtensions: string[];\r\n\r\n /**\r\n * If true, will allow the user to take a snapshot\r\n * using the device camera. (only works over https).\r\n */\r\n @Prop() allowCameraMode: boolean = false;\r\n\r\n /**\r\n * Specifies the jpeg quality for when the device\r\n * camera is used to generate a picture.\r\n * Needs to be a number between 0 and 1 and defaults to 0.8\r\n */\r\n @Prop() captureQuality: number = 0.8;\r\n\r\n /** Fires when file were selected. */\r\n @Event() filesSelected: EventEmitter<File[]>;\r\n \r\n @State() canTakeSnapshots: boolean = false;\r\n\r\n @State() takingPicture: boolean = false;\r\n \r\n private dropzone: HTMLElement;\r\n private fileInput: HTMLInputElement;\r\n private videoPreview: HTMLVideoElement;\r\n private videoSettings!: MediaTrackSettings;\r\n\r\n\r\n componentDidLoad() {\r\n if (this.allowCameraMode){\r\n this.checkIfBrowserCanTakeSnapshots()\r\n .then(result => this.canTakeSnapshots = result);\r\n }\r\n if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\r\n var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\r\n var extensionsList = extensionsWithDots.join(\",\");\r\n this.fileInput.accept = extensionsList;\r\n }\r\n }\r\n\r\n private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\r\n return new Promise((resolve) => {\r\n const mediaDevices = navigator.mediaDevices;\r\n if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\r\n resolve(false);\r\n }\r\n mediaDevices.enumerateDevices()\r\n .then(devices => {\r\n var result = devices.some(device => device.kind == \"videoinput\");\r\n resolve(result);\r\n });\r\n });\r\n }\r\n\r\n private getFilesFromFileList(files: FileList) : File[] {\r\n var fileList: File[] = [];\r\n for (let index = 0; index < files.length; index++) {\r\n const file = files[index];\r\n fileList.push(file);\r\n }\r\n\r\n return fileList;\r\n }\r\n\r\n private handleUploadButton(element: HTMLInputElement): void {\r\n let files = this.getFilesFromFileList(element.files);\r\n\r\n this.filesSelected.emit(files);\r\n }\r\n\r\n private handleDragOver = (event: DragEvent) => \r\n {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n event.dataTransfer.dropEffect = \"copy\";\r\n this.dropzone.classList.add(\"dropping\");\r\n };\r\n\r\n private hasInvalidExtensions(files: FileList): boolean{\r\n var hasInvalid = false;\r\n for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\r\n const file = files[fileIndex];\r\n var regex = /(?:\\.([^.]+))?$/;\r\n const fileExtension = regex.exec(file.name)[1];\r\n if (fileExtension == undefined){\r\n hasInvalid = true;\r\n }\r\n\r\n if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){\r\n hasInvalid = true;\r\n }\r\n\r\n return hasInvalid;\r\n }\r\n }\r\n\r\n private handleDrop = (dropEvent: DragEvent) => {\r\n dropEvent.stopPropagation();\r\n dropEvent.preventDefault();\r\n const files = dropEvent.dataTransfer.files;\r\n\r\n if (this.hasInvalidExtensions(files)){\r\n return;\r\n }\r\n var fileList = this.getFilesFromFileList(files);\r\n this.filesSelected.emit(fileList);\r\n };\r\n\r\n private takeSnapshot(): void {\r\n this.takingPicture = true;\r\n navigator.mediaDevices.getUserMedia({video: true, audio: false})\r\n .then(stream => {\r\n stream\r\n this.videoPreview.srcObject = stream;\r\n this.videoPreview.play()\r\n .then(() => {\r\n this.videoSettings = stream.getVideoTracks()[0].getSettings();\r\n });\r\n })\r\n .catch(error => alert(error));\r\n }\r\n\r\n private applySnapshot(): void {\r\n var canvas = document.createElement(\"canvas\");\r\n const context = canvas.getContext(\"2d\");\r\n canvas.width = this.videoSettings.width;\r\n canvas.height = this.videoSettings.height;\r\n context.drawImage(this.videoPreview, 0, 0);\r\n canvas.toBlob(blob => {\r\n var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\r\n this.takingPicture = false;\r\n \r\n var fileList = [file];\r\n this.filesSelected.emit(fileList)\r\n }, \"image/jpeg\", this.captureQuality);\r\n }\r\n \r\n render() {\r\n return (\r\n <Host\r\n ref={e => this.dropzone = e}\r\n class=\"dropzone\"\r\n onDragOver={this.handleDragOver}\r\n onDrop={this.handleDrop}\r\n onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\r\n >\r\n {!this.takingPicture &&\r\n [\r\n <p>{this.resx?.dragAndDropFile}</p>\r\n ,\r\n <p>- {this.resx?.or} -</p>\r\n ,\r\n <label class=\"upload-file\">\r\n <input\r\n type=\"file\"\r\n ref={el => this.fileInput = el}\r\n onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\r\n >\r\n </input>\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><path d=\"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z\"/></g></svg>\r\n </span>\r\n &nbsp;\r\n {this.resx?.uploadFile}\r\n </label>\r\n ,\r\n this.canTakeSnapshots &&\r\n [\r\n <p>- {this.resx?.or} -</p>\r\n ,\r\n <button\r\n onClick={() => this.takeSnapshot()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"/></svg>\r\n {this.resx?.takePicture}\r\n </button>\r\n ]\r\n ]\r\n }\r\n {this.takingPicture &&\r\n <div class=\"video-preview\">\r\n <video ref={e => this.videoPreview = e} />\r\n <button\r\n onClick={() => this.applySnapshot()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"/></svg>&nbsp;\r\n {this.resx?.capture}\r\n </button>\r\n </div>\r\n }\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n"],"version":3}
1
+ {"file":"dnn-dropzone.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-dropzone/dnn-dropzone.scss?tag=dnn-dropzone&encapsulation=shadow","./src/components/dnn-dropzone/dnn-dropzone.tsx"],"sourcesContent":["\r\n:host {\r\n /** \r\n * @prop --border-color: The color of the border.\r\n * @prop --border-radius: The radius of the controls borders.\r\n * @prop --drop-background-color: The color of the background when a file is dropping.\r\n */\r\n --border-color: var(--dnn-color-tertiary-contrast, lightgray);\r\n --border-radius: var(--dnn-controls-radius, 5px);\r\n --drop-background-color: var(--dnn-color-tertiary, lightblue);\r\n\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n text-align: center;\r\n border: 2px dashed var(--border-color);\r\n border-radius: var(--border-radius);\r\n padding: 1rem;\r\n transition: all 300ms ease-in-out;\r\n}\r\n\r\n:host(.dropping){\r\n background-color: var(--drop-background-color);\r\n}\r\np{\r\n margin: 0;\r\n padding: 0;\r\n}\r\nbutton{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border: 0px;\r\n margin: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n &:hover{\r\n cursor: pointer;\r\n }\r\n svg{\r\n margin-right: 0.5rem;\r\n }\r\n}\r\nlabel.upload-file{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n input{\r\n display: none;\r\n }\r\n}\r\n.video-preview{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n button{\r\n margin: 1rem;\r\n }\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-dropzone',\r\n styleUrl: 'dnn-dropzone.scss',\r\n shadow: true,\r\n})\r\nexport class DnnDropzone {\r\n /** Localization strings */\r\n @Prop() resx:{\r\n dragAndDropFile: string;\r\n capture: string;\r\n or: string;\r\n takePicture: string;\r\n uploadFile: string;\r\n } = {\r\n dragAndDropFile: \"Drag and drop a file\",\r\n capture: \"Capture\",\r\n or: \"or\",\r\n takePicture: \"Take a picture\",\r\n uploadFile: \"Upload a file\",\r\n }\r\n\r\n /** A list of allowed file extensions.\r\n * If not specified, any file is allowed.\r\n * Ex: [\"jpg\", \"jped\", \"gif\", \"png\"]\r\n */\r\n @Prop() allowedExtensions: string[];\r\n\r\n /**\r\n * If true, will allow the user to take a snapshot\r\n * using the device camera. (only works over https).\r\n */\r\n @Prop() allowCameraMode: boolean = false;\r\n\r\n /**\r\n * Specifies the jpeg quality for when the device\r\n * camera is used to generate a picture.\r\n * Needs to be a number between 0 and 1 and defaults to 0.8\r\n */\r\n @Prop() captureQuality: number = 0.8;\r\n\r\n /** Fires when file were selected. */\r\n @Event() filesSelected: EventEmitter<File[]>;\r\n \r\n @State() canTakeSnapshots: boolean = false;\r\n\r\n @State() takingPicture: boolean = false;\r\n \r\n private dropzone: HTMLElement;\r\n private fileInput: HTMLInputElement;\r\n private videoPreview: HTMLVideoElement;\r\n private videoSettings!: MediaTrackSettings;\r\n\r\n\r\n componentDidLoad() {\r\n if (this.allowCameraMode){\r\n this.checkIfBrowserCanTakeSnapshots()\r\n .then(result => this.canTakeSnapshots = result);\r\n }\r\n if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\r\n var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\r\n var extensionsList = extensionsWithDots.join(\",\");\r\n this.fileInput.accept = extensionsList;\r\n }\r\n }\r\n\r\n private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\r\n return new Promise((resolve) => {\r\n const mediaDevices = navigator.mediaDevices;\r\n if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\r\n resolve(false);\r\n }\r\n mediaDevices.enumerateDevices()\r\n .then(devices => {\r\n var result = devices.some(device => device.kind == \"videoinput\");\r\n resolve(result);\r\n });\r\n });\r\n }\r\n\r\n private getFilesFromFileList(files: FileList) : File[] {\r\n var fileList: File[] = [];\r\n for (let index = 0; index < files.length; index++) {\r\n const file = files[index];\r\n fileList.push(file);\r\n }\r\n\r\n return fileList;\r\n }\r\n\r\n private handleUploadButton(element: HTMLInputElement): void {\r\n let files = this.getFilesFromFileList(element.files);\r\n\r\n this.filesSelected.emit(files);\r\n }\r\n\r\n private handleDragOver = (event: DragEvent) => \r\n {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n event.dataTransfer.dropEffect = \"copy\";\r\n this.dropzone.classList.add(\"dropping\");\r\n };\r\n\r\n private hasInvalidExtensions(files: FileList): boolean{\r\n var hasInvalid = false;\r\n for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\r\n const file = files[fileIndex];\r\n var regex = /(?:\\.([^.]+))?$/;\r\n const fileExtension = regex.exec(file.name)[1];\r\n if (fileExtension == undefined){\r\n hasInvalid = true;\r\n }\r\n\r\n if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){\r\n hasInvalid = true;\r\n }\r\n\r\n return hasInvalid;\r\n }\r\n }\r\n\r\n private handleDrop = (dropEvent: DragEvent) => {\r\n dropEvent.stopPropagation();\r\n dropEvent.preventDefault();\r\n const files = dropEvent.dataTransfer.files;\r\n\r\n if (this.hasInvalidExtensions(files)){\r\n return;\r\n }\r\n var fileList = this.getFilesFromFileList(files);\r\n this.filesSelected.emit(fileList);\r\n };\r\n\r\n private takeSnapshot(): void {\r\n this.takingPicture = true;\r\n navigator.mediaDevices.getUserMedia({video: true, audio: false})\r\n .then(stream => {\r\n stream\r\n this.videoPreview.srcObject = stream;\r\n this.videoPreview.play()\r\n .then(() => {\r\n this.videoSettings = stream.getVideoTracks()[0].getSettings();\r\n });\r\n })\r\n .catch(error => alert(error));\r\n }\r\n\r\n private applySnapshot(): void {\r\n var canvas = document.createElement(\"canvas\");\r\n const context = canvas.getContext(\"2d\");\r\n canvas.width = this.videoSettings.width;\r\n canvas.height = this.videoSettings.height;\r\n context.drawImage(this.videoPreview, 0, 0);\r\n canvas.toBlob(blob => {\r\n var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\r\n this.takingPicture = false;\r\n \r\n var fileList = [file];\r\n this.filesSelected.emit(fileList)\r\n }, \"image/jpeg\", this.captureQuality);\r\n }\r\n \r\n render() {\r\n return (\r\n <Host\r\n ref={e => this.dropzone = e}\r\n class=\"dropzone\"\r\n onDragOver={this.handleDragOver}\r\n onDrop={this.handleDrop}\r\n onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\r\n >\r\n {!this.takingPicture &&\r\n [\r\n <p>{this.resx?.dragAndDropFile}</p>\r\n ,\r\n <p>- {this.resx?.or} -</p>\r\n ,\r\n <label class=\"upload-file\">\r\n <input\r\n type=\"file\"\r\n ref={el => this.fileInput = el}\r\n onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\r\n >\r\n </input>\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><path d=\"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z\"/></g></svg>\r\n </span>\r\n &nbsp;\r\n {this.resx?.uploadFile}\r\n </label>\r\n ,\r\n this.canTakeSnapshots &&\r\n [\r\n <p>- {this.resx?.or} -</p>\r\n ,\r\n <button\r\n onClick={() => this.takeSnapshot()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"/></svg>\r\n {this.resx?.takePicture}\r\n </button>\r\n ]\r\n ]\r\n }\r\n {this.takingPicture &&\r\n <div class=\"video-preview\">\r\n <video ref={e => this.videoPreview = e} />\r\n <button\r\n onClick={() => this.applySnapshot()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"/></svg>&nbsp;\r\n {this.resx?.capture}\r\n </button>\r\n </div>\r\n }\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n"],"version":3}
package/dist/dnn/dnn-dropzone.system.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,i,n,r;return{setters:[function(e){t=e.r;i=e.e;n=e.h;r=e.f}],execute:function(){var o=":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.video-preview button{margin:1rem}";var a=e("dnn_dropzone",function(){function e(e){var n=this;t(this,e);this.filesSelected=i(this,"filesSelected",7);this.resx={dragAndDropFile:"Drag and drop a file",capture:"Capture",or:"or",takePicture:"Take a picture",uploadFile:"Upload a file"};this.allowCameraMode=false;this.captureQuality=.8;this.canTakeSnapshots=false;this.takingPicture=false;this.handleDragOver=function(e){e.stopPropagation();e.preventDefault();e.dataTransfer.dropEffect="copy";n.dropzone.classList.add("dropping")};this.handleDrop=function(e){e.stopPropagation();e.preventDefault();var t=e.dataTransfer.files;if(n.hasInvalidExtensions(t)){return}var i=n.getFilesFromFileList(t);n.filesSelected.emit(i)}}e.prototype.componentDidLoad=function(){var e=this;if(this.allowCameraMode){this.checkIfBrowserCanTakeSnapshots().then((function(t){return e.canTakeSnapshots=t}))}if(this.allowedExtensions!=undefined&&this.allowedExtensions.length>0){var t=this.allowedExtensions.map((function(e){return"."+e}));var i=t.join(",");this.fileInput.accept=i}};e.prototype.checkIfBrowserCanTakeSnapshots=function(){return new Promise((function(e){var t=navigator.mediaDevices;if(t==undefined||t.enumerateDevices==undefined){e(false)}t.enumerateDevices().then((function(t){var i=t.some((function(e){return e.kind=="videoinput"}));e(i)}))}))};e.prototype.getFilesFromFileList=function(e){var t=[];for(var i=0;i<e.length;i++){var n=e[i];t.push(n)}return t};e.prototype.handleUploadButton=function(e){var t=this.getFilesFromFileList(e.files);this.filesSelected.emit(t)};e.prototype.hasInvalidExtensions=function(e){var t=false;for(var i=0;i<e.length;i++){var n=e[i];var r=/(?:\.([^.]+))?$/;var o=r.exec(n.name)[1];if(o==undefined){t=true}if(this.allowedExtensions!=undefined&&!this.allowedExtensions.includes(o)){t=true}return t}};e.prototype.takeSnapshot=function(){var e=this;this.takingPicture=true;navigator.mediaDevices.getUserMedia({video:true,audio:false}).then((function(t){t;e.videoPreview.srcObject=t;e.videoPreview.play().then((function(){e.videoSettings=t.getVideoTracks()[0].getSettings()}))})).catch((function(e){return alert(e)}))};e.prototype.applySnapshot=function(){var e=this;var t=document.createElement("canvas");var i=t.getContext("2d");t.width=this.videoSettings.width;t.height=this.videoSettings.height;i.drawImage(this.videoPreview,0,0);t.toBlob((function(t){var i=new File([t],"image.jpeg",{type:"image/jpeg"});e.takingPicture=false;var n=[i];e.filesSelected.emit(n)}),"image/jpeg",this.captureQuality)};e.prototype.render=function(){var e=this;var t,i,o,a,s,l;return n(r,{ref:function(t){return e.dropzone=t},class:"dropzone",onDragOver:this.handleDragOver,onDrop:this.handleDrop,onDragLeave:function(){return e.dropzone.classList.remove("dropping")}},!this.takingPicture&&[n("p",null,(t=this.resx)===null||t===void 0?void 0:t.dragAndDropFile),n("p",null,"- ",(i=this.resx)===null||i===void 0?void 0:i.or," -"),n("label",{class:"upload-file"},n("input",{type:"file",ref:function(t){return e.fileInput=t},onChange:function(t){return e.handleUploadButton(t.target)}}),n("span",null,n("svg",{xmlns:"http://www.w3.org/2000/svg","enable-background":"new 0 0 24 24",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},n("g",null,n("rect",{fill:"none",height:"24",width:"24"})),n("g",null,n("path",{d:"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z"}))))," ",(o=this.resx)===null||o===void 0?void 0:o.uploadFile),this.canTakeSnapshots&&[n("p",null,"- ",(a=this.resx)===null||a===void 0?void 0:a.or," -"),n("button",{onClick:function(){return e.takeSnapshot()}},n("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},n("path",{d:"M0 0h24v24H0z",fill:"none"}),n("circle",{cx:"12",cy:"12",r:"3.2"}),n("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"})),(s=this.resx)===null||s===void 0?void 0:s.takePicture)]],this.takingPicture&&n("div",{class:"video-preview"},n("video",{ref:function(t){return e.videoPreview=t}}),n("button",{onClick:function(){return e.applySnapshot()}},n("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},n("path",{d:"M0 0h24v24H0z",fill:"none"}),n("circle",{cx:"12",cy:"12",r:"3.2"}),n("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"}))," ",(l=this.resx)===null||l===void 0?void 0:l.capture)))};return e}());a.style=o}}}));
2
+ //# sourceMappingURL=dnn-dropzone.system.entry.js.map