@spectrum-web-components/color-area 0.0.0-20241209155954

package/src/ColorArea.dev.js

@@ -0,0 +1,507 @@
+"use strict";
+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,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import {
+  ifDefined,
+  styleMap
+} 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 "@spectrum-web-components/color-handle/sp-color-handle.js";
+import {
+  ColorController
+} from "@spectrum-web-components/reactive-controllers/src/Color.js";
+import { LanguageResolutionController } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
+import {
+  isAndroid,
+  isIOS
+} from "@spectrum-web-components/shared/src/platform.js";
+import styles from "./color-area.css.js";
+export class ColorArea extends SpectrumElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.focused = false;
+    this.labelX = "saturation";
+    this.labelY = "luminosity";
+    this.languageResolver = new LanguageResolutionController(this);
+    this.colorController = new ColorController(this, {
+      extractColorFromState: () => ({
+        h: this.hue,
+        s: this.x,
+        v: this.y
+      }),
+      applyColorToState: ({ s, v }) => {
+        this._x = s;
+        this._y = v;
+        this.requestUpdate();
+      }
+    });
+    this.activeAxis = "x";
+    this._x = 1;
+    this._y = 1;
+    this.step = 0.01;
+    this.altered = 0;
+    this.activeKeys = /* @__PURE__ */ new Set();
+    this._valueChanged = false;
+    this._pointerDown = false;
+  }
+  static get styles() {
+    return [styles];
+  }
+  get hue() {
+    return this.colorController.hue;
+  }
+  set hue(value) {
+    this.colorController.hue = value;
+  }
+  get value() {
+    return this.colorController.color;
+  }
+  get color() {
+    return this.colorController.color;
+  }
+  set color(color) {
+    this.colorController.color = color;
+  }
+  get x() {
+    return this._x;
+  }
+  set x(x) {
+    if (x === this.x) {
+      return;
+    }
+    const oldValue = this.x;
+    this._x = x;
+    if (this.inputX) {
+      this.inputX.value = x.toString();
+      this._x = this.inputX.valueAsNumber;
+    }
+    this.requestUpdate("x", oldValue);
+    this.colorController.applyColorFromState();
+  }
+  get y() {
+    return this._y;
+  }
+  set y(y) {
+    if (y === this.y) {
+      return;
+    }
+    const oldValue = this.y;
+    this._y = y;
+    if (this.inputY) {
+      this.inputY.value = y.toString();
+      this._y = this.inputY.valueAsNumber;
+    }
+    this.requestUpdate("y", oldValue);
+    this.colorController.applyColorFromState();
+  }
+  focus(focusOptions = {}) {
+    super.focus(focusOptions);
+    this.forwardFocus();
+  }
+  forwardFocus() {
+    this.focused = this.hasVisibleFocusInTree();
+    if (this.activeAxis === "x") {
+      this.inputX.focus();
+    } else {
+      this.inputY.focus();
+    }
+  }
+  handleFocus() {
+    this.focused = true;
+    this._valueChanged = false;
+  }
+  handleBlur() {
+    if (this._pointerDown) {
+      return;
+    }
+    this.altered = 0;
+    this.focused = false;
+    this._valueChanged = false;
+  }
+  handleKeydown(event) {
+    const { code } = event;
+    this.focused = true;
+    this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(
+      (key) => !!key
+    ).length;
+    const isArrowKey = code.search("Arrow") === 0 || code.search("Page") === 0 || code.search("Home") === 0 || code.search("End") === 0;
+    if (isArrowKey) {
+      event.preventDefault();
+      this.activeKeys.add(code);
+      this.handleKeypress();
+    }
+  }
+  handleKeypress() {
+    let deltaX = 0;
+    let deltaY = 0;
+    const step = Math.max(this.step, this.altered * 5 * this.step);
+    this.activeKeys.forEach((code) => {
+      switch (code) {
+        case "ArrowUp":
+          deltaY = step;
+          break;
+        case "ArrowDown":
+          deltaY = step * -1;
+          break;
+        case "ArrowLeft":
+          deltaX = this.step * (this.isLTR ? -1 : 1);
+          break;
+        case "ArrowRight":
+          deltaX = this.step * (this.isLTR ? 1 : -1);
+          break;
+        case "PageUp":
+          deltaY = step * 10;
+          break;
+        case "PageDown":
+          deltaY = step * -10;
+          break;
+        case "Home":
+          deltaX = step * (this.isLTR ? -10 : 10);
+          break;
+        case "End":
+          deltaX = step * (this.isLTR ? 10 : -10);
+          break;
+        default:
+          break;
+      }
+    });
+    if (deltaX != 0) {
+      this.activeAxis = "x";
+      this.inputX.focus();
+    } else if (deltaY != 0) {
+      this.activeAxis = "y";
+      this.inputY.focus();
+    }
+    this.x = Math.min(1, Math.max(this.x + deltaX, 0));
+    this.y = Math.min(1, Math.max(this.y + deltaY, 0));
+    this.colorController.savePreviousColor();
+    this.colorController.applyColorFromState();
+    if (deltaX != 0 || deltaY != 0) {
+      this._valueChanged = true;
+      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.colorController.restorePreviousColor();
+      }
+    }
+  }
+  handleKeyup(event) {
+    event.preventDefault();
+    const { code } = event;
+    this.activeKeys.delete(code);
+  }
+  handleInput(event) {
+    const { valueAsNumber, name } = event.target;
+    this[name] = valueAsNumber;
+    this.colorController.applyColorFromState();
+  }
+  handleChange(event) {
+    this.handleInput(event);
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+  }
+  handlePointerdown(event) {
+    if (event.button !== 0) {
+      event.preventDefault();
+      return;
+    }
+    this._pointerDown = true;
+    this.colorController.savePreviousColor();
+    this.boundingClientRect = this.getBoundingClientRect();
+    event.target.setPointerCapture(event.pointerId);
+    if (event.pointerType === "mouse") {
+      this.focused = true;
+    }
+  }
+  handlePointermove(event) {
+    const [x, y] = this.calculateHandlePosition(event);
+    this._valueChanged = false;
+    this.x = x;
+    this.y = 1 - y;
+    this.colorController.applyColorFromState();
+    this.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+  }
+  handlePointerup(event) {
+    event.preventDefault();
+    this._pointerDown = false;
+    event.target.releasePointerCapture(event.pointerId);
+    const applyDefault = this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+    this.inputX.focus();
+    if (event.pointerType === "mouse") {
+      this.focused = false;
+    }
+    if (!applyDefault) {
+      this.colorController.restorePreviousColor();
+    }
+  }
+  /**
+   * Returns the value under the cursor
+   * @param: PointerEvent on slider
+   * @return: Slider value that correlates to the position under the pointer
+   */
+  calculateHandlePosition(event) {
+    if (!this.boundingClientRect) {
+      return [this.x, this.y];
+    }
+    const rect = this.boundingClientRect;
+    const minOffsetX = rect.left;
+    const minOffsetY = rect.top;
+    const offsetX = event.clientX;
+    const offsetY = event.clientY;
+    const width = rect.width;
+    const height = rect.height;
+    const percentX = Math.max(
+      0,
+      Math.min(1, (offsetX - minOffsetX) / width)
+    );
+    const percentY = Math.max(
+      0,
+      Math.min(1, (offsetY - minOffsetY) / height)
+    );
+    return [this.isLTR ? percentX : 1 - percentX, percentY];
+  }
+  handleAreaPointerdown(event) {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    this.handle.dispatchEvent(new PointerEvent("pointerdown", event));
+    this.handlePointermove(event);
+  }
+  render() {
+    const { width = 0, height = 0 } = this.boundingClientRect || {};
+    const isMobile = isAndroid() || isIOS();
+    const defaultAriaLabel = "Color Picker";
+    const ariaLabel = defaultAriaLabel;
+    const ariaRoleDescription = ifDefined(
+      isMobile ? void 0 : "2d slider"
+    );
+    const ariaLabelX = this.labelX;
+    const ariaLabelY = this.labelY;
+    const ariaValueX = new Intl.NumberFormat(
+      this.languageResolver.language,
+      {
+        style: "percent",
+        unitDisplay: "narrow"
+      }
+    ).format(this.x);
+    const ariaValueY = new Intl.NumberFormat(
+      this.languageResolver.language,
+      {
+        style: "percent",
+        unitDisplay: "narrow"
+      }
+    ).format(this.y);
+    const style = {
+      background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`
+    };
+    return html`
+            <div
+                @pointerdown=${this.handleAreaPointerdown}
+                class="gradient"
+                style=${styleMap(style)}
+            >
+                <slot name="gradient"></slot>
+            </div>
+
+            <sp-color-handle
+                tabindex=${ifDefined(this.focused ? void 0 : "0")}
+                @focus=${this.forwardFocus}
+                ?focused=${this.focused}
+                class="handle"
+                color=${this.colorController.getHslString()}
+                ?disabled=${this.disabled}
+                style=${`transform: translate(${(this.isLTR ? this.x : 1 - this.x) * width}px, ${height - this.y * height}px);`}
+                ${streamingListener({
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [
+        ["pointerup", "pointercancel", "pointerleave"],
+        this.handlePointerup
+      ]
+    })}
+            ></sp-color-handle>
+
+            <fieldset
+                class="fieldset"
+                aria-label=${ifDefined(isMobile ? ariaLabel : void 0)}
+            >
+                <div role="presentation">
+                    <input
+                        type="range"
+                        class="slider"
+                        name="x"
+                        aria-label=${isMobile ? ariaLabelX : `${ariaLabelX} ${ariaLabel}`}
+                        aria-roledescription=${ariaRoleDescription}
+                        aria-orientation="horizontal"
+                        aria-valuetext=${isMobile ? ariaValueX : `${ariaValueX}, ${ariaLabelX}${this._valueChanged ? "" : `, ${ariaValueY}, ${ariaLabelY}`}`}
+                        min="0"
+                        max="1"
+                        step=${this.step}
+                        tabindex="-1"
+                        .value=${String(this.x)}
+                        @input=${this.handleInput}
+                        @change=${this.handleChange}
+                    />
+                </div>
+                <div role="presentation">
+                    <input
+                        type="range"
+                        class="slider"
+                        name="y"
+                        aria-label=${isMobile ? ariaLabelY : `${ariaLabelY} ${ariaLabel}`}
+                        aria-roledescription=${ariaRoleDescription}
+                        aria-orientation="vertical"
+                        aria-valuetext=${isMobile ? ariaValueY : `${ariaValueY}, ${ariaLabelY}${this._valueChanged ? "" : `, ${ariaValueX}, ${ariaLabelX}`}`}
+                        orient="vertical"
+                        min="0"
+                        max="1"
+                        step=${this.step}
+                        tabindex="-1"
+                        .value=${String(this.y)}
+                        @input=${this.handleInput}
+                        @change=${this.handleChange}
+                    />
+                </div>
+            </fieldset>
+        `;
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    this.boundingClientRect = this.getBoundingClientRect();
+    this.addEventListener("focus", this.handleFocus);
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("keyup", this.handleKeyup);
+    this.addEventListener("keydown", this.handleKeydown);
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (this.x !== this.inputX.valueAsNumber) {
+      this._x = this.inputX.valueAsNumber;
+    }
+    if (this.y !== this.inputY.valueAsNumber) {
+      this._y = this.inputY.valueAsNumber;
+    }
+    if (changed.has("focused") && this.focused) {
+      const parentX = this.inputX.parentElement;
+      const parentY = this.inputY.parentElement;
+      if (!parentX.shadowRoot && !parentY.shadowRoot) {
+        parentX.attachShadow({ mode: "open" });
+        parentY.attachShadow({ mode: "open" });
+        const slot = '<div tabindex="-1"><slot></slot></div>';
+        parentX.shadowRoot.innerHTML = slot;
+        parentY.shadowRoot.innerHTML = slot;
+      }
+    }
+  }
+  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();
+      });
+    }
+    (_a = this.observer) == null ? void 0 : _a.observe(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.observer) == null ? void 0 : _a.unobserve(this);
+    super.disconnectedCallback();
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], ColorArea.prototype, "dir", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ColorArea.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ColorArea.prototype, "focused", 2);
+__decorateClass([
+  property({ type: String, attribute: "label-x" })
+], ColorArea.prototype, "labelX", 2);
+__decorateClass([
+  property({ type: String, attribute: "label-y" })
+], ColorArea.prototype, "labelY", 2);
+__decorateClass([
+  query(".handle")
+], ColorArea.prototype, "handle", 2);
+__decorateClass([
+  property({ type: Number })
+], ColorArea.prototype, "hue", 1);
+__decorateClass([
+  property({ type: String })
+], ColorArea.prototype, "value", 1);
+__decorateClass([
+  property({ type: String })
+], ColorArea.prototype, "color", 1);
+__decorateClass([
+  property({ attribute: false })
+], ColorArea.prototype, "activeAxis", 2);
+__decorateClass([
+  property({ type: Number })
+], ColorArea.prototype, "x", 1);
+__decorateClass([
+  property({ type: Number })
+], ColorArea.prototype, "y", 1);
+__decorateClass([
+  property({ type: Number })
+], ColorArea.prototype, "step", 2);
+__decorateClass([
+  query('[name="x"]')
+], ColorArea.prototype, "inputX", 2);
+__decorateClass([
+  query('[name="y"]')
+], ColorArea.prototype, "inputY", 2);
+//# sourceMappingURL=ColorArea.dev.js.map

package/src/ColorArea.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["ColorArea.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';\nimport type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport {\n    ColorController,\n    ColorValue,\n} from '@spectrum-web-components/reactive-controllers/src/Color.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport {\n    isAndroid,\n    isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\n\nimport styles from './color-area.css.js';\n\n/**\n * @element sp-color-area\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Area has changed.\n * @fires change - An alteration to the value of the Color Area has been committed by the user.\n */\nexport class ColorArea extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ type: String, reflect: true })\n    public override dir!: 'ltr' | 'rtl';\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @property({ type: String, attribute: 'label-x' })\n    public labelX = 'saturation';\n\n    @property({ type: String, attribute: 'label-y' })\n    public labelY = 'luminosity';\n\n    @query('.handle')\n    private handle!: ColorHandle;\n\n    private languageResolver = new LanguageResolutionController(this);\n\n    private colorController = new ColorController(this, {\n        extractColorFromState: () => ({\n            h: this.hue,\n            s: this.x,\n            v: this.y,\n        }),\n        applyColorToState: ({ s, v }) => {\n            this._x = s;\n            this._y = v;\n            this.requestUpdate();\n        },\n    });\n\n    @property({ type: Number })\n    public get hue(): number {\n        return this.colorController.hue;\n    }\n\n    public set hue(value: number) {\n        this.colorController.hue = value;\n    }\n\n    @property({ type: String })\n    public get value(): ColorValue {\n        return this.colorController.color;\n    }\n\n    @property({ type: String })\n    public get color(): ColorValue {\n        return this.colorController.color;\n    }\n\n    public set color(color: ColorValue) {\n        this.colorController.color = color;\n    }\n\n    @property({ attribute: false })\n    private activeAxis = 'x';\n\n    @property({ type: Number })\n    public get x(): number {\n        return this._x;\n    }\n\n    public set x(x: number) {\n        if (x === this.x) {\n            return;\n        }\n        const oldValue = this.x;\n        this._x = x;\n        if (this.inputX) {\n            // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n            this.inputX.value = x.toString();\n            this._x = this.inputX.valueAsNumber;\n        }\n        this.requestUpdate('x', oldValue);\n        this.colorController.applyColorFromState();\n    }\n\n    private _x = 1;\n\n    @property({ type: Number })\n    public get y(): number {\n        return this._y;\n    }\n\n    public set y(y: number) {\n        if (y === this.y) {\n            return;\n        }\n        const oldValue = this.y;\n        this._y = y;\n        if (this.inputY) {\n            // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n            this.inputY.value = y.toString();\n            this._y = this.inputY.valueAsNumber;\n        }\n        this.requestUpdate('y', oldValue);\n        this.colorController.applyColorFromState();\n    }\n\n    private _y = 1;\n\n    @property({ type: Number })\n    public step = 0.01;\n\n    @query('[name=\"x\"]')\n    public inputX!: HTMLInputElement;\n\n    @query('[name=\"y\"]')\n    public inputY!: HTMLInputElement;\n\n    private altered = 0;\n\n    private activeKeys = new Set();\n\n    private _valueChanged = false;\n\n    public override focus(focusOptions: FocusOptions = {}): void {\n        super.focus(focusOptions);\n        this.forwardFocus();\n    }\n\n    private forwardFocus(): void {\n        this.focused = this.hasVisibleFocusInTree();\n        if (this.activeAxis === 'x') {\n            this.inputX.focus();\n        } else {\n            this.inputY.focus();\n        }\n    }\n\n    private handleFocus(): void {\n        this.focused = true;\n        this._valueChanged = false;\n    }\n\n    public handleBlur(): void {\n        if (this._pointerDown) {\n            return;\n        }\n        this.altered = 0;\n        this.focused = false;\n        this._valueChanged = false;\n    }\n\n    private handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        this.focused = true;\n        this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n            (key) => !!key\n        ).length;\n        const isArrowKey =\n            code.search('Arrow') === 0 ||\n            code.search('Page') === 0 ||\n            code.search('Home') === 0 ||\n            code.search('End') === 0;\n        if (isArrowKey) {\n            event.preventDefault();\n            this.activeKeys.add(code);\n            this.handleKeypress();\n        }\n    }\n\n    private handleKeypress(): void {\n        let deltaX = 0;\n        let deltaY = 0;\n        const step = Math.max(this.step, this.altered * 5 * this.step);\n        this.activeKeys.forEach((code) => {\n            switch (code) {\n                case 'ArrowUp':\n                    deltaY = step;\n                    break;\n                case 'ArrowDown':\n                    deltaY = step * -1;\n                    break;\n                case 'ArrowLeft':\n                    deltaX = this.step * (this.isLTR ? -1 : 1);\n                    break;\n                case 'ArrowRight':\n                    deltaX = this.step * (this.isLTR ? 1 : -1);\n                    break;\n                case 'PageUp':\n                    deltaY = step * 10;\n                    break;\n                case 'PageDown':\n                    deltaY = step * -10;\n                    break;\n                case 'Home':\n                    deltaX = step * (this.isLTR ? -10 : 10);\n                    break;\n                case 'End':\n                    deltaX = step * (this.isLTR ? 10 : -10);\n                    break;\n                /* c8 ignore next 2 */\n                default:\n                    break;\n            }\n        });\n        if (deltaX != 0) {\n            this.activeAxis = 'x';\n            this.inputX.focus();\n        } else if (deltaY != 0) {\n            this.activeAxis = 'y';\n            this.inputY.focus();\n        }\n        this.x = Math.min(1, Math.max(this.x + deltaX, 0));\n        this.y = Math.min(1, Math.max(this.y + deltaY, 0));\n\n        this.colorController.savePreviousColor();\n        this.colorController.applyColorFromState();\n\n        if (deltaX != 0 || deltaY != 0) {\n            this._valueChanged = true;\n            this.dispatchEvent(\n                new Event('input', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            const applyDefault = this.dispatchEvent(\n                new Event('change', {\n                    bubbles: true,\n                    composed: true,\n                    cancelable: true,\n                })\n            );\n            if (!applyDefault) {\n                this.colorController.restorePreviousColor();\n            }\n        }\n    }\n\n    private handleKeyup(event: KeyboardEvent): void {\n        event.preventDefault();\n        const { code } = event;\n        this.activeKeys.delete(code);\n    }\n\n    private handleInput(event: Event & { target: HTMLInputElement }): void {\n        const { valueAsNumber, name } = event.target;\n\n        this[name as 'x' | 'y'] = valueAsNumber;\n        this.colorController.applyColorFromState();\n    }\n\n    private handleChange(event: Event & { target: HTMLInputElement }): void {\n        this.handleInput(event);\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    private boundingClientRect!: DOMRect;\n    public _pointerDown = false;\n\n    private handlePointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            event.preventDefault();\n            return;\n        }\n        this._pointerDown = true;\n        this.colorController.savePreviousColor();\n        this.boundingClientRect = this.getBoundingClientRect();\n        (event.target as HTMLElement).setPointerCapture(event.pointerId);\n        if (event.pointerType === 'mouse') {\n            this.focused = true;\n        }\n    }\n\n    private handlePointermove(event: PointerEvent): void {\n        const [x, y] = this.calculateHandlePosition(event);\n\n        this._valueChanged = false;\n\n        this.x = x;\n        this.y = 1 - y;\n        this.colorController.applyColorFromState();\n        this.dispatchEvent(\n            new Event('input', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    private handlePointerup(event: PointerEvent): void {\n        event.preventDefault();\n        this._pointerDown = false;\n        (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n        this.inputX.focus();\n        if (event.pointerType === 'mouse') {\n            this.focused = false;\n        }\n        if (!applyDefault) {\n            this.colorController.restorePreviousColor();\n        }\n    }\n\n    /**\n     * Returns the value under the cursor\n     * @param: PointerEvent on slider\n     * @return: Slider value that correlates to the position under the pointer\n     */\n    private calculateHandlePosition(event: PointerEvent): [number, number] {\n        /* c8 ignore next 3 */\n        if (!this.boundingClientRect) {\n            return [this.x, this.y];\n        }\n        const rect = this.boundingClientRect;\n        const minOffsetX = rect.left;\n        const minOffsetY = rect.top;\n        const offsetX = event.clientX;\n        const offsetY = event.clientY;\n        const width = rect.width;\n        const height = rect.height;\n\n        const percentX = Math.max(\n            0,\n            Math.min(1, (offsetX - minOffsetX) / width)\n        );\n        const percentY = Math.max(\n            0,\n            Math.min(1, (offsetY - minOffsetY) / height)\n        );\n\n        return [this.isLTR ? percentX : 1 - percentX, percentY];\n    }\n\n    private handleAreaPointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            return;\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n        this.handlePointermove(event);\n    }\n\n    protected override render(): TemplateResult {\n        const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n        const isMobile = isAndroid() || isIOS();\n        const defaultAriaLabel = 'Color Picker';\n        const ariaLabel = defaultAriaLabel;\n        const ariaRoleDescription = ifDefined(\n            isMobile ? undefined : '2d slider'\n        );\n\n        const ariaLabelX = this.labelX;\n        const ariaLabelY = this.labelY;\n        const ariaValueX = new Intl.NumberFormat(\n            this.languageResolver.language,\n            {\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }\n        ).format(this.x);\n        const ariaValueY = new Intl.NumberFormat(\n            this.languageResolver.language,\n            {\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }\n        ).format(this.y);\n\n        const style = {\n            background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`,\n        };\n\n        return html`\n            <div\n                @pointerdown=${this.handleAreaPointerdown}\n                class=\"gradient\"\n                style=${styleMap(style)}\n            >\n                <slot name=\"gradient\"></slot>\n            </div>\n\n            <sp-color-handle\n                tabindex=${ifDefined(this.focused ? undefined : '0')}\n                @focus=${this.forwardFocus}\n                ?focused=${this.focused}\n                class=\"handle\"\n                color=${this.colorController.getHslString()}\n                ?disabled=${this.disabled}\n                style=${`transform: translate(${\n                    (this.isLTR ? this.x : 1 - this.x) * width\n                }px, ${height - this.y * height}px);`}\n                ${streamingListener({\n                    start: ['pointerdown', this.handlePointerdown],\n                    streamInside: ['pointermove', this.handlePointermove],\n                    end: [\n                        ['pointerup', 'pointercancel', 'pointerleave'],\n                        this.handlePointerup,\n                    ],\n                })}\n            ></sp-color-handle>\n\n            <fieldset\n                class=\"fieldset\"\n                aria-label=${ifDefined(isMobile ? ariaLabel : undefined)}\n            >\n                <div role=\"presentation\">\n                    <input\n                        type=\"range\"\n                        class=\"slider\"\n                        name=\"x\"\n                        aria-label=${isMobile\n                            ? ariaLabelX\n                            : `${ariaLabelX} ${ariaLabel}`}\n                        aria-roledescription=${ariaRoleDescription}\n                        aria-orientation=\"horizontal\"\n                        aria-valuetext=${isMobile\n                            ? ariaValueX\n                            : `${ariaValueX}, ${ariaLabelX}${\n                                  this._valueChanged\n                                      ? ''\n                                      : `, ${ariaValueY}, ${ariaLabelY}`\n                              }`}\n                        min=\"0\"\n                        max=\"1\"\n                        step=${this.step}\n                        tabindex=\"-1\"\n                        .value=${String(this.x)}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                    />\n                </div>\n                <div role=\"presentation\">\n                    <input\n                        type=\"range\"\n                        class=\"slider\"\n                        name=\"y\"\n                        aria-label=${isMobile\n                            ? ariaLabelY\n                            : `${ariaLabelY} ${ariaLabel}`}\n                        aria-roledescription=${ariaRoleDescription}\n                        aria-orientation=\"vertical\"\n                        aria-valuetext=${isMobile\n                            ? ariaValueY\n                            : `${ariaValueY}, ${ariaLabelY}${\n                                  this._valueChanged\n                                      ? ''\n                                      : `, ${ariaValueX}, ${ariaLabelX}`\n                              }`}\n                        orient=\"vertical\"\n                        min=\"0\"\n                        max=\"1\"\n                        step=${this.step}\n                        tabindex=\"-1\"\n                        .value=${String(this.y)}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                    />\n                </div>\n            </fieldset>\n        `;\n    }\n\n    protected override firstUpdated(changed: PropertyValues): void {\n        super.firstUpdated(changed);\n        this.boundingClientRect = this.getBoundingClientRect();\n\n        this.addEventListener('focus', this.handleFocus);\n        this.addEventListener('blur', this.handleBlur);\n        this.addEventListener('keyup', this.handleKeyup);\n        this.addEventListener('keydown', this.handleKeydown);\n    }\n\n    protected override updated(changed: PropertyValues): void {\n        super.updated(changed);\n        if (this.x !== this.inputX.valueAsNumber) {\n            this._x = this.inputX.valueAsNumber;\n        }\n        if (this.y !== this.inputY.valueAsNumber) {\n            this._y = this.inputY.valueAsNumber;\n        }\n        if (changed.has('focused') && this.focused) {\n            // Lazily bind the `input[type=\"range\"]` elements in shadow roots\n            // so that browsers with certain settings (Webkit) aren't allowed\n            // multiple tab stops within the Color Area.\n            const parentX = this.inputX.parentElement as HTMLDivElement;\n            const parentY = this.inputY.parentElement as HTMLDivElement;\n            if (!parentX.shadowRoot && !parentY.shadowRoot) {\n                parentX.attachShadow({ mode: 'open' });\n                parentY.attachShadow({ mode: 'open' });\n                const slot = '<div tabindex=\"-1\"><slot></slot></div>';\n                (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n                (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n            }\n        }\n    }\n\n    private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (\n            !this.observer &&\n            (window as unknown as WithSWCResizeObserver).ResizeObserver\n        ) {\n            this.observer = new (\n                window as unknown as WithSWCResizeObserver\n            ).ResizeObserver((entries: SWCResizeObserverEntry[]) => {\n                for (const entry of entries) {\n                    this.boundingClientRect = entry.contentRect;\n                }\n                this.requestUpdate();\n            });\n        }\n        this.observer?.observe(this);\n    }\n\n    public override disconnectedCallback(): void {\n        this.observer?.unobserve(this);\n        super.disconnectedCallback();\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/src/ColorArea.js

@@ -0,0 +1,64 @@
+"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var s=(c,u,e,t)=>{for(var i=t>1?void 0:t?y(u,e):u,r=c.length-1,n;r>=0;r--)(n=c[r])&&(i=(t?n(u,e,i):n(i))||i);return t&&i&&m(u,e,i),i};import{html as g,SpectrumElement as w}from"@spectrum-web-components/base";import{ifDefined as b,styleMap as C}from"@spectrum-web-components/base/src/directives.js";import{property as o,query as v}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as x}from"@spectrum-web-components/base/src/streaming-listener.js";import"@spectrum-web-components/color-handle/sp-color-handle.js";import{ColorController as $}from"@spectrum-web-components/reactive-controllers/src/Color.js";import{LanguageResolutionController as R}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{isAndroid as E,isIOS as S}from"@spectrum-web-components/shared/src/platform.js";import P from"./color-area.css.js";export class ColorArea extends w{constructor(){super(...arguments);this.disabled=!1;this.focused=!1;this.labelX="saturation";this.labelY="luminosity";this.languageResolver=new R(this);this.colorController=new $(this,{extractColorFromState:()=>({h:this.hue,s:this.x,v:this.y}),applyColorToState:({s:e,v:t})=>{this._x=e,this._y=t,this.requestUpdate()}});this.activeAxis="x";this._x=1;this._y=1;this.step=.01;this.altered=0;this.activeKeys=new Set;this._valueChanged=!1;this._pointerDown=!1}static get styles(){return[P]}get hue(){return this.colorController.hue}set hue(e){this.colorController.hue=e}get value(){return this.colorController.color}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get x(){return this._x}set x(e){if(e===this.x)return;const t=this.x;this._x=e,this.inputX&&(this.inputX.value=e.toString(),this._x=this.inputX.valueAsNumber),this.requestUpdate("x",t),this.colorController.applyColorFromState()}get y(){return this._y}set y(e){if(e===this.y)return;const t=this.y;this._y=e,this.inputY&&(this.inputY.value=e.toString(),this._y=this.inputY.valueAsNumber),this.requestUpdate("y",t),this.colorController.applyColorFromState()}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.focused=this.hasVisibleFocusInTree(),this.activeAxis==="x"?this.inputX.focus():this.inputY.focus()}handleFocus(){this.focused=!0,this._valueChanged=!1}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1,this._valueChanged=!1)}handleKeydown(e){const{code:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(r=>!!r).length,(t.search("Arrow")===0||t.search("Page")===0||t.search("Home")===0||t.search("End")===0)&&(e.preventDefault(),this.activeKeys.add(t),this.handleKeypress())}handleKeypress(){let e=0,t=0;const i=Math.max(this.step,this.altered*5*this.step);this.activeKeys.forEach(r=>{switch(r){case"ArrowUp":t=i;break;case"ArrowDown":t=i*-1;break;case"ArrowLeft":e=this.step*(this.isLTR?-1:1);break;case"ArrowRight":e=this.step*(this.isLTR?1:-1);break;case"PageUp":t=i*10;break;case"PageDown":t=i*-10;break;case"Home":e=i*(this.isLTR?-10:10);break;case"End":e=i*(this.isLTR?10:-10);break;default:break}}),e!=0?(this.activeAxis="x",this.inputX.focus()):t!=0&&(this.activeAxis="y",this.inputY.focus()),this.x=Math.min(1,Math.max(this.x+e,0)),this.y=Math.min(1,Math.max(this.y+t,0)),this.colorController.savePreviousColor(),this.colorController.applyColorFromState(),(e!=0||t!=0)&&(this._valueChanged=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor())}handleKeyup(e){e.preventDefault();const{code:t}=e;this.activeKeys.delete(t)}handleInput(e){const{valueAsNumber:t,name:i}=e.target;this[i]=t,this.colorController.applyColorFromState()}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),e.target.setPointerCapture(e.pointerId),e.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(e){const[t,i]=this.calculateHandlePosition(e);this._valueChanged=!1,this.x=t,this.y=1-i,this.colorController.applyColorFromState(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){e.preventDefault(),this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId);const t=this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}));this.inputX.focus(),e.pointerType==="mouse"&&(this.focused=!1),t||this.colorController.restorePreviousColor()}calculateHandlePosition(e){if(!this.boundingClientRect)return[this.x,this.y];const t=this.boundingClientRect,i=t.left,r=t.top,n=e.clientX,d=e.clientY,a=t.width,l=t.height,h=Math.max(0,Math.min(1,(n-i)/a)),p=Math.max(0,Math.min(1,(d-r)/l));return[this.isLTR?h:1-h,p]}handleAreaPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}render(){const{width:e=0,height:t=0}=this.boundingClientRect||{},i=E()||S(),n="Color Picker",d=b(i?void 0:"2d slider"),a=this.labelX,l=this.labelY,h=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.x),p=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.y),f={background:`linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`};return g`
+            <div
+                @pointerdown=${this.handleAreaPointerdown}
+                class="gradient"
+                style=${C(f)}
+            >
+                <slot name="gradient"></slot>
+            </div>
+
+            <sp-color-handle
+                tabindex=${b(this.focused?void 0:"0")}
+                @focus=${this.forwardFocus}
+                ?focused=${this.focused}
+                class="handle"
+                color=${this.colorController.getHslString()}
+                ?disabled=${this.disabled}
+                style=${`transform: translate(${(this.isLTR?this.x:1-this.x)*e}px, ${t-this.y*t}px);`}
+                ${x({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
+            ></sp-color-handle>
+
+            <fieldset
+                class="fieldset"
+                aria-label=${b(i?n:void 0)}
+            >
+                <div role="presentation">
+                    <input
+                        type="range"
+                        class="slider"
+                        name="x"
+                        aria-label=${i?a:`${a} ${n}`}
+                        aria-roledescription=${d}
+                        aria-orientation="horizontal"
+                        aria-valuetext=${i?h:`${h}, ${a}${this._valueChanged?"":`, ${p}, ${l}`}`}
+                        min="0"
+                        max="1"
+                        step=${this.step}
+                        tabindex="-1"
+                        .value=${String(this.x)}
+                        @input=${this.handleInput}
+                        @change=${this.handleChange}
+                    />
+                </div>
+                <div role="presentation">
+                    <input
+                        type="range"
+                        class="slider"
+                        name="y"
+                        aria-label=${i?l:`${l} ${n}`}
+                        aria-roledescription=${d}
+                        aria-orientation="vertical"
+                        aria-valuetext=${i?p:`${p}, ${l}${this._valueChanged?"":`, ${h}, ${a}`}`}
+                        orient="vertical"
+                        min="0"
+                        max="1"
+                        step=${this.step}
+                        tabindex="-1"
+                        .value=${String(this.y)}
+                        @input=${this.handleInput}
+                        @change=${this.handleChange}
+                    />
+                </div>
+            </fieldset>
+        `}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("keydown",this.handleKeydown)}updated(e){if(super.updated(e),this.x!==this.inputX.valueAsNumber&&(this._x=this.inputX.valueAsNumber),this.y!==this.inputY.valueAsNumber&&(this._y=this.inputY.valueAsNumber),e.has("focused")&&this.focused){const t=this.inputX.parentElement,i=this.inputY.parentElement;if(!t.shadowRoot&&!i.shadowRoot){t.attachShadow({mode:"open"}),i.attachShadow({mode:"open"});const r='<div tabindex="-1"><slot></slot></div>';t.shadowRoot.innerHTML=r,i.shadowRoot.innerHTML=r}}}connectedCallback(){var e;super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(t=>{for(const i of t)this.boundingClientRect=i.contentRect;this.requestUpdate()})),(e=this.observer)==null||e.observe(this)}disconnectedCallback(){var e;(e=this.observer)==null||e.unobserve(this),super.disconnectedCallback()}}s([o({type:String,reflect:!0})],ColorArea.prototype,"dir",2),s([o({type:Boolean,reflect:!0})],ColorArea.prototype,"disabled",2),s([o({type:Boolean,reflect:!0})],ColorArea.prototype,"focused",2),s([o({type:String,attribute:"label-x"})],ColorArea.prototype,"labelX",2),s([o({type:String,attribute:"label-y"})],ColorArea.prototype,"labelY",2),s([v(".handle")],ColorArea.prototype,"handle",2),s([o({type:Number})],ColorArea.prototype,"hue",1),s([o({type:String})],ColorArea.prototype,"value",1),s([o({type:String})],ColorArea.prototype,"color",1),s([o({attribute:!1})],ColorArea.prototype,"activeAxis",2),s([o({type:Number})],ColorArea.prototype,"x",1),s([o({type:Number})],ColorArea.prototype,"y",1),s([o({type:Number})],ColorArea.prototype,"step",2),s([v('[name="x"]')],ColorArea.prototype,"inputX",2),s([v('[name="y"]')],ColorArea.prototype,"inputY",2);
+//# sourceMappingURL=ColorArea.js.map