@spectrum-web-components/color-area 0.4.12-devmode.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/color-area",
-    "version": "0.4.12-devmode.0+1a8b29491",
+    "version": "0.5.0",
     "publishConfig": {
         "access": "public"
     },
@@ -62,8 +62,8 @@
     ],
     "dependencies": {
         "@ctrl/tinycolor": "^3.3.3",
-        "@spectrum-web-components/base": "^0.6.1-devmode.0+1a8b29491",
-        "@spectrum-web-components/color-handle": "^0.3.12-devmode.0+1a8b29491",
+        "@spectrum-web-components/base": "^0.7.0",
+        "@spectrum-web-components/color-handle": "^0.4.0",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
@@ -75,5 +75,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "1a8b294911ab377fa4f07e16eb016f1e3bf7b517"
+    "gitHead": "05c81318844160db3f8156144106e643507fef97"
 }

package/sp-color-area.js

@@ -1,3 +1,2 @@
-import { ColorArea } from "./src/ColorArea.js";
-customElements.define("sp-color-area", ColorArea);
+import{ColorArea as e}from"./src/ColorArea.js";customElements.define("sp-color-area",e);
 //# sourceMappingURL=sp-color-area.js.map

package/sp-color-area.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["sp-color-area.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 { ColorArea } from './src/ColorArea.js';\n\ncustomElements.define('sp-color-area', ColorArea);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-color-area': ColorArea;\n    }\n}\n"],
-  "mappings": "AAYA;AAEA,eAAe,OAAO,iBAAiB,SAAS;",
+  "mappings": "AAYA,+CAEA,eAAe,OAAO,gBAAiB,CAAS",
   "names": []
 }

package/src/ColorArea.js

@@ -1,339 +1,4 @@
-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 } 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 {
-  extractHueAndSaturationRegExp,
-  replaceHueRegExp
-} from "@spectrum-web-components/color-handle";
-import "@spectrum-web-components/color-handle/sp-color-handle.js";
-import { TinyColor } from "@ctrl/tinycolor";
-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._hue = 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.activeAxis = "x";
-    this._x = 1;
-    this._y = 0;
-    this.step = 0.01;
-    this.altered = 0;
-    this.activeKeys = /* @__PURE__ */ new Set();
-    this._pointerDown = false;
-  }
-  static get styles() {
-    return [styles];
-  }
-  get hue() {
-    return this._hue;
-  }
-  set hue(value) {
-    const hue = Math.min(360, Math.max(0, value));
-    if (hue === this.hue) {
-      return;
-    }
-    const oldValue = this.hue;
-    const { s, v } = this._color.toHsv();
-    this._color = new TinyColor({ h: hue, s, v });
-    this._hue = hue;
-    this.requestUpdate("hue", oldValue);
-  }
-  get value() {
-    return this.color;
-  }
-  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 "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(replaceHueRegExp, `$1${this.hue}`);
-        } else {
-          const { s, l, a } = this._color.toHsl();
-          return { h: this.hue, s, l, a };
-        }
-      case "hsv":
-        if (this._format.isString) {
-          const hsvString = this._color.toHsvString();
-          return hsvString.replace(replaceHueRegExp, `$1${this.hue}`);
-        } else {
-          const { s, v, a } = this._color.toHsv();
-          return { h: this.hue, s, v, a };
-        }
-      case "hex":
-      case "hex3":
-      case "hex4":
-      case "hex6":
-      default:
-        return this._format.isString ? this._color.toHexString() : this._color.toHex();
-    }
-  }
-  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
-    };
-    const { h, s, v } = this._color.toHsv();
-    let originalHue = void 0;
-    if (isString && format.startsWith("hs")) {
-      const values = extractHueAndSaturationRegExp.exec(color);
-      if (values !== null) {
-        const [, h2] = values;
-        originalHue = Number(h2);
-      }
-    } else if (!isString && format.startsWith("hs")) {
-      const colorInput = this._color.originalInput;
-      const colorValues = Object.values(colorInput);
-      originalHue = colorValues[0];
-    }
-    this.hue = originalHue || h;
-    this.x = s;
-    this.y = 1 - v;
-    this.requestUpdate("color", oldValue);
-  }
-  get x() {
-    return this._x;
-  }
-  set x(x) {
-    if (x === this.x) {
-      return;
-    }
-    const oldValue = this.x;
-    if (this.inputX) {
-      this.inputX.value = x.toString();
-      this._x = this.inputX.valueAsNumber;
-    } else {
-      this._x = x;
-    }
-    this.requestUpdate("x", oldValue);
-  }
-  get y() {
-    return this._y;
-  }
-  set y(y) {
-    if (y === this.y) {
-      return;
-    }
-    const oldValue = this.y;
-    if (this.inputY) {
-      this.inputY.value = y.toString();
-      this._y = this.inputY.valueAsNumber;
-    } else {
-      this._y = y;
-    }
-    this.requestUpdate("y", oldValue);
-  }
-  focus(focusOptions = {}) {
-    super.focus(focusOptions);
-    this.forwardFocus();
-  }
-  forwardFocus() {
-    this.focused = this.hasVisibleFocusInTree();
-    if (this.activeAxis === "x") {
-      this.inputX.focus();
-    } else {
-      this.inputY.focus();
-    }
-  }
-  handleFocusin() {
-    this.focused = true;
-  }
-  handleFocusout() {
-    if (this._pointerDown) {
-      return;
-    }
-    this.focused = 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;
-    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 * -1;
-          break;
-        case "ArrowDown":
-          deltaY = step * 1;
-          break;
-        case "ArrowLeft":
-          deltaX = step * -1;
-          break;
-        case "ArrowRight":
-          deltaX = step * 1;
-          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._previousColor = this._color.clone();
-    this._color = new TinyColor({ h: this.hue, s: this.x, v: 1 - this.y });
-    if (deltaX != 0 || deltaY != 0) {
-      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;
-      }
-    }
-  }
-  handleKeyup(event) {
-    event.preventDefault();
-    const { code } = event;
-    this.activeKeys.delete(code);
-  }
-  handleInput(event) {
-    const { valueAsNumber, name } = event.target;
-    this[name] = valueAsNumber;
-    this._color = new TinyColor({ h: this.hue, s: this.x, v: 1 - this.y });
-  }
-  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._previousColor = this._color.clone();
-    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._color = new TinyColor({ h: this.hue, s: x, v: 1 - y });
-    this.x = x;
-    this.y = y;
-    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._color = this._previousColor;
-    }
-  }
-  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 [percentX, percentY];
-  }
-  handleAreaPointerdown(event) {
-    if (event.button !== 0) {
-      return;
-    }
-    event.stopPropagation();
-    event.preventDefault();
-    this.handle.dispatchEvent(new PointerEvent("pointerdown", event));
-    this.handlePointermove(event);
-  }
-  render() {
-    var _a, _b;
-    const { width = 0, height = 0 } = this.boundingClientRect || {};
-    return html`
+var f=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var r=(p,t,e,i)=>{for(var s=i>1?void 0:i?m(t,e):t,o=p.length-1,a;o>=0;o--)(a=p[o])&&(s=(i?a(t,e,s):a(s))||s);return i&&s&&f(t,e,s),s};import{html as g,SpectrumElement as y}from"@spectrum-web-components/base";import{ifDefined as w}from"@spectrum-web-components/base/src/directives.js";import{property as n,query as v}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as _}from"@spectrum-web-components/base/src/streaming-listener.js";import{extractHueAndSaturationRegExp as x,replaceHueRegExp as b}from"@spectrum-web-components/color-handle";import"@spectrum-web-components/color-handle/sp-color-handle.js";import{TinyColor as h}from"@ctrl/tinycolor";import S from"./color-area.css.js";export class ColorArea extends y{constructor(){super(...arguments);this.disabled=!1;this.focused=!1;this.labelX="saturation";this.labelY="luminosity";this._hue=0;this._color=new h({h:0,s:1,v:1});this._previousColor=new h({h:0,s:1,v:1});this._format={format:"",isString:!1};this.activeAxis="x";this._x=1;this._y=0;this.step=.01;this.altered=0;this.activeKeys=new Set;this._pointerDown=!1}static get styles(){return[S]}get hue(){return this._hue}set hue(t){const e=Math.min(360,Math.max(0,t));if(e===this.hue)return;const i=this.hue,{s,v:o}=this._color.toHsv();this._color=new h({h:e,s,v:o}),this._hue=e,this.requestUpdate("hue",i)}get value(){return this.color}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"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)return this._color.toHslString().replace(b,`$1${this.hue}`);{const{s:t,l:e,a:i}=this._color.toHsl();return{h:this.hue,s:t,l:e,a:i}}case"hsv":if(this._format.isString)return this._color.toHsvString().replace(b,`$1${this.hue}`);{const{s:t,v:e,a:i}=this._color.toHsv();return{h:this.hue,s:t,v:e,a:i}}case"hex":case"hex3":case"hex4":case"hex6":default:return this._format.isString?this._color.toHexString():this._color.toHex()}}set color(t){if(t===this.color)return;const e=this._color;this._color=new h(t);const i=this._color.format;let s=typeof t=="string"||t instanceof String;i.startsWith("hex")&&(s=t.startsWith("#")),this._format={format:i,isString:s};const{h:o,s:a,v:d}=this._color.toHsv();let u;if(s&&i.startsWith("hs")){const l=x.exec(t);if(l!==null){const[,c]=l;u=Number(c)}}else if(!s&&i.startsWith("hs")){const l=this._color.originalInput;u=Object.values(l)[0]}this.hue=u||o,this.x=a,this.y=1-d,this.requestUpdate("color",e)}get x(){return this._x}set x(t){if(t===this.x)return;const e=this.x;this.inputX?(this.inputX.value=t.toString(),this._x=this.inputX.valueAsNumber):this._x=t,this.requestUpdate("x",e)}get y(){return this._y}set y(t){if(t===this.y)return;const e=this.y;this.inputY?(this.inputY.value=t.toString(),this._y=this.inputY.valueAsNumber):this._y=t,this.requestUpdate("y",e)}focus(t={}){super.focus(t),this.forwardFocus()}forwardFocus(){this.focused=this.hasVisibleFocusInTree(),this.activeAxis==="x"?this.inputX.focus():this.inputY.focus()}handleFocusin(){this.focused=!0}handleFocusout(){this._pointerDown||(this.focused=!1)}handleKeydown(t){const{code:e}=t;this.focused=!0,this.altered=[t.shiftKey,t.ctrlKey,t.altKey].filter(s=>!!s).length,e.search("Arrow")===0&&(t.preventDefault(),this.activeKeys.add(e),this.handleKeypress())}handleKeypress(){let t=0,e=0;const i=Math.max(this.step,this.altered*5*this.step);this.activeKeys.forEach(s=>{switch(s){case"ArrowUp":e=i*-1;break;case"ArrowDown":e=i*1;break;case"ArrowLeft":t=i*-1;break;case"ArrowRight":t=i*1;break;default:break}}),t!=0?(this.activeAxis="x",this.inputX.focus()):e!=0&&(this.activeAxis="y",this.inputY.focus()),this.x=Math.min(1,Math.max(this.x+t,0)),this.y=Math.min(1,Math.max(this.y+e,0)),this._previousColor=this._color.clone(),this._color=new h({h:this.hue,s:this.x,v:1-this.y}),(t!=0||e!=0)&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||(this._color=this._previousColor))}handleKeyup(t){t.preventDefault();const{code:e}=t;this.activeKeys.delete(e)}handleInput(t){const{valueAsNumber:e,name:i}=t.target;this[i]=e,this._color=new h({h:this.hue,s:this.x,v:1-this.y})}handleChange(t){this.handleInput(t),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerdown(t){if(t.button!==0){t.preventDefault();return}this._pointerDown=!0,this._previousColor=this._color.clone(),this.boundingClientRect=this.getBoundingClientRect(),t.target.setPointerCapture(t.pointerId),t.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(t){const[e,i]=this.calculateHandlePosition(t);this._color=new h({h:this.hue,s:e,v:1-i}),this.x=e,this.y=i,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(t){t.preventDefault(),this._pointerDown=!1,t.target.releasePointerCapture(t.pointerId);const e=this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}));this.inputX.focus(),t.pointerType==="mouse"&&(this.focused=!1),e||(this._color=this._previousColor)}calculateHandlePosition(t){if(!this.boundingClientRect)return[this.x,this.y];const e=this.boundingClientRect,i=e.left,s=e.top,o=t.clientX,a=t.clientY,d=e.width,u=e.height,l=Math.max(0,Math.min(1,(o-i)/d)),c=Math.max(0,Math.min(1,(a-s)/u));return[l,c]}handleAreaPointerdown(t){t.button===0&&(t.stopPropagation(),t.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",t)),this.handlePointermove(t))}render(){var i,s;const{width:t=0,height:e=0}=this.boundingClientRect||{};return g`
             <div
                 @pointerdown=${this.handleAreaPointerdown}
                 class="gradient"
@@ -345,18 +10,14 @@ export class ColorArea extends SpectrumElement {
             </div>
 
             <sp-color-handle
-                tabindex=${ifDefined(this.focused ? void 0 : "0")}
+                tabindex=${w(this.focused?void 0:"0")}
                 @focus=${this.forwardFocus}
                 ?focused=${this.focused}
                 class="handle"
                 color=${this._color.toHslString()}
                 ?disabled=${this.disabled}
-                style="transform: translate(${this.x * width}px, ${this.y * height}px);"
-                ${streamingListener({
-      start: ["pointerdown", this.handlePointerdown],
-      streamInside: ["pointermove", this.handlePointermove],
-      end: [["pointerup", "pointercancel"], this.handlePointerup]
-    })}
+                style="transform: translate(${this.x*t}px, ${this.y*e}px);"
+                ${_({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel"],this.handlePointerup]})}
             ></sp-color-handle>
 
             <div>
@@ -364,7 +25,7 @@ export class ColorArea extends SpectrumElement {
                     type="range"
                     class="slider"
                     name="x"
-                    aria-label=${(_a = this.label) != null ? _a : this.labelX}
+                    aria-label=${(i=this.label)!=null?i:this.labelX}
                     min="0"
                     max="1"
                     step=${this.step}
@@ -379,7 +40,7 @@ export class ColorArea extends SpectrumElement {
                     type="range"
                     class="slider"
                     name="y"
-                    aria-label=${(_b = this.label) != null ? _b : this.labelY}
+                    aria-label=${(s=this.label)!=null?s:this.labelY}
                     min="0"
                     max="1"
                     step=${this.step}
@@ -389,98 +50,5 @@ export class ColorArea extends SpectrumElement {
                     @change=${this.handleChange}
                 />
             </div>
-        `;
-  }
-  firstUpdated(changed) {
-    super.firstUpdated(changed);
-    this.boundingClientRect = this.getBoundingClientRect();
-    this.addEventListener("focusin", this.handleFocusin);
-    this.addEventListener("focusout", this.handleFocusout);
-    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: Boolean, reflect: true })
-], ColorArea.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], ColorArea.prototype, "focused", 2);
-__decorateClass([
-  property({ type: String })
-], ColorArea.prototype, "label", 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);
+        `}firstUpdated(t){super.firstUpdated(t),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focusin",this.handleFocusin),this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("keydown",this.handleKeydown)}updated(t){if(super.updated(t),this.x!==this.inputX.valueAsNumber&&(this._x=this.inputX.valueAsNumber),this.y!==this.inputY.valueAsNumber&&(this._y=this.inputY.valueAsNumber),t.has("focused")&&this.focused){const e=this.inputX.parentElement,i=this.inputY.parentElement;if(!e.shadowRoot&&!i.shadowRoot){e.attachShadow({mode:"open"}),i.attachShadow({mode:"open"});const s='<div tabindex="-1"><slot></slot></div>';e.shadowRoot.innerHTML=s,i.shadowRoot.innerHTML=s}}}connectedCallback(){var t;super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(e=>{for(const i of e)this.boundingClientRect=i.contentRect;this.requestUpdate()})),(t=this.observer)==null||t.observe(this)}disconnectedCallback(){var t;(t=this.observer)==null||t.unobserve(this),super.disconnectedCallback()}}r([n({type:Boolean,reflect:!0})],ColorArea.prototype,"disabled",2),r([n({type:Boolean,reflect:!0})],ColorArea.prototype,"focused",2),r([n({type:String})],ColorArea.prototype,"label",2),r([n({type:String,attribute:"label-x"})],ColorArea.prototype,"labelX",2),r([n({type:String,attribute:"label-y"})],ColorArea.prototype,"labelY",2),r([v(".handle")],ColorArea.prototype,"handle",2),r([n({type:Number})],ColorArea.prototype,"hue",1),r([n({type:String})],ColorArea.prototype,"value",1),r([n({type:String})],ColorArea.prototype,"color",1),r([n({attribute:!1})],ColorArea.prototype,"activeAxis",2),r([n({type:Number})],ColorArea.prototype,"x",1),r([n({type:Number})],ColorArea.prototype,"y",1),r([n({type:Number})],ColorArea.prototype,"step",2),r([v('[name="x"]')],ColorArea.prototype,"inputX",2),r([v('[name="y"]')],ColorArea.prototype,"inputY",2);
 //# sourceMappingURL=ColorArea.js.map