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

package/README.md

@@ -0,0 +1,142 @@
+## Description
+
+`<sp-color-field>` elements are textfields that allow users to input custom color values.
+Color formats supported are `HEX, RGB, HSL, HSV, and shorthand HEX`
+
+## Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/color-field?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/color-field)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/color-field?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/color-field)
+
+```
+yarn add @spectrum-web-components/color-field
+```
+
+Import the side effectful registration of `<sp-color-field>` via:
+
+```
+import '@spectrum-web-components/color-field/sp-color-field.js';
+```
+
+When looking to leverage the `ColorField` base class as a type and/or for extension purposes, do so via:
+
+```
+import { ColorField } from '@spectrum-web-components/color-field';
+```
+
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html
+<sp-color-field size="s" value="#ffff00"></sp-color-field>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-color-field size="m" value="#ffff00"></sp-color-field>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+
+<sp-tab-panel value="l">
+
+```html
+<sp-color-field size="l" value="#ffff00"></sp-color-field>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Xtra Large</sp-tab>
+
+<sp-tab-panel value="xl">
+
+```html
+<sp-color-field size="xl" value="#ffff00"></sp-color-field>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## View Color
+
+When `view-color` is true, the color handle will be rendered. This is useful for development and debugging purposes.
+
+```html
+<sp-color-field view-color value="#f00"></sp-color-field>
+```
+
+## Read Only
+
+A readonly color field
+
+```html
+<sp-color-field readonly value="#ffff00"></sp-color-field>
+```
+
+## Quiet
+
+A Quiet color field
+
+```html
+<sp-color-field quiet value="#e6e600"></sp-color-field>
+```
+
+## Invalid Input
+
+If the input value is not a valid color, `<sp-color-field>` will not accept it.
+
+```html
+<sp-color-field value="not a color"></sp-color-field>
+```
+
+## Valid Input
+
+If the input value is a valid color, the `<sp-color-field>` will accept it and the color handle will be updated to reflect the new color.
+
+`<sp-color-field>` component accepts color values in various formats: `HEX, RGB, HSL, HSV, and shorthand HEX`
+
+-   **HEX**: A hexadecimal color is specified with: `#RRGGBB`. `RR` (red), `GG` (green) and `BB` (blue) are hexadecimal integers between `00` and `FF` specifying the intensity of the color.
+
+```html
+<sp-color-field value="#ff0000"></sp-color-field>
+```
+
+-   **Shorthand HEX**: Shorthand hexadecimal color values are also supported. `#RGB` is a shorthand for `#RRGGBB`. In the shorthand form, `R` (red), `G` (green), and `B` (blue) are hexadecimal characters between `0` and `F`. Each character is repeated to create the full 6-digit color code. For example, `#123` would expand to `#112233`.
+
+```html
+<sp-color-field view-color value="#f00"></sp-color-field>
+```
+
+-   **RGB**: An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of the color with a value between 0 and 255.
+
+```html
+<sp-color-field view-color value="rgb(0,2555,0)"></sp-color-field>
+```
+
+-   **RGBA**: An RGBA color value is specified with: `rgba(red, green, blue, alpha)`. The `alpha` parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
+
+```html
+<sp-color-field view-color value="rgba(0,255,0,0.3)"></sp-color-field>
+```
+
+-   **HSL**: An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and lightness are percentages.
+
+```html
+<sp-color-field view-color value="hsl(234, 70%, 50%)"></sp-color-field>
+```
+
+-   **HSV**: An HSV color value is specified with: hsv(hue, saturation, value). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and value are percentages.
+
+```html
+<sp-color-field view-color value="hsv(0, 70%, 50%)"></sp-color-field>
+```
+
+## Events
+
+The sp-color-field component fires a change event when the color value is changed. You can listen for this event to react to changes in the color value.

package/package.json

@@ -0,0 +1,70 @@
+{
+    "name": "@spectrum-web-components/color-field",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Web component implementation of a Spectrum design ColorField",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/color-field"
+    },
+    "author": "",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/color-field",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/ColorField.js": {
+            "development": "./src/ColorField.dev.js",
+            "default": "./src/ColorField.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-color-field.js": {
+            "development": "./sp-color-field.dev.js",
+            "default": "./sp-color-field.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@ctrl/tinycolor": "^4.0.3",
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/color-handle": "0.0.0-20241209155954",
+        "@spectrum-web-components/textfield": "0.0.0-20241209155954"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-color-field.d.ts

@@ -0,0 +1,6 @@
+import { ColorField } from './src/ColorField.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-color-field': ColorField;
+    }
+}

package/sp-color-field.dev.js

@@ -0,0 +1,4 @@
+"use strict";
+import { ColorField } from "./src/ColorField.dev.js";
+customElements.define("sp-color-field", ColorField);
+//# sourceMappingURL=sp-color-field.dev.js.map

package/sp-color-field.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-color-field.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 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 { ColorField } from './src/ColorField.dev.js'\n\ncustomElements.define('sp-color-field', ColorField);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-color-field': ColorField;\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,kBAAkB;AAE3B,eAAe,OAAO,kBAAkB,UAAU;",
+  "names": []
+}

package/sp-color-field.js

@@ -0,0 +1,2 @@
+"use strict";import{ColorField as e}from"./src/ColorField.js";customElements.define("sp-color-field",e);
+//# sourceMappingURL=sp-color-field.js.map

package/sp-color-field.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-color-field.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 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 { ColorField } from './src/ColorField.js';\n\ncustomElements.define('sp-color-field', ColorField);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-color-field': ColorField;\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,cAAAA,MAAkB,sBAE3B,eAAe,OAAO,iBAAkBA,CAAU",
+  "names": ["ColorField"]
+}

package/src/ColorField.d.ts

@@ -0,0 +1,20 @@
+import { CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
+import { TextfieldBase } from '@spectrum-web-components/textfield';
+/**
+ * @element sp-color-field
+ * @fires input - The value of the color-field has changed.
+ * @fires change - An alteration to the value of the color-field has been committed by the user.
+ */
+export declare class ColorField extends TextfieldBase {
+    static get styles(): CSSResultArray;
+    viewColor: boolean;
+    set value(value: string);
+    get value(): string;
+    protected _value: string;
+    private cachedColor;
+    getColorValue(): string;
+    private renderColorHandle;
+    protected render(): TemplateResult;
+    private cachedTinyColor;
+    checkValidity(): boolean;
+}

package/src/ColorField.dev.js

@@ -0,0 +1,81 @@
+"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
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { TinyColor } from "@ctrl/tinycolor";
+import { TextfieldBase } from "@spectrum-web-components/textfield";
+export class ColorField extends TextfieldBase {
+  constructor() {
+    super(...arguments);
+    this.viewColor = false;
+    this._value = "";
+    this.cachedColor = null;
+    this.cachedTinyColor = null;
+  }
+  static get styles() {
+    return [...super.styles];
+  }
+  set value(value) {
+    if (value === this.value) {
+      return;
+    }
+    const oldValue = this._value;
+    this._value = value;
+    this.requestUpdate("value", oldValue);
+  }
+  get value() {
+    return this._value;
+  }
+  getColorValue() {
+    if (!this.value) {
+      return "";
+    }
+    if (!this.cachedColor || this.cachedColor !== this.value) {
+      const tinyColor = new TinyColor(this.value);
+      this.cachedColor = tinyColor.isValid ? tinyColor.toRgbString() : "";
+    }
+    return this.cachedColor;
+  }
+  renderColorHandle() {
+    return this.viewColor ? html`
+                  <sp-color-handle
+                      size="m"
+                      color="${this.getColorValue()}"
+                  ></sp-color-handle>
+              ` : html``;
+  }
+  render() {
+    if (this.viewColor) {
+      import("@spectrum-web-components/color-handle/sp-color-handle.js");
+    }
+    return html`
+            ${super.render()} ${this.renderColorHandle()}
+        `;
+  }
+  checkValidity() {
+    let validity = super.checkValidity();
+    if (this.value) {
+      if (!this.cachedTinyColor || this.cachedTinyColor.originalInput !== this.value) {
+        this.cachedTinyColor = new TinyColor(this.value);
+      }
+      this.valid = validity = this.cachedTinyColor.isValid;
+      this.invalid = !validity;
+    }
+    return validity;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, attribute: "view-color" })
+], ColorField.prototype, "viewColor", 2);
+//# sourceMappingURL=ColorField.dev.js.map

package/src/ColorField.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["ColorField.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 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*/\nimport {\n    CSSResultArray,\n    html,\n    TemplateResult,\n} from '@spectrum-web-components/base';\n\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { TextfieldBase } from '@spectrum-web-components/textfield';\n\n/**\n * @element sp-color-field\n * @fires input - The value of the color-field has changed.\n * @fires change - An alteration to the value of the color-field has been committed by the user.\n */\nexport class ColorField extends TextfieldBase {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles];\n    }\n\n    @property({ type: Boolean, attribute: 'view-color' })\n    public viewColor = false;\n\n    public override set value(value: string) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public override get value(): string {\n        return this._value;\n    }\n\n    protected override _value = '';\n\n    private cachedColor: string | null = null;\n\n    public getColorValue(): string {\n        if (!this.value) {\n            return '';\n        }\n\n        if (!this.cachedColor || this.cachedColor !== this.value) {\n            const tinyColor = new TinyColor(this.value);\n            this.cachedColor = tinyColor.isValid ? tinyColor.toRgbString() : '';\n        }\n\n        return this.cachedColor;\n    }\n\n    private renderColorHandle(): TemplateResult {\n        return this.viewColor\n            ? html`\n                  <sp-color-handle\n                      size=\"m\"\n                      color=\"${this.getColorValue()}\"\n                  ></sp-color-handle>\n              `\n            : html``;\n    }\n\n    protected override render(): TemplateResult {\n        if (this.viewColor) {\n            import('@spectrum-web-components/color-handle/sp-color-handle.js');\n        }\n        return html`\n            ${super.render()} ${this.renderColorHandle()}\n        `;\n    }\n\n    private cachedTinyColor: TinyColor | null = null;\n\n    public override checkValidity(): boolean {\n        let validity = super.checkValidity();\n        if (this.value) {\n            if (\n                !this.cachedTinyColor ||\n                this.cachedTinyColor.originalInput !== this.value\n            ) {\n                this.cachedTinyColor = new TinyColor(this.value);\n            }\n            this.valid = validity = this.cachedTinyColor.isValid;\n            this.invalid = !validity;\n        }\n        return validity;\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,OAEG;AAEP,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAOvB,aAAM,mBAAmB,cAAc;AAAA,EAAvC;AAAA;AAMH,SAAO,YAAY;AAenB,SAAmB,SAAS;AAE5B,SAAQ,cAA6B;AAmCrC,SAAQ,kBAAoC;AAAA;AAAA,EAzD5C,WAA2B,SAAyB;AAChD,WAAO,CAAC,GAAG,MAAM,MAAM;AAAA,EAC3B;AAAA,EAKA,IAAoB,MAAM,OAAe;AACrC,QAAI,UAAU,KAAK,OAAO;AACtB;AAAA,IACJ;AACA,UAAM,WAAW,KAAK;AACtB,SAAK,SAAS;AACd,SAAK,cAAc,SAAS,QAAQ;AAAA,EACxC;AAAA,EAEA,IAAoB,QAAgB;AAChC,WAAO,KAAK;AAAA,EAChB;AAAA,EAMO,gBAAwB;AAC3B,QAAI,CAAC,KAAK,OAAO;AACb,aAAO;AAAA,IACX;AAEA,QAAI,CAAC,KAAK,eAAe,KAAK,gBAAgB,KAAK,OAAO;AACtD,YAAM,YAAY,IAAI,UAAU,KAAK,KAAK;AAC1C,WAAK,cAAc,UAAU,UAAU,UAAU,YAAY,IAAI;AAAA,IACrE;AAEA,WAAO,KAAK;AAAA,EAChB;AAAA,EAEQ,oBAAoC;AACxC,WAAO,KAAK,YACN;AAAA;AAAA;AAAA,+BAGiB,KAAK,cAAc,CAAC;AAAA;AAAA,kBAGrC;AAAA,EACV;AAAA,EAEmB,SAAyB;AACxC,QAAI,KAAK,WAAW;AAChB,aAAO,0DAA0D;AAAA,IACrE;AACA,WAAO;AAAA,cACD,MAAM,OAAO,CAAC,IAAI,KAAK,kBAAkB,CAAC;AAAA;AAAA,EAEpD;AAAA,EAIgB,gBAAyB;AACrC,QAAI,WAAW,MAAM,cAAc;AACnC,QAAI,KAAK,OAAO;AACZ,UACI,CAAC,KAAK,mBACN,KAAK,gBAAgB,kBAAkB,KAAK,OAC9C;AACE,aAAK,kBAAkB,IAAI,UAAU,KAAK,KAAK;AAAA,MACnD;AACA,WAAK,QAAQ,WAAW,KAAK,gBAAgB;AAC7C,WAAK,UAAU,CAAC;AAAA,IACpB;AACA,WAAO;AAAA,EACX;AACJ;AApEW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa,CAAC;AAAA,GAL3C,WAMF;",
+  "names": []
+}

package/src/ColorField.js

@@ -0,0 +1,9 @@
+"use strict";var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=(l,t,e,i)=>{for(var r=i>1?void 0:i?h(t,e):t,o=l.length-1,s;o>=0;o--)(s=l[o])&&(r=(i?s(t,e,r):s(r))||r);return i&&r&&c(t,e,r),r};import{html as a}from"@spectrum-web-components/base";import{property as d}from"@spectrum-web-components/base/src/decorators.js";import{TinyColor as n}from"@ctrl/tinycolor";import{TextfieldBase as p}from"@spectrum-web-components/textfield";export class ColorField extends p{constructor(){super(...arguments);this.viewColor=!1;this._value="";this.cachedColor=null;this.cachedTinyColor=null}static get styles(){return[...super.styles]}set value(e){if(e===this.value)return;const i=this._value;this._value=e,this.requestUpdate("value",i)}get value(){return this._value}getColorValue(){if(!this.value)return"";if(!this.cachedColor||this.cachedColor!==this.value){const e=new n(this.value);this.cachedColor=e.isValid?e.toRgbString():""}return this.cachedColor}renderColorHandle(){return this.viewColor?a`
+                  <sp-color-handle
+                      size="m"
+                      color="${this.getColorValue()}"
+                  ></sp-color-handle>
+              `:a``}render(){return this.viewColor&&import("@spectrum-web-components/color-handle/sp-color-handle.js"),a`
+            ${super.render()} ${this.renderColorHandle()}
+        `}checkValidity(){let e=super.checkValidity();return this.value&&((!this.cachedTinyColor||this.cachedTinyColor.originalInput!==this.value)&&(this.cachedTinyColor=new n(this.value)),this.valid=e=this.cachedTinyColor.isValid,this.invalid=!e),e}}u([d({type:Boolean,attribute:"view-color"})],ColorField.prototype,"viewColor",2);
+//# sourceMappingURL=ColorField.js.map

package/src/ColorField.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["ColorField.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 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*/\nimport {\n    CSSResultArray,\n    html,\n    TemplateResult,\n} from '@spectrum-web-components/base';\n\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { TextfieldBase } from '@spectrum-web-components/textfield';\n\n/**\n * @element sp-color-field\n * @fires input - The value of the color-field has changed.\n * @fires change - An alteration to the value of the color-field has been committed by the user.\n */\nexport class ColorField extends TextfieldBase {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles];\n    }\n\n    @property({ type: Boolean, attribute: 'view-color' })\n    public viewColor = false;\n\n    public override set value(value: string) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public override get value(): string {\n        return this._value;\n    }\n\n    protected override _value = '';\n\n    private cachedColor: string | null = null;\n\n    public getColorValue(): string {\n        if (!this.value) {\n            return '';\n        }\n\n        if (!this.cachedColor || this.cachedColor !== this.value) {\n            const tinyColor = new TinyColor(this.value);\n            this.cachedColor = tinyColor.isValid ? tinyColor.toRgbString() : '';\n        }\n\n        return this.cachedColor;\n    }\n\n    private renderColorHandle(): TemplateResult {\n        return this.viewColor\n            ? html`\n                  <sp-color-handle\n                      size=\"m\"\n                      color=\"${this.getColorValue()}\"\n                  ></sp-color-handle>\n              `\n            : html``;\n    }\n\n    protected override render(): TemplateResult {\n        if (this.viewColor) {\n            import('@spectrum-web-components/color-handle/sp-color-handle.js');\n        }\n        return html`\n            ${super.render()} ${this.renderColorHandle()}\n        `;\n    }\n\n    private cachedTinyColor: TinyColor | null = null;\n\n    public override checkValidity(): boolean {\n        let validity = super.checkValidity();\n        if (this.value) {\n            if (\n                !this.cachedTinyColor ||\n                this.cachedTinyColor.originalInput !== this.value\n            ) {\n                this.cachedTinyColor = new TinyColor(this.value);\n            }\n            this.valid = validity = this.cachedTinyColor.isValid;\n            this.invalid = !validity;\n        }\n        return validity;\n    }\n}\n"],
+  "mappings": "qNAWA,OAEI,QAAAA,MAEG,gCAEP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,aAAAC,MAAiB,kBAC1B,OAAS,iBAAAC,MAAqB,qCAOvB,aAAM,mBAAmBA,CAAc,CAAvC,kCAMH,KAAO,UAAY,GAenB,KAAmB,OAAS,GAE5B,KAAQ,YAA6B,KAmCrC,KAAQ,gBAAoC,KAzD5C,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,MAAM,CAC3B,CAKA,IAAoB,MAAMC,EAAe,CACrC,GAAIA,IAAU,KAAK,MACf,OAEJ,MAAMC,EAAW,KAAK,OACtB,KAAK,OAASD,EACd,KAAK,cAAc,QAASC,CAAQ,CACxC,CAEA,IAAoB,OAAgB,CAChC,OAAO,KAAK,MAChB,CAMO,eAAwB,CAC3B,GAAI,CAAC,KAAK,MACN,MAAO,GAGX,GAAI,CAAC,KAAK,aAAe,KAAK,cAAgB,KAAK,MAAO,CACtD,MAAMC,EAAY,IAAIJ,EAAU,KAAK,KAAK,EAC1C,KAAK,YAAcI,EAAU,QAAUA,EAAU,YAAY,EAAI,EACrE,CAEA,OAAO,KAAK,WAChB,CAEQ,mBAAoC,CACxC,OAAO,KAAK,UACNN;AAAA;AAAA;AAAA,+BAGiB,KAAK,cAAc,CAAC;AAAA;AAAA,gBAGrCA,GACV,CAEmB,QAAyB,CACxC,OAAI,KAAK,WACL,OAAO,0DAA0D,EAE9DA;AAAA,cACD,MAAM,OAAO,CAAC,IAAI,KAAK,kBAAkB,CAAC;AAAA,SAEpD,CAIgB,eAAyB,CACrC,IAAIO,EAAW,MAAM,cAAc,EACnC,OAAI,KAAK,SAED,CAAC,KAAK,iBACN,KAAK,gBAAgB,gBAAkB,KAAK,SAE5C,KAAK,gBAAkB,IAAIL,EAAU,KAAK,KAAK,GAEnD,KAAK,MAAQK,EAAW,KAAK,gBAAgB,QAC7C,KAAK,QAAU,CAACA,GAEbA,CACX,CACJ,CApEWC,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,UAAW,YAAa,CAAC,GAL3C,WAMF",
+  "names": ["html", "property", "TinyColor", "TextfieldBase", "value", "oldValue", "tinyColor", "validity", "__decorateClass"]
+}

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from './ColorField.js';

package/src/index.dev.js

@@ -0,0 +1,3 @@
+"use strict";
+export * from "./ColorField.dev.js";
+//# sourceMappingURL=index.dev.js.map

package/src/index.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 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*/\nexport * from './ColorField.dev.js'\n"],
+  "mappings": ";AAWA,cAAc;",
+  "names": []
+}

package/src/index.js

@@ -0,0 +1,2 @@
+"use strict";export*from"./ColorField.js";
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 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*/\nexport * from './ColorField.js';\n"],
+  "mappings": "aAWA,WAAc",
+  "names": []
+}