npm - @dnncommunity/dnn-elements - Versions diffs - 0.15.0-beta.2 → 0.15.0-beta.22 - Mend

@dnncommunity/dnn-elements 0.15.0-beta.2 → 0.15.0-beta.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (269) hide show

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

@@ -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 DELETED Viewed

@@ -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}