@spectrum-web-components/checkbox 0.14.0-devmode.0 → 0.14.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/package.json +6 -6
- package/sp-checkbox.js +1 -2
- package/sp-checkbox.js.map +1 -1
- package/src/Checkbox.js +12 -91
- package/src/Checkbox.js.map +1 -1
- package/src/CheckboxBase.js +2 -57
- package/src/CheckboxBase.js.map +1 -1
- package/src/checkbox.css.js +2 -4
- package/src/checkbox.css.js.map +1 -1
- package/src/index.js +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-checkbox.css.js +2 -4
- package/src/spectrum-checkbox.css.js.map +1 -1
- package/stories/checkbox-sizes.stories.js +7 -37
- package/stories/checkbox-sizes.stories.js.map +1 -1
- package/stories/checkbox.stories.js +22 -94
- package/stories/checkbox.stories.js.map +1 -1
- package/test/benchmark/test-basic.js +1 -4
- package/test/benchmark/test-basic.js.map +1 -1
- package/test/checkbox-sizes.test-vrt.js +1 -3
- package/test/checkbox-sizes.test-vrt.js.map +1 -1
- package/test/checkbox.test-vrt.js +1 -3
- package/test/checkbox.test-vrt.js.map +1 -1
- package/test/checkbox.test.js +8 -111
- package/test/checkbox.test.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/checkbox",
|
|
3
|
-
"version": "0.14.0
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -61,10 +61,10 @@
|
|
|
61
61
|
"lit-html"
|
|
62
62
|
],
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@spectrum-web-components/base": "^0.
|
|
65
|
-
"@spectrum-web-components/icon": "^0.12.0
|
|
66
|
-
"@spectrum-web-components/icons-ui": "^0.9.0
|
|
67
|
-
"@spectrum-web-components/shared": "^0.15.0
|
|
64
|
+
"@spectrum-web-components/base": "^0.7.0",
|
|
65
|
+
"@spectrum-web-components/icon": "^0.12.0",
|
|
66
|
+
"@spectrum-web-components/icons-ui": "^0.9.0",
|
|
67
|
+
"@spectrum-web-components/shared": "^0.15.0",
|
|
68
68
|
"tslib": "^2.0.0"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"./sp-*.js",
|
|
77
77
|
"./**/*.dev.js"
|
|
78
78
|
],
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "05c81318844160db3f8156144106e643507fef97"
|
|
80
80
|
}
|
package/sp-checkbox.js
CHANGED
package/sp-checkbox.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-checkbox.ts"],
|
|
4
4
|
"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*/\nimport { Checkbox } from './src/Checkbox.js';\n\ncustomElements.define('sp-checkbox', Checkbox);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-checkbox': Checkbox;\n }\n}\n"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,6CAEA,eAAe,OAAO,cAAe,CAAQ",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Checkbox.js
CHANGED
|
@@ -1,128 +1,49 @@
|
|
|
1
|
-
var
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
-
if (decorator = decorators[i])
|
|
7
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
-
if (kind && result)
|
|
9
|
-
__defProp(target, key, result);
|
|
10
|
-
return result;
|
|
11
|
-
};
|
|
12
|
-
import {
|
|
13
|
-
html,
|
|
14
|
-
SizedMixin
|
|
15
|
-
} from "@spectrum-web-components/base";
|
|
16
|
-
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
17
|
-
import { CheckboxBase } from "./CheckboxBase.js";
|
|
18
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js";
|
|
19
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";
|
|
20
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js";
|
|
21
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js";
|
|
22
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js";
|
|
23
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js";
|
|
24
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";
|
|
25
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js";
|
|
26
|
-
import checkboxStyles from "./checkbox.css.js";
|
|
27
|
-
import checkmarkSmallStyles from "@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";
|
|
28
|
-
import dashSmallStyles from "@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";
|
|
29
|
-
const checkmarkIcon = {
|
|
30
|
-
s: html`
|
|
1
|
+
var p=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var s=(a,t,c,r)=>{for(var i=r>1?void 0:r?n(t,c):t,l=a.length-1,m;l>=0;l--)(m=a[l])&&(i=(r?m(t,c,i):m(i))||i);return r&&i&&p(t,c,i),i};import{html as e,SizedMixin as h}from"@spectrum-web-components/base";import{property as o}from"@spectrum-web-components/base/src/decorators.js";import{CheckboxBase as d}from"./CheckboxBase.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js";import k from"./checkbox.css.js";import u from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";import f from"@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";const I={s:e`
|
|
31
2
|
<sp-icon-checkmark75
|
|
32
3
|
id="checkmark"
|
|
33
4
|
class="spectrum-UIIcon-Checkmark75"
|
|
34
5
|
></sp-icon-checkmark75>
|
|
35
|
-
`,
|
|
36
|
-
m: html`
|
|
6
|
+
`,m:e`
|
|
37
7
|
<sp-icon-checkmark100
|
|
38
8
|
id="checkmark"
|
|
39
9
|
class="spectrum-UIIcon-Checkmark100"
|
|
40
10
|
></sp-icon-checkmark100>
|
|
41
|
-
`,
|
|
42
|
-
l: html`
|
|
11
|
+
`,l:e`
|
|
43
12
|
<sp-icon-checkmark200
|
|
44
13
|
id="checkmark"
|
|
45
14
|
class="spectrum-UIIcon-Checkmark200"
|
|
46
15
|
></sp-icon-checkmark200>
|
|
47
|
-
`,
|
|
48
|
-
xl: html`
|
|
16
|
+
`,xl:e`
|
|
49
17
|
<sp-icon-checkmark300
|
|
50
18
|
id="checkmark"
|
|
51
19
|
class="spectrum-UIIcon-Checkmark300"
|
|
52
20
|
></sp-icon-checkmark300>
|
|
53
|
-
`
|
|
54
|
-
};
|
|
55
|
-
const dashIcon = {
|
|
56
|
-
s: html`
|
|
21
|
+
`},S={s:e`
|
|
57
22
|
<sp-icon-dash75
|
|
58
23
|
id="partialCheckmark"
|
|
59
24
|
class="spectrum-UIIcon-Dash75"
|
|
60
25
|
></sp-icon-dash75>
|
|
61
|
-
`,
|
|
62
|
-
m: html`
|
|
26
|
+
`,m:e`
|
|
63
27
|
<sp-icon-dash100
|
|
64
28
|
id="partialCheckmark"
|
|
65
29
|
class="spectrum-UIIcon-Dash100"
|
|
66
30
|
></sp-icon-dash100>
|
|
67
|
-
`,
|
|
68
|
-
l: html`
|
|
31
|
+
`,l:e`
|
|
69
32
|
<sp-icon-dash200
|
|
70
33
|
id="partialCheckmark"
|
|
71
34
|
class="spectrum-UIIcon-Dash200"
|
|
72
35
|
></sp-icon-dash200>
|
|
73
|
-
`,
|
|
74
|
-
xl: html`
|
|
36
|
+
`,xl:e`
|
|
75
37
|
<sp-icon-dash300
|
|
76
38
|
id="partialCheckmark"
|
|
77
39
|
class="spectrum-UIIcon-Dash300"
|
|
78
40
|
></sp-icon-dash300>
|
|
79
|
-
`
|
|
80
|
-
};
|
|
81
|
-
export class Checkbox extends SizedMixin(CheckboxBase) {
|
|
82
|
-
constructor() {
|
|
83
|
-
super(...arguments);
|
|
84
|
-
this.indeterminate = false;
|
|
85
|
-
this.invalid = false;
|
|
86
|
-
this.emphasized = false;
|
|
87
|
-
}
|
|
88
|
-
static get styles() {
|
|
89
|
-
return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];
|
|
90
|
-
}
|
|
91
|
-
render() {
|
|
92
|
-
return html`
|
|
41
|
+
`};export class Checkbox extends h(d){constructor(){super(...arguments);this.indeterminate=!1;this.invalid=!1;this.emphasized=!1}static get styles(){return[k,u,f]}render(){return e`
|
|
93
42
|
${super.render()}
|
|
94
43
|
<span id="box">
|
|
95
|
-
${
|
|
96
|
-
${
|
|
44
|
+
${I[this.size]}
|
|
45
|
+
${S[this.size]}
|
|
97
46
|
</span>
|
|
98
47
|
<label id="label"><slot></slot></label>
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
updated(changes) {
|
|
102
|
-
super.updated(changes);
|
|
103
|
-
if (changes.has("invalid")) {
|
|
104
|
-
if (this.invalid) {
|
|
105
|
-
this.inputElement.setAttribute("aria-invalid", "true");
|
|
106
|
-
} else {
|
|
107
|
-
this.inputElement.removeAttribute("aria-invalid");
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
if (changes.has("indeterminate")) {
|
|
111
|
-
if (this.indeterminate) {
|
|
112
|
-
this.inputElement.setAttribute("aria-checked", "mixed");
|
|
113
|
-
} else {
|
|
114
|
-
this.inputElement.removeAttribute("aria-checked");
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
__decorateClass([
|
|
120
|
-
property({ type: Boolean, reflect: true })
|
|
121
|
-
], Checkbox.prototype, "indeterminate", 2);
|
|
122
|
-
__decorateClass([
|
|
123
|
-
property({ type: Boolean, reflect: true })
|
|
124
|
-
], Checkbox.prototype, "invalid", 2);
|
|
125
|
-
__decorateClass([
|
|
126
|
-
property({ type: Boolean, reflect: true })
|
|
127
|
-
], Checkbox.prototype, "emphasized", 2);
|
|
48
|
+
`}updated(t){super.updated(t),t.has("invalid")&&(this.invalid?this.inputElement.setAttribute("aria-invalid","true"):this.inputElement.removeAttribute("aria-invalid")),t.has("indeterminate")&&(this.indeterminate?this.inputElement.setAttribute("aria-checked","mixed"):this.inputElement.removeAttribute("aria-checked"))}}s([o({type:Boolean,reflect:!0})],Checkbox.prototype,"indeterminate",2),s([o({type:Boolean,reflect:!0})],Checkbox.prototype,"invalid",2),s([o({type:Boolean,reflect:!0})],Checkbox.prototype,"emphasized",2);
|
|
128
49
|
//# sourceMappingURL=Checkbox.js.map
|
package/src/Checkbox.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Checkbox.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxBase } from './CheckboxBase.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\nimport checkboxStyles from './checkbox.css.js';\nimport checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\nimport dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nconst checkmarkIcon = {\n s: html`\n <sp-icon-checkmark75\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark75\"\n ></sp-icon-checkmark75>\n `,\n m: html`\n <sp-icon-checkmark100\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `,\n l: html`\n <sp-icon-checkmark200\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark200\"\n ></sp-icon-checkmark200>\n `,\n xl: html`\n <sp-icon-checkmark300\n id=\"checkmark\"\n class=\"spectrum-UIIcon-Checkmark300\"\n ></sp-icon-checkmark300>\n `,\n};\n\nconst dashIcon = {\n s: html`\n <sp-icon-dash75\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash75\"\n ></sp-icon-dash75>\n `,\n m: html`\n <sp-icon-dash100\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash100\"\n ></sp-icon-dash100>\n `,\n l: html`\n <sp-icon-dash200\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash200\"\n ></sp-icon-dash200>\n `,\n xl: html`\n <sp-icon-dash300\n id=\"partialCheckmark\"\n class=\"spectrum-UIIcon-Dash300\"\n ></sp-icon-dash300>\n `,\n};\n\n/**\n * @element sp-checkbox\n * @slot - content to display as the label for the Checkbox\n */\nexport class Checkbox extends SizedMixin(CheckboxBase) {\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n public static override get styles(): CSSResultArray {\n return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];\n }\n\n protected override render(): TemplateResult {\n return html`\n ${super.render()}\n <span id=\"box\">\n ${checkmarkIcon[this.size as DefaultElementSize]}\n ${dashIcon[this.size as DefaultElementSize]}\n </span>\n <label id=\"label\"><slot></slot></label>\n `;\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('invalid')) {\n if (this.invalid) {\n this.inputElement.setAttribute('aria-invalid', 'true');\n } else {\n this.inputElement.removeAttribute('aria-invalid');\n }\n }\n if (changes.has('indeterminate')) {\n if (this.indeterminate) {\n this.inputElement.setAttribute('aria-checked', 'mixed');\n } else {\n this.inputElement.removeAttribute('aria-checked');\n }\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "wMAYA,qEAQA,2EACA,iDACA,uEACA,wEACA,wEACA,wEACA,kEACA,mEACA,mEACA,mEACA,iCACA,gFACA,2EAEA,KAAM,GAAgB,CAClB,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA,KAMR,EAEM,EAAW,CACb,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA,MAMH,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA,KAMR,EAMO,aAAM,gBAAiB,GAAW,CAAY,CAAE,CAAhD,kCAEI,mBAAgB,GAGhB,aAAU,GAGV,gBAAa,aAEO,SAAyB,CAChD,MAAO,CAAC,EAAgB,EAAsB,CAAe,CACjE,CAEmB,QAAyB,CACxC,MAAO;AAAA,cACD,MAAM,OAAO;AAAA;AAAA,kBAET,EAAc,KAAK;AAAA,kBACnB,EAAS,KAAK;AAAA;AAAA;AAAA,SAI5B,CAEmB,QAAQ,EAA+B,CACtD,MAAM,QAAQ,CAAO,EACjB,EAAQ,IAAI,SAAS,GACrB,CAAI,KAAK,QACL,KAAK,aAAa,aAAa,eAAgB,MAAM,EAErD,KAAK,aAAa,gBAAgB,cAAc,GAGpD,EAAQ,IAAI,eAAe,GAC3B,CAAI,KAAK,cACL,KAAK,aAAa,aAAa,eAAgB,OAAO,EAEtD,KAAK,aAAa,gBAAgB,cAAc,EAG5D,CACJ,CAxCW,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AAFJ,SAEI,6BAGA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AALJ,SAKI,uBAGA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AARJ,SAQI",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/CheckboxBase.js
CHANGED
|
@@ -1,48 +1,4 @@
|
|
|
1
|
-
var
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
-
if (decorator = decorators[i])
|
|
7
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
-
if (kind && result)
|
|
9
|
-
__defProp(target, key, result);
|
|
10
|
-
return result;
|
|
11
|
-
};
|
|
12
|
-
import { html } from "@spectrum-web-components/base";
|
|
13
|
-
import {
|
|
14
|
-
property,
|
|
15
|
-
query
|
|
16
|
-
} from "@spectrum-web-components/base/src/decorators.js";
|
|
17
|
-
import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
|
|
18
|
-
export class CheckboxBase extends Focusable {
|
|
19
|
-
constructor() {
|
|
20
|
-
super(...arguments);
|
|
21
|
-
this.checked = false;
|
|
22
|
-
this.readonly = false;
|
|
23
|
-
}
|
|
24
|
-
get focusElement() {
|
|
25
|
-
return this.inputElement;
|
|
26
|
-
}
|
|
27
|
-
handleChange() {
|
|
28
|
-
if (this.readonly) {
|
|
29
|
-
this.inputElement.checked = this.checked;
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
this.checked = this.inputElement.checked;
|
|
33
|
-
const changeEvent = new CustomEvent("change", {
|
|
34
|
-
bubbles: true,
|
|
35
|
-
cancelable: true,
|
|
36
|
-
composed: true
|
|
37
|
-
});
|
|
38
|
-
const applyDefault = this.dispatchEvent(changeEvent);
|
|
39
|
-
if (!applyDefault) {
|
|
40
|
-
this.checked = !this.inputElement.checked;
|
|
41
|
-
this.inputElement.checked = this.checked;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
render() {
|
|
45
|
-
return html`
|
|
1
|
+
var u=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var n=(i,t,c,l)=>{for(var e=l>1?void 0:l?a(t,c):t,r=i.length-1,p;r>=0;r--)(p=i[r])&&(e=(l?p(t,c,e):p(e))||e);return l&&e&&u(t,c,e),e};import{html as d}from"@spectrum-web-components/base";import{property as h,query as s}from"@spectrum-web-components/base/src/decorators.js";import{Focusable as o}from"@spectrum-web-components/shared/src/focusable.js";export class CheckboxBase extends o{constructor(){super(...arguments);this.checked=!1;this.readonly=!1}get focusElement(){return this.inputElement}handleChange(){if(this.readonly){this.inputElement.checked=this.checked;return}this.checked=this.inputElement.checked;const t=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)||(this.checked=!this.inputElement.checked,this.inputElement.checked=this.checked)}render(){return d`
|
|
46
2
|
<input
|
|
47
3
|
id="input"
|
|
48
4
|
aria-labelledby="label"
|
|
@@ -50,16 +6,5 @@ export class CheckboxBase extends Focusable {
|
|
|
50
6
|
.checked=${this.checked}
|
|
51
7
|
@change=${this.handleChange}
|
|
52
8
|
/>
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
__decorateClass([
|
|
57
|
-
property({ type: Boolean, reflect: true })
|
|
58
|
-
], CheckboxBase.prototype, "checked", 2);
|
|
59
|
-
__decorateClass([
|
|
60
|
-
property({ type: Boolean, reflect: true })
|
|
61
|
-
], CheckboxBase.prototype, "readonly", 2);
|
|
62
|
-
__decorateClass([
|
|
63
|
-
query("#input")
|
|
64
|
-
], CheckboxBase.prototype, "inputElement", 2);
|
|
9
|
+
`}}n([h({type:Boolean,reflect:!0})],CheckboxBase.prototype,"checked",2),n([h({type:Boolean,reflect:!0})],CheckboxBase.prototype,"readonly",2),n([s("#input")],CheckboxBase.prototype,"inputElement",2);
|
|
65
10
|
//# sourceMappingURL=CheckboxBase.js.map
|
package/src/CheckboxBase.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["CheckboxBase.ts"],
|
|
4
4
|
"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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nexport class CheckboxBase extends Focusable {\n @property({ type: Boolean, reflect: true })\n public checked = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @query('#input')\n protected inputElement!: HTMLInputElement;\n\n public override get focusElement(): HTMLElement {\n return this.inputElement;\n }\n\n public handleChange(): void {\n if (this.readonly) {\n this.inputElement.checked = this.checked;\n return;\n }\n this.checked = this.inputElement.checked;\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n });\n const applyDefault = this.dispatchEvent(changeEvent);\n\n if (!applyDefault) {\n this.checked = !this.inputElement.checked;\n this.inputElement.checked = this.checked;\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <input\n id=\"input\"\n aria-labelledby=\"label\"\n type=\"checkbox\"\n .checked=${this.checked}\n @change=${this.handleChange}\n />\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "wMAYA,qDACA,sFAIA,6EAEO,aAAM,oBAAqB,EAAU,CAArC,kCAEI,aAAU,GAGV,cAAW,MAKE,eAA4B,CAC5C,MAAO,MAAK,YAChB,CAEO,cAAqB,CACxB,GAAI,KAAK,SAAU,CACf,KAAK,aAAa,QAAU,KAAK,QACjC,MACJ,CACA,KAAK,QAAU,KAAK,aAAa,QAEjC,KAAM,GAAc,GAAI,aAAY,SAAU,CAC1C,QAAS,GACT,WAAY,GACZ,SAAU,EACd,CAAC,EAGD,AAAK,AAFgB,KAAK,cAAc,CAAW,GAG/C,MAAK,QAAU,CAAC,KAAK,aAAa,QAClC,KAAK,aAAa,QAAU,KAAK,QAEzC,CAEmB,QAAyB,CACxC,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKY,KAAK;AAAA,0BACN,KAAK;AAAA;AAAA,SAG3B,CACJ,CA3CW,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AAFJ,aAEI,uBAGA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AALJ,aAKI,wBAGG,GADV,AAAC,EAAM,QAAQ,GACL,AARP,aAQO",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/checkbox.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as e}from"@spectrum-web-components/base";const o=e`
|
|
3
2
|
:host{align-items:flex-start;max-width:100%;min-height:var(--spectrum-checkbox-height);position:relative}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}#input:disabled{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input.focus-visible+#box:after{margin:calc(var(
|
|
4
3
|
--spectrum-alias-focus-ring-gap,
|
|
5
4
|
var(--spectrum-global-dimension-static-size-25)
|
|
@@ -228,6 +227,5 @@ var(--spectrum-global-dimension-static-size-25)
|
|
|
228
227
|
)}:host([invalid][dir]) #input:checked+#box:before{border-color:var(
|
|
229
228
|
--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)
|
|
230
229
|
)}}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}
|
|
231
|
-
`;
|
|
232
|
-
export default styles;
|
|
230
|
+
`;export default o;
|
|
233
231
|
//# sourceMappingURL=checkbox.css.js.map
|
package/src/checkbox.css.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["checkbox.css.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2022 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{align-items:flex-start;max-width:100%;min-height:var(--spectrum-checkbox-height);position:relative}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}#input:disabled{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input.focus-visible+#box:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}#input:focus-visible+#box:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([size=s]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-s-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-s-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-s-box-size,var(--spectrum-alias-control-two-size-s)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-s-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-s-text-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-s-text-padding-top,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-s-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-s-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-s-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-s-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-75)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-s-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-m-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-m-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-m-box-size,var(--spectrum-alias-control-two-size-m)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-m-text-padding-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-m-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-m-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-l-text-padding-top\n);--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-l-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-l-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-l-box-size,var(--spectrum-alias-control-two-size-l)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-l-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-l-text-gap,var(--spectrum-global-dimension-size-130)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-l-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-l-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-l-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-l-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-200)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-l-height,var(--spectrum-global-dimension-size-500)\n)}:host([size=xl]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-xl-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-xl-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-xl-box-size,var(--spectrum-alias-control-two-size-xl)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-xl-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-xl-text-gap,var(--spectrum-global-dimension-size-160)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-xl-text-padding-top,var(--spectrum-global-dimension-size-150)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-xl-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-xl-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-xl-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-xl-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-300)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-xl-height,var(--spectrum-global-dimension-size-600)\n)}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;opacity:1;transform:scale(1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-checkbox-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-checkbox-text-gap\n)}#label{font-size:var(--spectrum-checkbox-text-size);font-style:var(--spectrum-checkbox-text-font-style);font-weight:var(--spectrum-checkbox-text-font-weight);line-height:var(--spectrum-checkbox-text-line-height);margin-top:var(\n--spectrum-checkbox-text-padding-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-checkbox-box-size);margin:calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size))/2) 0;position:relative;width:var(--spectrum-checkbox-box-size)}#box:before{border-radius:var(--spectrum-checkbox-box-border-radius);border-style:solid;border-width:var(--spectrum-checkbox-box-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-checkbox-box-size);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-checkbox-box-size);z-index:0}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transform:translate(0);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}#checkmark,#partialCheckmark{opacity:0;position:absolute;top:50%;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#checkmark{margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#partialCheckmark{display:none;margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#checkmark,#partialCheckmark{color:var(\n--spectrum-checkbox-m-checkmark-color,var(--spectrum-alias-toggle-icon-color-selected)\n)}#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}#label{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host{border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host(:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([readonly]){border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([readonly]:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host([readonly]:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([readonly]:active) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host([readonly]:active) #label{color:var(\n--spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n);forced-color-adjust:none}#input:disabled+#box:before,:host([dir]) #input:checked:disabled+#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color-disabled,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}#input:checked:disabled~#label,#input:disabled~#label{color:var(\n--spectrum-checkbox-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);forced-color-adjust:none}#input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input.focus-visible+#box:after{box-shadow:0 0 0 var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}#input:focus-visible+#box:after{box-shadow:0 0 0 var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}#input:checked:focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}#input.focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#input:focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([invalid][dir]) #box:before,:host([invalid][dir]) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([invalid]) #label{color:var(\n--spectrum-checkbox-m-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]:hover) #box:before,:host([invalid][dir]:hover) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]:active) #label{color:var(\n--spectrum-checkbox-m-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}@media (forced-colors:active){#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);outline-offset:var(\n--spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)\n);outline-style:auto;outline-width:var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n)}#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);outline-offset:var(\n--spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)\n);outline-style:auto;outline-width:var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n)}:host{--spectrum-checkbox-m-box-background-color-disabled:ButtonFace;--spectrum-checkbox-m-box-background-color:ButtonFace;--spectrum-checkbox-m-box-border-color-disabled:GrayText;--spectrum-checkbox-m-box-border-color-down:Highlight;--spectrum-checkbox-m-box-border-color-error-down:Highlight;--spectrum-checkbox-m-box-border-color-hover:Highlight;--spectrum-checkbox-m-box-border-color-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-box-border-color-selected-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected:Highlight;--spectrum-checkbox-m-box-border-color:ButtonText;--spectrum-checkbox-m-emphasized-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected:Highlight;--spectrum-checkbox-m-focus-ring-color-key-focus:FieldText;--spectrum-checkbox-m-text-color-disabled:GrayText;--spectrum-checkbox-m-text-color-down:FieldText;--spectrum-checkbox-m-text-color-error-down:FieldText;--spectrum-checkbox-m-text-color-error-hover:FieldText;--spectrum-checkbox-m-checkmark-color:HighlightText;--spectrum-checkbox-m-focus-ring-gap-key-focus:var(\n--spectrum-global-dimension-static-size-25,2px\n);--spectrum-checkbox-m-focus-ring-size:var(\n--spectrum-global-dimension-static-size-40,3px\n);--spectrum-checkbox-m-box-border-color-error:FieldText;--spectrum-checkbox-m-box-border-color-error-hover:FieldText;--spectrum-checkbox-m-text-color-error:FieldText;--spectrum-checkbox-m-text-color-hover:FieldText;--spectrum-checkbox-m-text-color-key-focus:FieldText;--spectrum-checkbox-m-text-color:FieldText}:host([invalid][dir]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([invalid][indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([invalid][dir]) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsOf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export*from"./Checkbox.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/src/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
4
|
"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*/\nexport * from './Checkbox.js';\n"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as e}from"@spectrum-web-components/base";const o=e`
|
|
3
2
|
:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-checkbox-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}#input:disabled{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input.focus-visible+#box:after{margin:calc(var(
|
|
4
3
|
--spectrum-alias-focus-ring-gap,
|
|
5
4
|
var(--spectrum-global-dimension-static-size-25)
|
|
@@ -228,6 +227,5 @@ var(--spectrum-global-dimension-static-size-25)
|
|
|
228
227
|
)}:host([invalid][dir]) #input:checked+#box:before{border-color:var(
|
|
229
228
|
--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)
|
|
230
229
|
)}}
|
|
231
|
-
`;
|
|
232
|
-
export default styles;
|
|
230
|
+
`;export default o;
|
|
233
231
|
//# sourceMappingURL=spectrum-checkbox.css.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-checkbox.css.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2022 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-checkbox-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}#input:disabled{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input.focus-visible+#box:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}#input:focus-visible+#box:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([size=s]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-s-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-s-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-s-box-size,var(--spectrum-alias-control-two-size-s)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-s-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-s-text-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-s-text-padding-top,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-s-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-s-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-s-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-s-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-75)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-s-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-m-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-m-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-m-box-size,var(--spectrum-alias-control-two-size-m)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-m-text-padding-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-m-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-m-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-l-text-padding-top\n);--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-l-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-l-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-l-box-size,var(--spectrum-alias-control-two-size-l)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-l-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-l-text-gap,var(--spectrum-global-dimension-size-130)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-l-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-l-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-l-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-l-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-200)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-l-height,var(--spectrum-global-dimension-size-500)\n)}:host([size=xl]){--spectrum-checkbox-box-border-radius:var(\n--spectrum-checkbox-xl-box-border-radius,var(--spectrum-alias-border-radius-small)\n);--spectrum-checkbox-box-border-size:var(\n--spectrum-checkbox-xl-box-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-checkbox-box-size:var(\n--spectrum-checkbox-xl-box-size,var(--spectrum-alias-control-two-size-xl)\n);--spectrum-checkbox-text-size:var(\n--spectrum-checkbox-xl-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-checkbox-text-gap:var(\n--spectrum-checkbox-xl-text-gap,var(--spectrum-global-dimension-size-160)\n);--spectrum-checkbox-text-padding-top:var(\n--spectrum-checkbox-xl-text-padding-top,var(--spectrum-global-dimension-size-150)\n);--spectrum-checkbox-text-font-style:var(\n--spectrum-checkbox-xl-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-checkbox-text-font-weight:var(\n--spectrum-checkbox-xl-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-checkbox-text-line-height:var(\n--spectrum-checkbox-xl-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-checkbox-checkmark-size:var(\n--spectrum-checkbox-xl-checkmark-size,var(--spectrum-alias-ui-icon-checkmark-size-300)\n);--spectrum-checkbox-height:var(\n--spectrum-checkbox-xl-height,var(--spectrum-global-dimension-size-600)\n)}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;opacity:1;transform:scale(1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-checkbox-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-checkbox-text-gap\n)}#label{font-size:var(--spectrum-checkbox-text-size);font-style:var(--spectrum-checkbox-text-font-style);font-weight:var(--spectrum-checkbox-text-font-weight);line-height:var(--spectrum-checkbox-text-line-height);margin-top:var(\n--spectrum-checkbox-text-padding-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-checkbox-box-size);margin:calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size))/2) 0;position:relative;width:var(--spectrum-checkbox-box-size)}#box:before{border-radius:var(--spectrum-checkbox-box-border-radius);border-style:solid;border-width:var(--spectrum-checkbox-box-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-checkbox-box-size);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-checkbox-box-size);z-index:0}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n));bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transform:translate(0);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}#checkmark,#partialCheckmark{opacity:0;position:absolute;top:50%;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#checkmark{margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-checkbox-checkmark-size)/-2)}#partialCheckmark{display:none;margin-top:calc(var(--spectrum-checkbox-checkmark-size)/-2)}:host{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#checkmark,#partialCheckmark{color:var(\n--spectrum-checkbox-m-checkmark-color,var(--spectrum-alias-toggle-icon-color-selected)\n)}#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}#label{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host{border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host(:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([readonly]){border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([readonly]:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n)}:host([readonly]:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([readonly]:active) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host([readonly]:active) #label{color:var(\n--spectrum-checkbox-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{color:var(\n--spectrum-checkbox-m-text-color,var(--spectrum-alias-component-text-color-default)\n);forced-color-adjust:none}#input:disabled+#box:before,:host([dir]) #input:checked:disabled+#box:before{background-color:var(\n--spectrum-checkbox-m-box-background-color-disabled,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-checkbox-m-box-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}#input:checked:disabled~#label,#input:disabled~#label{color:var(\n--spectrum-checkbox-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);forced-color-adjust:none}#input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}#input.focus-visible+#box:after{box-shadow:0 0 0 var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}#input:focus-visible+#box:after{box-shadow:0 0 0 var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}#input:checked:focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}#input.focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#input:focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(\n--spectrum-checkbox-m-emphasized-box-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([invalid][dir]) #box:before,:host([invalid][dir]) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([invalid]) #label{color:var(\n--spectrum-checkbox-m-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]:hover) #box:before,:host([invalid][dir]:hover) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover) #label{color:var(\n--spectrum-checkbox-m-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]:active) #label{color:var(\n--spectrum-checkbox-m-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}@media (forced-colors:active){#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);outline-offset:var(\n--spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)\n);outline-style:auto;outline-width:var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n)}#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(\n--spectrum-checkbox-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);outline-offset:var(\n--spectrum-checkbox-m-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap)\n);outline-style:auto;outline-width:var(\n--spectrum-checkbox-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n)}:host{--spectrum-checkbox-m-box-background-color-disabled:ButtonFace;--spectrum-checkbox-m-box-background-color:ButtonFace;--spectrum-checkbox-m-box-border-color-disabled:GrayText;--spectrum-checkbox-m-box-border-color-down:Highlight;--spectrum-checkbox-m-box-border-color-error-down:Highlight;--spectrum-checkbox-m-box-border-color-hover:Highlight;--spectrum-checkbox-m-box-border-color-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-box-border-color-selected-key-focus:Highlight;--spectrum-checkbox-m-box-border-color-selected:Highlight;--spectrum-checkbox-m-box-border-color:ButtonText;--spectrum-checkbox-m-emphasized-box-border-color-selected-down:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected-hover:Highlight;--spectrum-checkbox-m-emphasized-box-border-color-selected:Highlight;--spectrum-checkbox-m-focus-ring-color-key-focus:FieldText;--spectrum-checkbox-m-text-color-disabled:GrayText;--spectrum-checkbox-m-text-color-down:FieldText;--spectrum-checkbox-m-text-color-error-down:FieldText;--spectrum-checkbox-m-text-color-error-hover:FieldText;--spectrum-checkbox-m-checkmark-color:HighlightText;--spectrum-checkbox-m-focus-ring-gap-key-focus:var(\n--spectrum-global-dimension-static-size-25,2px\n);--spectrum-checkbox-m-focus-ring-size:var(\n--spectrum-global-dimension-static-size-40,3px\n);--spectrum-checkbox-m-box-border-color-error:FieldText;--spectrum-checkbox-m-box-border-color-error-hover:FieldText;--spectrum-checkbox-m-text-color-error:FieldText;--spectrum-checkbox-m-text-color-hover:FieldText;--spectrum-checkbox-m-text-color-key-focus:FieldText;--spectrum-checkbox-m-text-color:FieldText}:host([invalid][dir]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color,var(--spectrum-alias-toggle-border-color-default)\n)}:host([invalid][indeterminate]) #box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([invalid][dir]) #input:checked+#box:before{border-color:var(\n--spectrum-checkbox-m-box-border-color-error,var(--spectrum-global-color-red-500)\n)}}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsOf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,42 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import "@spectrum-web-components/checkbox/sp-checkbox.js";
|
|
3
|
-
export default {
|
|
4
|
-
component: "sp-checkbox",
|
|
5
|
-
title: "Checkbox/Sizes",
|
|
6
|
-
argTypes: {
|
|
7
|
-
onClick: { action: "click" },
|
|
8
|
-
onChange: { action: "change" }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
const checkbox = ({
|
|
12
|
-
size,
|
|
13
|
-
checked,
|
|
14
|
-
indeterminate,
|
|
15
|
-
onClick,
|
|
16
|
-
onChange
|
|
17
|
-
}) => {
|
|
18
|
-
return html`
|
|
1
|
+
import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-components/checkbox/sp-checkbox.js";export default{component:"sp-checkbox",title:"Checkbox/Sizes",argTypes:{onClick:{action:"click"},onChange:{action:"change"}}};const t=({size:e,checked:o,indeterminate:r,onClick:c,onChange:n})=>i`
|
|
19
2
|
<sp-checkbox
|
|
20
|
-
size=${
|
|
21
|
-
?checked=${
|
|
22
|
-
?indeterminate=${
|
|
23
|
-
@click="${
|
|
24
|
-
@change="${
|
|
3
|
+
size=${e}
|
|
4
|
+
?checked=${o}
|
|
5
|
+
?indeterminate=${r}
|
|
6
|
+
@click="${c}"
|
|
7
|
+
@change="${n}"
|
|
25
8
|
>
|
|
26
9
|
Checkbox
|
|
27
10
|
</sp-checkbox>
|
|
28
|
-
`;
|
|
29
|
-
};
|
|
30
|
-
export const s = (args) => checkbox({ ...args, size: "s" });
|
|
31
|
-
export const sChecked = (args) => checkbox({ ...args, size: "s", checked: true });
|
|
32
|
-
export const sIndeterminate = (args) => checkbox({ ...args, size: "s", indeterminate: true });
|
|
33
|
-
export const m = (args) => checkbox({ ...args, size: "m" });
|
|
34
|
-
export const mChecked = (args) => checkbox({ ...args, size: "m", checked: true });
|
|
35
|
-
export const mIndeterminate = (args) => checkbox({ ...args, size: "m", indeterminate: true });
|
|
36
|
-
export const l = (args) => checkbox({ ...args, size: "l" });
|
|
37
|
-
export const lChecked = (args) => checkbox({ ...args, size: "l", checked: true });
|
|
38
|
-
export const lIndeterminate = (args) => checkbox({ ...args, size: "l", indeterminate: true });
|
|
39
|
-
export const XL = (args) => checkbox({ ...args, size: "xl" });
|
|
40
|
-
export const XLChecked = (args) => checkbox({ ...args, size: "xl", checked: true });
|
|
41
|
-
export const XLIndeterminate = (args) => checkbox({ ...args, size: "xl", indeterminate: true });
|
|
11
|
+
`;export const s=e=>t({...e,size:"s"}),sChecked=e=>t({...e,size:"s",checked:!0}),sIndeterminate=e=>t({...e,size:"s",indeterminate:!0}),m=e=>t({...e,size:"m"}),mChecked=e=>t({...e,size:"m",checked:!0}),mIndeterminate=e=>t({...e,size:"m",indeterminate:!0}),l=e=>t({...e,size:"l"}),lChecked=e=>t({...e,size:"l",checked:!0}),lIndeterminate=e=>t({...e,size:"l",indeterminate:!0}),XL=e=>t({...e,size:"xl"}),XLChecked=e=>t({...e,size:"xl",checked:!0}),XLIndeterminate=e=>t({...e,size:"xl",indeterminate:!0});
|
|
42
12
|
//# sourceMappingURL=checkbox-sizes.stories.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["checkbox-sizes.stories.ts"],
|
|
4
4
|
"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*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\n\nexport default {\n component: 'sp-checkbox',\n title: 'Checkbox/Sizes',\n argTypes: {\n onClick: { action: 'click' },\n onChange: { action: 'change' },\n },\n};\n\nconst checkbox = ({\n size,\n checked,\n indeterminate,\n onClick,\n onChange,\n}: {\n size: 's' | 'm' | 'l' | 'xl';\n checked?: boolean;\n indeterminate?: boolean;\n onClick: () => void;\n onChange: () => void;\n}): TemplateResult => {\n return html`\n <sp-checkbox\n size=${size}\n ?checked=${checked}\n ?indeterminate=${indeterminate}\n @click=\"${onClick}\"\n @change=\"${onChange}\"\n >\n Checkbox\n </sp-checkbox>\n `;\n};\n\ntype StoryArgs = {\n onClick: () => void;\n onChange: () => void;\n};\n\nexport const s = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 's' });\n\nexport const sChecked = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 's', checked: true });\n\nexport const sIndeterminate = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 's', indeterminate: true });\n\nexport const m = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'm' });\n\nexport const mChecked = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'm', checked: true });\n\nexport const mIndeterminate = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'm', indeterminate: true });\n\nexport const l = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'l' });\n\nexport const lChecked = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'l', checked: true });\n\nexport const lIndeterminate = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'l', indeterminate: true });\n\nexport const XL = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'xl' });\n\nexport const XLChecked = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'xl', checked: true });\n\nexport const XLIndeterminate = (args: StoryArgs): TemplateResult =>\n checkbox({ ...args, size: 'xl', indeterminate: true });\n"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,qDAEA,yDAEA,cAAe,CACX,UAAW,cACX,MAAO,iBACP,SAAU,CACN,QAAS,CAAE,OAAQ,OAAQ,EAC3B,SAAU,CAAE,OAAQ,QAAS,CACjC,CACJ,EAEA,KAAM,GAAW,CAAC,CACd,OACA,UACA,gBACA,UACA,cAQO;AAAA;AAAA,mBAEQ;AAAA,uBACI;AAAA,6BACM;AAAA,sBACP;AAAA,uBACC;AAAA;AAAA;AAAA;AAAA,MAYhB,YAAM,GAAI,AAAC,GACd,EAAS,IAAK,EAAM,KAAM,GAAI,CAAC,EAEtB,SAAW,AAAC,GACrB,EAAS,IAAK,EAAM,KAAM,IAAK,QAAS,EAAK,CAAC,EAErC,eAAiB,AAAC,GAC3B,EAAS,IAAK,EAAM,KAAM,IAAK,cAAe,EAAK,CAAC,EAE3C,EAAI,AAAC,GACd,EAAS,IAAK,EAAM,KAAM,GAAI,CAAC,EAEtB,SAAW,AAAC,GACrB,EAAS,IAAK,EAAM,KAAM,IAAK,QAAS,EAAK,CAAC,EAErC,eAAiB,AAAC,GAC3B,EAAS,IAAK,EAAM,KAAM,IAAK,cAAe,EAAK,CAAC,EAE3C,EAAI,AAAC,GACd,EAAS,IAAK,EAAM,KAAM,GAAI,CAAC,EAEtB,SAAW,AAAC,GACrB,EAAS,IAAK,EAAM,KAAM,IAAK,QAAS,EAAK,CAAC,EAErC,eAAiB,AAAC,GAC3B,EAAS,IAAK,EAAM,KAAM,IAAK,cAAe,EAAK,CAAC,EAE3C,GAAK,AAAC,GACf,EAAS,IAAK,EAAM,KAAM,IAAK,CAAC,EAEvB,UAAY,AAAC,GACtB,EAAS,IAAK,EAAM,KAAM,KAAM,QAAS,EAAK,CAAC,EAEtC,gBAAkB,AAAC,GAC5B,EAAS,IAAK,EAAM,KAAM,KAAM,cAAe,EAAK,CAAC",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,112 +1,44 @@
|
|
|
1
|
-
import
|
|
2
|
-
import "@spectrum-web-components/field-group/sp-field-group.js";
|
|
3
|
-
import { html } from "@spectrum-web-components/base";
|
|
4
|
-
export default {
|
|
5
|
-
component: "sp-checkbox",
|
|
6
|
-
title: "Checkbox"
|
|
7
|
-
};
|
|
8
|
-
export const Default = () => {
|
|
9
|
-
return html`
|
|
1
|
+
import"@spectrum-web-components/checkbox/sp-checkbox.js";import"@spectrum-web-components/field-group/sp-field-group.js";import{html as e}from"@spectrum-web-components/base";export default{component:"sp-checkbox",title:"Checkbox"};export const Default=()=>e`
|
|
10
2
|
<sp-checkbox>Checkbox</sp-checkbox>
|
|
11
|
-
|
|
12
|
-
};
|
|
13
|
-
export const readonly = () => {
|
|
14
|
-
return html`
|
|
3
|
+
`,readonly=()=>e`
|
|
15
4
|
<sp-checkbox checked readonly>Checkbox</sp-checkbox>
|
|
16
|
-
|
|
17
|
-
};
|
|
18
|
-
export const Indeterminate = () => {
|
|
19
|
-
return html`
|
|
5
|
+
`,Indeterminate=()=>e`
|
|
20
6
|
<sp-checkbox indeterminate>Checkbox</sp-checkbox>
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
export const Checked = () => {
|
|
24
|
-
return html`
|
|
7
|
+
`,Checked=()=>e`
|
|
25
8
|
<sp-checkbox checked>Checkbox</sp-checkbox>
|
|
26
|
-
|
|
27
|
-
};
|
|
28
|
-
export const emphasized = () => {
|
|
29
|
-
return html`
|
|
9
|
+
`,emphasized=()=>e`
|
|
30
10
|
<sp-checkbox emphasized>Checkbox</sp-checkbox>
|
|
31
|
-
|
|
32
|
-
};
|
|
33
|
-
export const emphasizedIndeterminate = () => {
|
|
34
|
-
return html`
|
|
11
|
+
`,emphasizedIndeterminate=()=>e`
|
|
35
12
|
<sp-checkbox emphasized indeterminate>Checkbox</sp-checkbox>
|
|
36
|
-
|
|
37
|
-
};
|
|
38
|
-
export const emphasizedChecked = () => {
|
|
39
|
-
return html`
|
|
13
|
+
`,emphasizedChecked=()=>e`
|
|
40
14
|
<sp-checkbox emphasized checked>Checkbox</sp-checkbox>
|
|
41
|
-
|
|
42
|
-
};
|
|
43
|
-
export const emphasizedInvalid = () => {
|
|
44
|
-
return html`
|
|
15
|
+
`,emphasizedInvalid=()=>e`
|
|
45
16
|
<sp-checkbox emphasized invalid>Checkbox</sp-checkbox>
|
|
46
|
-
|
|
47
|
-
};
|
|
48
|
-
export const emphasizedInvalidIndeterminate = () => {
|
|
49
|
-
return html`
|
|
17
|
+
`,emphasizedInvalidIndeterminate=()=>e`
|
|
50
18
|
<sp-checkbox emphasized invalid indeterminate>Checkbox</sp-checkbox>
|
|
51
|
-
|
|
52
|
-
};
|
|
53
|
-
export const emphasizedInvalidChecked = () => {
|
|
54
|
-
return html`
|
|
19
|
+
`,emphasizedInvalidChecked=()=>e`
|
|
55
20
|
<sp-checkbox emphasized invalid checked>Checkbox</sp-checkbox>
|
|
56
|
-
|
|
57
|
-
};
|
|
58
|
-
export const Invalid = () => {
|
|
59
|
-
return html`
|
|
21
|
+
`,Invalid=()=>e`
|
|
60
22
|
<sp-checkbox invalid>Checkbox</sp-checkbox>
|
|
61
|
-
|
|
62
|
-
};
|
|
63
|
-
export const invalidIndeterminate = () => {
|
|
64
|
-
return html`
|
|
23
|
+
`,invalidIndeterminate=()=>e`
|
|
65
24
|
<sp-checkbox invalid indeterminate>Checkbox</sp-checkbox>
|
|
66
|
-
|
|
67
|
-
};
|
|
68
|
-
export const invalidChecked = () => {
|
|
69
|
-
return html`
|
|
25
|
+
`,invalidChecked=()=>e`
|
|
70
26
|
<sp-checkbox invalid checked>Checkbox</sp-checkbox>
|
|
71
|
-
|
|
72
|
-
};
|
|
73
|
-
export const Autofocus = () => {
|
|
74
|
-
return html`
|
|
27
|
+
`,Autofocus=()=>e`
|
|
75
28
|
<sp-checkbox autofocus>Checkbox</sp-checkbox>
|
|
76
|
-
|
|
77
|
-
};
|
|
78
|
-
export const Disabled = () => {
|
|
79
|
-
return html`
|
|
29
|
+
`,Disabled=()=>e`
|
|
80
30
|
<sp-checkbox disabled>Checkbox</sp-checkbox>
|
|
81
|
-
|
|
82
|
-
};
|
|
83
|
-
export const disabledChecked = () => {
|
|
84
|
-
return html`
|
|
31
|
+
`,disabledChecked=()=>e`
|
|
85
32
|
<sp-checkbox disabled checked>Checkbox</sp-checkbox>
|
|
86
|
-
|
|
87
|
-
};
|
|
88
|
-
export const disabledIndeterminate = () => {
|
|
89
|
-
return html`
|
|
33
|
+
`,disabledIndeterminate=()=>e`
|
|
90
34
|
<sp-checkbox disabled indeterminate>Checkbox</sp-checkbox>
|
|
91
|
-
|
|
92
|
-
};
|
|
93
|
-
export const emphasizedDisabled = () => {
|
|
94
|
-
return html`
|
|
35
|
+
`,emphasizedDisabled=()=>e`
|
|
95
36
|
<sp-checkbox emphasized disabled>Checkbox</sp-checkbox>
|
|
96
|
-
|
|
97
|
-
};
|
|
98
|
-
export const emphasizedDisabledIndeterminate = () => {
|
|
99
|
-
return html`
|
|
37
|
+
`,emphasizedDisabledIndeterminate=()=>e`
|
|
100
38
|
<sp-checkbox emphasized disabled indeterminate>Checkbox</sp-checkbox>
|
|
101
|
-
|
|
102
|
-
};
|
|
103
|
-
export const emphasizedDisabledChecked = () => {
|
|
104
|
-
return html`
|
|
39
|
+
`,emphasizedDisabledChecked=()=>e`
|
|
105
40
|
<sp-checkbox emphasized checked>Checkbox</sp-checkbox>
|
|
106
|
-
|
|
107
|
-
};
|
|
108
|
-
export const tabIndexExample = () => {
|
|
109
|
-
return html`
|
|
41
|
+
`,tabIndexExample=()=>e`
|
|
110
42
|
<sp-field-group horizontal>
|
|
111
43
|
<sp-checkbox tabindex="0">Checkbox 0</sp-checkbox>
|
|
112
44
|
<sp-checkbox disabled tabindex="3">Checkbox 3</sp-checkbox>
|
|
@@ -114,10 +46,7 @@ export const tabIndexExample = () => {
|
|
|
114
46
|
<sp-checkbox tabindex="2" autofocus>Checkbox 2</sp-checkbox>
|
|
115
47
|
<sp-checkbox tabindex="1">Checkbox 1</sp-checkbox>
|
|
116
48
|
</sp-field-group>
|
|
117
|
-
|
|
118
|
-
};
|
|
119
|
-
export const verticalTabIndexExample = () => {
|
|
120
|
-
return html`
|
|
49
|
+
`,verticalTabIndexExample=()=>e`
|
|
121
50
|
<sp-field-group vertical>
|
|
122
51
|
<sp-checkbox tabindex="0">Checkbox 0</sp-checkbox>
|
|
123
52
|
<sp-checkbox disabled tabindex="3">Checkbox 3</sp-checkbox>
|
|
@@ -126,5 +55,4 @@ export const verticalTabIndexExample = () => {
|
|
|
126
55
|
<sp-checkbox tabindex="1">Checkbox 1</sp-checkbox>
|
|
127
56
|
</sp-field-group>
|
|
128
57
|
`;
|
|
129
|
-
};
|
|
130
58
|
//# sourceMappingURL=checkbox.stories.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["checkbox.stories.ts"],
|
|
4
4
|
"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*/\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport '@spectrum-web-components/field-group/sp-field-group.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nexport default {\n component: 'sp-checkbox',\n title: 'Checkbox',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-checkbox>Checkbox</sp-checkbox>\n `;\n};\n\nexport const readonly = (): TemplateResult => {\n return html`\n <sp-checkbox checked readonly>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Indeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Checked = (): TemplateResult => {\n return html`\n <sp-checkbox checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasized = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalid = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalidIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalidChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Invalid = (): TemplateResult => {\n return html`\n <sp-checkbox invalid>Checkbox</sp-checkbox>\n `;\n};\n\nexport const invalidIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox invalid indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const invalidChecked = (): TemplateResult => {\n return html`\n <sp-checkbox invalid checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Autofocus = (): TemplateResult => {\n return html`\n <sp-checkbox autofocus>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Disabled = (): TemplateResult => {\n return html`\n <sp-checkbox disabled>Checkbox</sp-checkbox>\n `;\n};\n\nexport const disabledChecked = (): TemplateResult => {\n return html`\n <sp-checkbox disabled checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const disabledIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox disabled indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabled = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized disabled>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabledIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized disabled indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabledChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const tabIndexExample = (): TemplateResult => {\n return html`\n <sp-field-group horizontal>\n <sp-checkbox tabindex=\"0\">Checkbox 0</sp-checkbox>\n <sp-checkbox disabled tabindex=\"3\">Checkbox 3</sp-checkbox>\n <sp-checkbox tabindex=\"4\">Checkbox 4</sp-checkbox>\n <sp-checkbox tabindex=\"2\" autofocus>Checkbox 2</sp-checkbox>\n <sp-checkbox tabindex=\"1\">Checkbox 1</sp-checkbox>\n </sp-field-group>\n `;\n};\n\nexport const verticalTabIndexExample = (): TemplateResult => {\n return html`\n <sp-field-group vertical>\n <sp-checkbox tabindex=\"0\">Checkbox 0</sp-checkbox>\n <sp-checkbox disabled tabindex=\"3\">Checkbox 3</sp-checkbox>\n <sp-checkbox tabindex=\"4\">Checkbox 4</sp-checkbox>\n <sp-checkbox tabindex=\"2\" autofocus>Checkbox 2</sp-checkbox>\n <sp-checkbox tabindex=\"1\">Checkbox 1</sp-checkbox>\n </sp-field-group>\n `;\n};\n"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,yDACA,+DACA,qDAEA,cAAe,CACX,UAAW,cACX,MAAO,UACX,EAEO,YAAM,SAAU,IACZ;AAAA;AAAA,MAKE,SAAW,IACb;AAAA;AAAA,MAKE,cAAgB,IAClB;AAAA;AAAA,MAKE,QAAU,IACZ;AAAA;AAAA,MAKE,WAAa,IACf;AAAA;AAAA,MAKE,wBAA0B,IAC5B;AAAA;AAAA,MAKE,kBAAoB,IACtB;AAAA;AAAA,MAKE,kBAAoB,IACtB;AAAA;AAAA,MAKE,+BAAiC,IACnC;AAAA;AAAA,MAKE,yBAA2B,IAC7B;AAAA;AAAA,MAKE,QAAU,IACZ;AAAA;AAAA,MAKE,qBAAuB,IACzB;AAAA;AAAA,MAKE,eAAiB,IACnB;AAAA;AAAA,MAKE,UAAY,IACd;AAAA;AAAA,MAKE,SAAW,IACb;AAAA;AAAA,MAKE,gBAAkB,IACpB;AAAA;AAAA,MAKE,sBAAwB,IAC1B;AAAA;AAAA,MAKE,mBAAqB,IACvB;AAAA;AAAA,MAKE,gCAAkC,IACpC;AAAA;AAAA,MAKE,0BAA4B,IAC9B;AAAA;AAAA,MAKE,gBAAkB,IACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWE,wBAA0B,IAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { html } from "lit";
|
|
3
|
-
import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
|
|
4
|
-
measureFixtureCreation(html`
|
|
1
|
+
import"@spectrum-web-components/checkbox/sp-checkbox.js";import{html as o}from"lit";import{measureFixtureCreation as e}from"../../../../test/benchmark/helpers.js";e(o`
|
|
5
2
|
<sp-checkbox id="checkbox0" tabindex="5">Component</sp-checkbox>
|
|
6
3
|
`);
|
|
7
4
|
//# sourceMappingURL=test-basic.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["test-basic.ts"],
|
|
4
4
|
"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 '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-checkbox id=\"checkbox0\" tabindex=\"5\">Component</sp-checkbox>\n`);\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,yDACA,2BACA,+EAEA,EAAuB;AAAA;AAAA,CAEtB",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { regressVisuals } from "../../../test/visual/test.js";
|
|
3
|
-
regressVisuals("CheckboxSizesStories", stories);
|
|
1
|
+
import*as s from"../stories/checkbox-sizes.stories.js";import{regressVisuals as r}from"../../../test/visual/test.js";r("CheckboxSizesStories",s);
|
|
4
2
|
//# sourceMappingURL=checkbox-sizes.test-vrt.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["checkbox-sizes.test-vrt.ts"],
|
|
4
4
|
"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 * as stories from '../stories/checkbox-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('CheckboxSizesStories', stories);\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,uDACA,8DAEA,EAAe,uBAAwB,CAAO",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { regressVisuals } from "../../../test/visual/test.js";
|
|
3
|
-
regressVisuals("CheckboxStories", stories);
|
|
1
|
+
import*as r from"../stories/checkbox.stories.js";import{regressVisuals as s}from"../../../test/visual/test.js";s("CheckboxStories",r);
|
|
4
2
|
//# sourceMappingURL=checkbox.test-vrt.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["checkbox.test-vrt.ts"],
|
|
4
4
|
"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 * as stories from '../stories/checkbox.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('CheckboxStories', stories);\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,iDACA,8DAEA,EAAe,kBAAmB,CAAO",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/checkbox.test.js
CHANGED
|
@@ -1,32 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
elementUpdated,
|
|
4
|
-
expect,
|
|
5
|
-
fixture,
|
|
6
|
-
html,
|
|
7
|
-
triggerBlurFor,
|
|
8
|
-
waitUntil
|
|
9
|
-
} from "@open-wc/testing";
|
|
10
|
-
import "@spectrum-web-components/shared/src/focus-visible.js";
|
|
11
|
-
import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
|
|
12
|
-
function inputForCheckbox(checkbox) {
|
|
13
|
-
if (!checkbox.shadowRoot)
|
|
14
|
-
throw new Error("No shadowRoot");
|
|
15
|
-
return checkbox.shadowRoot.querySelector("#input");
|
|
16
|
-
}
|
|
17
|
-
function labelNodeForCheckbox(checkbox) {
|
|
18
|
-
if (!checkbox.shadowRoot)
|
|
19
|
-
throw new Error("No shadowRoot");
|
|
20
|
-
const slotEl = checkbox.shadowRoot.querySelector("slot");
|
|
21
|
-
if (!slotEl) {
|
|
22
|
-
throw new Error("Failed to find slot in shadowRoot");
|
|
23
|
-
}
|
|
24
|
-
return slotEl.assignedNodes()[0];
|
|
25
|
-
}
|
|
26
|
-
describe("Checkbox", () => {
|
|
27
|
-
let testFixture;
|
|
28
|
-
beforeEach(async () => {
|
|
29
|
-
testFixture = await fixture(html`
|
|
1
|
+
import"@spectrum-web-components/checkbox/sp-checkbox.js";import{elementUpdated as o,expect as c,fixture as a,html as i,triggerBlurFor as n,waitUntil as b}from"@open-wc/testing";import"@spectrum-web-components/shared/src/focus-visible.js";import{testForLitDevWarnings as d}from"../../../test/testing-helpers.js";function s(t){if(!t.shadowRoot)throw new Error("No shadowRoot");return t.shadowRoot.querySelector("#input")}function l(t){if(!t.shadowRoot)throw new Error("No shadowRoot");const e=t.shadowRoot.querySelector("slot");if(!e)throw new Error("Failed to find slot in shadowRoot");return e.assignedNodes()[0]}describe("Checkbox",()=>{let t;beforeEach(async()=>{t=await a(i`
|
|
30
2
|
<div>
|
|
31
3
|
<div id="test-checkbox">
|
|
32
4
|
<sp-checkbox id="checkbox0" tabindex="5">
|
|
@@ -49,92 +21,17 @@ describe("Checkbox", () => {
|
|
|
49
21
|
</sp-checkbox>
|
|
50
22
|
</div>
|
|
51
23
|
</div>
|
|
52
|
-
`);
|
|
53
|
-
});
|
|
54
|
-
it("loads", async () => {
|
|
55
|
-
const el = testFixture.querySelector("sp-checkbox");
|
|
56
|
-
expect(el).to.not.equal(void 0);
|
|
57
|
-
const textNode = labelNodeForCheckbox(el);
|
|
58
|
-
const content = (textNode.textContent || "").trim();
|
|
59
|
-
expect(content).to.equal("Component");
|
|
60
|
-
});
|
|
61
|
-
testForLitDevWarnings(async () => await fixture(html`
|
|
24
|
+
`)}),it("loads",async()=>{const e=t.querySelector("sp-checkbox");c(e).to.not.equal(void 0);const k=(l(e).textContent||"").trim();c(k).to.equal("Component")}),d(async()=>await a(i`
|
|
62
25
|
<sp-checkbox>Not Checked</sp-checkbox>
|
|
63
|
-
`))
|
|
64
|
-
it("loads default checkbox accessibly", async () => {
|
|
65
|
-
const el = await fixture(html`
|
|
26
|
+
`)),it("loads default checkbox accessibly",async()=>{const e=await a(i`
|
|
66
27
|
<sp-checkbox>Not Checked</sp-checkbox>
|
|
67
|
-
`);
|
|
68
|
-
await elementUpdated(el);
|
|
69
|
-
await expect(el).to.be.accessible();
|
|
70
|
-
});
|
|
71
|
-
it("loads `checked` checkbox accessibly", async () => {
|
|
72
|
-
const el = await fixture(html`
|
|
28
|
+
`);await o(e),await c(e).to.be.accessible()}),it("loads `checked` checkbox accessibly",async()=>{const e=await a(i`
|
|
73
29
|
<sp-checkbox checked>Checked</sp-checkbox>
|
|
74
|
-
`);
|
|
75
|
-
await elementUpdated(el);
|
|
76
|
-
await expect(el).to.be.accessible();
|
|
77
|
-
});
|
|
78
|
-
it("is `invalid` checkbox accessibly", async () => {
|
|
79
|
-
const el = await fixture(html`
|
|
30
|
+
`);await o(e),await c(e).to.be.accessible()}),it("is `invalid` checkbox accessibly",async()=>{const e=await a(i`
|
|
80
31
|
<sp-checkbox invalid>Invalid Checked</sp-checkbox>
|
|
81
|
-
`);
|
|
82
|
-
await elementUpdated(el);
|
|
83
|
-
await expect(el).to.be.accessible();
|
|
84
|
-
});
|
|
85
|
-
it("autofocuses", async () => {
|
|
86
|
-
const autoElement = testFixture.querySelector("sp-checkbox[autofocus]");
|
|
87
|
-
expect(autoElement).to.exist;
|
|
88
|
-
await waitUntil(() => document.activeElement === autoElement, "Autofocused");
|
|
89
|
-
await triggerBlurFor(autoElement);
|
|
90
|
-
expect(document.activeElement).to.not.equal(autoElement);
|
|
91
|
-
});
|
|
92
|
-
it("`click()`ing host clicks `focusElement`", async () => {
|
|
93
|
-
const el = await fixture(html`
|
|
32
|
+
`);await o(e),await c(e).to.be.accessible()}),it("autofocuses",async()=>{const e=t.querySelector("sp-checkbox[autofocus]");c(e).to.exist,await b(()=>document.activeElement===e,"Autofocused"),await n(e),c(document.activeElement).to.not.equal(e)}),it("`click()`ing host clicks `focusElement`",async()=>{const e=await a(i`
|
|
94
33
|
<sp-checkbox checked autofocus>Checked</sp-checkbox>
|
|
95
|
-
`);
|
|
96
|
-
await elementUpdated(el);
|
|
97
|
-
expect(el.checked, "checked initially").to.be.true;
|
|
98
|
-
el.click();
|
|
99
|
-
await elementUpdated(el);
|
|
100
|
-
expect(el.checked, "unchecked").to.be.false;
|
|
101
|
-
el.click();
|
|
102
|
-
await elementUpdated(el);
|
|
103
|
-
expect(el.checked, "checked again").to.be.true;
|
|
104
|
-
});
|
|
105
|
-
it("respects checked attribute", () => {
|
|
106
|
-
let el = testFixture.querySelector("#checkbox0");
|
|
107
|
-
expect(el.checked).to.be.false;
|
|
108
|
-
el = testFixture.querySelector("#checkbox1");
|
|
109
|
-
expect(el.checked).to.be.true;
|
|
110
|
-
});
|
|
111
|
-
it("handles click events", async () => {
|
|
112
|
-
const el = testFixture.querySelector("#checkbox1");
|
|
113
|
-
expect(el.checked).to.be.true;
|
|
114
|
-
inputForCheckbox(el).click();
|
|
115
|
-
await elementUpdated(el);
|
|
116
|
-
expect(el.checked).to.be.false;
|
|
117
|
-
});
|
|
118
|
-
it("can have `change` events cancelled", async () => {
|
|
119
|
-
const el = testFixture.querySelector("#checkbox0");
|
|
120
|
-
await elementUpdated(el);
|
|
121
|
-
expect(el.checked).to.be.false;
|
|
122
|
-
inputForCheckbox(el).click();
|
|
123
|
-
await elementUpdated(el);
|
|
124
|
-
expect(el.checked).to.be.true;
|
|
125
|
-
el.addEventListener("change", (event) => event.preventDefault());
|
|
126
|
-
inputForCheckbox(el).click();
|
|
127
|
-
await elementUpdated(el);
|
|
128
|
-
expect(el.checked).to.be.true;
|
|
129
|
-
});
|
|
130
|
-
it("maintains its value when [readonly]", async () => {
|
|
131
|
-
const el = await fixture(html`
|
|
34
|
+
`);await o(e),c(e.checked,"checked initially").to.be.true,e.click(),await o(e),c(e.checked,"unchecked").to.be.false,e.click(),await o(e),c(e.checked,"checked again").to.be.true}),it("respects checked attribute",()=>{let e=t.querySelector("#checkbox0");c(e.checked).to.be.false,e=t.querySelector("#checkbox1"),c(e.checked).to.be.true}),it("handles click events",async()=>{const e=t.querySelector("#checkbox1");c(e.checked).to.be.true,s(e).click(),await o(e),c(e.checked).to.be.false}),it("can have `change` events cancelled",async()=>{const e=t.querySelector("#checkbox0");await o(e),c(e.checked).to.be.false,s(e).click(),await o(e),c(e.checked).to.be.true,e.addEventListener("change",h=>h.preventDefault()),s(e).click(),await o(e),c(e.checked).to.be.true}),it("maintains its value when [readonly]",async()=>{const e=await a(i`
|
|
132
35
|
<sp-checkbox id="checkbox0" checked readonly>Component</sp-checkbox>
|
|
133
|
-
`);
|
|
134
|
-
expect(el.checked).to.be.true;
|
|
135
|
-
inputForCheckbox(el).click();
|
|
136
|
-
await elementUpdated(el);
|
|
137
|
-
expect(el.checked).to.be.true;
|
|
138
|
-
});
|
|
139
|
-
});
|
|
36
|
+
`);c(e.checked).to.be.true,s(e).click(),await o(e),c(e.checked).to.be.true})});
|
|
140
37
|
//# sourceMappingURL=checkbox.test.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["checkbox.test.ts"],
|
|
4
4
|
"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 '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport { Checkbox } from '../';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n triggerBlurFor,\n waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/shared/src/focus-visible.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nfunction inputForCheckbox(checkbox: Checkbox): HTMLInputElement {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n return checkbox.shadowRoot.querySelector('#input') as HTMLInputElement;\n}\n\nfunction labelNodeForCheckbox(checkbox: Checkbox): Node {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n const slotEl = checkbox.shadowRoot.querySelector('slot');\n if (!slotEl) {\n throw new Error('Failed to find slot in shadowRoot');\n }\n return slotEl.assignedNodes()[0];\n}\ndescribe('Checkbox', () => {\n let testFixture: HTMLDivElement;\n\n beforeEach(async () => {\n testFixture = await fixture<HTMLDivElement>(\n html`\n <div>\n <div id=\"test-checkbox\">\n <sp-checkbox id=\"checkbox0\" tabindex=\"5\">\n Component\n </sp-checkbox>\n <sp-checkbox id=\"checkbox1\" tabindex=\"2\" checked>\n Check 1\n </sp-checkbox>\n <sp-checkbox id=\"checkbox2\" tabindex=\"3\" disabled>\n Check 2\n </sp-checkbox>\n <sp-checkbox id=\"checkbox3\" tabindex=\"1\" autofocus>\n Check 3\n </sp-checkbox>\n <sp-checkbox id=\"checkbox4\" tabindex=\"0\">\n Check 4\n </sp-checkbox>\n <sp-checkbox id=\"checkbox5\" tabindex=\"-1\">\n Check 5\n </sp-checkbox>\n </div>\n </div>\n `\n );\n });\n\n it('loads', async () => {\n const el = testFixture.querySelector('sp-checkbox') as Checkbox;\n expect(el).to.not.equal(undefined);\n const textNode = labelNodeForCheckbox(el);\n const content = (textNode.textContent || '').trim();\n expect(content).to.equal('Component');\n });\n testForLitDevWarnings(\n async () =>\n await fixture<Checkbox>(\n html`\n <sp-checkbox>Not Checked</sp-checkbox>\n `\n )\n );\n\n it('loads default checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox>Not Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('loads `checked` checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox checked>Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('is `invalid` checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox invalid>Invalid Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('autofocuses', async () => {\n const autoElement = testFixture.querySelector(\n 'sp-checkbox[autofocus]'\n ) as Checkbox;\n\n expect(autoElement).to.exist;\n await waitUntil(\n () => document.activeElement === autoElement,\n 'Autofocused'\n );\n\n await triggerBlurFor(autoElement);\n\n expect(document.activeElement).to.not.equal(autoElement);\n });\n\n it('`click()`ing host clicks `focusElement`', async () => {\n const el = await fixture<Checkbox>(\n html`\n <sp-checkbox checked autofocus>Checked</sp-checkbox>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.checked, 'checked initially').to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked, 'unchecked').to.be.false;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked, 'checked again').to.be.true;\n });\n\n it('respects checked attribute', () => {\n let el = testFixture.querySelector('#checkbox0') as Checkbox;\n expect(el.checked).to.be.false;\n\n el = testFixture.querySelector('#checkbox1') as Checkbox;\n expect(el.checked).to.be.true;\n });\n\n it('handles click events', async () => {\n const el = testFixture.querySelector('#checkbox1') as Checkbox;\n expect(el.checked).to.be.true;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.false;\n });\n\n it('can have `change` events cancelled', async () => {\n const el = testFixture.querySelector('#checkbox0') as Checkbox;\n await elementUpdated(el);\n expect(el.checked).to.be.false;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n\n el.addEventListener('change', (event: Event) => event.preventDefault());\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n\n it('maintains its value when [readonly]', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox id=\"checkbox0\" checked readonly>Component</sp-checkbox>\n `);\n expect(el.checked).to.be.true;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n});\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,yDAEA,wHAQA,6DACA,yEAEA,WAA0B,EAAsC,CAC5D,GAAI,CAAC,EAAS,WAAY,KAAM,IAAI,OAAM,eAAe,EACzD,MAAO,GAAS,WAAW,cAAc,QAAQ,CACrD,CAEA,WAA8B,EAA0B,CACpD,GAAI,CAAC,EAAS,WAAY,KAAM,IAAI,OAAM,eAAe,EACzD,KAAM,GAAS,EAAS,WAAW,cAAc,MAAM,EACvD,GAAI,CAAC,EACD,KAAM,IAAI,OAAM,mCAAmC,EAEvD,MAAO,GAAO,cAAc,EAAE,EAClC,CACA,SAAS,WAAY,IAAM,CACvB,GAAI,GAEJ,WAAW,SAAY,CACnB,EAAc,KAAM,GAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAwBJ,CACJ,CAAC,EAED,GAAG,QAAS,SAAY,CACpB,KAAM,GAAK,EAAY,cAAc,aAAa,EAClD,EAAO,CAAE,EAAE,GAAG,IAAI,MAAM,MAAS,EAEjC,KAAM,GAAW,CADA,EAAqB,CAAE,EACd,aAAe,IAAI,KAAK,EAClD,EAAO,CAAO,EAAE,GAAG,MAAM,WAAW,CACxC,CAAC,EACD,EACI,SACI,KAAM,GACF;AAAA;AAAA,iBAGJ,CACR,EAEA,GAAG,oCAAqC,SAAY,CAChD,KAAM,GAAK,KAAM,GACb;AAAA;AAAA,aAGJ,EAEA,KAAM,GAAe,CAAE,EAEvB,KAAM,GAAO,CAAE,EAAE,GAAG,GAAG,WAAW,CACtC,CAAC,EAED,GAAG,sCAAuC,SAAY,CAClD,KAAM,GAAK,KAAM,GACb;AAAA;AAAA,aAGJ,EAEA,KAAM,GAAe,CAAE,EAEvB,KAAM,GAAO,CAAE,EAAE,GAAG,GAAG,WAAW,CACtC,CAAC,EAED,GAAG,mCAAoC,SAAY,CAC/C,KAAM,GAAK,KAAM,GACb;AAAA;AAAA,aAGJ,EAEA,KAAM,GAAe,CAAE,EAEvB,KAAM,GAAO,CAAE,EAAE,GAAG,GAAG,WAAW,CACtC,CAAC,EAED,GAAG,cAAe,SAAY,CAC1B,KAAM,GAAc,EAAY,cAC5B,wBACJ,EAEA,EAAO,CAAW,EAAE,GAAG,MACvB,KAAM,GACF,IAAM,SAAS,gBAAkB,EACjC,aACJ,EAEA,KAAM,GAAe,CAAW,EAEhC,EAAO,SAAS,aAAa,EAAE,GAAG,IAAI,MAAM,CAAW,CAC3D,CAAC,EAED,GAAG,0CAA2C,SAAY,CACtD,KAAM,GAAK,KAAM,GACb;AAAA;AAAA,aAGJ,EAEA,KAAM,GAAe,CAAE,EAEvB,EAAO,EAAG,QAAS,mBAAmB,EAAE,GAAG,GAAG,KAE9C,EAAG,MAAM,EACT,KAAM,GAAe,CAAE,EAEvB,EAAO,EAAG,QAAS,WAAW,EAAE,GAAG,GAAG,MAEtC,EAAG,MAAM,EACT,KAAM,GAAe,CAAE,EAEvB,EAAO,EAAG,QAAS,eAAe,EAAE,GAAG,GAAG,IAC9C,CAAC,EAED,GAAG,6BAA8B,IAAM,CACnC,GAAI,GAAK,EAAY,cAAc,YAAY,EAC/C,EAAO,EAAG,OAAO,EAAE,GAAG,GAAG,MAEzB,EAAK,EAAY,cAAc,YAAY,EAC3C,EAAO,EAAG,OAAO,EAAE,GAAG,GAAG,IAC7B,CAAC,EAED,GAAG,uBAAwB,SAAY,CACnC,KAAM,GAAK,EAAY,cAAc,YAAY,EACjD,EAAO,EAAG,OAAO,EAAE,GAAG,GAAG,KAEzB,EAAiB,CAAE,EAAE,MAAM,EAC3B,KAAM,GAAe,CAAE,EAEvB,EAAO,EAAG,OAAO,EAAE,GAAG,GAAG,KAC7B,CAAC,EAED,GAAG,qCAAsC,SAAY,CACjD,KAAM,GAAK,EAAY,cAAc,YAAY,EACjD,KAAM,GAAe,CAAE,EACvB,EAAO,EAAG,OAAO,EAAE,GAAG,GAAG,MAEzB,EAAiB,CAAE,EAAE,MAAM,EAC3B,KAAM,GAAe,CAAE,EAEvB,EAAO,EAAG,OAAO,EAAE,GAAG,GAAG,KAEzB,EAAG,iBAAiB,SAAU,AAAC,GAAiB,EAAM,eAAe,CAAC,EACtE,EAAiB,CAAE,EAAE,MAAM,EAC3B,KAAM,GAAe,CAAE,EAEvB,EAAO,EAAG,OAAO,EAAE,GAAG,GAAG,IAC7B,CAAC,EAED,GAAG,sCAAuC,SAAY,CAClD,KAAM,GAAK,KAAM,GAAkB;AAAA;AAAA,SAElC,EACD,EAAO,EAAG,OAAO,EAAE,GAAG,GAAG,KAEzB,EAAiB,CAAE,EAAE,MAAM,EAC3B,KAAM,GAAe,CAAE,EAEvB,EAAO,EAAG,OAAO,EAAE,GAAG,GAAG,IAC7B,CAAC,CACL,CAAC",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|