@spectrum-web-components/color-field 0.47.0 → 0.47.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/custom-elements.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/color-field",
|
|
3
|
-
"version": "0.47.
|
|
3
|
+
"version": "0.47.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
],
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@ctrl/tinycolor": "^4.0.3",
|
|
60
|
-
"@spectrum-web-components/base": "^0.47.
|
|
61
|
-
"@spectrum-web-components/color-handle": "^0.47.
|
|
62
|
-
"@spectrum-web-components/textfield": "^0.47.
|
|
60
|
+
"@spectrum-web-components/base": "^0.47.2",
|
|
61
|
+
"@spectrum-web-components/color-handle": "^0.47.2",
|
|
62
|
+
"@spectrum-web-components/textfield": "^0.47.2"
|
|
63
63
|
},
|
|
64
64
|
"types": "./src/index.d.ts",
|
|
65
65
|
"customElements": "custom-elements.json",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"./sp-*.js",
|
|
68
68
|
"./**/*.dev.js"
|
|
69
69
|
],
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "2784e4c65da6a65b6bc748d785154714c8498a8e"
|
|
71
71
|
}
|
package/src/ColorField.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ export declare class ColorField extends TextfieldBase {
|
|
|
12
12
|
get value(): string;
|
|
13
13
|
protected _value: string;
|
|
14
14
|
private cachedColor;
|
|
15
|
-
|
|
15
|
+
getColorValue(): string;
|
|
16
16
|
private renderColorHandle;
|
|
17
17
|
protected render(): TemplateResult;
|
|
18
18
|
private cachedTinyColor;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ColorField.ts"],
|
|
4
|
-
"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
|
|
5
|
-
"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,
|
|
4
|
+
"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"],
|
|
5
|
+
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/ColorField.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"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`
|
|
2
2
|
<sp-color-handle
|
|
3
3
|
size="m"
|
|
4
4
|
color="${this.getColorValue()}"
|
package/src/ColorField.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ColorField.ts"],
|
|
4
|
-
"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
|
|
5
|
-
"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,
|
|
4
|
+
"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"],
|
|
5
|
+
"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",
|
|
6
6
|
"names": ["html", "property", "TinyColor", "TextfieldBase", "value", "oldValue", "tinyColor", "validity", "__decorateClass"]
|
|
7
7
|
}
|
package/test/color-field.test.js
CHANGED
|
@@ -20,6 +20,21 @@ describe("ColorField", () => {
|
|
|
20
20
|
el.value = "rgba(255, 0, 0)";
|
|
21
21
|
expect(el.checkValidity()).to.be.false;
|
|
22
22
|
});
|
|
23
|
+
it("updates cachedColor when value changes", async () => {
|
|
24
|
+
const el = await fixture(Template({}));
|
|
25
|
+
el.value = "#ff0000";
|
|
26
|
+
await elementUpdated(el);
|
|
27
|
+
expect(el.getColorValue()).to.equal("rgb(255, 0, 0)");
|
|
28
|
+
el.value = "#00ff00";
|
|
29
|
+
await elementUpdated(el);
|
|
30
|
+
expect(el.getColorValue()).to.equal("rgb(0, 255, 0)");
|
|
31
|
+
el.value = "invalid-color";
|
|
32
|
+
await elementUpdated(el);
|
|
33
|
+
expect(el.getColorValue()).to.equal("");
|
|
34
|
+
el.value = "#0000ff";
|
|
35
|
+
await elementUpdated(el);
|
|
36
|
+
expect(el.getColorValue()).to.equal("rgb(0, 0, 255)");
|
|
37
|
+
});
|
|
23
38
|
it("validates hex color values", async () => {
|
|
24
39
|
const el = await fixture(Template({}));
|
|
25
40
|
el.value = "#ff0000";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["color-field.test.ts"],
|
|
4
|
-
"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 { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { ColorField } from '@spectrum-web-components/color-field';\n\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\nimport { Template } from '../stories/template.js';\n\ndescribe('ColorField', () => {\n testForLitDevWarnings(async () => await fixture<ColorField>(Template({})));\n it('loads default color-field accessibly', async () => {\n const el = await fixture<ColorField>(\n Template({ label: 'Enter color value' })\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('validates rgba color values', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.value = 'rgba(255, 0, 0, 1)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'rgba(255, 0, 0, 0.5)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'rgba(255, 0, 0)';\n\n expect(el.checkValidity()).to.be.false;\n });\n\n it('validates hex color values', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.value = '#ff0000';\n expect(el.checkValidity()).to.be.true;\n\n el.value = '#f00';\n expect(el.checkValidity()).to.be.true;\n\n el.value = '##F00000000000';\n expect(el.checkValidity()).to.be.false;\n });\n\n it('validates hsl color values', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.value = 'hsl(120, 100%, 50%)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'hsl(120, 50%, 50%)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'hsl(120, 50%)';\n expect(el.checkValidity()).to.be.false;\n });\n\n it('validates hsv color values', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.value = 'hsv(120, 100%, 50%)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'hsv(120, 50%, 50%)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'hsv(120, 50%)';\n expect(el.checkValidity()).to.be.false;\n });\n\n it('handles invalid color values', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.value = 'not a color';\n await elementUpdated(el);\n\n expect(el.checkValidity()).to.be.false;\n });\n\n it('renders color handle when viewColor is true', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.viewColor = true;\n await elementUpdated(el);\n\n const colorHandle = el.shadowRoot.querySelector('sp-color-handle');\n expect(colorHandle).to.not.be.null;\n });\n\n it('does not render color handle when viewColor is false', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.viewColor = false;\n await elementUpdated(el);\n\n const colorHandle = el.shadowRoot.querySelector('sp-color-handle');\n expect(colorHandle).to.be.null;\n });\n});\n"],
|
|
5
|
-
"mappings": ";AAWA,SAAS,gBAAgB,QAAQ,eAAe;AAGhD,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AAEzB,SAAS,cAAc,MAAM;AACzB,wBAAsB,YAAY,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC,CAAC;AACzE,KAAG,wCAAwC,YAAY;AACnD,UAAM,KAAK,MAAM;AAAA,MACb,SAAS,EAAE,OAAO,oBAAoB,CAAC;AAAA,IAC3C;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AAED,KAAG,+BAA+B,YAAY;AAC1C,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AAEX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AAED,KAAG,8BAA8B,YAAY;AACzC,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AAED,KAAG,8BAA8B,YAAY;AACzC,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AAED,KAAG,8BAA8B,YAAY;AACzC,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AAED,KAAG,gCAAgC,YAAY;AAC3C,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AAED,KAAG,+CAA+C,YAAY;AAC1D,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,YAAY;AACf,UAAM,eAAe,EAAE;AAEvB,UAAM,cAAc,GAAG,WAAW,cAAc,iBAAiB;AACjE,WAAO,WAAW,EAAE,GAAG,IAAI,GAAG;AAAA,EAClC,CAAC;AAED,KAAG,wDAAwD,YAAY;AACnE,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,YAAY;AACf,UAAM,eAAe,EAAE;AAEvB,UAAM,cAAc,GAAG,WAAW,cAAc,iBAAiB;AACjE,WAAO,WAAW,EAAE,GAAG,GAAG;AAAA,EAC9B,CAAC;AACL,CAAC;",
|
|
4
|
+
"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 { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { ColorField } from '@spectrum-web-components/color-field';\n\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\nimport { Template } from '../stories/template.js';\n\ndescribe('ColorField', () => {\n testForLitDevWarnings(async () => await fixture<ColorField>(Template({})));\n it('loads default color-field accessibly', async () => {\n const el = await fixture<ColorField>(\n Template({ label: 'Enter color value' })\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('validates rgba color values', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.value = 'rgba(255, 0, 0, 1)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'rgba(255, 0, 0, 0.5)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'rgba(255, 0, 0)';\n\n expect(el.checkValidity()).to.be.false;\n });\n\n it('updates cachedColor when value changes', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n // Initial value\n el.value = '#ff0000';\n await elementUpdated(el);\n expect(el.getColorValue()).to.equal('rgb(255, 0, 0)');\n\n // Change to a different valid color\n el.value = '#00ff00';\n await elementUpdated(el);\n expect(el.getColorValue()).to.equal('rgb(0, 255, 0)');\n\n // Change to an invalid color\n el.value = 'invalid-color';\n await elementUpdated(el);\n expect(el.getColorValue()).to.equal('');\n\n // Change back to a valid color\n el.value = '#0000ff';\n await elementUpdated(el);\n expect(el.getColorValue()).to.equal('rgb(0, 0, 255)');\n });\n\n it('validates hex color values', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.value = '#ff0000';\n expect(el.checkValidity()).to.be.true;\n\n el.value = '#f00';\n expect(el.checkValidity()).to.be.true;\n\n el.value = '##F00000000000';\n expect(el.checkValidity()).to.be.false;\n });\n\n it('validates hsl color values', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.value = 'hsl(120, 100%, 50%)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'hsl(120, 50%, 50%)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'hsl(120, 50%)';\n expect(el.checkValidity()).to.be.false;\n });\n\n it('validates hsv color values', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.value = 'hsv(120, 100%, 50%)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'hsv(120, 50%, 50%)';\n expect(el.checkValidity()).to.be.true;\n\n el.value = 'hsv(120, 50%)';\n expect(el.checkValidity()).to.be.false;\n });\n\n it('handles invalid color values', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.value = 'not a color';\n await elementUpdated(el);\n\n expect(el.checkValidity()).to.be.false;\n });\n\n it('renders color handle when viewColor is true', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.viewColor = true;\n await elementUpdated(el);\n\n const colorHandle = el.shadowRoot.querySelector('sp-color-handle');\n expect(colorHandle).to.not.be.null;\n });\n\n it('does not render color handle when viewColor is false', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n el.viewColor = false;\n await elementUpdated(el);\n\n const colorHandle = el.shadowRoot.querySelector('sp-color-handle');\n expect(colorHandle).to.be.null;\n });\n});\n"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,gBAAgB,QAAQ,eAAe;AAGhD,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AAEzB,SAAS,cAAc,MAAM;AACzB,wBAAsB,YAAY,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC,CAAC;AACzE,KAAG,wCAAwC,YAAY;AACnD,UAAM,KAAK,MAAM;AAAA,MACb,SAAS,EAAE,OAAO,oBAAoB,CAAC;AAAA,IAC3C;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AAED,KAAG,+BAA+B,YAAY;AAC1C,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AAEX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AAED,KAAG,0CAA0C,YAAY;AACrD,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAGjD,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,MAAM,gBAAgB;AAGpD,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,MAAM,gBAAgB;AAGpD,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,MAAM,EAAE;AAGtC,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,MAAM,gBAAgB;AAAA,EACxD,CAAC;AAED,KAAG,8BAA8B,YAAY;AACzC,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AAED,KAAG,8BAA8B,YAAY;AACzC,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AAED,KAAG,8BAA8B,YAAY;AACzC,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAEjC,OAAG,QAAQ;AACX,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AAED,KAAG,gCAAgC,YAAY;AAC3C,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG;AAAA,EACrC,CAAC;AAED,KAAG,+CAA+C,YAAY;AAC1D,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,YAAY;AACf,UAAM,eAAe,EAAE;AAEvB,UAAM,cAAc,GAAG,WAAW,cAAc,iBAAiB;AACjE,WAAO,WAAW,EAAE,GAAG,IAAI,GAAG;AAAA,EAClC,CAAC;AAED,KAAG,wDAAwD,YAAY;AACnE,UAAM,KAAK,MAAM,QAAoB,SAAS,CAAC,CAAC,CAAC;AAEjD,OAAG,YAAY;AACf,UAAM,eAAe,EAAE;AAEvB,UAAM,cAAc,GAAG,WAAW,cAAc,iBAAiB;AACjE,WAAO,WAAW,EAAE,GAAG,GAAG;AAAA,EAC9B,CAAC;AACL,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|