@dnncommunity/dnn-elements 0.15.0-beta.7 → 0.15.0

package/dist/dnn/dnn-color-picker.system.entry.js

@@ -1,12 +0,0 @@
-System.register(["./index-c3cc3b5b.system.js","./debounce-db438a09.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(){
-/** Color utility class with hsl and rgb converters
-       * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV
-       * @copyright Copyright (c) .NET Foundation. All rights reserved.
-       * @license MIT
-       */
-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}';
-/** Reusable DNN UI component to pick a color
-       * @copyright Copyright (c) .NET Foundation. All rights reserved.
-       * @license MIT
-       */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(".concat(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: ".concat(Math.round(this.currentColor.saturation*100),"%, Lightness: ").concat(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}}}));
-//# sourceMappingURL=dnn-color-picker.system.entry.js.map

package/dist/dnn/dnn-color-picker.system.entry.js.map

@@ -1 +0,0 @@
-{"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","concat","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

@@ -1,149 +0,0 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-20e42ad7.js';
-
-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}";
-
-const DnnDropzone = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.filesSelected = createEvent(this, "filesSelected", 7);
-    /** Localization strings */
-    this.resx = {
-      dragAndDropFile: "Drag and drop a file",
-      capture: "Capture",
-      or: "or",
-      takePicture: "Take a picture",
-      uploadFile: "Upload a file",
-    };
-    /**
-     * If true, will allow the user to take a snapshot
-     * using the device camera. (only works over https).
-     */
-    this.allowCameraMode = false;
-    /**
-     * Specifies the jpeg quality for when the device
-     * camera is used to generate a picture.
-     * Needs to be a number between 0 and 1 and defaults to 0.8
-     */
-    this.captureQuality = 0.8;
-    this.canTakeSnapshots = false;
-    this.takingPicture = false;
-    this.handleDragOver = (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-      event.dataTransfer.dropEffect = "copy";
-      this.dropzone.classList.add("dropping");
-    };
-    this.handleDrop = (dropEvent) => {
-      dropEvent.stopPropagation();
-      dropEvent.preventDefault();
-      const files = dropEvent.dataTransfer.files;
-      if (this.hasInvalidExtensions(files)) {
-        return;
-      }
-      var fileList = this.getFilesFromFileList(files);
-      this.filesSelected.emit(fileList);
-    };
-  }
-  componentDidLoad() {
-    if (this.allowCameraMode) {
-      this.checkIfBrowserCanTakeSnapshots()
-        .then(result => this.canTakeSnapshots = result);
-    }
-    if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0) {
-      var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);
-      var extensionsList = extensionsWithDots.join(",");
-      this.fileInput.accept = extensionsList;
-    }
-  }
-  checkIfBrowserCanTakeSnapshots() {
-    return new Promise((resolve) => {
-      const mediaDevices = navigator.mediaDevices;
-      if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {
-        resolve(false);
-      }
-      mediaDevices.enumerateDevices()
-        .then(devices => {
-        var result = devices.some(device => device.kind == "videoinput");
-        resolve(result);
-      });
-    });
-  }
-  getFilesFromFileList(files) {
-    var fileList = [];
-    for (let index = 0; index < files.length; index++) {
-      const file = files[index];
-      fileList.push(file);
-    }
-    return fileList;
-  }
-  handleUploadButton(element) {
-    let files = this.getFilesFromFileList(element.files);
-    this.filesSelected.emit(files);
-  }
-  hasInvalidExtensions(files) {
-    var hasInvalid = false;
-    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
-      const file = files[fileIndex];
-      var regex = /(?:\.([^.]+))?$/;
-      const fileExtension = regex.exec(file.name)[1];
-      if (fileExtension == undefined) {
-        hasInvalid = true;
-      }
-      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)) {
-        hasInvalid = true;
-      }
-      return hasInvalid;
-    }
-  }
-  takeSnapshot() {
-    this.takingPicture = true;
-    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
-      .then(stream => {
-      stream;
-      this.videoPreview.srcObject = stream;
-      this.videoPreview.play()
-        .then(() => {
-        this.videoSettings = stream.getVideoTracks()[0].getSettings();
-      });
-    })
-      .catch(error => alert(error));
-  }
-  applySnapshot() {
-    var canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    canvas.width = this.videoSettings.width;
-    canvas.height = this.videoSettings.height;
-    context.drawImage(this.videoPreview, 0, 0);
-    canvas.toBlob(blob => {
-      var file = new File([blob], "image.jpeg", { type: "image/jpeg" });
-      this.takingPicture = false;
-      var fileList = [file];
-      this.filesSelected.emit(fileList);
-    }, "image/jpeg", this.captureQuality);
-  }
-  render() {
-    var _a, _b, _c, _d, _e, _f;
-    return (h(Host, { ref: e => this.dropzone = e, class: "dropzone", onDragOver: this.handleDragOver, onDrop: this.handleDrop, onDragLeave: () => this.dropzone.classList.remove("dropping") }, !this.takingPicture &&
-      [
-        h("p", null, (_a = this.resx) === null || _a === void 0 ? void 0 : _a.dragAndDropFile),
-        h("p", null, "- ", (_b = this.resx) === null || _b === void 0 ? void 0 :
-          _b.or, " -"),
-        h("label", { class: "upload-file" }, h("input", { type: "file", ref: el => this.fileInput = el, onChange: e => this.handleUploadButton(e.target) }), h("span", null, h("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" }, h("g", null, h("rect", { fill: "none", height: "24", width: "24" })), h("g", null, h("path", { d: "M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z" })))), "\u00A0", (_c = this.resx) === null || _c === void 0 ? void 0 :
-          _c.uploadFile),
-        this.canTakeSnapshots &&
-          [
-            h("p", null, "- ", (_d = this.resx) === null || _d === void 0 ? void 0 :
-              _d.or, " -"),
-            h("button", { onClick: () => this.takeSnapshot() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("circle", { cx: "12", cy: "12", r: "3.2" }), h("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" })), (_e = this.resx) === null || _e === void 0 ? void 0 :
-              _e.takePicture)
-          ]
-      ], this.takingPicture &&
-      h("div", { class: "video-preview" }, h("video", { ref: e => this.videoPreview = e }), h("button", { onClick: () => this.applySnapshot() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("circle", { cx: "12", cy: "12", r: "3.2" }), h("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" })), "\u00A0", (_f = this.resx) === null || _f === void 0 ? void 0 :
-        _f.capture))));
-  }
-};
-DnnDropzone.style = dnnDropzoneCss;
-
-export { DnnDropzone as dnn_dropzone };
-
-//# sourceMappingURL=dnn-dropzone.entry.js.map

package/dist/dnn/dnn-dropzone.entry.js.map

@@ -1 +0,0 @@
-{"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":["\n:host {\n  /** \n  * @prop --border-color: The color of the border.\n  * @prop --border-radius: The radius of the controls borders.\n  * @prop --drop-background-color: The color of the background when a file is dropping.\n  */\n  --border-color: var(--dnn-color-tertiary-contrast, lightgray);\n  --border-radius: var(--dnn-controls-radius, 5px);\n  --drop-background-color: var(--dnn-color-tertiary, lightblue);\n\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  text-align: center;\n  border: 2px dashed var(--border-color);\n  border-radius: var(--border-radius);\n  padding: 1rem;\n  transition: all 300ms ease-in-out;\n}\n\n:host(.dropping){\n  background-color: var(--drop-background-color);\n}\np{\n  margin: 0;\n  padding: 0;\n}\nbutton{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 0px;\n  margin: 0;\n  padding: 0;\n  background-color: transparent;\n  &:hover{\n    cursor: pointer;\n  }\n  svg{\n    margin-right: 0.5rem;\n  }\n}\nlabel.upload-file{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  input{\n    display: none;\n  }\n}\n.video-preview{\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  button{\n    margin: 1rem;\n  }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-dropzone',\n  styleUrl: 'dnn-dropzone.scss',\n  shadow: true,\n})\nexport class DnnDropzone {\n  /** Localization strings */\n  @Prop() resx:{\n    dragAndDropFile: string;\n    capture: string;\n    or: string;\n    takePicture: string;\n    uploadFile: string;\n  } = {\n    dragAndDropFile: \"Drag and drop a file\",\n    capture: \"Capture\",\n    or: \"or\",\n    takePicture: \"Take a picture\",\n    uploadFile: \"Upload a file\",\n  }\n\n  /** A list of allowed file extensions.\n   * If not specified, any file is allowed.\n   * Ex: [\"jpg\", \"jped\", \"gif\", \"png\"]\n   */\n  @Prop() allowedExtensions: string[];\n\n  /**\n   * If true, will allow the user to take a snapshot\n   * using the device camera. (only works over https).\n   */\n  @Prop() allowCameraMode: boolean = false;\n\n  /**\n   * Specifies the jpeg quality for when the device\n   * camera is used to generate a picture.\n   * Needs to be a number between 0 and 1 and defaults to 0.8\n   */\n  @Prop() captureQuality: number = 0.8;\n\n  /** Fires when file were selected. */\n  @Event() filesSelected: EventEmitter<File[]>;\n  \n  @State() canTakeSnapshots: boolean = false;\n\n  @State() takingPicture: boolean = false;\n  \n  private dropzone: HTMLElement;\n  private fileInput: HTMLInputElement;\n  private videoPreview: HTMLVideoElement;\n  private videoSettings!: MediaTrackSettings;\n\n\n  componentDidLoad() {\n    if (this.allowCameraMode){\n      this.checkIfBrowserCanTakeSnapshots()\n      .then(result => this.canTakeSnapshots = result);\n    }\n    if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\n      var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\n      var extensionsList = extensionsWithDots.join(\",\");\n      this.fileInput.accept = extensionsList;\n    }\n  }\n\n  private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\n    return new Promise((resolve) => {\n      const mediaDevices = navigator.mediaDevices;\n      if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\n        resolve(false);\n      }\n      mediaDevices.enumerateDevices()\n        .then(devices => {\n          var result = devices.some(device => device.kind == \"videoinput\");\n          resolve(result);\n        });\n    });\n  }\n\n  private getFilesFromFileList(files: FileList) : File[] {\n    var fileList: File[] = [];\n    for (let index = 0; index < files.length; index++) {\n      const file = files[index];\n      fileList.push(file);\n    }\n\n    return fileList;\n  }\n\n  private handleUploadButton(element: HTMLInputElement): void {\n    let files = this.getFilesFromFileList(element.files);\n\n    this.filesSelected.emit(files);\n  }\n\n  private handleDragOver = (event: DragEvent) => \n  {\n    event.stopPropagation();\n    event.preventDefault();\n    event.dataTransfer.dropEffect = \"copy\";\n    this.dropzone.classList.add(\"dropping\");\n  };\n\n  private hasInvalidExtensions(files: FileList): boolean{\n    var hasInvalid = false;\n    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\n      const file = files[fileIndex];\n      var regex = /(?:\\.([^.]+))?$/;\n      const fileExtension = regex.exec(file.name)[1];\n      if (fileExtension == undefined){\n        hasInvalid = true;\n      }\n\n      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){\n        hasInvalid = true;\n      }\n\n      return hasInvalid;\n    }\n  }\n\n  private handleDrop = (dropEvent: DragEvent) => {\n    dropEvent.stopPropagation();\n    dropEvent.preventDefault();\n    const files = dropEvent.dataTransfer.files;\n\n    if (this.hasInvalidExtensions(files)){\n      return;\n    }\n    var fileList = this.getFilesFromFileList(files);\n    this.filesSelected.emit(fileList);\n  };\n\n  private takeSnapshot(): void {\n    this.takingPicture = true;\n    navigator.mediaDevices.getUserMedia({video: true, audio: false})\n    .then(stream => {\n      stream\n      this.videoPreview.srcObject = stream;\n      this.videoPreview.play()\n      .then(() => {\n        this.videoSettings = stream.getVideoTracks()[0].getSettings();\n      });\n    })\n    .catch(error => alert(error));\n  }\n\n  private applySnapshot(): void {\n    var canvas = document.createElement(\"canvas\");\n    const context = canvas.getContext(\"2d\");\n    canvas.width = this.videoSettings.width;\n    canvas.height = this.videoSettings.height;\n    context.drawImage(this.videoPreview, 0, 0);\n    canvas.toBlob(blob => {\n      var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\n      this.takingPicture = false;\n      \n      var fileList = [file];\n      this.filesSelected.emit(fileList)\n    }, \"image/jpeg\", this.captureQuality);\n  }\n  \n  render() {\n    return (\n      <Host\n        ref={e => this.dropzone = e}\n        class=\"dropzone\"\n        onDragOver={this.handleDragOver}\n        onDrop={this.handleDrop}\n        onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\n      >\n        {!this.takingPicture &&\n          [\n            <p>{this.resx?.dragAndDropFile}</p>\n          ,\n            <p>- {this.resx?.or} -</p>\n          ,\n            <label class=\"upload-file\">\n              <input\n                type=\"file\"\n                ref={el => this.fileInput = el}\n                onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\n              >\n              </input>\n              <span>\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>\n              </span>\n              &nbsp;\n              {this.resx?.uploadFile}\n            </label>\n            ,\n            this.canTakeSnapshots &&\n              [\n                <p>- {this.resx?.or} -</p>\n                ,\n                <button\n                  onClick={() => this.takeSnapshot()}\n                >\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>\n                  {this.resx?.takePicture}\n                </button>\n              ]\n          ]\n        }\n        {this.takingPicture &&\n          <div class=\"video-preview\">\n            <video ref={e => this.videoPreview = e} />\n            <button\n              onClick={() => this.applySnapshot()}\n            >\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;\n              {this.resx?.capture}\n            </button>\n          </div>\n        }\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/dnn/dnn-dropzone.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./index-c3cc3b5b.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".".concat(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}}}));
-//# sourceMappingURL=dnn-dropzone.system.entry.js.map

package/dist/dnn/dnn-dropzone.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dnn-dropzone/dnn-dropzone.scss?tag=dnn-dropzone&encapsulation=shadow","src/components/dnn-dropzone/dnn-dropzone.tsx"],"names":["dnnDropzoneCss","DnnDropzone","exports","class_1","hostRef","_this","this","resx","dragAndDropFile","capture","or","takePicture","uploadFile","allowCameraMode","captureQuality","canTakeSnapshots","takingPicture","handleDragOver","event","stopPropagation","preventDefault","dataTransfer","dropEffect","dropzone","classList","add","handleDrop","dropEvent","files","hasInvalidExtensions","fileList","getFilesFromFileList","filesSelected","emit","prototype","componentDidLoad","checkIfBrowserCanTakeSnapshots","then","result","allowedExtensions","undefined","length","extensionsWithDots","map","e","concat","extensionsList","join","fileInput","accept","Promise","resolve","mediaDevices","navigator","enumerateDevices","devices","some","device","kind","index","file","push","handleUploadButton","element","hasInvalid","fileIndex","regex","fileExtension","exec","name","includes","takeSnapshot","getUserMedia","video","audio","stream","videoPreview","srcObject","play","videoSettings","getVideoTracks","getSettings","catch","error","alert","applySnapshot","canvas","document","createElement","context","getContext","width","height","drawImage","toBlob","blob","File","type","render","h","Host","ref","class","onDragOver","onDrop","onDragLeave","remove","_a","_b","el","onChange","target","xmlns","enable-background","viewBox","fill","d","_c","_d","onClick","cx","cy","r","_e","_f"],"mappings":"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","sourcesContent":["\n:host {\n  /** \n  * @prop --border-color: The color of the border.\n  * @prop --border-radius: The radius of the controls borders.\n  * @prop --drop-background-color: The color of the background when a file is dropping.\n  */\n  --border-color: var(--dnn-color-tertiary-contrast, lightgray);\n  --border-radius: var(--dnn-controls-radius, 5px);\n  --drop-background-color: var(--dnn-color-tertiary, lightblue);\n\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  text-align: center;\n  border: 2px dashed var(--border-color);\n  border-radius: var(--border-radius);\n  padding: 1rem;\n  transition: all 300ms ease-in-out;\n}\n\n:host(.dropping){\n  background-color: var(--drop-background-color);\n}\np{\n  margin: 0;\n  padding: 0;\n}\nbutton{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 0px;\n  margin: 0;\n  padding: 0;\n  background-color: transparent;\n  &:hover{\n    cursor: pointer;\n  }\n  svg{\n    margin-right: 0.5rem;\n  }\n}\nlabel.upload-file{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  input{\n    display: none;\n  }\n}\n.video-preview{\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  button{\n    margin: 1rem;\n  }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-dropzone',\n  styleUrl: 'dnn-dropzone.scss',\n  shadow: true,\n})\nexport class DnnDropzone {\n  /** Localization strings */\n  @Prop() resx:{\n    dragAndDropFile: string;\n    capture: string;\n    or: string;\n    takePicture: string;\n    uploadFile: string;\n  } = {\n    dragAndDropFile: \"Drag and drop a file\",\n    capture: \"Capture\",\n    or: \"or\",\n    takePicture: \"Take a picture\",\n    uploadFile: \"Upload a file\",\n  }\n\n  /** A list of allowed file extensions.\n   * If not specified, any file is allowed.\n   * Ex: [\"jpg\", \"jped\", \"gif\", \"png\"]\n   */\n  @Prop() allowedExtensions: string[];\n\n  /**\n   * If true, will allow the user to take a snapshot\n   * using the device camera. (only works over https).\n   */\n  @Prop() allowCameraMode: boolean = false;\n\n  /**\n   * Specifies the jpeg quality for when the device\n   * camera is used to generate a picture.\n   * Needs to be a number between 0 and 1 and defaults to 0.8\n   */\n  @Prop() captureQuality: number = 0.8;\n\n  /** Fires when file were selected. */\n  @Event() filesSelected: EventEmitter<File[]>;\n  \n  @State() canTakeSnapshots: boolean = false;\n\n  @State() takingPicture: boolean = false;\n  \n  private dropzone: HTMLElement;\n  private fileInput: HTMLInputElement;\n  private videoPreview: HTMLVideoElement;\n  private videoSettings!: MediaTrackSettings;\n\n\n  componentDidLoad() {\n    if (this.allowCameraMode){\n      this.checkIfBrowserCanTakeSnapshots()\n      .then(result => this.canTakeSnapshots = result);\n    }\n    if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\n      var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\n      var extensionsList = extensionsWithDots.join(\",\");\n      this.fileInput.accept = extensionsList;\n    }\n  }\n\n  private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\n    return new Promise((resolve) => {\n      const mediaDevices = navigator.mediaDevices;\n      if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\n        resolve(false);\n      }\n      mediaDevices.enumerateDevices()\n        .then(devices => {\n          var result = devices.some(device => device.kind == \"videoinput\");\n          resolve(result);\n        });\n    });\n  }\n\n  private getFilesFromFileList(files: FileList) : File[] {\n    var fileList: File[] = [];\n    for (let index = 0; index < files.length; index++) {\n      const file = files[index];\n      fileList.push(file);\n    }\n\n    return fileList;\n  }\n\n  private handleUploadButton(element: HTMLInputElement): void {\n    let files = this.getFilesFromFileList(element.files);\n\n    this.filesSelected.emit(files);\n  }\n\n  private handleDragOver = (event: DragEvent) => \n  {\n    event.stopPropagation();\n    event.preventDefault();\n    event.dataTransfer.dropEffect = \"copy\";\n    this.dropzone.classList.add(\"dropping\");\n  };\n\n  private hasInvalidExtensions(files: FileList): boolean{\n    var hasInvalid = false;\n    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\n      const file = files[fileIndex];\n      var regex = /(?:\\.([^.]+))?$/;\n      const fileExtension = regex.exec(file.name)[1];\n      if (fileExtension == undefined){\n        hasInvalid = true;\n      }\n\n      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){\n        hasInvalid = true;\n      }\n\n      return hasInvalid;\n    }\n  }\n\n  private handleDrop = (dropEvent: DragEvent) => {\n    dropEvent.stopPropagation();\n    dropEvent.preventDefault();\n    const files = dropEvent.dataTransfer.files;\n\n    if (this.hasInvalidExtensions(files)){\n      return;\n    }\n    var fileList = this.getFilesFromFileList(files);\n    this.filesSelected.emit(fileList);\n  };\n\n  private takeSnapshot(): void {\n    this.takingPicture = true;\n    navigator.mediaDevices.getUserMedia({video: true, audio: false})\n    .then(stream => {\n      stream\n      this.videoPreview.srcObject = stream;\n      this.videoPreview.play()\n      .then(() => {\n        this.videoSettings = stream.getVideoTracks()[0].getSettings();\n      });\n    })\n    .catch(error => alert(error));\n  }\n\n  private applySnapshot(): void {\n    var canvas = document.createElement(\"canvas\");\n    const context = canvas.getContext(\"2d\");\n    canvas.width = this.videoSettings.width;\n    canvas.height = this.videoSettings.height;\n    context.drawImage(this.videoPreview, 0, 0);\n    canvas.toBlob(blob => {\n      var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\n      this.takingPicture = false;\n      \n      var fileList = [file];\n      this.filesSelected.emit(fileList)\n    }, \"image/jpeg\", this.captureQuality);\n  }\n  \n  render() {\n    return (\n      <Host\n        ref={e => this.dropzone = e}\n        class=\"dropzone\"\n        onDragOver={this.handleDragOver}\n        onDrop={this.handleDrop}\n        onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\n      >\n        {!this.takingPicture &&\n          [\n            <p>{this.resx?.dragAndDropFile}</p>\n          ,\n            <p>- {this.resx?.or} -</p>\n          ,\n            <label class=\"upload-file\">\n              <input\n                type=\"file\"\n                ref={el => this.fileInput = el}\n                onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\n              >\n              </input>\n              <span>\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>\n              </span>\n              &nbsp;\n              {this.resx?.uploadFile}\n            </label>\n            ,\n            this.canTakeSnapshots &&\n              [\n                <p>- {this.resx?.or} -</p>\n                ,\n                <button\n                  onClick={() => this.takeSnapshot()}\n                >\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>\n                  {this.resx?.takePicture}\n                </button>\n              ]\n          ]\n        }\n        {this.takingPicture &&\n          <div class=\"video-preview\">\n            <video ref={e => this.videoPreview = e} />\n            <button\n              onClick={() => this.applySnapshot()}\n            >\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;\n              {this.resx?.capture}\n            </button>\n          </div>\n        }\n      </Host>\n    );\n  }\n\n}\n"]}