@spectrum-web-components/color-slider 0.3.12 → 0.3.13

package/src/ColorSlider.js

@@ -1,299 +1,281 @@
-/*
-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-slider.css.js';
-import { extractHueAndSaturationRegExp, replaceHueAndSaturationRegExp, } from '@spectrum-web-components/color-handle';
-import { TinyColor } from '@ctrl/tinycolor';
-/**
- * @element sp-color-slider
- * @slot gradient - a custom gradient visually outlining the available color values
- * @fires input - The value of the Color Slider has changed.
- * @fires change - An alteration to the value of the Color Slider 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-slider.css.js";
+import {
+  extractHueAndSaturationRegExp,
+  replaceHueAndSaturationRegExp
+} from "@spectrum-web-components/color-handle";
+import { TinyColor } from "@ctrl/tinycolor";
 export class ColorSlider extends Focusable {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.focused = false;
-        this.label = 'hue';
-        this.vertical = false;
-        this._value = 0;
-        this.sliderHandlePosition = 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.step = 1;
-        this._altered = 0;
-        this._pointerDown = false;
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.focused = false;
+    this.label = "hue";
+    this.vertical = false;
+    this._value = 0;
+    this.sliderHandlePosition = 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.step = 1;
+    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;
     }
-    static get styles() {
-        return [styles];
+    const oldValue = this.value;
+    const { s, v } = this._color.toHsv();
+    this._color = new TinyColor({ h: value, s, v });
+    this._value = value;
+    if (value !== this.sliderHandlePosition) {
+      this.sliderHandlePosition = 100 * (value / 360);
     }
-    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;
-        if (value !== this.sliderHandlePosition) {
-            this.sliderHandlePosition = 100 * (value / 360);
-        }
-        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.';
-        }
-    }
-    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._previousColor = oldValue;
-        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((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;
+    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 };
         }
-        event.preventDefault();
-        this.sliderHandlePosition = Math.min(100, Math.max(0, this.sliderHandlePosition + delta));
-        this.value = 360 * (this.sliderHandlePosition / 100);
-        this._color = new TinyColor(Object.assign(Object.assign({}, this._color.toHsl()), { h: this.value }));
-        if (delta != 0) {
-            this.dispatchEvent(new Event('input', {
-                bubbles: true,
-                composed: true,
-            }));
-            this.dispatchEvent(new Event('change', {
-                bubbles: true,
-                composed: true,
-            }));
+      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.";
     }
-    handleInput(event) {
-        const { valueAsNumber } = event.target;
-        this.value = valueAsNumber;
-        this.sliderHandlePosition = 100 * (this.value / 360);
-        this._color = new TinyColor(Object.assign(Object.assign({}, this._color.toHsl()), { h: this.value }));
+  }
+  set color(color) {
+    if (color === this.color) {
+      return;
     }
-    handleChange(event) {
-        this.handleInput(event);
-        this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: true,
-        }));
+    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("#");
     }
-    focus(focusOptions = {}) {
-        super.focus(focusOptions);
-        this.forwardFocus();
+    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;
     }
-    forwardFocus() {
-        this.focused = this.hasVisibleFocusInTree();
-        this.input.focus();
+    this._previousColor = oldValue;
+    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;
     }
-    handleFocusin() {
-        this.focused = true;
+    event.preventDefault();
+    this.sliderHandlePosition = Math.min(100, Math.max(0, this.sliderHandlePosition + delta));
+    this.value = 360 * (this.sliderHandlePosition / 100);
+    this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });
+    if (delta != 0) {
+      this.dispatchEvent(new Event("input", {
+        bubbles: true,
+        composed: true
+      }));
+      this.dispatchEvent(new Event("change", {
+        bubbles: true,
+        composed: true
+      }));
     }
-    handleFocusout() {
-        if (this._pointerDown) {
-            return;
-        }
-        this.altered = 0;
-        this.focused = false;
+  }
+  handleInput(event) {
+    const { valueAsNumber } = event.target;
+    this.value = valueAsNumber;
+    this.sliderHandlePosition = 100 * (this.value / 360);
+    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;
     }
-    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;
-        }
+    this.altered = 0;
+    this.focused = false;
+  }
+  handlePointerdown(event) {
+    if (event.button !== 0) {
+      event.preventDefault();
+      return;
     }
-    handlePointermove(event) {
-        this.sliderHandlePosition = this.calculateHandlePosition(event);
-        this.value = 360 * (this.sliderHandlePosition / 100);
-        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,
-        }));
+    this._pointerDown = true;
+    this._previousColor = this._color.clone();
+    this.boundingClientRect = this.getBoundingClientRect();
+    event.target.setPointerCapture(event.pointerId);
+    if (event.pointerType === "mouse") {
+      this.focused = 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;
-        }
+  }
+  handlePointermove(event) {
+    this.sliderHandlePosition = this.calculateHandlePosition(event);
+    this.value = 360 * (this.sliderHandlePosition / 100);
+    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;
     }
-    /**
-     * 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.sliderHandlePosition;
-        }
-        const rect = this.boundingClientRect;
-        const minOffset = this.vertical ? rect.top : rect.left;
-        const offset = this.vertical ? event.clientY : event.clientX;
-        const size = this.vertical ? rect.height : rect.width;
-        const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));
-        const sliderHandlePosition = 100 * percent;
-        return sliderHandlePosition;
+    this.focus();
+    if (event.pointerType === "mouse") {
+      this.focused = false;
     }
-    handleGradientPointerdown(event) {
-        if (event.button !== 0) {
-            return;
-        }
-        event.stopPropagation();
-        event.preventDefault();
-        this.handle.dispatchEvent(new PointerEvent('pointerdown', event));
-        this.handlePointermove(event);
+  }
+  calculateHandlePosition(event) {
+    if (!this.boundingClientRect) {
+      return this.sliderHandlePosition;
     }
-    get handlePositionStyles() {
-        return `${this.vertical ? 'top' : 'left'}: ${this.sliderHandlePosition}%`;
+    const rect = this.boundingClientRect;
+    const minOffset = this.vertical ? rect.top : rect.left;
+    const offset = this.vertical ? event.clientY : event.clientX;
+    const size = this.vertical ? rect.height : rect.width;
+    const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));
+    const sliderHandlePosition = 100 * percent;
+    return sliderHandlePosition;
+  }
+  handleGradientPointerdown(event) {
+    if (event.button !== 0) {
+      return;
     }
-    render() {
-        return html `
+    event.stopPropagation();
+    event.preventDefault();
+    this.handle.dispatchEvent(new PointerEvent("pointerdown", event));
+    this.handlePointermove(event);
+  }
+  get handlePositionStyles() {
+    return `${this.vertical ? "top" : "left"}: ${this.sliderHandlePosition}%`;
+  }
+  render() {
+    return html`
             <div
                 class="checkerboard"
                 role="presentation"
@@ -302,15 +284,13 @@ export class ColorSlider extends Focusable {
                 <div
                     class="gradient"
                     role="presentation"
-                    style="background: linear-gradient(to ${this.vertical
-            ? 'bottom'
-            : 'right'}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)));"
+                    style="background: linear-gradient(to ${this.vertical ? "bottom" : "right"}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)));"
                 >
                     <slot name="gradient"></slot>
                 </div>
             </div>
             <sp-color-handle
-                tabindex=${ifDefined(this.focused ? undefined : '0')}
+                tabindex=${ifDefined(this.focused ? void 0 : "0")}
                 @focus=${this.forwardFocus}
                 ?focused=${this.focused}
                 class="handle"
@@ -318,10 +298,10 @@ export class ColorSlider extends Focusable {
                 ?disabled=${this.disabled}
                 style=${this.handlePositionStyles}
                 ${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
                 type="range"
@@ -336,42 +316,42 @@ export class ColorSlider extends Focusable {
                 @keydown=${this.handleKeydown}
             />
         `;
-    }
-    firstUpdated(changed) {
-        super.firstUpdated(changed);
-        this.boundingClientRect = this.getBoundingClientRect();
-        this.addEventListener('focusin', this.handleFocusin);
-        this.addEventListener('focusout', this.handleFocusout);
-    }
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    this.boundingClientRect = this.getBoundingClientRect();
+    this.addEventListener("focusin", this.handleFocusin);
+    this.addEventListener("focusout", this.handleFocusout);
+  }
 }
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ColorSlider.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ColorSlider.prototype, "focused", void 0);
-__decorate([
-    query('.handle')
-], ColorSlider.prototype, "handle", void 0);
-__decorate([
-    property({ type: String })
-], ColorSlider.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ColorSlider.prototype, "vertical", void 0);
-__decorate([
-    property({ type: Number })
-], ColorSlider.prototype, "value", null);
-__decorate([
-    property({ type: Number, reflect: true })
-], ColorSlider.prototype, "sliderHandlePosition", void 0);
-__decorate([
-    property({ type: String })
-], ColorSlider.prototype, "color", null);
-__decorate([
-    property({ type: Number })
-], ColorSlider.prototype, "step", void 0);
-__decorate([
-    query('input')
-], ColorSlider.prototype, "input", void 0);
-//# sourceMappingURL=ColorSlider.js.map
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ColorSlider.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ColorSlider.prototype, "focused", 2);
+__decorateClass([
+  query(".handle")
+], ColorSlider.prototype, "handle", 2);
+__decorateClass([
+  property({ type: String })
+], ColorSlider.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ColorSlider.prototype, "vertical", 2);
+__decorateClass([
+  property({ type: Number })
+], ColorSlider.prototype, "value", 1);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], ColorSlider.prototype, "sliderHandlePosition", 2);
+__decorateClass([
+  property({ type: String })
+], ColorSlider.prototype, "color", 1);
+__decorateClass([
+  property({ type: Number })
+], ColorSlider.prototype, "step", 2);
+__decorateClass([
+  query("input")
+], ColorSlider.prototype, "input", 2);
+//# sourceMappingURL=ColorSlider.js.map