@spectrum-web-components/color-wheel 0.3.12 → 0.3.13-devmode.0

package/src/ColorWheel.js

@@ -1,299 +1,280 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { __decorate } from "tslib";
-import { html, } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
-import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import '@spectrum-web-components/color-handle/sp-color-handle.js';
-import styles from './color-wheel.css.js';
-import { extractHueAndSaturationRegExp, replaceHueAndSaturationRegExp, } from '@spectrum-web-components/color-handle';
-import { TinyColor } from '@ctrl/tinycolor';
-/**
- * @element sp-color-wheel
- * @slot gradient - a custom gradient visually outlining the available color values
- * @fires input - The value of the Color Wheel has changed.
- * @fires change - An alteration to the value of the Color Wheel has been committed by the user.
- */
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  html
+} from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import {
+  property,
+  query
+} from "@spectrum-web-components/base/src/decorators.js";
+import { streamingListener } from "@spectrum-web-components/base/src/streaming-listener.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+import "@spectrum-web-components/color-handle/sp-color-handle.js";
+import styles from "./color-wheel.css.js";
+import {
+  extractHueAndSaturationRegExp,
+  replaceHueAndSaturationRegExp
+} from "@spectrum-web-components/color-handle";
+import { TinyColor } from "@ctrl/tinycolor";
 export class ColorWheel extends Focusable {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.focused = false;
-        this.label = 'hue';
-        this.step = 1;
-        this._value = 0;
-        this._color = new TinyColor({ h: 0, s: 1, v: 1 });
-        this._previousColor = new TinyColor({ h: 0, s: 1, v: 1 });
-        this._format = {
-            format: '',
-            isString: false,
-        };
-        this._altered = 0;
-        this._pointerDown = false;
-    }
-    static get styles() {
-        return [styles];
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.focused = false;
+    this.label = "hue";
+    this.step = 1;
+    this._value = 0;
+    this._color = new TinyColor({ h: 0, s: 1, v: 1 });
+    this._previousColor = new TinyColor({ h: 0, s: 1, v: 1 });
+    this._format = {
+      format: "",
+      isString: false
+    };
+    this._altered = 0;
+    this._pointerDown = false;
+  }
+  static get styles() {
+    return [styles];
+  }
+  get value() {
+    return this._value;
+  }
+  set value(hue) {
+    const value = Math.min(360, Math.max(0, hue));
+    if (value === this.value) {
+      return;
     }
-    get value() {
-        return this._value;
-    }
-    set value(hue) {
-        const value = Math.min(360, Math.max(0, hue));
-        if (value === this.value) {
-            return;
+    const oldValue = this.value;
+    const { s, v } = this._color.toHsv();
+    this._color = new TinyColor({ h: value, s, v });
+    this._value = value;
+    this.requestUpdate("value", oldValue);
+  }
+  get color() {
+    switch (this._format.format) {
+      case "rgb":
+        return this._format.isString ? this._color.toRgbString() : this._color.toRgb();
+      case "prgb":
+        return this._format.isString ? this._color.toPercentageRgbString() : this._color.toPercentageRgb();
+      case "hex":
+      case "hex3":
+      case "hex4":
+      case "hex6":
+        return this._format.isString ? this._color.toHexString() : this._color.toHex();
+      case "hex8":
+        return this._format.isString ? this._color.toHex8String() : this._color.toHex8();
+      case "name":
+        return this._color.toName() || this._color.toRgbString();
+      case "hsl":
+        if (this._format.isString) {
+          const hslString = this._color.toHslString();
+          return hslString.replace(replaceHueAndSaturationRegExp, `$1${this.value}$2${this._saturation}`);
+        } else {
+          const { s, l, a } = this._color.toHsl();
+          return { h: this.value, s, l, a };
         }
-        const oldValue = this.value;
-        const { s, v } = this._color.toHsv();
-        this._color = new TinyColor({ h: value, s, v });
-        this._value = value;
-        this.requestUpdate('value', oldValue);
-    }
-    get color() {
-        switch (this._format.format) {
-            case 'rgb':
-                return this._format.isString
-                    ? this._color.toRgbString()
-                    : this._color.toRgb();
-            case 'prgb':
-                return this._format.isString
-                    ? this._color.toPercentageRgbString()
-                    : this._color.toPercentageRgb();
-            case 'hex':
-            case 'hex3':
-            case 'hex4':
-            case 'hex6':
-                return this._format.isString
-                    ? this._color.toHexString()
-                    : this._color.toHex();
-            case 'hex8':
-                return this._format.isString
-                    ? this._color.toHex8String()
-                    : this._color.toHex8();
-            case 'name':
-                return this._color.toName() || this._color.toRgbString();
-            case 'hsl':
-                if (this._format.isString) {
-                    const hslString = this._color.toHslString();
-                    return hslString.replace(replaceHueAndSaturationRegExp, `$1${this.value}$2${this._saturation}`);
-                }
-                else {
-                    const { s, l, a } = this._color.toHsl();
-                    return { h: this.value, s, l, a };
-                }
-            case 'hsv':
-                if (this._format.isString) {
-                    const hsvString = this._color.toHsvString();
-                    return hsvString.replace(replaceHueAndSaturationRegExp, `$1${this.value}$2${this._saturation}`);
-                }
-                else {
-                    const { s, v, a } = this._color.toHsv();
-                    return { h: this.value, s, v, a };
-                }
-            default:
-                return 'No color format applied.';
+      case "hsv":
+        if (this._format.isString) {
+          const hsvString = this._color.toHsvString();
+          return hsvString.replace(replaceHueAndSaturationRegExp, `$1${this.value}$2${this._saturation}`);
+        } else {
+          const { s, v, a } = this._color.toHsv();
+          return { h: this.value, s, v, a };
         }
+      default:
+        return "No color format applied.";
     }
-    set color(color) {
-        if (color === this.color) {
-            return;
-        }
-        const oldValue = this._color;
-        this._color = new TinyColor(color);
-        const format = this._color.format;
-        let isString = typeof color === 'string' || color instanceof String;
-        if (format.startsWith('hex')) {
-            isString = color.startsWith('#');
-        }
-        this._format = {
-            format,
-            isString,
-        };
-        if (isString && format.startsWith('hs')) {
-            const values = extractHueAndSaturationRegExp.exec(color);
-            if (values !== null) {
-                const [, h, s] = values;
-                this.value = Number(h);
-                this._saturation = Number(s);
-            }
-        }
-        else if (!isString && format.startsWith('hs')) {
-            const colorInput = this._color.originalInput;
-            const colorValues = Object.values(colorInput);
-            this.value = colorValues[0];
-            this._saturation = colorValues[1];
-        }
-        else {
-            const { h } = this._color.toHsv();
-            this.value = h;
-        }
-        this.requestUpdate('color', oldValue);
+  }
+  set color(color) {
+    if (color === this.color) {
+      return;
     }
-    get altered() {
-        return this._altered;
+    const oldValue = this._color;
+    this._color = new TinyColor(color);
+    const format = this._color.format;
+    let isString = typeof color === "string" || color instanceof String;
+    if (format.startsWith("hex")) {
+      isString = color.startsWith("#");
     }
-    set altered(altered) {
-        this._altered = altered;
-        this.step = Math.max(1, this.altered * 10);
+    this._format = {
+      format,
+      isString
+    };
+    if (isString && format.startsWith("hs")) {
+      const values = extractHueAndSaturationRegExp.exec(color);
+      if (values !== null) {
+        const [, h, s] = values;
+        this.value = Number(h);
+        this._saturation = Number(s);
+      }
+    } else if (!isString && format.startsWith("hs")) {
+      const colorInput = this._color.originalInput;
+      const colorValues = Object.values(colorInput);
+      this.value = colorValues[0];
+      this._saturation = colorValues[1];
+    } else {
+      const { h } = this._color.toHsv();
+      this.value = h;
     }
-    get focusElement() {
-        return this.input;
+    this.requestUpdate("color", oldValue);
+  }
+  get altered() {
+    return this._altered;
+  }
+  set altered(altered) {
+    this._altered = altered;
+    this.step = Math.max(1, this.altered * 10);
+  }
+  get focusElement() {
+    return this.input;
+  }
+  handleKeydown(event) {
+    const { key } = event;
+    this.focused = true;
+    this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter((key2) => !!key2).length;
+    let delta = 0;
+    switch (key) {
+      case "ArrowUp":
+        delta = this.step;
+        break;
+      case "ArrowDown":
+        delta = -this.step;
+        break;
+      case "ArrowLeft":
+        delta = this.step * (this.isLTR ? -1 : 1);
+        break;
+      case "ArrowRight":
+        delta = this.step * (this.isLTR ? 1 : -1);
+        break;
+      default:
+        return;
     }
-    handleKeydown(event) {
-        const { key } = event;
-        this.focused = true;
-        this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter((key) => !!key).length;
-        let delta = 0;
-        switch (key) {
-            case 'ArrowUp':
-                delta = this.step;
-                break;
-            case 'ArrowDown':
-                delta = -this.step;
-                break;
-            case 'ArrowLeft':
-                delta = this.step * (this.isLTR ? -1 : 1);
-                break;
-            case 'ArrowRight':
-                delta = this.step * (this.isLTR ? 1 : -1);
-                break;
-            default:
-                return;
-        }
-        event.preventDefault();
-        this.value = (360 + this.value + delta) % 360;
-        this._previousColor = this._color.clone();
-        this._color = new TinyColor(Object.assign(Object.assign({}, this._color.toHsl()), { h: this.value }));
-        this.dispatchEvent(new Event('input', {
-            bubbles: true,
-            composed: true,
-        }));
-        const applyDefault = this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-        }));
-        if (!applyDefault) {
-            this._color = this._previousColor;
-        }
+    event.preventDefault();
+    this.value = (360 + this.value + delta) % 360;
+    this._previousColor = this._color.clone();
+    this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });
+    this.dispatchEvent(new Event("input", {
+      bubbles: true,
+      composed: true
+    }));
+    const applyDefault = this.dispatchEvent(new Event("change", {
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }));
+    if (!applyDefault) {
+      this._color = this._previousColor;
     }
-    handleInput(event) {
-        const { valueAsNumber } = event.target;
-        this.value = valueAsNumber;
-        this._color = new TinyColor(Object.assign(Object.assign({}, this._color.toHsl()), { h: this.value }));
+  }
+  handleInput(event) {
+    const { valueAsNumber } = event.target;
+    this.value = valueAsNumber;
+    this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });
+  }
+  handleChange(event) {
+    this.handleInput(event);
+    this.dispatchEvent(new Event("change", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  focus(focusOptions = {}) {
+    super.focus(focusOptions);
+    this.forwardFocus();
+  }
+  forwardFocus() {
+    this.focused = this.hasVisibleFocusInTree();
+    this.input.focus();
+  }
+  handleFocusin() {
+    this.focused = true;
+  }
+  handleFocusout() {
+    if (this._pointerDown) {
+      return;
     }
-    handleChange(event) {
-        this.handleInput(event);
-        this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: true,
-        }));
+    this.altered = 0;
+    this.focused = false;
+  }
+  handlePointerdown(event) {
+    if (event.button !== 0) {
+      event.preventDefault();
+      return;
     }
-    focus(focusOptions = {}) {
-        super.focus(focusOptions);
-        this.forwardFocus();
+    this._pointerDown = true;
+    this._previousColor = this._color.clone();
+    this.boundingClientRect = this.getBoundingClientRect();
+    event.target.setPointerCapture(event.pointerId);
+    if (event.pointerType === "mouse") {
+      this.focused = true;
     }
-    forwardFocus() {
-        this.focused = this.hasVisibleFocusInTree();
-        this.input.focus();
+  }
+  handlePointermove(event) {
+    this.value = this.calculateHandlePosition(event);
+    this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });
+    this.dispatchEvent(new Event("input", {
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }));
+  }
+  handlePointerup(event) {
+    this._pointerDown = false;
+    event.target.releasePointerCapture(event.pointerId);
+    const applyDefault = this.dispatchEvent(new Event("change", {
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }));
+    if (!applyDefault) {
+      this._color = this._previousColor;
     }
-    handleFocusin() {
-        this.focused = true;
+    this.focus();
+    if (event.pointerType === "mouse") {
+      this.focused = false;
     }
-    handleFocusout() {
-        if (this._pointerDown) {
-            return;
-        }
-        this.altered = 0;
-        this.focused = false;
+  }
+  calculateHandlePosition(event) {
+    if (!this.boundingClientRect) {
+      return this.value;
     }
-    handlePointerdown(event) {
-        if (event.button !== 0) {
-            event.preventDefault();
-            return;
-        }
-        this._pointerDown = true;
-        this._previousColor = this._color.clone();
-        this.boundingClientRect = this.getBoundingClientRect();
-        event.target.setPointerCapture(event.pointerId);
-        if (event.pointerType === 'mouse') {
-            this.focused = true;
-        }
-    }
-    handlePointermove(event) {
-        this.value = this.calculateHandlePosition(event);
-        this._color = new TinyColor(Object.assign(Object.assign({}, this._color.toHsl()), { h: this.value }));
-        this.dispatchEvent(new Event('input', {
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-        }));
-    }
-    handlePointerup(event) {
-        this._pointerDown = false;
-        event.target.releasePointerCapture(event.pointerId);
-        const applyDefault = this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-        }));
-        if (!applyDefault) {
-            this._color = this._previousColor;
-        }
-        // Retain focus on input element after mouse up to enable keyboard interactions
-        this.focus();
-        if (event.pointerType === 'mouse') {
-            this.focused = false;
-        }
-    }
-    /**
-     * Returns the value under the cursor
-     * @param: PointerEvent on slider
-     * @return: Slider value that correlates to the position under the pointer
-     */
-    calculateHandlePosition(event) {
-        /* c8 ignore next 3 */
-        if (!this.boundingClientRect) {
-            return this.value;
-        }
-        const rect = this.boundingClientRect;
-        const { width, height, left, top } = rect;
-        const centerX = left + width / 2;
-        const centerY = top + height / 2;
-        const pointX = event.clientX - centerX;
-        const pointY = event.clientY - centerY;
-        const value = (Math.atan2(pointY, pointX) * 180) / Math.PI;
-        return (360 + (360 + value)) % 360;
-    }
-    handleGradientPointerdown(event) {
-        if (event.button !== 0 ||
-            event.target.classList.contains('innerCircle')) {
-            return;
-        }
-        event.stopPropagation();
-        event.preventDefault();
-        this.handle.dispatchEvent(new PointerEvent('pointerdown', event));
-        this.handlePointermove(event);
+    const rect = this.boundingClientRect;
+    const { width, height, left, top } = rect;
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+    const pointX = event.clientX - centerX;
+    const pointY = event.clientY - centerY;
+    const value = Math.atan2(pointY, pointX) * 180 / Math.PI;
+    return (360 + (360 + value)) % 360;
+  }
+  handleGradientPointerdown(event) {
+    if (event.button !== 0 || event.target.classList.contains("innerCircle")) {
+      return;
     }
-    render() {
-        const { width: diameter = 160 } = this.boundingClientRect || {};
-        const radius = diameter / 2;
-        const trackWidth = 24;
-        const innerRadius = radius - trackWidth;
-        const innerDiameter = innerRadius * 2;
-        const clipPath = `path(evenodd, "M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${diameter} 0 a ${radius} ${radius} 0 1 0 -${diameter} 0 M ${radius} ${radius} m -${innerRadius} 0 a ${innerRadius} ${innerRadius} 0 1 0 ${innerDiameter} 0 a ${innerRadius} ${innerRadius} 0 1 0 -${innerDiameter} 0")`;
-        const handleLocationStyles = `transform: translate(${(radius - 12.5) * Math.cos((this.value * Math.PI) / 180)}px, ${(radius - 12.5) * Math.sin((this.value * Math.PI) / 180)}px);`;
-        return html `
+    event.stopPropagation();
+    event.preventDefault();
+    this.handle.dispatchEvent(new PointerEvent("pointerdown", event));
+    this.handlePointermove(event);
+  }
+  render() {
+    const { width: diameter = 160 } = this.boundingClientRect || {};
+    const radius = diameter / 2;
+    const trackWidth = 24;
+    const innerRadius = radius - trackWidth;
+    const innerDiameter = innerRadius * 2;
+    const clipPath = `path(evenodd, "M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${diameter} 0 a ${radius} ${radius} 0 1 0 -${diameter} 0 M ${radius} ${radius} m -${innerRadius} 0 a ${innerRadius} ${innerRadius} 0 1 0 ${innerDiameter} 0 a ${innerRadius} ${innerRadius} 0 1 0 -${innerDiameter} 0")`;
+    const handleLocationStyles = `transform: translate(${(radius - 12.5) * Math.cos(this.value * Math.PI / 180)}px, ${(radius - 12.5) * Math.sin(this.value * Math.PI / 180)}px);`;
+    return html`
             <slot
                 name="gradient"
                 @pointerdown=${this.handleGradientPointerdown}
@@ -302,7 +283,7 @@ export class ColorWheel extends Focusable {
             </slot>
 
             <sp-color-handle
-                tabindex=${ifDefined(this.focused ? undefined : '0')}
+                tabindex=${ifDefined(this.focused ? void 0 : "0")}
                 @focus=${this.forwardFocus}
                 ?focused=${this.focused}
                 class="handle"
@@ -310,10 +291,10 @@ export class ColorWheel extends Focusable {
                 ?disabled=${this.disabled}
                 style=${handleLocationStyles}
                 ${streamingListener({
-            start: ['pointerdown', this.handlePointerdown],
-            streamInside: ['pointermove', this.handlePointermove],
-            end: [['pointerup', 'pointercancel'], this.handlePointerup],
-        })}
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [["pointerup", "pointercancel"], this.handlePointerup]
+    })}
             ></sp-color-handle>
 
             <input
@@ -329,55 +310,54 @@ export class ColorWheel extends Focusable {
                 @keydown=${this.handleKeydown}
             />
         `;
-    }
-    firstUpdated(changed) {
-        super.firstUpdated(changed);
-        this.boundingClientRect = this.getBoundingClientRect();
-        this.addEventListener('focusin', this.handleFocusin);
-        this.addEventListener('focusout', this.handleFocusout);
-    }
-    connectedCallback() {
-        var _a;
-        super.connectedCallback();
-        if (!this.observer &&
-            window.ResizeObserver) {
-            this.observer = new window.ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    this.boundingClientRect = entry.contentRect;
-                }
-                this.requestUpdate();
-            });
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    this.boundingClientRect = this.getBoundingClientRect();
+    this.addEventListener("focusin", this.handleFocusin);
+    this.addEventListener("focusout", this.handleFocusout);
+  }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    if (!this.observer && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver((entries) => {
+        for (const entry of entries) {
+          this.boundingClientRect = entry.contentRect;
         }
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.observe(this);
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.unobserve(this);
-        super.disconnectedCallback();
+        this.requestUpdate();
+      });
     }
+    (_a = this.observer) == null ? void 0 : _a.observe(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.observer) == null ? void 0 : _a.unobserve(this);
+    super.disconnectedCallback();
+  }
 }
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ColorWheel.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ColorWheel.prototype, "focused", void 0);
-__decorate([
-    query('.handle')
-], ColorWheel.prototype, "handle", void 0);
-__decorate([
-    property({ type: String })
-], ColorWheel.prototype, "label", void 0);
-__decorate([
-    property({ type: Number })
-], ColorWheel.prototype, "step", void 0);
-__decorate([
-    property({ type: Number })
-], ColorWheel.prototype, "value", null);
-__decorate([
-    property({ type: String })
-], ColorWheel.prototype, "color", null);
-__decorate([
-    query('input')
-], ColorWheel.prototype, "input", void 0);
-//# sourceMappingURL=ColorWheel.js.map
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ColorWheel.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ColorWheel.prototype, "focused", 2);
+__decorateClass([
+  query(".handle")
+], ColorWheel.prototype, "handle", 2);
+__decorateClass([
+  property({ type: String })
+], ColorWheel.prototype, "label", 2);
+__decorateClass([
+  property({ type: Number })
+], ColorWheel.prototype, "step", 2);
+__decorateClass([
+  property({ type: Number })
+], ColorWheel.prototype, "value", 1);
+__decorateClass([
+  property({ type: String })
+], ColorWheel.prototype, "color", 1);
+__decorateClass([
+  query("input")
+], ColorWheel.prototype, "input", 2);
+//# sourceMappingURL=ColorWheel.js.map