@spectrum-web-components/color-field 1.2.0-beta.9 → 1.2.0
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 +15 -24
- package/package.json +5 -6
- package/src/ColorField.d.ts +3 -3
- package/src/ColorField.dev.js +19 -20
- package/src/ColorField.dev.js.map +2 -2
- package/src/ColorField.js +4 -4
- package/src/ColorField.js.map +3 -3
- package/test/color-field.test.js +13 -4
- package/test/color-field.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -36,6 +36,15 @@
|
|
|
36
36
|
"default": "false",
|
|
37
37
|
"attribute": "view-color"
|
|
38
38
|
},
|
|
39
|
+
{
|
|
40
|
+
"kind": "field",
|
|
41
|
+
"name": "colorController",
|
|
42
|
+
"type": {
|
|
43
|
+
"text": "ColorController"
|
|
44
|
+
},
|
|
45
|
+
"privacy": "private",
|
|
46
|
+
"default": "new ColorController(this)"
|
|
47
|
+
},
|
|
39
48
|
{
|
|
40
49
|
"kind": "field",
|
|
41
50
|
"name": "value",
|
|
@@ -53,44 +62,26 @@
|
|
|
53
62
|
"privacy": "protected",
|
|
54
63
|
"default": "''"
|
|
55
64
|
},
|
|
56
|
-
{
|
|
57
|
-
"kind": "field",
|
|
58
|
-
"name": "cachedColor",
|
|
59
|
-
"type": {
|
|
60
|
-
"text": "string | null"
|
|
61
|
-
},
|
|
62
|
-
"privacy": "private",
|
|
63
|
-
"default": "null"
|
|
64
|
-
},
|
|
65
65
|
{
|
|
66
66
|
"kind": "method",
|
|
67
|
-
"name": "
|
|
68
|
-
"privacy": "
|
|
67
|
+
"name": "renderColorHandle",
|
|
68
|
+
"privacy": "private",
|
|
69
69
|
"return": {
|
|
70
70
|
"type": {
|
|
71
|
-
"text": "
|
|
71
|
+
"text": "TemplateResult"
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
"kind": "method",
|
|
77
|
-
"name": "
|
|
78
|
-
"privacy": "
|
|
77
|
+
"name": "getColorValue",
|
|
78
|
+
"privacy": "public",
|
|
79
79
|
"return": {
|
|
80
80
|
"type": {
|
|
81
|
-
"text": "
|
|
81
|
+
"text": "string"
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
|
-
{
|
|
86
|
-
"kind": "field",
|
|
87
|
-
"name": "cachedTinyColor",
|
|
88
|
-
"type": {
|
|
89
|
-
"text": "TinyColor | null"
|
|
90
|
-
},
|
|
91
|
-
"privacy": "private",
|
|
92
|
-
"default": "null"
|
|
93
|
-
},
|
|
94
85
|
{
|
|
95
86
|
"kind": "method",
|
|
96
87
|
"name": "checkValidity",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/color-field",
|
|
3
|
-
"version": "1.2.0
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -56,10 +56,9 @@
|
|
|
56
56
|
"lit-html"
|
|
57
57
|
],
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@
|
|
60
|
-
"@spectrum-web-components/
|
|
61
|
-
"@spectrum-web-components/
|
|
62
|
-
"@spectrum-web-components/textfield": "^1.2.0-beta.9"
|
|
59
|
+
"@spectrum-web-components/base": "^1.2.0",
|
|
60
|
+
"@spectrum-web-components/color-handle": "^1.2.0",
|
|
61
|
+
"@spectrum-web-components/textfield": "^1.2.0"
|
|
63
62
|
},
|
|
64
63
|
"types": "./src/index.d.ts",
|
|
65
64
|
"customElements": "custom-elements.json",
|
|
@@ -67,5 +66,5 @@
|
|
|
67
66
|
"./sp-*.js",
|
|
68
67
|
"./**/*.dev.js"
|
|
69
68
|
],
|
|
70
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "e4aec7b389e6209984e4df74f9b86b3ee0c485dd"
|
|
71
70
|
}
|
package/src/ColorField.d.ts
CHANGED
|
@@ -8,13 +8,13 @@ import { TextfieldBase } from '@spectrum-web-components/textfield';
|
|
|
8
8
|
export declare class ColorField extends TextfieldBase {
|
|
9
9
|
static get styles(): CSSResultArray;
|
|
10
10
|
viewColor: boolean;
|
|
11
|
+
private colorController;
|
|
12
|
+
constructor();
|
|
11
13
|
set value(value: string);
|
|
12
14
|
get value(): string;
|
|
13
15
|
protected _value: string;
|
|
14
|
-
private cachedColor;
|
|
15
|
-
getColorValue(): string;
|
|
16
16
|
private renderColorHandle;
|
|
17
|
+
getColorValue(): string;
|
|
17
18
|
protected render(): TemplateResult;
|
|
18
|
-
private cachedTinyColor;
|
|
19
19
|
checkValidity(): boolean;
|
|
20
20
|
}
|
package/src/ColorField.dev.js
CHANGED
|
@@ -13,15 +13,14 @@ import {
|
|
|
13
13
|
html
|
|
14
14
|
} from "@spectrum-web-components/base";
|
|
15
15
|
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
16
|
-
import {
|
|
16
|
+
import { ColorController } from "@spectrum-web-components/reactive-controllers/src/ColorController.js";
|
|
17
17
|
import { TextfieldBase } from "@spectrum-web-components/textfield";
|
|
18
18
|
export class ColorField extends TextfieldBase {
|
|
19
19
|
constructor() {
|
|
20
|
-
super(
|
|
20
|
+
super();
|
|
21
21
|
this.viewColor = false;
|
|
22
22
|
this._value = "";
|
|
23
|
-
this.
|
|
24
|
-
this.cachedTinyColor = null;
|
|
23
|
+
this.colorController = new ColorController(this);
|
|
25
24
|
}
|
|
26
25
|
static get styles() {
|
|
27
26
|
return [...super.styles];
|
|
@@ -37,24 +36,20 @@ export class ColorField extends TextfieldBase {
|
|
|
37
36
|
get value() {
|
|
38
37
|
return this._value;
|
|
39
38
|
}
|
|
40
|
-
getColorValue() {
|
|
41
|
-
if (!this.value) {
|
|
42
|
-
return "";
|
|
43
|
-
}
|
|
44
|
-
if (!this.cachedColor || this.cachedColor !== this.value) {
|
|
45
|
-
const tinyColor = new TinyColor(this.value);
|
|
46
|
-
this.cachedColor = tinyColor.isValid ? tinyColor.toRgbString() : "";
|
|
47
|
-
}
|
|
48
|
-
return this.cachedColor;
|
|
49
|
-
}
|
|
50
39
|
renderColorHandle() {
|
|
51
|
-
return this.viewColor ? html`
|
|
40
|
+
return this.viewColor && this.valid ? html`
|
|
52
41
|
<sp-color-handle
|
|
53
42
|
size="m"
|
|
54
|
-
color="${this.
|
|
43
|
+
color="${this.colorController.getColor("srgb").toString()}"
|
|
55
44
|
></sp-color-handle>
|
|
56
45
|
` : html``;
|
|
57
46
|
}
|
|
47
|
+
getColorValue() {
|
|
48
|
+
if (!this.valid) {
|
|
49
|
+
return "";
|
|
50
|
+
}
|
|
51
|
+
return this.colorController.getColor("srgb").toString();
|
|
52
|
+
}
|
|
58
53
|
render() {
|
|
59
54
|
if (this.viewColor) {
|
|
60
55
|
import("@spectrum-web-components/color-handle/sp-color-handle.js");
|
|
@@ -66,11 +61,15 @@ export class ColorField extends TextfieldBase {
|
|
|
66
61
|
checkValidity() {
|
|
67
62
|
let validity = super.checkValidity();
|
|
68
63
|
if (this.value) {
|
|
69
|
-
|
|
70
|
-
this.
|
|
71
|
-
|
|
72
|
-
this.valid = validity = this.cachedTinyColor.isValid;
|
|
64
|
+
this.valid = validity = this.colorController.validateColorString(
|
|
65
|
+
this.value
|
|
66
|
+
).isValid;
|
|
73
67
|
this.invalid = !validity;
|
|
68
|
+
if (this.valid) {
|
|
69
|
+
this.colorController.color = this.value;
|
|
70
|
+
}
|
|
71
|
+
} else {
|
|
72
|
+
this.valid = this.invalid = false;
|
|
74
73
|
}
|
|
75
74
|
return validity;
|
|
76
75
|
}
|
|
@@ -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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,OAEG;AAEP,SAAS,gBAAgB;AACzB,SAAS,
|
|
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 { ColorController } from '@spectrum-web-components/reactive-controllers/src/ColorController.js';\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 private colorController: ColorController;\n constructor() {\n super();\n this.colorController = new ColorController(this);\n }\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 renderColorHandle(): TemplateResult {\n return this.viewColor && this.valid\n ? html`\n <sp-color-handle\n size=\"m\"\n color=\"${this.colorController\n .getColor('srgb')\n .toString()}\"\n ></sp-color-handle>\n `\n : html``;\n }\n\n public getColorValue(): string {\n if (!this.valid) {\n return '';\n }\n return this.colorController.getColor('srgb').toString();\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 public override checkValidity(): boolean {\n let validity = super.checkValidity();\n if (this.value) {\n this.valid = validity = this.colorController.validateColorString(\n this.value\n ).isValid;\n this.invalid = !validity;\n if (this.valid) {\n this.colorController.color = this.value;\n }\n } else {\n this.valid = this.invalid = false;\n }\n\n return validity;\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,OAEG;AAEP,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAOvB,aAAM,mBAAmB,cAAc;AAAA,EAS1C,cAAc;AACV,UAAM;AAJV,SAAO,YAAY;AAqBnB,SAAmB,SAAS;AAhBxB,SAAK,kBAAkB,IAAI,gBAAgB,IAAI;AAAA,EACnD;AAAA,EAXA,WAA2B,SAAyB;AAChD,WAAO,CAAC,GAAG,MAAM,MAAM;AAAA,EAC3B;AAAA,EAWA,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,EAIQ,oBAAoC;AACxC,WAAO,KAAK,aAAa,KAAK,QACxB;AAAA;AAAA;AAAA,+BAGiB,KAAK,gBACT,SAAS,MAAM,EACf,SAAS,CAAC;AAAA;AAAA,kBAGvB;AAAA,EACV;AAAA,EAEO,gBAAwB;AAC3B,QAAI,CAAC,KAAK,OAAO;AACb,aAAO;AAAA,IACX;AACA,WAAO,KAAK,gBAAgB,SAAS,MAAM,EAAE,SAAS;AAAA,EAC1D;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,EAEgB,gBAAyB;AACrC,QAAI,WAAW,MAAM,cAAc;AACnC,QAAI,KAAK,OAAO;AACZ,WAAK,QAAQ,WAAW,KAAK,gBAAgB;AAAA,QACzC,KAAK;AAAA,MACT,EAAE;AACF,WAAK,UAAU,CAAC;AAChB,UAAI,KAAK,OAAO;AACZ,aAAK,gBAAgB,QAAQ,KAAK;AAAA,MACtC;AAAA,IACJ,OAAO;AACH,WAAK,QAAQ,KAAK,UAAU;AAAA,IAChC;AAEA,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,9 +1,9 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var u=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(o,l,r,t)=>{for(var e=t>1?void 0:t?d(l,r):l,i=o.length-1,s;i>=0;i--)(s=o[i])&&(e=(t?s(l,r,e):s(e))||e);return t&&e&&u(l,r,e),e};import{html as a}from"@spectrum-web-components/base";import{property as v}from"@spectrum-web-components/base/src/decorators.js";import{ColorController as h}from"@spectrum-web-components/reactive-controllers/src/ColorController.js";import{TextfieldBase as p}from"@spectrum-web-components/textfield";export class ColorField extends p{constructor(){super();this.viewColor=!1;this._value="";this.colorController=new h(this)}static get styles(){return[...super.styles]}set value(r){if(r===this.value)return;const t=this._value;this._value=r,this.requestUpdate("value",t)}get value(){return this._value}renderColorHandle(){return this.viewColor&&this.valid?a`
|
|
2
2
|
<sp-color-handle
|
|
3
3
|
size="m"
|
|
4
|
-
color="${this.
|
|
4
|
+
color="${this.colorController.getColor("srgb").toString()}"
|
|
5
5
|
></sp-color-handle>
|
|
6
|
-
`:a``}render(){return this.viewColor&&import("@spectrum-web-components/color-handle/sp-color-handle.js"),a`
|
|
6
|
+
`:a``}getColorValue(){return this.valid?this.colorController.getColor("srgb").toString():""}render(){return this.viewColor&&import("@spectrum-web-components/color-handle/sp-color-handle.js"),a`
|
|
7
7
|
${super.render()} ${this.renderColorHandle()}
|
|
8
|
-
`}checkValidity(){let
|
|
8
|
+
`}checkValidity(){let r=super.checkValidity();return this.value?(this.valid=r=this.colorController.validateColorString(this.value).isValid,this.invalid=!r,this.valid&&(this.colorController.color=this.value)):this.valid=this.invalid=!1,r}}n([v({type:Boolean,attribute:"view-color"})],ColorField.prototype,"viewColor",2);
|
|
9
9
|
//# sourceMappingURL=ColorField.js.map
|
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 {
|
|
5
|
-
"mappings": "qNAWA,OAEI,QAAAA,MAEG,gCAEP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,
|
|
6
|
-
"names": ["html", "property", "
|
|
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 { ColorController } from '@spectrum-web-components/reactive-controllers/src/ColorController.js';\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 private colorController: ColorController;\n constructor() {\n super();\n this.colorController = new ColorController(this);\n }\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 renderColorHandle(): TemplateResult {\n return this.viewColor && this.valid\n ? html`\n <sp-color-handle\n size=\"m\"\n color=\"${this.colorController\n .getColor('srgb')\n .toString()}\"\n ></sp-color-handle>\n `\n : html``;\n }\n\n public getColorValue(): string {\n if (!this.valid) {\n return '';\n }\n return this.colorController.getColor('srgb').toString();\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 public override checkValidity(): boolean {\n let validity = super.checkValidity();\n if (this.value) {\n this.valid = validity = this.colorController.validateColorString(\n this.value\n ).isValid;\n this.invalid = !validity;\n if (this.valid) {\n this.colorController.color = this.value;\n }\n } else {\n this.valid = this.invalid = false;\n }\n\n return validity;\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAWA,OAEI,QAAAA,MAEG,gCAEP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,mBAAAC,MAAuB,uEAChC,OAAS,iBAAAC,MAAqB,qCAOvB,aAAM,mBAAmBA,CAAc,CAS1C,aAAc,CACV,MAAM,EAJV,KAAO,UAAY,GAqBnB,KAAmB,OAAS,GAhBxB,KAAK,gBAAkB,IAAID,EAAgB,IAAI,CACnD,CAXA,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,MAAM,CAC3B,CAWA,IAAoB,MAAME,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,CAIQ,mBAAoC,CACxC,OAAO,KAAK,WAAa,KAAK,MACxBL;AAAA;AAAA;AAAA,+BAGiB,KAAK,gBACT,SAAS,MAAM,EACf,SAAS,CAAC;AAAA;AAAA,gBAGvBA,GACV,CAEO,eAAwB,CAC3B,OAAK,KAAK,MAGH,KAAK,gBAAgB,SAAS,MAAM,EAAE,SAAS,EAF3C,EAGf,CAEmB,QAAyB,CACxC,OAAI,KAAK,WACL,OAAO,0DAA0D,EAE9DA;AAAA,cACD,MAAM,OAAO,CAAC,IAAI,KAAK,kBAAkB,CAAC;AAAA,SAEpD,CAEgB,eAAyB,CACrC,IAAIM,EAAW,MAAM,cAAc,EACnC,OAAI,KAAK,OACL,KAAK,MAAQA,EAAW,KAAK,gBAAgB,oBACzC,KAAK,KACT,EAAE,QACF,KAAK,QAAU,CAACA,EACZ,KAAK,QACL,KAAK,gBAAgB,MAAQ,KAAK,QAGtC,KAAK,MAAQ,KAAK,QAAU,GAGzBA,CACX,CACJ,CApEWC,EAAA,CADNN,EAAS,CAAE,KAAM,QAAS,UAAW,YAAa,CAAC,GAL3C,WAMF",
|
|
6
|
+
"names": ["html", "property", "ColorController", "TextfieldBase", "value", "oldValue", "validity", "__decorateClass"]
|
|
7
7
|
}
|
package/test/color-field.test.js
CHANGED
|
@@ -11,6 +11,13 @@ describe("ColorField", () => {
|
|
|
11
11
|
await elementUpdated(el);
|
|
12
12
|
await expect(el).to.be.accessible();
|
|
13
13
|
});
|
|
14
|
+
it("returns empty string from getColorValue when valid is false", async () => {
|
|
15
|
+
const el = await fixture(Template({}));
|
|
16
|
+
el.value = "invalid-color";
|
|
17
|
+
await elementUpdated(el);
|
|
18
|
+
expect(el.checkValidity()).to.be.false;
|
|
19
|
+
expect(el.getColorValue()).to.equal("");
|
|
20
|
+
});
|
|
14
21
|
it("validates rgba color values", async () => {
|
|
15
22
|
const el = await fixture(Template({}));
|
|
16
23
|
el.value = "rgba(255, 0, 0, 1)";
|
|
@@ -24,16 +31,15 @@ describe("ColorField", () => {
|
|
|
24
31
|
const el = await fixture(Template({}));
|
|
25
32
|
el.value = "#ff0000";
|
|
26
33
|
await elementUpdated(el);
|
|
27
|
-
expect(el.getColorValue()).to.equal("rgb(
|
|
34
|
+
expect(el.getColorValue()).to.equal("rgb(100% 0% 0%)");
|
|
28
35
|
el.value = "#00ff00";
|
|
29
36
|
await elementUpdated(el);
|
|
30
|
-
expect(el.getColorValue()).to.equal("rgb(0
|
|
37
|
+
expect(el.getColorValue()).to.equal("rgb(0% 100% 0%)");
|
|
31
38
|
el.value = "invalid-color";
|
|
32
39
|
await elementUpdated(el);
|
|
33
|
-
expect(el.getColorValue()).to.equal("");
|
|
34
40
|
el.value = "#0000ff";
|
|
35
41
|
await elementUpdated(el);
|
|
36
|
-
expect(el.getColorValue()).to.equal("rgb(0
|
|
42
|
+
expect(el.getColorValue()).to.equal("rgb(0% 0% 100%)");
|
|
37
43
|
});
|
|
38
44
|
it("validates hex color values", async () => {
|
|
39
45
|
const el = await fixture(Template({}));
|
|
@@ -72,6 +78,9 @@ describe("ColorField", () => {
|
|
|
72
78
|
const el = await fixture(Template({}));
|
|
73
79
|
el.viewColor = true;
|
|
74
80
|
await elementUpdated(el);
|
|
81
|
+
el.value = "#ff0000";
|
|
82
|
+
await elementUpdated(el);
|
|
83
|
+
await elementUpdated(el);
|
|
75
84
|
const colorHandle = el.shadowRoot.querySelector("sp-color-handle");
|
|
76
85
|
expect(colorHandle).to.not.be.null;
|
|
77
86
|
});
|
|
@@ -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('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(
|
|
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,
|
|
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('returns empty string from getColorValue when valid is false', async () => {\n const el = await fixture<ColorField>(Template({}));\n\n // Set an invalid color value\n el.value = 'invalid-color';\n await elementUpdated(el);\n\n // Ensure the element is invalid\n expect(el.checkValidity()).to.be.false;\n\n // Check that getColorValue returns an empty string\n expect(el.getColorValue()).to.equal('');\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(100% 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% 100% 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% 100%)');\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 el.value = '#ff0000';\n await elementUpdated(el);\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|