@spectrum-web-components/checkbox 0.39.4 → 0.40.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +307 -36
- package/package.json +10 -6
- package/src/Checkbox.d.ts +17 -3
- package/src/Checkbox.dev.js +111 -57
- package/src/Checkbox.dev.js.map +2 -2
- package/src/Checkbox.js +44 -44
- package/src/Checkbox.js.map +3 -3
- package/src/CheckboxBase.d.ts +6 -7
- package/src/CheckboxBase.dev.js +2 -58
- package/src/CheckboxBase.dev.js.map +2 -2
- package/src/CheckboxBase.js +1 -8
- package/src/CheckboxBase.js.map +3 -3
- package/src/CheckboxMixin.d.ts +13 -0
- package/src/CheckboxMixin.dev.js +69 -0
- package/src/CheckboxMixin.dev.js.map +7 -0
- package/src/CheckboxMixin.js +10 -0
- package/src/CheckboxMixin.js.map +7 -0
- package/src/checkbox.css.dev.js +0 -55
- package/src/checkbox.css.dev.js.map +2 -2
- package/src/checkbox.css.js +0 -55
- package/src/checkbox.css.js.map +2 -2
- package/src/spectrum-checkbox.css.dev.js +0 -55
- package/src/spectrum-checkbox.css.dev.js.map +2 -2
- package/src/spectrum-checkbox.css.js +0 -55
- package/src/spectrum-checkbox.css.js.map +2 -2
- package/test/benchmark/test-basic.js +3 -1
- package/test/benchmark/test-basic.js.map +2 -2
- package/test/checkbox.test.js +8 -0
- package/test/checkbox.test.js.map +2 -2
package/src/Checkbox.dev.js
CHANGED
|
@@ -12,10 +12,12 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
12
12
|
};
|
|
13
13
|
import {
|
|
14
14
|
html,
|
|
15
|
-
SizedMixin
|
|
15
|
+
SizedMixin,
|
|
16
|
+
SpectrumElement
|
|
16
17
|
} from "@spectrum-web-components/base";
|
|
17
18
|
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
18
|
-
import {
|
|
19
|
+
import { CheckboxMixin } from "./CheckboxMixin.dev.js";
|
|
20
|
+
import checkboxStyles from "./checkbox.css.js";
|
|
19
21
|
import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js";
|
|
20
22
|
import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";
|
|
21
23
|
import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js";
|
|
@@ -24,73 +26,105 @@ import "@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js";
|
|
|
24
26
|
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js";
|
|
25
27
|
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";
|
|
26
28
|
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js";
|
|
27
|
-
import checkboxStyles from "./checkbox.css.js";
|
|
28
29
|
import checkmarkSmallStyles from "@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";
|
|
29
30
|
import dashSmallStyles from "@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";
|
|
30
31
|
const checkmarkIcon = {
|
|
31
|
-
s:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
32
|
+
s: () => {
|
|
33
|
+
return html`
|
|
34
|
+
<sp-icon-checkmark75
|
|
35
|
+
id="checkmark"
|
|
36
|
+
class="spectrum-Icon spectrum-UIIcon-Checkmark75"
|
|
37
|
+
></sp-icon-checkmark75>
|
|
38
|
+
`;
|
|
39
|
+
},
|
|
40
|
+
m: () => {
|
|
41
|
+
return html`
|
|
42
|
+
<sp-icon-checkmark100
|
|
43
|
+
id="checkmark"
|
|
44
|
+
class="spectrum-Icon spectrum-UIIcon-Checkmark100"
|
|
45
|
+
></sp-icon-checkmark100>
|
|
46
|
+
`;
|
|
47
|
+
},
|
|
48
|
+
l: () => {
|
|
49
|
+
return html`
|
|
50
|
+
<sp-icon-checkmark200
|
|
51
|
+
id="checkmark"
|
|
52
|
+
class="spectrum-Icon spectrum-UIIcon-Checkmark200"
|
|
53
|
+
></sp-icon-checkmark200>
|
|
54
|
+
`;
|
|
55
|
+
},
|
|
56
|
+
xl: () => {
|
|
57
|
+
return html`
|
|
58
|
+
<sp-icon-checkmark300
|
|
59
|
+
id="checkmark"
|
|
60
|
+
class="spectrum-Icon spectrum-UIIcon-Checkmark300"
|
|
61
|
+
></sp-icon-checkmark300>
|
|
62
|
+
`;
|
|
63
|
+
}
|
|
55
64
|
};
|
|
56
65
|
const dashIcon = {
|
|
57
|
-
s:
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
66
|
+
s: () => {
|
|
67
|
+
return html`
|
|
68
|
+
<sp-icon-dash75
|
|
69
|
+
id="partialCheckmark"
|
|
70
|
+
class="spectrum-Icon spectrum-UIIcon-Dash75"
|
|
71
|
+
></sp-icon-dash75>
|
|
72
|
+
`;
|
|
73
|
+
},
|
|
74
|
+
m: () => {
|
|
75
|
+
return html`
|
|
76
|
+
<sp-icon-dash100
|
|
77
|
+
id="partialCheckmark"
|
|
78
|
+
class="spectrum-Icon spectrum-UIIcon-Dash100"
|
|
79
|
+
></sp-icon-dash100>
|
|
80
|
+
`;
|
|
81
|
+
},
|
|
82
|
+
l: () => {
|
|
83
|
+
return html`
|
|
84
|
+
<sp-icon-dash200
|
|
85
|
+
id="partialCheckmark"
|
|
86
|
+
class="spectrum-Icon spectrum-UIIcon-Dash200"
|
|
87
|
+
></sp-icon-dash200>
|
|
88
|
+
`;
|
|
89
|
+
},
|
|
90
|
+
xl: () => {
|
|
91
|
+
return html`
|
|
92
|
+
<sp-icon-dash300
|
|
93
|
+
id="partialCheckmark"
|
|
94
|
+
class="spectrum-Icon spectrum-UIIcon-Dash300"
|
|
95
|
+
></sp-icon-dash300>
|
|
96
|
+
`;
|
|
97
|
+
}
|
|
81
98
|
};
|
|
82
|
-
export class Checkbox extends SizedMixin(
|
|
99
|
+
export class Checkbox extends SizedMixin(CheckboxMixin(SpectrumElement), {
|
|
83
100
|
noDefaultSize: true
|
|
84
101
|
}) {
|
|
85
102
|
constructor() {
|
|
86
103
|
super(...arguments);
|
|
104
|
+
this.disabled = false;
|
|
87
105
|
this.indeterminate = false;
|
|
88
106
|
this.invalid = false;
|
|
89
107
|
this.emphasized = false;
|
|
108
|
+
this.tabIndex = 0;
|
|
109
|
+
}
|
|
110
|
+
connectedCallback() {
|
|
111
|
+
super.connectedCallback();
|
|
112
|
+
if (this.hasAttribute("autofocus")) {
|
|
113
|
+
this.updateComplete.then(() => {
|
|
114
|
+
this.focus();
|
|
115
|
+
});
|
|
116
|
+
}
|
|
90
117
|
}
|
|
91
118
|
static get styles() {
|
|
92
119
|
return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];
|
|
93
120
|
}
|
|
121
|
+
click() {
|
|
122
|
+
var _a;
|
|
123
|
+
if (this.disabled) {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
(_a = this.inputElement) == null ? void 0 : _a.click();
|
|
127
|
+
}
|
|
94
128
|
handleChange() {
|
|
95
129
|
this.indeterminate = false;
|
|
96
130
|
super.handleChange();
|
|
@@ -99,14 +133,27 @@ export class Checkbox extends SizedMixin(CheckboxBase, {
|
|
|
99
133
|
return html`
|
|
100
134
|
${super.render()}
|
|
101
135
|
<span id="box">
|
|
102
|
-
${checkmarkIcon[this.size]}
|
|
103
|
-
${dashIcon[this.size]}
|
|
136
|
+
${this.checked ? checkmarkIcon[this.size]() : html``}
|
|
137
|
+
${this.indeterminate ? dashIcon[this.size]() : html``}
|
|
104
138
|
</span>
|
|
105
139
|
<label id="label" for="input"><slot></slot></label>
|
|
106
140
|
`;
|
|
107
141
|
}
|
|
108
142
|
updated(changes) {
|
|
109
143
|
super.updated(changes);
|
|
144
|
+
if (changes.has("disabled") && (typeof changes.get("disabled") !== "undefined" || this.disabled)) {
|
|
145
|
+
if (this.disabled) {
|
|
146
|
+
this.inputElement.tabIndex = this.tabIndex;
|
|
147
|
+
this.tabIndex = -1;
|
|
148
|
+
} else {
|
|
149
|
+
this.tabIndex = this.inputElement.tabIndex;
|
|
150
|
+
this.inputElement.removeAttribute("tabindex");
|
|
151
|
+
}
|
|
152
|
+
this.inputElement.disabled = this.disabled;
|
|
153
|
+
}
|
|
154
|
+
if (changes.has("indeterminate")) {
|
|
155
|
+
this.inputElement.indeterminate = this.indeterminate;
|
|
156
|
+
}
|
|
110
157
|
if (changes.has("invalid")) {
|
|
111
158
|
if (this.invalid) {
|
|
112
159
|
this.inputElement.setAttribute("aria-invalid", "true");
|
|
@@ -114,11 +161,15 @@ export class Checkbox extends SizedMixin(CheckboxBase, {
|
|
|
114
161
|
this.inputElement.removeAttribute("aria-invalid");
|
|
115
162
|
}
|
|
116
163
|
}
|
|
117
|
-
if (changes.has("indeterminate")) {
|
|
118
|
-
this.inputElement.indeterminate = this.indeterminate;
|
|
119
|
-
}
|
|
120
164
|
}
|
|
121
165
|
}
|
|
166
|
+
Checkbox.shadowRootOptions = {
|
|
167
|
+
...SpectrumElement.shadowRootOptions,
|
|
168
|
+
delegatesFocus: true
|
|
169
|
+
};
|
|
170
|
+
__decorateClass([
|
|
171
|
+
property({ type: Boolean, reflect: true })
|
|
172
|
+
], Checkbox.prototype, "disabled", 2);
|
|
122
173
|
__decorateClass([
|
|
123
174
|
property({ type: Boolean, reflect: true })
|
|
124
175
|
], Checkbox.prototype, "indeterminate", 2);
|
|
@@ -128,4 +179,7 @@ __decorateClass([
|
|
|
128
179
|
__decorateClass([
|
|
129
180
|
property({ type: Boolean, reflect: true })
|
|
130
181
|
], Checkbox.prototype, "emphasized", 2);
|
|
182
|
+
__decorateClass([
|
|
183
|
+
property({ reflect: true, type: Number, attribute: "tabindex" })
|
|
184
|
+
], Checkbox.prototype, "tabIndex", 2);
|
|
131
185
|
//# sourceMappingURL=Checkbox.dev.js.map
|
package/src/Checkbox.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Checkbox.ts"],
|
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAGI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,
|
|
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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxMixin } from './CheckboxMixin.dev.js'\nimport checkboxStyles from './checkbox.css.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 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: () => {\n return html`\n <sp-icon-checkmark75\n id=\"checkmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Checkmark75\"\n ></sp-icon-checkmark75>\n `;\n },\n m: () => {\n return html`\n <sp-icon-checkmark100\n id=\"checkmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `;\n },\n l: () => {\n return html`\n <sp-icon-checkmark200\n id=\"checkmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Checkmark200\"\n ></sp-icon-checkmark200>\n `;\n },\n xl: () => {\n return html`\n <sp-icon-checkmark300\n id=\"checkmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Checkmark300\"\n ></sp-icon-checkmark300>\n `;\n },\n};\n\nconst dashIcon = {\n s: () => {\n return html`\n <sp-icon-dash75\n id=\"partialCheckmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Dash75\"\n ></sp-icon-dash75>\n `;\n },\n m: () => {\n return html`\n <sp-icon-dash100\n id=\"partialCheckmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Dash100\"\n ></sp-icon-dash100>\n `;\n },\n l: () => {\n return html`\n <sp-icon-dash200\n id=\"partialCheckmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Dash200\"\n ></sp-icon-dash200>\n `;\n },\n xl: () => {\n return html`\n <sp-icon-dash300\n id=\"partialCheckmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Dash300\"\n ></sp-icon-dash300>\n `;\n },\n};\n\n/**\n * @element sp-checkbox\n * @slot - content to display as the label for the Checkbox\n * @fires change - Announces a change in the `checked` property of a Checkbox\n */\nexport class Checkbox extends SizedMixin(CheckboxMixin(SpectrumElement), {\n noDefaultSize: true,\n}) {\n static override shadowRootOptions = {\n ...SpectrumElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Disable this control. It will not receive focus or events\n */\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\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 @property({ reflect: true, type: Number, attribute: 'tabindex' })\n public override tabIndex = 0;\n\n public override connectedCallback(): void {\n super.connectedCallback();\n if (this.hasAttribute('autofocus')) {\n this.updateComplete.then(() => {\n this.focus();\n });\n }\n }\n\n public static override get styles(): CSSResultArray {\n return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];\n }\n\n public override click(): void {\n if (this.disabled) {\n return;\n }\n\n this.inputElement?.click();\n }\n\n public override handleChange(): void {\n this.indeterminate = false;\n super.handleChange();\n }\n\n protected override render(): TemplateResult {\n return html`\n ${super.render()}\n <span id=\"box\">\n ${this.checked\n ? checkmarkIcon[this.size as DefaultElementSize]()\n : html``}\n ${this.indeterminate\n ? dashIcon[this.size as DefaultElementSize]()\n : html``}\n </span>\n <label id=\"label\" for=\"input\"><slot></slot></label>\n `;\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (\n changes.has('disabled') &&\n (typeof changes.get('disabled') !== 'undefined' || this.disabled)\n ) {\n if (this.disabled) {\n this.inputElement.tabIndex = this.tabIndex;\n this.tabIndex = -1;\n } else {\n this.tabIndex = this.inputElement.tabIndex;\n this.inputElement.removeAttribute('tabindex');\n }\n this.inputElement.disabled = this.disabled;\n }\n if (changes.has('indeterminate')) {\n this.inputElement.indeterminate = this.indeterminate;\n }\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 }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Checkbox.js
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
"use strict";var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
1
|
+
"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var r=(n,s,e,c)=>{for(var i=c>1?void 0:c?m(s,e):s,l=n.length-1,o;l>=0;l--)(o=n[l])&&(i=(c?o(s,e,i):o(i))||i);return c&&i&&d(s,e,i),i};import{html as t,SizedMixin as u,SpectrumElement as p}from"@spectrum-web-components/base";import{property as a}from"@spectrum-web-components/base/src/decorators.js";import{CheckboxMixin as h}from"./CheckboxMixin.js";import k from"./checkbox.css.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 b 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:()=>t`
|
|
2
|
+
<sp-icon-checkmark75
|
|
3
|
+
id="checkmark"
|
|
4
|
+
class="spectrum-Icon spectrum-UIIcon-Checkmark75"
|
|
5
|
+
></sp-icon-checkmark75>
|
|
6
|
+
`,m:()=>t`
|
|
7
|
+
<sp-icon-checkmark100
|
|
8
|
+
id="checkmark"
|
|
9
|
+
class="spectrum-Icon spectrum-UIIcon-Checkmark100"
|
|
10
|
+
></sp-icon-checkmark100>
|
|
11
|
+
`,l:()=>t`
|
|
12
|
+
<sp-icon-checkmark200
|
|
13
|
+
id="checkmark"
|
|
14
|
+
class="spectrum-Icon spectrum-UIIcon-Checkmark200"
|
|
15
|
+
></sp-icon-checkmark200>
|
|
16
|
+
`,xl:()=>t`
|
|
17
|
+
<sp-icon-checkmark300
|
|
18
|
+
id="checkmark"
|
|
19
|
+
class="spectrum-Icon spectrum-UIIcon-Checkmark300"
|
|
20
|
+
></sp-icon-checkmark300>
|
|
21
|
+
`},v={s:()=>t`
|
|
22
|
+
<sp-icon-dash75
|
|
23
|
+
id="partialCheckmark"
|
|
24
|
+
class="spectrum-Icon spectrum-UIIcon-Dash75"
|
|
25
|
+
></sp-icon-dash75>
|
|
26
|
+
`,m:()=>t`
|
|
27
|
+
<sp-icon-dash100
|
|
28
|
+
id="partialCheckmark"
|
|
29
|
+
class="spectrum-Icon spectrum-UIIcon-Dash100"
|
|
30
|
+
></sp-icon-dash100>
|
|
31
|
+
`,l:()=>t`
|
|
32
|
+
<sp-icon-dash200
|
|
33
|
+
id="partialCheckmark"
|
|
34
|
+
class="spectrum-Icon spectrum-UIIcon-Dash200"
|
|
35
|
+
></sp-icon-dash200>
|
|
36
|
+
`,xl:()=>t`
|
|
37
|
+
<sp-icon-dash300
|
|
38
|
+
id="partialCheckmark"
|
|
39
|
+
class="spectrum-Icon spectrum-UIIcon-Dash300"
|
|
40
|
+
></sp-icon-dash300>
|
|
41
|
+
`};export class Checkbox extends u(h(p),{noDefaultSize:!0}){constructor(){super(...arguments);this.disabled=!1;this.indeterminate=!1;this.invalid=!1;this.emphasized=!1;this.tabIndex=0}connectedCallback(){super.connectedCallback(),this.hasAttribute("autofocus")&&this.updateComplete.then(()=>{this.focus()})}static get styles(){return[k,b,f]}click(){var e;this.disabled||(e=this.inputElement)==null||e.click()}handleChange(){this.indeterminate=!1,super.handleChange()}render(){return t`
|
|
42
42
|
${super.render()}
|
|
43
43
|
<span id="box">
|
|
44
|
-
${
|
|
45
|
-
${
|
|
44
|
+
${this.checked?I[this.size]():t``}
|
|
45
|
+
${this.indeterminate?v[this.size]():t``}
|
|
46
46
|
</span>
|
|
47
47
|
<label id="label" for="input"><slot></slot></label>
|
|
48
|
-
`}updated(
|
|
48
|
+
`}updated(e){super.updated(e),e.has("disabled")&&(typeof e.get("disabled")!="undefined"||this.disabled)&&(this.disabled?(this.inputElement.tabIndex=this.tabIndex,this.tabIndex=-1):(this.tabIndex=this.inputElement.tabIndex,this.inputElement.removeAttribute("tabindex")),this.inputElement.disabled=this.disabled),e.has("indeterminate")&&(this.inputElement.indeterminate=this.indeterminate),e.has("invalid")&&(this.invalid?this.inputElement.setAttribute("aria-invalid","true"):this.inputElement.removeAttribute("aria-invalid"))}}Checkbox.shadowRootOptions={...p.shadowRootOptions,delegatesFocus:!0},r([a({type:Boolean,reflect:!0})],Checkbox.prototype,"disabled",2),r([a({type:Boolean,reflect:!0})],Checkbox.prototype,"indeterminate",2),r([a({type:Boolean,reflect:!0})],Checkbox.prototype,"invalid",2),r([a({type:Boolean,reflect:!0})],Checkbox.prototype,"emphasized",2),r([a({reflect:!0,type:Number,attribute:"tabindex"})],Checkbox.prototype,"tabIndex",2);
|
|
49
49
|
//# sourceMappingURL=Checkbox.js.map
|
package/src/Checkbox.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Checkbox.ts"],
|
|
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 {
|
|
5
|
-
"mappings": "qNAYA,OAGI,QAAAA,EAEA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,
|
|
6
|
-
"names": ["html", "SizedMixin", "property", "
|
|
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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxMixin } from './CheckboxMixin.js';\nimport checkboxStyles from './checkbox.css.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 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: () => {\n return html`\n <sp-icon-checkmark75\n id=\"checkmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Checkmark75\"\n ></sp-icon-checkmark75>\n `;\n },\n m: () => {\n return html`\n <sp-icon-checkmark100\n id=\"checkmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `;\n },\n l: () => {\n return html`\n <sp-icon-checkmark200\n id=\"checkmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Checkmark200\"\n ></sp-icon-checkmark200>\n `;\n },\n xl: () => {\n return html`\n <sp-icon-checkmark300\n id=\"checkmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Checkmark300\"\n ></sp-icon-checkmark300>\n `;\n },\n};\n\nconst dashIcon = {\n s: () => {\n return html`\n <sp-icon-dash75\n id=\"partialCheckmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Dash75\"\n ></sp-icon-dash75>\n `;\n },\n m: () => {\n return html`\n <sp-icon-dash100\n id=\"partialCheckmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Dash100\"\n ></sp-icon-dash100>\n `;\n },\n l: () => {\n return html`\n <sp-icon-dash200\n id=\"partialCheckmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Dash200\"\n ></sp-icon-dash200>\n `;\n },\n xl: () => {\n return html`\n <sp-icon-dash300\n id=\"partialCheckmark\"\n class=\"spectrum-Icon spectrum-UIIcon-Dash300\"\n ></sp-icon-dash300>\n `;\n },\n};\n\n/**\n * @element sp-checkbox\n * @slot - content to display as the label for the Checkbox\n * @fires change - Announces a change in the `checked` property of a Checkbox\n */\nexport class Checkbox extends SizedMixin(CheckboxMixin(SpectrumElement), {\n noDefaultSize: true,\n}) {\n static override shadowRootOptions = {\n ...SpectrumElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Disable this control. It will not receive focus or events\n */\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\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 @property({ reflect: true, type: Number, attribute: 'tabindex' })\n public override tabIndex = 0;\n\n public override connectedCallback(): void {\n super.connectedCallback();\n if (this.hasAttribute('autofocus')) {\n this.updateComplete.then(() => {\n this.focus();\n });\n }\n }\n\n public static override get styles(): CSSResultArray {\n return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];\n }\n\n public override click(): void {\n if (this.disabled) {\n return;\n }\n\n this.inputElement?.click();\n }\n\n public override handleChange(): void {\n this.indeterminate = false;\n super.handleChange();\n }\n\n protected override render(): TemplateResult {\n return html`\n ${super.render()}\n <span id=\"box\">\n ${this.checked\n ? checkmarkIcon[this.size as DefaultElementSize]()\n : html``}\n ${this.indeterminate\n ? dashIcon[this.size as DefaultElementSize]()\n : html``}\n </span>\n <label id=\"label\" for=\"input\"><slot></slot></label>\n `;\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (\n changes.has('disabled') &&\n (typeof changes.get('disabled') !== 'undefined' || this.disabled)\n ) {\n if (this.disabled) {\n this.inputElement.tabIndex = this.tabIndex;\n this.tabIndex = -1;\n } else {\n this.tabIndex = this.inputElement.tabIndex;\n this.inputElement.removeAttribute('tabindex');\n }\n this.inputElement.disabled = this.disabled;\n }\n if (changes.has('indeterminate')) {\n this.inputElement.indeterminate = this.indeterminate;\n }\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 }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["html", "SizedMixin", "SpectrumElement", "property", "CheckboxMixin", "checkboxStyles", "checkmarkSmallStyles", "dashSmallStyles", "checkmarkIcon", "dashIcon", "_a", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/src/CheckboxBase.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { TemplateResult } from '@spectrum-web-components/base';
|
|
2
1
|
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
declare const CheckboxBase_base: typeof Focusable & {
|
|
3
|
+
new (...args: any[]): import("./CheckboxMixin.js").CheckboxElement;
|
|
4
|
+
prototype: import("./CheckboxMixin.js").CheckboxElement;
|
|
5
|
+
};
|
|
6
|
+
export declare class CheckboxBase extends CheckboxBase_base {
|
|
7
7
|
get focusElement(): HTMLElement;
|
|
8
|
-
handleChange(): void;
|
|
9
|
-
protected render(): TemplateResult;
|
|
10
8
|
}
|
|
9
|
+
export {};
|
package/src/CheckboxBase.dev.js
CHANGED
|
@@ -1,65 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
5
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
6
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
|
-
if (decorator = decorators[i])
|
|
8
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
-
if (kind && result)
|
|
10
|
-
__defProp(target, key, result);
|
|
11
|
-
return result;
|
|
12
|
-
};
|
|
13
|
-
import { html } from "@spectrum-web-components/base";
|
|
14
|
-
import {
|
|
15
|
-
property,
|
|
16
|
-
query
|
|
17
|
-
} from "@spectrum-web-components/base/src/decorators.js";
|
|
18
2
|
import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
super(...arguments);
|
|
22
|
-
this.checked = false;
|
|
23
|
-
this.readonly = false;
|
|
24
|
-
}
|
|
3
|
+
import { CheckboxMixin } from "./CheckboxMixin.dev.js";
|
|
4
|
+
export class CheckboxBase extends CheckboxMixin(Focusable) {
|
|
25
5
|
get focusElement() {
|
|
26
6
|
return this.inputElement;
|
|
27
7
|
}
|
|
28
|
-
handleChange() {
|
|
29
|
-
if (this.readonly) {
|
|
30
|
-
this.inputElement.checked = this.checked;
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
this.checked = this.inputElement.checked;
|
|
34
|
-
const changeEvent = new CustomEvent("change", {
|
|
35
|
-
bubbles: true,
|
|
36
|
-
cancelable: true,
|
|
37
|
-
composed: true
|
|
38
|
-
});
|
|
39
|
-
const applyDefault = this.dispatchEvent(changeEvent);
|
|
40
|
-
if (!applyDefault) {
|
|
41
|
-
this.checked = !this.inputElement.checked;
|
|
42
|
-
this.inputElement.checked = this.checked;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
render() {
|
|
46
|
-
return html`
|
|
47
|
-
<input
|
|
48
|
-
id="input"
|
|
49
|
-
type="checkbox"
|
|
50
|
-
.checked=${this.checked}
|
|
51
|
-
@change=${this.handleChange}
|
|
52
|
-
/>
|
|
53
|
-
`;
|
|
54
|
-
}
|
|
55
8
|
}
|
|
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);
|
|
65
9
|
//# sourceMappingURL=CheckboxBase.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["CheckboxBase.ts"],
|
|
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*/\
|
|
5
|
-
"mappings": "
|
|
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 { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { CheckboxMixin } from './CheckboxMixin.dev.js'\n\nexport class CheckboxBase extends CheckboxMixin(Focusable) {\n public override get focusElement(): HTMLElement {\n return this.inputElement;\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAEvB,aAAM,qBAAqB,cAAc,SAAS,EAAE;AAAA,EACvD,IAAoB,eAA4B;AAC5C,WAAO,KAAK;AAAA,EAChB;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/CheckboxBase.js
CHANGED
|
@@ -1,9 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
<input
|
|
3
|
-
id="input"
|
|
4
|
-
type="checkbox"
|
|
5
|
-
.checked=${this.checked}
|
|
6
|
-
@change=${this.handleChange}
|
|
7
|
-
/>
|
|
8
|
-
`}}l([h({type:Boolean,reflect:!0})],CheckboxBase.prototype,"checked",2),l([h({type:Boolean,reflect:!0})],CheckboxBase.prototype,"readonly",2),l([o("#input")],CheckboxBase.prototype,"inputElement",2);
|
|
1
|
+
"use strict";import{Focusable as e}from"@spectrum-web-components/shared/src/focusable.js";import{CheckboxMixin as t}from"./CheckboxMixin.js";export class CheckboxBase extends t(e){get focusElement(){return this.inputElement}}
|
|
9
2
|
//# sourceMappingURL=CheckboxBase.js.map
|
package/src/CheckboxBase.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["CheckboxBase.ts"],
|
|
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*/\
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["
|
|
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 { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { CheckboxMixin } from './CheckboxMixin.js';\n\nexport class CheckboxBase extends CheckboxMixin(Focusable) {\n public override get focusElement(): HTMLElement {\n return this.inputElement;\n }\n}\n"],
|
|
5
|
+
"mappings": "aAWA,OAAS,aAAAA,MAAiB,mDAC1B,OAAS,iBAAAC,MAAqB,qBAEvB,aAAM,qBAAqBA,EAAcD,CAAS,CAAE,CACvD,IAAoB,cAA4B,CAC5C,OAAO,KAAK,YAChB,CACJ",
|
|
6
|
+
"names": ["Focusable", "CheckboxMixin"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactiveElement } from 'lit';
|
|
2
|
+
declare type Constructor<T = Record<string, unknown>> = {
|
|
3
|
+
new (...args: any[]): T;
|
|
4
|
+
prototype: T;
|
|
5
|
+
};
|
|
6
|
+
export interface CheckboxElement {
|
|
7
|
+
checked: boolean;
|
|
8
|
+
handleChange(): void;
|
|
9
|
+
inputElement: HTMLInputElement;
|
|
10
|
+
name?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare function CheckboxMixin<T extends Constructor<ReactiveElement>>(constructor: T): T & Constructor<CheckboxElement>;
|
|
13
|
+
export {};
|