@c2n/checkbox 0.0.1 → 0.0.3
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/README.md +1 -1
- package/dist/checkbox.js +27 -41
- package/package.json +8 -3
- package/types/src/checkbox.d.ts +2 -6
- package/types/src/checkbox.d.ts.map +1 -1
package/README.md
CHANGED
package/dist/checkbox.js
CHANGED
|
@@ -1,36 +1,33 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { query as x, property as
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
const
|
|
1
|
+
import { unsafeCSS as k, LitElement as l, html as s } from "lit";
|
|
2
|
+
import { query as x, property as r, customElement as p } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as a } from "lit/directives/if-defined.js";
|
|
4
|
+
const u = `:host{display:inline-flex}.c2-checkbox{display:inline-flex;position:relative;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom;z-index:0;align-items:center;justify-content:center;flex-direction:column;width:var(--c2-checkbox-touch-target-size, 48px);height:var(--c2-checkbox-touch-target-size, 48px)}.c2-checkbox-input{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit;width:var(--c2-checkbox-touch-target-size, 48px);height:var(--c2-checkbox-touch-target-size, 48px)}.c2-checkbox__background{display:inline-flex;position:absolute;align-items:center;justify-content:center;box-sizing:border-box;border-style:solid;background-color:transparent;pointer-events:none;will-change:background-color,border-color;transition:transition-exit(background-color),transition-exit(border-color);width:var(--c2-checkbox-container-width, 18px);height:var(--c2-checkbox-container-height, 18px);border-radius:var(--c2-checkbox-container-border-radius, 5px)}::slotted(svg[slot=checkmark]),.c2-checkbox__checkmark{position:absolute;width:var(--c2-checkbox-checkmark-size, 14px);height:var(--c2-checkbox-checkmark-size, 14px);transition:transition-exit(opacity,0ms,.18s);opacity:0}::slotted(svg[slot=mixedmark]),.c2-checkbox__mixedmark{position:absolute;width:var(--c2-checkbox-mixedmark-size, 14px);height:var(--c2-checkbox-mixedmark-size, 14px);transform:scaleX(0) rotate(0);opacity:0;transition:transition-exit(opacity),transition-exit(transform)}.c2-checkbox-state-layer{position:absolute;width:var(--c2-checkbox-state-layer-size, 40px);height:var(--c2-checkbox-state-layer-size, 40px);border-radius:var(--c2-checkbox-state-layer-border-radius, 9999px);background-color:transparent;opacity:0;pointer-events:none;will-change:background-color,opacity}.c2-checkbox-input:not(:checked):not(:indeterminate):enabled~.c2-checkbox__background{border-width:var(--c2-checkbox-container-border-width, 1.5px);border-color:var(--c2-checkbox-container-border-color, #bcbcc6)}.c2-checkbox-input:indeterminate:enabled~.c2-checkbox__background{border-width:0;background-color:var(--c2-checkbox-container-enabled-selected-color, #476ef9)}.c2-checkbox-input:indeterminate:enabled~.c2-checkbox__background ::slotted(svg[slot=checkmark]),.c2-checkbox-input:indeterminate:enabled~.c2-checkbox__background .c2-checkbox__checkmark{opacity:0}.c2-checkbox-input:indeterminate:enabled~.c2-checkbox__background ::slotted(svg[slot=mixedmark]),.c2-checkbox-input:indeterminate:enabled~.c2-checkbox__background .c2-checkbox__mixedmark{opacity:1;transform:scaleX(1) rotate(0);color:var(--c2-checkbox-mixedmark-color, #fff)}.c2-checkbox-input:checked:enabled~.c2-checkbox__background{border-width:0;background-color:var(--c2-checkbox-container-enabled-selected-color, #476ef9)}.c2-checkbox-input:checked:enabled~.c2-checkbox__background ::slotted(svg[slot=checkmark]),.c2-checkbox-input:checked:enabled~.c2-checkbox__background .c2-checkbox__checkmark{opacity:1;color:var(--c2-checkbox-checkmark-color, #fff)}.c2-checkbox-input:not(:checked):not(:indeterminate):disabled~.c2-checkbox__background{border-width:var(--c2-checkbox-container-border-width, 1.5px);border-color:var(--c2-checkbox-container-border-color, #bcbcc6);opacity:var(--c2-checkbox-disabled-opacity, .38)}.c2-checkbox-input:indeterminate:disabled~.c2-checkbox__background{border-width:0;background-color:var(--c2-checkbox-container-enabled-selected-color, #476ef9);opacity:var(--c2-checkbox-disabled-opacity, .38)}.c2-checkbox-input:indeterminate:disabled~.c2-checkbox__background ::slotted(svg[slot=checkmark]),.c2-checkbox-input:indeterminate:disabled~.c2-checkbox__background .c2-checkbox__checkmark{opacity:0}.c2-checkbox-input:indeterminate:disabled~.c2-checkbox__background ::slotted(svg[slot=mixedmark]),.c2-checkbox-input:indeterminate:disabled~.c2-checkbox__background .c2-checkbox__mixedmark{opacity:1;transform:scaleX(1) rotate(0);color:var(--c2-checkbox-mixedmark-color, #fff)}.c2-checkbox-input:checked:disabled~.c2-checkbox__background{border-width:0;background-color:var(--c2-checkbox-container-enabled-selected-color, #476ef9);opacity:var(--c2-checkbox-disabled-opacity, .38)}.c2-checkbox-input:checked:disabled~.c2-checkbox__background ::slotted(svg[slot=checkmark]),.c2-checkbox-input:checked:disabled~.c2-checkbox__background .c2-checkbox__checkmark{opacity:1;color:var(--c2-checkbox-checkmark-color, #fff)}.c2-checkbox-input:not(:checked):not(:indeterminate):enabled:hover~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-unselected-color, #bcbcc6);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox-input:indeterminate:enabled:hover~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-indeterminate-color, #476ef9);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox-input:checked:enabled:hover~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-indeterminate-color, #476ef9);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox-input:not(:checked):not(:indeterminate):enabled:focus~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-unselected-color, #bcbcc6);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox-input:indeterminate:enabled:focus~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-indeterminate-color, #476ef9);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox-input:checked:enabled:focus~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-indeterminate-color, #476ef9);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox__background--marked{transition:background-color 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}
|
|
5
5
|
`;
|
|
6
|
-
var
|
|
7
|
-
for (var
|
|
8
|
-
(
|
|
9
|
-
return n &&
|
|
6
|
+
var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (o, i, b, n) => {
|
|
7
|
+
for (var t = n > 1 ? void 0 : n ? v(i, b) : i, d = o.length - 1, h; d >= 0; d--)
|
|
8
|
+
(h = o[d]) && (t = (n ? h(i, b, t) : h(t)) || t);
|
|
9
|
+
return n && t && m(i, b, t), t;
|
|
10
10
|
};
|
|
11
|
-
let e = class extends
|
|
11
|
+
let e = class extends l {
|
|
12
12
|
constructor() {
|
|
13
|
-
super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.name = ""
|
|
13
|
+
super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.name = "";
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
const
|
|
16
|
+
const o = this.indeterminate ? "mixed" : void 0;
|
|
17
17
|
return s`
|
|
18
18
|
<div class="c2-checkbox">
|
|
19
|
-
${this.renderStateLayer()}
|
|
20
19
|
<input
|
|
21
20
|
class="c2-checkbox-input"
|
|
22
21
|
type="checkbox"
|
|
23
|
-
name="${
|
|
24
|
-
aria-checked="${
|
|
25
|
-
aria-label="${
|
|
26
|
-
aria-labelledby="${
|
|
27
|
-
aria-describedby="${
|
|
22
|
+
name="${a(this.name)}"
|
|
23
|
+
aria-checked="${a(o)}"
|
|
24
|
+
aria-label="${a(this.ariaLabel)}"
|
|
25
|
+
aria-labelledby="${a(this.ariaLabelledBy)}"
|
|
26
|
+
aria-describedby="${a(this.ariaDescribedBy)}"
|
|
28
27
|
?disabled="${this.disabled}"
|
|
29
28
|
.indeterminate="${this.indeterminate}"
|
|
30
29
|
?checked="${this.checked}"
|
|
31
30
|
@change="${this.handleChange}"
|
|
32
|
-
@focus="${this.handleFocus}"
|
|
33
|
-
@blur="${this.handleBlur}"
|
|
34
31
|
/>
|
|
35
32
|
<div class="c2-checkbox__background">
|
|
36
33
|
<slot name="checkmark">
|
|
@@ -48,10 +45,8 @@ let e = class extends k {
|
|
|
48
45
|
</div>
|
|
49
46
|
`;
|
|
50
47
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
renderStateLayer() {
|
|
54
|
-
return s``;
|
|
48
|
+
update(o) {
|
|
49
|
+
o.has("checked") && this.formElement && (this.formElement.checked = this.checked), super.update(o);
|
|
55
50
|
}
|
|
56
51
|
handleChange() {
|
|
57
52
|
this.checked = this.formElement.checked, this.indeterminate = this.formElement.indeterminate, this.dispatchEvent(
|
|
@@ -61,43 +56,34 @@ let e = class extends k {
|
|
|
61
56
|
})
|
|
62
57
|
);
|
|
63
58
|
}
|
|
64
|
-
handleFocus() {
|
|
65
|
-
this.showFocusRing = !0;
|
|
66
|
-
}
|
|
67
|
-
handleBlur() {
|
|
68
|
-
this.showFocusRing = !1;
|
|
69
|
-
}
|
|
70
59
|
};
|
|
71
|
-
e.styles =
|
|
60
|
+
e.styles = k(u);
|
|
72
61
|
c([
|
|
73
62
|
x("input")
|
|
74
63
|
], e.prototype, "formElement", 2);
|
|
75
64
|
c([
|
|
76
|
-
|
|
65
|
+
r({ type: Boolean, reflect: !0 })
|
|
77
66
|
], e.prototype, "checked", 2);
|
|
78
67
|
c([
|
|
79
|
-
|
|
68
|
+
r({ type: Boolean, reflect: !0 })
|
|
80
69
|
], e.prototype, "indeterminate", 2);
|
|
81
70
|
c([
|
|
82
|
-
|
|
71
|
+
r({ type: Boolean, reflect: !0 })
|
|
83
72
|
], e.prototype, "disabled", 2);
|
|
84
73
|
c([
|
|
85
|
-
|
|
74
|
+
r({ type: String })
|
|
86
75
|
], e.prototype, "name", 2);
|
|
87
76
|
c([
|
|
88
|
-
|
|
77
|
+
r({ type: String, attribute: "aria-label" })
|
|
89
78
|
], e.prototype, "ariaLabel", 2);
|
|
90
79
|
c([
|
|
91
|
-
|
|
80
|
+
r({ type: String, attribute: "aria-labelledby" })
|
|
92
81
|
], e.prototype, "ariaLabelledBy", 2);
|
|
93
82
|
c([
|
|
94
|
-
|
|
83
|
+
r({ type: String, attribute: "aria-describedby" })
|
|
95
84
|
], e.prototype, "ariaDescribedBy", 2);
|
|
96
|
-
c([
|
|
97
|
-
p()
|
|
98
|
-
], e.prototype, "showFocusRing", 2);
|
|
99
85
|
e = c([
|
|
100
|
-
|
|
86
|
+
p("c2-checkbox")
|
|
101
87
|
], e);
|
|
102
88
|
export {
|
|
103
89
|
e as Checkbox
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c2n/checkbox",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/checkbox.js",
|
|
6
6
|
"exports": {
|
|
@@ -18,8 +18,13 @@
|
|
|
18
18
|
],
|
|
19
19
|
"author": "code2nguyen@gmail.com",
|
|
20
20
|
"publishConfig": {
|
|
21
|
+
"registry": "https://registry.npmjs.org",
|
|
21
22
|
"access": "public"
|
|
22
23
|
},
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "https://github.com/code2nguyen/web-components.git"
|
|
27
|
+
},
|
|
23
28
|
"scripts": {
|
|
24
29
|
"lint": "npm run lint:lit-analyzer && npm run lint:eslint",
|
|
25
30
|
"lint:eslint": "eslint 'src/**/*.ts'",
|
|
@@ -28,7 +33,7 @@
|
|
|
28
33
|
"build": "tsc && vite build"
|
|
29
34
|
},
|
|
30
35
|
"dependencies": {
|
|
31
|
-
"@c2n/wc-utils": "0.0.
|
|
36
|
+
"@c2n/wc-utils": "0.0.3",
|
|
32
37
|
"lit": "2.3.0"
|
|
33
38
|
},
|
|
34
39
|
"devDependencies": {
|
|
@@ -102,5 +107,5 @@
|
|
|
102
107
|
}
|
|
103
108
|
]
|
|
104
109
|
},
|
|
105
|
-
"gitHead": "
|
|
110
|
+
"gitHead": "da28e508ee15f842709ffa98937b20fef02a9e1d"
|
|
106
111
|
}
|
package/types/src/checkbox.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
2
|
/**
|
|
3
3
|
* An example element.
|
|
4
4
|
*
|
|
@@ -14,13 +14,9 @@ export declare class Checkbox extends LitElement {
|
|
|
14
14
|
ariaLabel: string;
|
|
15
15
|
ariaLabelledBy: undefined | string;
|
|
16
16
|
ariaDescribedBy: undefined | string;
|
|
17
|
-
protected showFocusRing: boolean;
|
|
18
17
|
render(): import("lit-html").TemplateResult<1>;
|
|
19
|
-
protected
|
|
20
|
-
protected renderStateLayer(): import("lit-html").TemplateResult<1>;
|
|
18
|
+
protected update(changedProperties: PropertyValues): void;
|
|
21
19
|
protected handleChange(): void;
|
|
22
|
-
protected handleFocus(): void;
|
|
23
|
-
protected handleBlur(): void;
|
|
24
20
|
static styles: import("lit").CSSResult;
|
|
25
21
|
}
|
|
26
22
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,cAAc,EAAE,MAAM,KAAK,CAAA;AAIjE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtB,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAEZ,OAAO,UAAQ;IAEf,aAAa,UAAQ;IAErB,QAAQ,UAAQ;IAEhC,IAAI,SAAK;IAG5B,SAAS,EAAG,MAAM,CAAA;IAG3B,cAAc,EAAG,SAAS,GAAG,MAAM,CAAA;IAGnC,eAAe,EAAG,SAAS,GAAG,MAAM,CAAA;IAE3B,MAAM;cAkCI,MAAM,CAAC,iBAAiB,EAAE,cAAc;IAO3D,SAAS,CAAC,YAAY;IAWtB,OAAgB,MAAM,0BAAoB;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAA;KACxB;CACF"}
|