@dnncommunity/dnn-elements 0.13.0-beta.1

package/dist/collection/components/dnn-color-picker/dnn-color-picker.js

@@ -0,0 +1,434 @@
+/** Reusable DNN UI component to pick a color
+ * @copyright Copyright (c) .NET Foundation. All rights reserved.
+ * @license MIT
+ */
+var __decorate = (this && this.__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;
+};
+import { Component, h, State, Element, Prop, Event, Watch } from "@stencil/core";
+import { ColorInfo } from '../../utilities/colorInfo';
+import { Debounce } from "../../utilities/debounce";
+/** Color Picker for Dnn */
+export class DnnColorPicker {
+  constructor() {
+    /** Sets the initial color, must be a valid 8 character hexadecimal string without the # sign. */
+    this.color = "FFFFFF";
+    /** Sets the width-height ratio of the color picker saturation-lightness box.
+     * @example 100% renders a perfect square
+     */
+    this.colorBoxHeight = "50%";
+    this.rgbDisplay = "flex";
+    this.hslDisplay = "none";
+    this.hexDisplay = "none";
+    this.handleSaturationLightnessMouseDown = (e) => {
+      e.preventDefault();
+      this.handleDragLightnessSaturation(e);
+      window.addEventListener('mousemove', this.handleDragLightnessSaturation);
+      window.addEventListener('mouseup', this.handleSaturationLightnessMouseUp);
+    };
+    this.handleDragLightnessSaturation = (e) => {
+      const rect = this.saturationLightnessBox.getBoundingClientRect();
+      let x = e.clientX - rect.left;
+      if (x < 0) {
+        x = 0;
+      }
+      if (x > rect.width) {
+        x = rect.width;
+      }
+      x = x / rect.width;
+      let y = e.clientY - rect.top;
+      if (y < 0) {
+        y = 0;
+      }
+      if (y > rect.height) {
+        y = rect.height;
+      }
+      y = 1 - (y / rect.height);
+      const newColor = new ColorInfo();
+      newColor.hue = this.currentColor.hue;
+      newColor.saturation = x;
+      newColor.lightness = y;
+      this.currentColor = newColor;
+    };
+    this.handleSaturationLightnessMouseUp = () => {
+      window.removeEventListener('mousemove', this.handleDragLightnessSaturation);
+      window.removeEventListener('mouseup', this.handleSaturationLightnessMouseUp);
+    };
+    this.handleHueMouseDown = (e) => {
+      e.preventDefault();
+      this.handleDragHue(e);
+      window.addEventListener('mousemove', this.handleDragHue);
+      window.addEventListener('mouseup', this.handleHueMouseUp);
+    };
+    this.handleHueMouseUp = () => {
+      window.removeEventListener('mousemove', this.handleDragHue);
+      window.removeEventListener('mouseup', this.handleHueMouseUp);
+    };
+    this.handleDragHue = (e) => {
+      const rect = this.hueRange.getBoundingClientRect();
+      let x = e.clientX - rect.left;
+      if (x < 0) {
+        x = 0;
+      }
+      if (x > rect.width) {
+        x = rect.width;
+      }
+      x = x / rect.width * 360;
+      const newColor = new ColorInfo();
+      newColor.hue = x;
+      newColor.saturation = this.currentColor.saturation;
+      newColor.lightness = this.currentColor.lightness;
+      this.currentColor = newColor;
+    };
+    this.handleComponentValueChange = (e, channel) => {
+      let value = parseInt(e.target.value);
+      if (isNaN(value)) {
+        return;
+      }
+      const newColor = new ColorInfo();
+      if (value < 0) {
+        value = 0;
+      }
+      if (value > 255) {
+        value = 255;
+      }
+      let r = this.currentColor.red;
+      let g = this.currentColor.green;
+      let b = this.currentColor.blue;
+      switch (channel) {
+        case 'red':
+          r = value;
+          break;
+        case 'green':
+          g = value;
+          break;
+        case 'blue':
+          b = value;
+          break;
+        default:
+          break;
+      }
+      newColor.green = g;
+      newColor.red = r;
+      newColor.blue = b;
+      this.currentColor = newColor;
+    };
+    this.handleHSLChange = (e, component) => {
+      let value = parseInt(e.target.value);
+      if (isNaN(value)) {
+        return;
+      }
+      const newColor = new ColorInfo();
+      if (value != null) {
+        let h = this.currentColor.hue;
+        let s = this.currentColor.saturation;
+        let l = this.currentColor.lightness;
+        switch (component) {
+          case "hue":
+            if (value < 0) {
+              value = 0;
+            }
+            if (value > 359) {
+              value = 0;
+            }
+            h = value;
+            break;
+          case "saturation":
+            if (value < 0) {
+              value = 0;
+            }
+            if (value > 100) {
+              value = 100;
+            }
+            s = value / 100;
+            break;
+          case "lightness":
+            if (value < 0) {
+              value = 0;
+            }
+            if (value > 100) {
+              value = 100;
+            }
+            l = value / 100;
+            break;
+          default:
+            break;
+        }
+        newColor.hue = h;
+        newColor.saturation = s;
+        newColor.lightness = l;
+        this.currentColor = newColor;
+      }
+    };
+    this.handleSaturationLightnessKeyDown = (e) => {
+      let newColor = new ColorInfo();
+      newColor.hue = this.currentColor.hue;
+      newColor.saturation = this.currentColor.saturation;
+      newColor.lightness = this.currentColor.lightness;
+      let value = 0.01;
+      if (e.shiftKey) {
+        value = 0.1;
+      }
+      switch (e.key) {
+        case "ArrowUp":
+          newColor.lightness += value;
+          break;
+        case "ArrowDown":
+          newColor.lightness -= value;
+          break;
+        case "ArrowLeft":
+          newColor.saturation -= value;
+          break;
+        case "ArrowRight":
+          newColor.saturation += value;
+        default:
+          break;
+      }
+      this.currentColor = newColor;
+    };
+    this.handleHueKeyDown = (e) => {
+      let newColor = new ColorInfo();
+      newColor.hue = this.currentColor.hue;
+      newColor.saturation = this.currentColor.saturation;
+      newColor.lightness = this.currentColor.lightness;
+      let value = 1;
+      if (e.shiftKey) {
+        value = 10;
+      }
+      switch (e.key) {
+        case "ArrowLeft":
+          newColor.hue -= value;
+          break;
+        case "ArrowRight":
+          newColor.hue += value;
+        default:
+          break;
+      }
+      this.currentColor = newColor;
+    };
+  }
+  colorChangedHandler(color) {
+    this.colorChanged.emit(color);
+  }
+  handeCurrentColorChanged(newValue) {
+    this.colorChangedHandler(newValue);
+  }
+  componentWillLoad() {
+    this.handleHexChange(this.color);
+  }
+  componentDidLoad() {
+    this.el.style.setProperty("--color-box-height", this.colorBoxHeight.toString());
+  }
+  getHex() {
+    return this.getDoublet(this.currentColor.red) + this.getDoublet(this.currentColor.green) + this.getDoublet(this.currentColor.blue);
+  }
+  getContrast() {
+    return this.currentColor.contrastColor;
+  }
+  getDoublet(value) {
+    const valueString = value.toString(16).toUpperCase();
+    if (valueString.length === 1) {
+      return '0' + valueString;
+    }
+    return valueString;
+  }
+  handleHexChange(value) {
+    const newColor = new ColorInfo();
+    if (value.match(/^(?:[\da-f]{3}|[\da-f]{6})$/i).length > 0) {
+      if (value.length === 3) {
+        let expanded = value[0] + value[0] + value[1] + value[1] + value[2] + value[2];
+        value = expanded;
+      }
+      newColor.red = parseInt(value.substr(0, 2), 16);
+      newColor.green = parseInt(value.substr(2, 2), 16);
+      newColor.blue = parseInt(value.substr(4, 2), 16);
+    }
+    else {
+      newColor.red = this.currentColor.red;
+      newColor.green = this.currentColor.green;
+      newColor.blue = this.currentColor.blue;
+    }
+    this.currentColor = newColor;
+  }
+  switchColorMode(e) {
+    switch (e.target.id) {
+      case "rgb-switch":
+        this.rgbDisplay = "none";
+        this.hslDisplay = "none";
+        this.hexDisplay = "flex";
+        break;
+      case "hex-switch":
+        this.rgbDisplay = "none";
+        this.hslDisplay = "flex";
+        this.hexDisplay = "none";
+        break;
+      case "hsl-switch":
+        this.rgbDisplay = "flex";
+        this.hslDisplay = "none";
+        this.hexDisplay = "none";
+        break;
+      default:
+        this.rgbDisplay = "flex";
+        this.hslDisplay = "none";
+        this.hexDisplay = "none";
+    }
+  }
+  render() {
+    const hue = this.currentColor.hue;
+    const saturation = this.currentColor.saturation;
+    const lightness = this.currentColor.lightness;
+    const red = this.currentColor.red;
+    const green = this.currentColor.green;
+    const blue = this.currentColor.blue;
+    return (h("div", { class: "dnn-color-picker" },
+      h("div", { class: "dnn-color-sliders" },
+        h("div", { class: "dnn-color-s-b", ref: (element) => this.saturationLightnessBox = element, style: { backgroundColor: `hsl(${hue},100%,50%)` }, onMouseDown: this.handleSaturationLightnessMouseDown.bind(this) },
+          h("button", { class: "dnn-s-b-picker", "aria-label": "Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%", role: "slider", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuetext": `Saturation: ${Math.round(this.currentColor.saturation * 100)}%, Lightness: ${Math.round(this.currentColor.lightness * 100)}%`, style: {
+              left: Math.round(saturation * 100) + "%",
+              bottom: Math.round(lightness * 100) + "%"
+            }, onKeyDown: (e) => this.handleSaturationLightnessKeyDown(e) })),
+        h("div", { class: "dnn-color-bar" },
+          h("div", { class: "dnn-color-result", style: {
+              backgroundColor: '#' + this.getHex(),
+              boxShadow: "0 0 2px 1px " + "#" + this.getContrast()
+            } }),
+          h("div", { class: "dnn-color-hue", ref: (element) => this.hueRange = element, onMouseDown: this.handleHueMouseDown.bind(this) },
+            h("button", { class: "dnn-hue-picker", "aria-label": "Press left or right to adjust hue, hold shift to move by 10 degrees", role: "slider", "aria-valuemin": "0", "aria-valuemax": "359", "aria-valuenow": Math.round(hue), style: { left: (hue / 359 * 100).toString() + "%" }, onKeyDown: (e) => this.handleHueKeyDown(e) })))),
+      h("div", { class: "dnn-color-fields" },
+        h("div", { class: "dnn-rgb-color-fields", style: { display: this.rgbDisplay } },
+          h("div", { class: "dnn-rgb-color-field" },
+            h("label", null, "R"),
+            h("input", { type: "number", min: "0", max: "255", step: "1", class: "red", value: red, "aria-label": "red value", onChange: (e) => this.handleComponentValueChange(e, 'red') })),
+          h("div", { class: "dnn-rgb-color-field" },
+            h("label", null, "G"),
+            h("input", { type: "number", min: "0", max: "255", class: "green", value: green, "aria-label": "green value", onChange: (e) => this.handleComponentValueChange(e, 'green') })),
+          h("div", { class: "dnn-rgb-color-field" },
+            h("label", null, "B"),
+            h("input", { type: "number", min: "0", max: "255", class: "blue", value: blue, "aria-label": "blue value", onChange: (e) => this.handleComponentValueChange(e, 'blue') })),
+          h("div", { class: "dnn-color-mode-switch" },
+            h("button", { id: "rgb-switch", onClick: this.switchColorMode.bind(this), "aria-label": "switch to hexadecimal value entry" },
+              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+                h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))),
+        h("div", { class: "dnn-hsl-color-fields", style: { display: this.hslDisplay } },
+          h("div", { class: "dnn-hsl-color-field" },
+            h("label", null, "H"),
+            h("input", { type: "number", min: "0", max: "359", step: 1, value: Math.round(hue), "aria-label": "Hue", onChange: (e) => this.handleHSLChange(e, 'hue') })),
+          h("div", { class: "dnn-hsl-color-field" },
+            h("label", null, "S"),
+            h("input", { type: "number", min: "0", max: "100", step: 1, value: Math.round(saturation * 100), "aria-label": "Saturation", onChange: (e) => this.handleHSLChange(e, 'saturation') })),
+          h("div", { class: "dnn-hsl-color-field" },
+            h("label", null, "L"),
+            h("input", { type: "number", min: "0", max: "100", step: 1, value: Math.round(lightness * 100), "aria-label": "Lightness", onChange: (e) => this.handleHSLChange(e, 'lightness') })),
+          h("div", { class: "dnn-color-mode-switch" },
+            h("button", { id: "hsl-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to red, green, blue entry mode" },
+              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+                h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))),
+        h("div", { class: "dnn-hex-color-fields", style: { display: this.hexDisplay } },
+          h("div", { class: "dnn-hex-color-field" },
+            h("label", null, "HEX"),
+            h("div", { class: "hex-input" },
+              h("input", { type: "text", "aria-label": "Hexadecimal value", value: this.getHex(), onChange: e => this.handleHexChange(e.target.value) }),
+              h("button", { class: "copy", "aria-label": "copy value" },
+                h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                  h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+                  h("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" }))))),
+          h("div", { class: "dnn-color-mode-switch" },
+            h("button", { id: "hex-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to hue saturation lightness values" },
+              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+                h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))))));
+  }
+  static get is() { return "dnn-color-picker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-color-picker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-color-picker.css"]
+  }; }
+  static get properties() { return {
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the initial color, must be a valid 8 character hexadecimal string without the # sign."
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "\"FFFFFF\""
+    },
+    "colorBoxHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "example",
+            "text": "100% renders a perfect square"
+          }],
+        "text": "Sets the width-height ratio of the color picker saturation-lightness box."
+      },
+      "attribute": "color-box-height",
+      "reflect": false,
+      "defaultValue": "\"50%\""
+    }
+  }; }
+  static get states() { return {
+    "currentColor": {},
+    "rgbDisplay": {},
+    "hslDisplay": {},
+    "hexDisplay": {}
+  }; }
+  static get events() { return [{
+      "method": "colorChanged",
+      "name": "colorChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "see",
+            "text": ".. /../utilities/colorInfo.ts"
+          }],
+        "text": "Fires up when the color is changed and emits a ColorInfo object"
+      },
+      "complexType": {
+        "original": "ColorInfo",
+        "resolved": "ColorInfo",
+        "references": {
+          "ColorInfo": {
+            "location": "import",
+            "path": "../../utilities/colorInfo"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "currentColor",
+      "methodName": "handeCurrentColorChanged"
+    }]; }
+}
+__decorate([
+  Debounce(100)
+], DnnColorPicker.prototype, "colorChangedHandler", null);
+//# sourceMappingURL=dnn-color-picker.js.map

package/dist/collection/components/dnn-color-picker/dnn-color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-color-picker.js","sourceRoot":"","sources":["../../../src/components/dnn-color-picker/dnn-color-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/** Reusable DNN UI component to pick a color\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nimport { Component, h, State, Element, Prop, EventEmitter, Event, Watch } from \"@stencil/core\";\r\nimport { ColorInfo } from '../../utilities/colorInfo';\r\nimport { Debounce } from \"../../utilities/debounce\";\r\n\r\n/** Color Picker for Dnn */\r\n@Component({\r\n    tag: 'dnn-color-picker',\r\n    styleUrl: 'dnn-color-picker.scss',\r\n    shadow: true\r\n})\r\nexport class DnnColorPicker {\r\n\r\n    @Element() el: HTMLDnnColorPickerElement;\r\n\r\n    /** Sets the initial color, must be a valid 8 character hexadecimal string without the # sign. */\r\n    @Prop() color: string = \"FFFFFF\";\r\n\r\n    /** Sets the width-height ratio of the color picker saturation-lightness box.\r\n     * @example 100% renders a perfect square\r\n     */\r\n    @Prop() colorBoxHeight: string = \"50%\";\r\n    \r\n    @State() currentColor: ColorInfo;\r\n    @State() rgbDisplay: string = \"flex\";\r\n    @State() hslDisplay: string = \"none\";\r\n    @State() hexDisplay: string = \"none\";\r\n\r\n    /** Fires up when the color is changed and emits a ColorInfo object\r\n     * @see ../../utilities/colorInfo.ts\r\n    */\r\n    @Event() colorChanged: EventEmitter<ColorInfo>;\r\n\r\n    @Debounce(100)\r\n    private colorChangedHandler(color: ColorInfo) {\r\n        this.colorChanged.emit(color);\r\n    }\r\n\r\n    @Watch(\"currentColor\")\r\n    handeCurrentColorChanged(newValue: ColorInfo){\r\n        this.colorChangedHandler(newValue);\r\n    }\r\n    \r\n    private saturationLightnessBox?: HTMLDivElement;\r\n    private hueRange?: HTMLDivElement;\r\n\r\n\r\n    componentWillLoad() {\r\n        this.handleHexChange(this.color);\r\n    }\r\n\r\n    componentDidLoad() {\r\n        (this.el as unknown as HTMLElement).style.setProperty(\"--color-box-height\", this.colorBoxHeight.toString());\r\n    }\r\n    \r\n    private getHex() {\r\n       return this.getDoublet(this.currentColor.red) + this.getDoublet(this.currentColor.green) + this.getDoublet(this.currentColor.blue);\r\n    }\r\n\r\n    private getContrast() {\r\n        return this.currentColor.contrastColor;\r\n    }\r\n\r\n    private getDoublet(value: number){\r\n        const valueString = value.toString(16).toUpperCase();\r\n        if (valueString.length === 1){\r\n            return '0' + valueString;\r\n        }\r\n        return valueString;\r\n    }\r\n\r\n    private handleSaturationLightnessMouseDown = (e) => {\r\n        e.preventDefault();\r\n        this.handleDragLightnessSaturation(e);\r\n        window.addEventListener('mousemove', this.handleDragLightnessSaturation);\r\n        window.addEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n    }\r\n\r\n    private handleDragLightnessSaturation = (e) => {\r\n        const rect = this.saturationLightnessBox.getBoundingClientRect();        \r\n\r\n        let x = e.clientX - rect.left;        \r\n        if (x < 0) { x = 0}\r\n        if (x > rect.width) { x = rect.width}\r\n        x = x/rect.width;\r\n\r\n        let y = e.clientY - rect.top;\r\n        if (y < 0) { y = 0}\r\n        if (y > rect.height) { y = rect.height}\r\n        y = 1 - (y/rect.height);\r\n\r\n        const newColor = new ColorInfo();\r\n        newColor.hue = this.currentColor.hue;\r\n        newColor.saturation = x;\r\n        newColor.lightness = y;\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    private handleSaturationLightnessMouseUp = () => {\r\n        window.removeEventListener('mousemove', this.handleDragLightnessSaturation);\r\n        window.removeEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n    }\r\n\r\n    private handleHueMouseDown = (e) => {\r\n        e.preventDefault();\r\n        this.handleDragHue(e);\r\n        window.addEventListener('mousemove', this.handleDragHue);\r\n        window.addEventListener('mouseup', this.handleHueMouseUp);        \r\n    }\r\n\r\n    private handleHueMouseUp = () => {\r\n        window.removeEventListener('mousemove', this.handleDragHue);\r\n        window.removeEventListener('mouseup', this.handleHueMouseUp); \r\n    }\r\n\r\n    private handleDragHue = (e) => {\r\n        const rect = this.hueRange.getBoundingClientRect();        \r\n\r\n        let x = e.clientX - rect.left;\r\n        if (x < 0) { x = 0}\r\n        if (x > rect.width) { x = rect.width}\r\n        x = x/rect.width*360;        \r\n\r\n        const newColor = new ColorInfo();\r\n        newColor.hue = x;\r\n        newColor.saturation = this.currentColor.saturation;\r\n        newColor.lightness = this.currentColor.lightness;\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    private handleComponentValueChange = (e, channel) => {\r\n        let value = parseInt(e.target.value);\r\n        if (isNaN(value)) { return }\r\n        const newColor = new ColorInfo();\r\n        if (value < 0) { value = 0; }\r\n        if (value > 255) { value = 255; }\r\n        let r = this.currentColor.red;\r\n        let g = this.currentColor.green;\r\n        let b = this.currentColor.blue;\r\n        switch (channel) {\r\n            case 'red':\r\n                r = value;\r\n                break;\r\n            case 'green':\r\n                g = value;\r\n                break;\r\n            case 'blue':\r\n                b = value;\r\n                break;\r\n            default:\r\n                break;\r\n        }\r\n        newColor.green = g;\r\n        newColor.red = r;\r\n        newColor.blue = b;\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    private handleHSLChange = (e, component) => {        \r\n        let value = parseInt(e.target.value);\r\n        if (isNaN(value)) {return}\r\n        const newColor = new ColorInfo();\r\n        if (value != null) {            \r\n            let h = this.currentColor.hue;\r\n            let s = this.currentColor.saturation;\r\n            let l = this.currentColor.lightness;\r\n            switch (component) {\r\n                case \"hue\":\r\n                    if (value < 0) { value = 0}\r\n                    if (value > 359) { value = 0}\r\n                    h = value;\r\n                    break;\r\n                case \"saturation\":\r\n                    if (value < 0) { value = 0}\r\n                    if (value > 100) { value = 100}\r\n                    s = value / 100;\r\n                    break;\r\n                case \"lightness\":\r\n                    if (value < 0) { value = 0}\r\n                    if (value > 100) { value = 100}\r\n                    l = value / 100;\r\n                    break;            \r\n                default:\r\n                    break;                \r\n            }\r\n            newColor.hue = h;\r\n            newColor.saturation = s;\r\n            newColor.lightness = l;\r\n            this.currentColor = newColor;\r\n        }\r\n    }\r\n\r\n    private handleHexChange(value: string){\r\n        const newColor = new ColorInfo();\r\n        if (value.match(/^(?:[\\da-f]{3}|[\\da-f]{6})$/i).length > 0) {\r\n            if (value.length === 3){\r\n                let expanded = value[0] + value[0] + value[1] + value[1] + value[2] + value [2];\r\n                value = expanded;\r\n            }\r\n            newColor.red = parseInt(value.substr(0,2), 16);\r\n            newColor.green = parseInt(value.substr(2,2), 16);\r\n            newColor.blue = parseInt(value.substr(4,2), 16);\r\n        }\r\n        else{\r\n            newColor.red = this.currentColor.red;\r\n            newColor.green = this.currentColor.green;\r\n            newColor.blue = this.currentColor.blue;\r\n        }\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    private switchColorMode(e) {\r\n        switch(e.target.id) {\r\n            case \"rgb-switch\":\r\n                this.rgbDisplay = \"none\";\r\n                this.hslDisplay = \"none\";\r\n                this.hexDisplay = \"flex\";\r\n                break;\r\n            case \"hex-switch\":\r\n                this.rgbDisplay = \"none\";\r\n                this.hslDisplay = \"flex\";\r\n                this.hexDisplay = \"none\";\r\n                break;\r\n            case \"hsl-switch\":\r\n                this.rgbDisplay = \"flex\";\r\n                this.hslDisplay = \"none\";\r\n                this.hexDisplay = \"none\";\r\n                break;\r\n            default:\r\n                this.rgbDisplay = \"flex\";\r\n                this.hslDisplay = \"none\";\r\n                this.hexDisplay = \"none\";\r\n        }\r\n    }\r\n\r\n    private handleSaturationLightnessKeyDown = (e) => {        \r\n        let newColor = new ColorInfo();\r\n        newColor.hue = this.currentColor.hue;\r\n        newColor.saturation = this.currentColor.saturation;\r\n        newColor.lightness = this.currentColor.lightness;\r\n\r\n        let value = 0.01;\r\n        if (e.shiftKey) { value = 0.1 ;}\r\n\r\n        switch (e.key) {\r\n            case \"ArrowUp\":\r\n                newColor.lightness += value;\r\n                break;\r\n            case \"ArrowDown\":\r\n                newColor.lightness -= value;\r\n                break;\r\n            case \"ArrowLeft\":\r\n                newColor.saturation -= value;\r\n                break;\r\n            case \"ArrowRight\":\r\n                newColor.saturation += value;\r\n            default:\r\n                break;                \r\n        }\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    private handleHueKeyDown = (e) => {\r\n        let newColor = new ColorInfo();\r\n        newColor.hue = this.currentColor.hue;\r\n        newColor.saturation = this.currentColor.saturation;\r\n        newColor.lightness = this.currentColor.lightness;\r\n\r\n        let value = 1;\r\n        if (e.shiftKey) { value = 10}\r\n\r\n        switch (e.key) {\r\n            case \"ArrowLeft\":\r\n                newColor.hue -= value;\r\n                break;\r\n            case \"ArrowRight\":\r\n                newColor.hue += value;\r\n            default:\r\n                break;\r\n        }\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    render() {\r\n        const hue = this.currentColor.hue;\r\n        const saturation = this.currentColor.saturation;\r\n        const lightness = this.currentColor.lightness;\r\n        const red = this.currentColor.red;\r\n        const green = this.currentColor.green;\r\n        const blue = this.currentColor.blue;\r\n\r\n        return (\r\n            <div class=\"dnn-color-picker\">\r\n                <div class=\"dnn-color-sliders\">\r\n                    <div class=\"dnn-color-s-b\" ref={(element) => this.saturationLightnessBox = element as HTMLDivElement}\r\n                        style={{backgroundColor: `hsl(${hue},100%,50%)`}}\r\n                        onMouseDown={this.handleSaturationLightnessMouseDown.bind(this)}\r\n                    >\r\n                        <button class=\"dnn-s-b-picker\"\r\n                            aria-label=\"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%\"\r\n                            role=\"slider\"\r\n                            aria-valuemin=\"0\"\r\n                            aria-valuemax=\"100\"\r\n                            aria-valuetext={`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`}\r\n                            style={{\r\n                                left: Math.round(saturation * 100)  + \"%\",\r\n                                bottom: Math.round(lightness * 100)  + \"%\"\r\n                            }}\r\n                            onKeyDown={(e) => this.handleSaturationLightnessKeyDown(e)}\r\n                        />\r\n                    </div>\r\n                    <div class=\"dnn-color-bar\">\r\n                        <div class=\"dnn-color-result\" style={{\r\n                            backgroundColor: '#' + this.getHex(),\r\n                            boxShadow: \"0 0 2px 1px \" + \"#\" + this.getContrast()\r\n                        }} \r\n                        />\r\n                        <div class=\"dnn-color-hue\"\r\n                            ref={(element) => this.hueRange = element as HTMLDivElement}\r\n                            onMouseDown={this.handleHueMouseDown.bind(this)}\r\n                        >\r\n                            <button class=\"dnn-hue-picker\"\r\n                                aria-label=\"Press left or right to adjust hue, hold shift to move by 10 degrees\"\r\n                                role=\"slider\"\r\n                                aria-valuemin=\"0\"\r\n                                aria-valuemax=\"359\"\r\n                                aria-valuenow={Math.round(hue)}\r\n                                style={{left: (hue/359*100).toString() + \"%\"}}\r\n                                onKeyDown={(e) => this.handleHueKeyDown(e)}\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"dnn-color-fields\">\r\n                    <div class=\"dnn-rgb-color-fields\" style={{display: this.rgbDisplay}}>\r\n                        <div class=\"dnn-rgb-color-field\">\r\n                            <label>R</label>\r\n                            <input type=\"number\" min=\"0\" max=\"255\" step=\"1\" class=\"red\" value={red} aria-label=\"red value\"\r\n                                onChange={(e) => this.handleComponentValueChange(e, 'red')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-rgb-color-field\">\r\n                            <label>G</label>\r\n                            <input type=\"number\" min=\"0\" max=\"255\" class=\"green\" value={green} aria-label=\"green value\"\r\n                                onChange={(e) => this.handleComponentValueChange(e, 'green')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-rgb-color-field\">\r\n                            <label>B</label>\r\n                            <input type=\"number\" min=\"0\" max=\"255\" class=\"blue\" value={blue} aria-label=\"blue value\"\r\n                                onChange={(e) => this.handleComponentValueChange(e, 'blue')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-color-mode-switch\">\r\n                            <button\r\n                                id=\"rgb-switch\"\r\n                                onClick={this.switchColorMode.bind(this)}\r\n                                aria-label=\"switch to hexadecimal value entry\"\r\n                            >\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"dnn-hsl-color-fields\" style={{display: this.hslDisplay}}>\r\n                        <div class=\"dnn-hsl-color-field\">\r\n                            <label>H</label>\r\n                            <input type=\"number\" min=\"0\" max=\"359\" step={1} value={Math.round(hue)} aria-label=\"Hue\"\r\n                                onChange={(e) => this.handleHSLChange(e, 'hue')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-hsl-color-field\">\r\n                            <label>S</label>\r\n                            <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(saturation*100)} aria-label=\"Saturation\"\r\n                                onChange={(e) => this.handleHSLChange(e, 'saturation')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-hsl-color-field\">\r\n                            <label>L</label>\r\n                            <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(lightness*100)} aria-label=\"Lightness\"\r\n                                onChange={(e) => this.handleHSLChange(e, 'lightness')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-color-mode-switch\">\r\n                            <button\r\n                                id=\"hsl-switch\"\r\n                                onClick={this.switchColorMode.bind(this)}\r\n                                aria-label=\"Switch to red, green, blue entry mode\"\r\n                            >\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"dnn-hex-color-fields\" style={{display: this.hexDisplay}}>\r\n                        <div class=\"dnn-hex-color-field\">\r\n                            <label>HEX</label>\r\n                            <div class=\"hex-input\">\r\n                                <input type=\"text\" aria-label=\"Hexadecimal value\"\r\n                                    value={this.getHex()}\r\n                                    onChange={e => this.handleHexChange((e.target as HTMLInputElement).value)}\r\n                                />\r\n                                <button\r\n                                    class=\"copy\"\r\n                                    aria-label=\"copy value\"\r\n                                >\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"dnn-color-mode-switch\">\r\n                            <button\r\n                                id=\"hex-switch\"\r\n                                onClick={this.switchColorMode.bind(this)}\r\n                                aria-label=\"Switch to hue saturation lightness values\"\r\n                            >\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}"]}

package/dist/collection/components/dnn-dropzone/dnn-dropzone.css

@@ -0,0 +1,62 @@
+:host {
+  /** 
+  * @prop --border-color: The color of the border.
+  * @prop --border-radius: The radius of the controls borders.
+  * @prop --drop-background-color: The color of the background when a file is dropping.
+  */
+  --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;
+}