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

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

@@ -1,508 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-d53702a3.js');
-const debounce = require('./debounce-901e1f0c.js');
-
-/** Color utility class with hsl and rgb converters
- * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV
- * @copyright Copyright (c) .NET Foundation. All rights reserved.
- * @license MIT
- */
-class ColorInfo {
-  constructor() {
-    this._hue = 0;
-    this._saturation = 0;
-    this._lightness = 0;
-  }
-  /** gets the color hue
-   * @returns a number between 0 and 359, could contain decimals
-   */
-  get hue() { return this._hue; }
-  set hue(value) {
-    if (value < 0) {
-      value = 0;
-    }
-    if (value > 359) {
-      value = 359;
-    }
-    this._hue = value;
-  }
-  /** gets the color saturation
-   * @returns a number between 0 and 1, could contain decimals
-  */
-  get saturation() { return this._saturation; }
-  set saturation(value) {
-    if (value < 0) {
-      value = 0;
-    }
-    if (value > 1) {
-      value = 1;
-    }
-    this._saturation = value;
-  }
-  /** gets the color lightness
-   * @returns a number between 0 and 1, could contain decimals
-   */
-  get lightness() { return this._lightness; }
-  set lightness(value) {
-    if (value < 0) {
-      value = 0;
-    }
-    if (value > 1) {
-      value = 1;
-    }
-    this._lightness = value;
-  }
-  /** gets or sets the red component
-   * @returns an integer between 0 and 255
-  */
-  get red() {
-    return this.getRGB().red;
-  }
-  set red(value) {
-    this.setHSL(value, this.green, this.blue);
-  }
-  /** gets or sets the green component
-   * @returns an integer between 0 and 255
-   */
-  get green() {
-    return this.getRGB().green;
-  }
-  set green(value) {
-    this.setHSL(this.red, value, this.blue);
-  }
-  /** gets or sets the blue component
-   * @returns an integer between 0 and 255
-   */
-  get blue() {
-    return this.getRGB().blue;
-  }
-  set blue(value) {
-    this.setHSL(this.red, this.green, value);
-  }
-  /** gets or sets the hex color value, expresses as 6 hexadecimal characters.
-   * @returns hex representation of the color
-   */
-  get hex() {
-    var r = this.getHex(this.red);
-    var g = this.getHex(this.green);
-    var b = this.getHex(this.blue);
-    return r + g + b;
-  }
-  set hex(value) {
-    this.red = parseInt(value.substr(0, 2));
-    this.green = parseInt(value.substr(2, 2));
-    this.blue = parseInt(value.substr(4, 2));
-  }
-  /** gets white or black color that is a good oposite to the current color
-   * @returns - "000000" or "FFFFFF"
-   */
-  get contrastColor() {
-    const brightness = (this.red * 299 + this.green * 587 + this.blue * 114) / 1000;
-    if (brightness > 127) {
-      return "000000";
-    }
-    return "FFFFFF";
-  }
-  getRGB() {
-    const chroma = (1 - Math.abs((2 * this._lightness) - 1)) * this.saturation;
-    // find the quandrant of the hue
-    const quadrant = this._hue / 60;
-    // calculate the offset from the quandrant center
-    const offset = chroma * (1 - Math.abs(quadrant % 2 - 1));
-    // Apply the chroma to the primary component and the offset to the 2nd most important component
-    let r = 0, g = 0, b = 0;
-    if (0 <= quadrant && quadrant <= 1) {
-      r = chroma;
-      g = offset; // red to yellow
-    }
-    else if (1 <= quadrant && quadrant <= 2) {
-      g = chroma;
-      r = offset; // yellow to green
-    }
-    else if (2 <= quadrant && quadrant <= 3) {
-      g = chroma;
-      b = offset; // green to cyan
-    }
-    else if (3 <= quadrant && quadrant <= 4) {
-      b = chroma;
-      g = offset; // cyan to blue
-    }
-    else if (4 <= quadrant && quadrant <= 5) {
-      b = chroma;
-      r = offset; // blue to magenta
-    }
-    else if (5 <= quadrant && quadrant <= 6) {
-      r = chroma;
-      b = offset; // magenta to red
-    }
-    // calculate the bias to add to all channels to match the lightness
-    const bias = this._lightness - (chroma / 2);
-    return {
-      red: Math.round((r + bias) * 255),
-      green: Math.round((g + bias) * 255),
-      blue: Math.round((b + bias) * 255)
-    };
-  }
-  setHSL(red, green, blue) {
-    // GENERAL DATA
-    // all math is based on values from 0 to 1
-    const r = red / 255, g = green / 255, b = blue / 255;
-    // we need to max, min and the difference between them to derive hsl
-    const min = Math.min(r, g, b);
-    const max = Math.max(r, g, b);
-    const diff = max - min;
-    let h = 0, s = 0, l = 0;
-    // HUE
-    if (diff === 0) { // neutral
-      h = 0;
-    }
-    else if (max === r) { // red (magenta to yellow range)
-      h = 60 * ((g - b) / diff);
-    }
-    else if (max === g) { // green (yellow to cyan range)
-      h = 60 * (2 + ((b - r) / diff));
-    }
-    else if (max === b) { // blue (cyan to magenta range)
-      h = 60 * (4 + ((r - g) / diff));
-    }
-    if (h < 0) {
-      h = h + 360;
-    } // ensures positive hues only
-    if (h > 359) {
-      h = 359;
-    } // ensures we never return 360 for simplicity since it is the same as 0
-    // LIGHTNESS
-    l = (max + min) / 2;
-    // SATURATION
-    if (max === 0 || min === 1) { // pure black or white have no saturation
-      s = 0;
-    }
-    else {
-      s = (max - l) / (Math.min(l, 1 - l));
-    }
-    this._hue = h;
-    this._saturation = s;
-    this._lightness = l;
-  }
-  getHex(value) {
-    var hex = value.toString(16);
-    if (hex.length < 2) {
-      hex = "0" + hex;
-    }
-    return hex;
-  }
-}
-
-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.
- * @license MIT
- */
-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;
-};
-const DnnColorPicker = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.colorChanged = index.createEvent(this, "colorChanged", 7);
-    /** 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 (index.h("div", { class: "dnn-color-picker" }, index.h("div", { class: "dnn-color-sliders" }, index.h("div", { class: "dnn-color-s-b", ref: (element) => this.saturationLightnessBox = element, style: { backgroundColor: `hsl(${hue},100%,50%)` }, onMouseDown: this.handleSaturationLightnessMouseDown.bind(this) }, index.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) })), index.h("div", { class: "dnn-color-bar" }, index.h("div", { class: "dnn-color-result", style: {
-        backgroundColor: '#' + this.getHex(),
-        boxShadow: "0 0 2px 1px " + "#" + this.getContrast()
-      } }), index.h("div", { class: "dnn-color-hue", ref: (element) => this.hueRange = element, onMouseDown: this.handleHueMouseDown.bind(this) }, index.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) })))), index.h("div", { class: "dnn-color-fields" }, index.h("div", { class: "dnn-rgb-color-fields", style: { display: this.rgbDisplay } }, index.h("div", { class: "dnn-rgb-color-field" }, index.h("label", null, "R"), index.h("input", { type: "number", min: "0", max: "255", step: "1", class: "red", value: red, "aria-label": "red value", onChange: (e) => this.handleComponentValueChange(e, 'red') })), index.h("div", { class: "dnn-rgb-color-field" }, index.h("label", null, "G"), index.h("input", { type: "number", min: "0", max: "255", class: "green", value: green, "aria-label": "green value", onChange: (e) => this.handleComponentValueChange(e, 'green') })), index.h("div", { class: "dnn-rgb-color-field" }, index.h("label", null, "B"), index.h("input", { type: "number", min: "0", max: "255", class: "blue", value: blue, "aria-label": "blue value", onChange: (e) => this.handleComponentValueChange(e, 'blue') })), index.h("div", { class: "dnn-color-mode-switch" }, index.h("button", { id: "rgb-switch", onClick: this.switchColorMode.bind(this), "aria-label": "switch to hexadecimal value entry" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), index.h("div", { class: "dnn-hsl-color-fields", style: { display: this.hslDisplay } }, index.h("div", { class: "dnn-hsl-color-field" }, index.h("label", null, "H"), index.h("input", { type: "number", min: "0", max: "359", step: 1, value: Math.round(hue), "aria-label": "Hue", onChange: (e) => this.handleHSLChange(e, 'hue') })), index.h("div", { class: "dnn-hsl-color-field" }, index.h("label", null, "S"), index.h("input", { type: "number", min: "0", max: "100", step: 1, value: Math.round(saturation * 100), "aria-label": "Saturation", onChange: (e) => this.handleHSLChange(e, 'saturation') })), index.h("div", { class: "dnn-hsl-color-field" }, index.h("label", null, "L"), index.h("input", { type: "number", min: "0", max: "100", step: 1, value: Math.round(lightness * 100), "aria-label": "Lightness", onChange: (e) => this.handleHSLChange(e, 'lightness') })), index.h("div", { class: "dnn-color-mode-switch" }, index.h("button", { id: "hsl-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to red, green, blue entry mode" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), index.h("div", { class: "dnn-hex-color-fields", style: { display: this.hexDisplay } }, index.h("div", { class: "dnn-hex-color-field" }, index.h("label", null, "HEX"), index.h("div", { class: "hex-input" }, index.h("input", { type: "text", "aria-label": "Hexadecimal value", value: this.getHex(), onChange: e => this.handleHexChange(e.target.value) }), index.h("button", { class: "copy", "aria-label": "copy value" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.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" }))))), index.h("div", { class: "dnn-color-mode-switch" }, index.h("button", { id: "hex-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to hue saturation lightness values" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "currentColor": ["handeCurrentColorChanged"]
-  }; }
-};
-__decorate([
-  debounce.Debounce(100)
-], DnnColorPicker.prototype, "colorChangedHandler", null);
-DnnColorPicker.style = dnnColorPickerCss;
-
-exports.dnn_color_picker = DnnColorPicker;
-
-//# sourceMappingURL=dnn-color-picker.cjs.entry.js.map

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

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