@dnncommunity/dnn-elements 0.13.1 → 0.14.0-beta.12

package/dist/cjs/dnn-collapsible.cjs.entry.js

@@ -2,21 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-eede7745.js');
-const debounce = require('./debounce-1de79bc7.js');
+const index = require('./index-aff4d89a.js');
 
-const dnnCollapsibleCss = ":host{display:block}:host #container{height:0;overflow:hidden;transition:height 300ms ease-in-out}";
+const dnnCollapsibleCss = ":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 let DnnCollapsible = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -25,86 +14,51 @@ let DnnCollapsible = class {
     this.expanded = false;
     /** Defines the transition time in ms, defaults to 100ms */
     this.transitionDuration = 150;
-    this.animating = false;
   }
-  handleExpandedChanged(newValue) {
-    this.animating = true;
-    requestAnimationFrame(() => {
-      const container = this.el.shadowRoot.querySelector("#container");
-      if (newValue) {
-        container.style.height = container.scrollHeight + "px";
-      }
-      else {
-        container.style.height = "0px";
-      }
-    });
+  handleHeightChanged() {
     requestAnimationFrame(() => {
-      this.animating = false;
-      this.dnnCollapsibleHeightChanged.emit();
+      this.updateSize();
     });
   }
-  /** Updates the component height, use to update after a slot content changes. */
+  /**
+   * Updates the component height, use to update after a slot content changes.
+   */
   async updateSize() {
-    this.updateComponentSize();
-  }
-  updateComponentSize() {
     if (this.expanded) {
-      this.animating = true;
       requestAnimationFrame(() => {
-        const container = this.el.shadowRoot.querySelector("#container");
-        let newHeight = 0;
-        container.querySelector('slot').assignedElements().forEach(node => {
-          newHeight += node.scrollHeight;
-        });
-        container.style.height = newHeight + "px";
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
       });
+      setTimeout(() => {
+        this.container.style.maxHeight = "none";
+      }, this.transitionDuration);
     }
   }
-  handleOtherCollapsibleHeightChanged() {
+  handledExpandedChanged(expanded) {
+    if (expanded) {
+      this.updateSize();
+    }
+    else {
+      requestAnimationFrame(() => {
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
+        requestAnimationFrame(() => {
+          this.container.style.maxHeight = "0px";
+        });
+      });
+    }
     setTimeout(() => {
-      this.updateComponentSize();
-    }, this.transitionDuration);
-  }
-  handleMutation(mutationList) {
-    mutationList.forEach(mutation => {
       requestAnimationFrame(() => {
-        mutation.target.closest('dnn-collapsible').updateSize();
+        this.dnnCollapsibleHeightChanged.emit();
       });
-    });
-  }
-  componentWillLoad() {
-    this.mutationObserver = new MutationObserver((mutationList) => {
-      this.handleMutation(mutationList);
-    });
-  }
-  componentDidLoad() {
-    const container = this.el.shadowRoot.querySelector('#container');
-    container.style.transitionDuration = this.transitionDuration + 'ms';
-    // Monitor for content changes and update own height
-    const childNodes = [this.el];
-    childNodes.forEach(element => {
-      this.mutationObserver.observe(element, { attributes: true, characterData: true, childList: true, subtree: true });
-    });
-    const slot = this.el.shadowRoot.querySelector('slot');
-    slot.addEventListener("slotchange", () => {
-      this.updateSize();
-    });
-  }
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    }, this.transitionDuration);
   }
-  /*eslint-enable @stencil/own-methods-must-be-private */
   render() {
-    return (index.h(index.Host, null, index.h("div", { id: "container" }, index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el }, index.h("slot", null))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "expanded": ["handleExpandedChanged"]
+    "expanded": ["handledExpandedChanged"]
   }; }
 };
-__decorate([
-  debounce.Debounce()
-], DnnCollapsible.prototype, "updateSize", null);
 DnnCollapsible.style = dnnCollapsibleCss;
 
 exports.dnn_collapsible = DnnCollapsible;

package/dist/cjs/dnn-collapsible.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-collapsible.entry.cjs.js","mappings":"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","names":["h","Host","Debounce"],"sources":["./src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","./src/components/dnn-collapsible/dnn-collapsible.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  #container{\r\n    height:0;\r\n    overflow: hidden;\r\n    transition: height 300ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, Watch, State, Method, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n\r\n@Component({\r\n  tag: \"dnn-collapsible\",\r\n  styleUrl: \"dnn-collapsible.scss\",\r\n  shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n  @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n  /** Defines if the panel is expanded or not. */\r\n  @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n  /** Defines the transition time in ms, defaults to 100ms */\r\n  @Prop() transitionDuration?: number = 150;\r\n\r\n  @State() animating: boolean = false;\r\n\r\n  @Watch(\"expanded\")\r\n  handleExpandedChanged(newValue: boolean){\r\n    this.animating = true;\r\n    requestAnimationFrame(() => {\r\n      const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n      if (newValue){\r\n        container.style.height = container.scrollHeight + \"px\";\r\n      }\r\n      else{\r\n        container.style.height = \"0px\";\r\n      }\r\n    });\r\n    \r\n    requestAnimationFrame(() => {\r\n      this.animating = false;\r\n      this.dnnCollapsibleHeightChanged.emit();\r\n    });\r\n  }\r\n\r\n  /** Updates the component height, use to update after a slot content changes. */\r\n  @Debounce()\r\n  @Method()\r\n  async updateSize() {\r\n    this.updateComponentSize();\r\n  }\r\n\r\n  private updateComponentSize(){\r\n    if (this.expanded){\r\n      this.animating = true;\r\n      requestAnimationFrame(() => {\r\n        const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n        let newHeight = 0;\r\n        container.querySelector('slot').assignedElements().forEach(node => {\r\n          newHeight += node.scrollHeight;\r\n        });\r\n        container.style.height = newHeight + \"px\";\r\n      });\r\n    }\r\n  }\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event() dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen('dnnCollapsibleHeightChanged')\r\n  handleOtherCollapsibleHeightChanged(){\r\n    setTimeout(() => {\r\n      this.updateComponentSize();\r\n    }, this.transitionDuration);\r\n  }\r\n\r\n  private mutationObserver: MutationObserver;\r\n\r\n  private handleMutation(mutationList){\r\n    mutationList.forEach(mutation => {\r\n      requestAnimationFrame(() => {\r\n        mutation.target.closest('dnn-collapsible').updateSize();\r\n      });\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.mutationObserver = new MutationObserver((mutationList) => {\r\n      this.handleMutation(mutationList);\r\n    });\r\n  }\r\n\r\n  componentDidLoad(){\r\n    const container = this.el.shadowRoot.querySelector('#container') as HTMLDivElement;\r\n    container.style.transitionDuration = this.transitionDuration + 'ms';\r\n\r\n    // Monitor for content changes and update own height\r\n    const childNodes = [this.el];\r\n    childNodes.forEach(element => {\r\n      this.mutationObserver.observe(element, {attributes: true, characterData: true, childList: true, subtree: true});\r\n    });\r\n\r\n    const slot = this.el.shadowRoot.querySelector('slot');\r\n    slot.addEventListener(\"slotchange\", () => {\r\n      this.updateSize();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(){\r\n    this.mutationObserver.disconnect();\r\n  }\r\n  /*eslint-enable @stencil/own-methods-must-be-private */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\">\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"],"version":3}
+{"file":"dnn-collapsible.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,sJAAsJ;;ICOnK,cAAc;EAL3B;;;;IAUyB,aAAQ,GAAY,KAAK,CAAC;;IAGzC,uBAAkB,GAAY,GAAG,CAAC;GA2D3C;EArDC,mBAAmB;IACjB,qBAAqB,CAAC;MACpB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB,CAAC,CAAA;GACH;;;;EAMD,MAAM,UAAU;IACd,IAAI,IAAI,CAAC,QAAQ,EAAC;MACd,qBAAqB,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;OACrE,CAAC,CAAC;MACH,UAAU,CAAC;QACT,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;OACzC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC/B;GACF;EAGD,sBAAsB,CAAC,QAAiB;IACtC,IAAI,QAAQ,EAAC;MACX,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;SACG;MACF,qBAAqB,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;QACpE,qBAAqB,CAAC;UACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;SACxC,CAAC,CAAC;OACJ,CAAC,CAAC;KACJ;IACD,UAAU,CAAC;MACT,qBAAqB,CAAC;QACpB,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;OACzC,CAAC,CAAC;KACJ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;GAC7B;EAID,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAAE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAClFA,qBAAa,CACX,CACD,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","./src/components/dnn-collapsible/dnn-collapsible.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n#container{\r\n  max-height:0;\r\n  overflow: hidden;\r\n  transition: max-height 300ms ease-in-out;\r\n}","import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch, Listen, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: \"dnn-collapsible\",\r\n  styleUrl: \"dnn-collapsible.scss\",\r\n  shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n  @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n  /** Defines if the panel is expanded or not. */\r\n  @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n  /** Defines the transition time in ms, defaults to 100ms */\r\n  @Prop() transitionDuration?: number = 150;\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event({bubbles: true, composed: true}) dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen(\"dnnCollapsibleHeightChanged\")\r\n  handleHeightChanged(){\r\n    requestAnimationFrame(() => {\r\n      this.updateSize();\r\n    })\r\n  }\r\n\r\n  /**\r\n   * Updates the component height, use to update after a slot content changes.\r\n   */\r\n  @Method()\r\n  async updateSize() {\r\n    if (this.expanded){\r\n        requestAnimationFrame(() => {\r\n          this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n        });\r\n        setTimeout(() => {\r\n          this.container.style.maxHeight = \"none\";\r\n        }, this.transitionDuration);\r\n    }\r\n  }\r\n  \r\n  @Watch(\"expanded\")\r\n  handledExpandedChanged(expanded: boolean){\r\n    if (expanded){\r\n      this.updateSize();\r\n    }\r\n    else{\r\n      requestAnimationFrame(() => {\r\n        this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n        requestAnimationFrame(() => {\r\n          this.container.style.maxHeight = \"0px\";\r\n        });\r\n      });\r\n    }\r\n    setTimeout(() => {\r\n      requestAnimationFrame(() => {\r\n        this.dnnCollapsibleHeightChanged.emit();\r\n      });\r\n    }, this.transitionDuration);\r\n  }\r\n  \r\n  private container: HTMLDivElement;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\" class={this.expanded && \"expanded\"} ref={el => this.container = el}>\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-eede7745.js');
+const index = require('./index-aff4d89a.js');
 const debounce = require('./debounce-1de79bc7.js');
 
 /** Color utility class with hsl and rgb converters
@@ -196,7 +196,7 @@ class ColorInfo {
   }
 }
 
-const dnnColorPickerCss = ".dnn-color-picker{padding:15px;max-width:400px}.dnn-color-picker .dnn-color-sliders{display:flex;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: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: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:flex;align-items:center;margin-top:15px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-result{flex-direction:column;width:50px;height:50px;border-radius:50%;background:red}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue{flex:auto;margin-left:10px;height:16px;border:1px solid #ccc;position:relative;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:flex;flex-direction:column;justify-content:space-between}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch{display:flex;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:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field{display:flex;flex-direction:column;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:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field{display:flex;flex-direction:column;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:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field{display:flex;flex-direction:column;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}";
+const dnnColorPickerCss = ".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.

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

@@ -1 +1 @@
-{"file":"dnn-color-picker.entry.cjs.js","mappings":"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","names":["h","Debounce"],"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}
+{"file":"dnn-color-picker.entry.cjs.js","mappings":"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","names":["h","Debounce"],"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/cjs/dnn-dropzone.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-eede7745.js');
+const index = require('./index-aff4d89a.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: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}";
+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}";
 
 let DnnDropzone = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"dnn-dropzone.entry.cjs.js","mappings":"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","names":["h","Host"],"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}
+{"file":"dnn-dropzone.entry.cjs.js","mappings":"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","names":["h","Host"],"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}