@nuralyui/checkbox 0.0.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/checkbox.component.d.ts +12 -0
- package/checkbox.component.d.ts.map +1 -0
- package/checkbox.component.js +55 -0
- package/checkbox.component.js.map +1 -0
- package/checkbox.style.d.ts +2 -0
- package/checkbox.style.d.ts.map +1 -0
- package/checkbox.style.js +95 -0
- package/checkbox.style.js.map +1 -0
- package/checkbox.types.d.ts +6 -0
- package/checkbox.types.d.ts.map +1 -0
- package/checkbox.types.js +2 -0
- package/checkbox.types.js.map +1 -0
- package/checkbox.variables.d.ts +2 -0
- package/checkbox.variables.d.ts.map +1 -0
- package/checkbox.variables.js +49 -0
- package/checkbox.variables.js.map +1 -0
- package/demo/checkbox-demo.d.ts +5 -0
- package/demo/checkbox-demo.d.ts.map +1 -0
- package/demo/checkbox-demo.js +53 -0
- package/demo/checkbox-demo.js.map +1 -0
- package/index.d.ts +2 -0
- package/index.d.ts.map +1 -0
- package/index.js +2 -0
- package/index.js.map +1 -0
- package/package.json +15 -0
- package/test/checkbox_test.d.ts +2 -0
- package/test/checkbox_test.d.ts.map +1 -0
- package/test/checkbox_test.js +88 -0
- package/test/checkbox_test.js.map +1 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { CheckboxSize } from './checkbox.types.js';
|
|
3
|
+
export declare class HyCheckBox extends LitElement {
|
|
4
|
+
static styles: import("lit").CSSResult[];
|
|
5
|
+
checked: boolean;
|
|
6
|
+
disabled: boolean;
|
|
7
|
+
indeterminate: boolean;
|
|
8
|
+
size: CheckboxSize;
|
|
9
|
+
render(): import("lit").TemplateResult<1>;
|
|
10
|
+
onChange(): void;
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=checkbox.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,YAAY,EAAC,MAAM,qBAAqB,CAAC;AAEjD,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAU;IAEhC,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,aAAa,UAAS;IAGtB,IAAI,EAAE,YAAY,CAAuB;IAEhC,MAAM;IAOf,QAAQ;CAeT"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from 'lit';
|
|
8
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
+
import { styles } from './checkbox.style.js';
|
|
10
|
+
let HyCheckBox = class HyCheckBox extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.checked = false;
|
|
14
|
+
this.disabled = false;
|
|
15
|
+
this.indeterminate = false;
|
|
16
|
+
this.size = "medium" /* CheckboxSize.Medium */;
|
|
17
|
+
}
|
|
18
|
+
render() {
|
|
19
|
+
return html `
|
|
20
|
+
<input type="checkbox" .checked=${this.checked} .disabled=${this.disabled} @change=${this.onChange} />
|
|
21
|
+
<slot></slot>
|
|
22
|
+
`;
|
|
23
|
+
}
|
|
24
|
+
onChange() {
|
|
25
|
+
if (this.indeterminate) {
|
|
26
|
+
this.indeterminate = false;
|
|
27
|
+
}
|
|
28
|
+
this.checked = !this.checked;
|
|
29
|
+
this.dispatchEvent(new CustomEvent('checkbox-changed', {
|
|
30
|
+
bubbles: true,
|
|
31
|
+
composed: true,
|
|
32
|
+
detail: {
|
|
33
|
+
value: this.checked,
|
|
34
|
+
},
|
|
35
|
+
}));
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
HyCheckBox.styles = styles;
|
|
39
|
+
__decorate([
|
|
40
|
+
property({ type: Boolean, reflect: true })
|
|
41
|
+
], HyCheckBox.prototype, "checked", void 0);
|
|
42
|
+
__decorate([
|
|
43
|
+
property({ type: Boolean, reflect: true })
|
|
44
|
+
], HyCheckBox.prototype, "disabled", void 0);
|
|
45
|
+
__decorate([
|
|
46
|
+
property({ type: Boolean, reflect: true })
|
|
47
|
+
], HyCheckBox.prototype, "indeterminate", void 0);
|
|
48
|
+
__decorate([
|
|
49
|
+
property({ reflect: true })
|
|
50
|
+
], HyCheckBox.prototype, "size", void 0);
|
|
51
|
+
HyCheckBox = __decorate([
|
|
52
|
+
customElement('hy-checkbox')
|
|
53
|
+
], HyCheckBox);
|
|
54
|
+
export { HyCheckBox };
|
|
55
|
+
//# sourceMappingURL=checkbox.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAI3C,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAGE,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,kBAAa,GAAG,KAAK,CAAC;QAGtB,SAAI,sCAAqC;IAwB3C,CAAC;IAtBU,MAAM;QACb,OAAO,IAAI,CAAA;wCACyB,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ,YAAY,IAAI,CAAC,QAAQ;;KAEnG,CAAC;IACJ,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,OAAO;aACpB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;CACF,CAAA;AAnCiB,iBAAM,GAAG,MAAO,CAAA;AAEhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;2CACzB;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CACxB;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACnB;AAGtB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;wCACe;AAZ9B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAoCtB;SApCY,UAAU","sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styles} from './checkbox.style.js';\nimport {CheckboxSize} from './checkbox.types.js';\n\n@customElement('hy-checkbox')\nexport class HyCheckBox extends LitElement {\n static override styles = styles;\n @property({type: Boolean, reflect: true})\n checked = false;\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n @property({type: Boolean, reflect: true})\n indeterminate = false;\n\n @property({reflect: true})\n size: CheckboxSize = CheckboxSize.Medium;\n\n override render() {\n return html`\n <input type=\"checkbox\" .checked=${this.checked} .disabled=${this.disabled} @change=${this.onChange} />\n <slot></slot>\n `;\n }\n\n onChange() {\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n this.checked = !this.checked;\n this.dispatchEvent(\n new CustomEvent('checkbox-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.checked,\n },\n })\n );\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.style.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.ts"],"names":[],"mappings":"AA8FA,eAAO,MAAM,MAAM,2BAAmC,CAAC"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
import { styleVariables } from './checkbox.variables.js';
|
|
3
|
+
const checkBoxStyles = css `
|
|
4
|
+
:host {
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
flex-wrap: wrap;
|
|
8
|
+
gap: var(--hybrid-checkbox-gap);
|
|
9
|
+
font-family: var(--hybrid-checkbox-font-family);
|
|
10
|
+
color:var(--hybrid-checkbox-color)
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:host(:not([checked]):not([indeterminate]):not([disabled])) input {
|
|
14
|
+
background-color: var(--hybrid-checkbox-empty-background-color);
|
|
15
|
+
border: var(--hybrid-checkbox-empty-border);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
:host(:not([disabled])[checked]) input,
|
|
19
|
+
:host(:not([disabled])[indeterminate]) input {
|
|
20
|
+
background-color: var(--hybrid-checkbox-filled-background-color);
|
|
21
|
+
}
|
|
22
|
+
:host([disabled]) {
|
|
23
|
+
color: var(--hybrid-checkbox-disabled-text-color);
|
|
24
|
+
}
|
|
25
|
+
:host([disabled]) input {
|
|
26
|
+
background-color: var(--hybrid-checkbox-disabled-background-color);
|
|
27
|
+
cursor: not-allowed;
|
|
28
|
+
}
|
|
29
|
+
input {
|
|
30
|
+
appearance: none;
|
|
31
|
+
width: var(--hybrid-checkbox-medium-width);
|
|
32
|
+
height: var(--hybrid-checkbox-medium-height);
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
position: relative;
|
|
35
|
+
border-radius: var(--hybrid-checkbox-border-radius);
|
|
36
|
+
}
|
|
37
|
+
input:after {
|
|
38
|
+
color: var(--hybrid-checkbox-symbol-color);
|
|
39
|
+
position: absolute;
|
|
40
|
+
left: 50%;
|
|
41
|
+
top: 50%;
|
|
42
|
+
transform: translate(-50%, -51%);
|
|
43
|
+
}
|
|
44
|
+
input:focus {
|
|
45
|
+
border: var(--hybrid-checkbox-focus-border);
|
|
46
|
+
outline: var(--hybrid-checkbox-focus-outline);
|
|
47
|
+
}
|
|
48
|
+
:host([size='large']) input {
|
|
49
|
+
width: var(--hybrid-checkbox-large-width);
|
|
50
|
+
height: var(--hybrid-checkbox-large-height);
|
|
51
|
+
}
|
|
52
|
+
:host([size='small']) input {
|
|
53
|
+
width: var(--hybrid-checkbox-small-width);
|
|
54
|
+
height: var(--hybrid-checkbox-small-height);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
:host([indeterminate][size='medium']) input:after {
|
|
58
|
+
font-size: var(--hybrid-checkbox-medium-indeterminate-size);
|
|
59
|
+
}
|
|
60
|
+
:host([indeterminate][size='large']) input:after {
|
|
61
|
+
font-size: var(--hybrid-checkbox-large-indeterminate-size);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:host([indeterminate][size='small']) input:after {
|
|
65
|
+
font-size: var(--hybrid-checkbox-small-indeterminate-size);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
:host([checked]) input:after {
|
|
69
|
+
border: solid;
|
|
70
|
+
border-width: 0 2px 2px 0;
|
|
71
|
+
transform: translate(-50%, -51%) rotate(45deg);
|
|
72
|
+
content: '';
|
|
73
|
+
}
|
|
74
|
+
:host([checked][size='small']) input:after {
|
|
75
|
+
width: var(--hybrid-checkbox-small-checked-width);
|
|
76
|
+
height: var(--hybrid-checkbox-small-checked-height);
|
|
77
|
+
}
|
|
78
|
+
:host([checked][size='large']) input:after {
|
|
79
|
+
width: var(--hybrid-checkbox-large-checked-width);
|
|
80
|
+
height: var(--hybrid-checkbox-large-checked-height);
|
|
81
|
+
}
|
|
82
|
+
:host([checked][size='medium']) input:after {
|
|
83
|
+
width: var(--hybrid-checkbox-medium-checked-width);
|
|
84
|
+
height: var(--hybrid-checkbox-medium-checked-height);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
:host([indeterminate]:not([checked])) input:after {
|
|
88
|
+
content: '-';
|
|
89
|
+
}
|
|
90
|
+
:host(:not([checked]):not([indeterminate])) input:after {
|
|
91
|
+
content: '';
|
|
92
|
+
}
|
|
93
|
+
`;
|
|
94
|
+
export const styles = [checkBoxStyles, styleVariables];
|
|
95
|
+
//# sourceMappingURL=checkbox.style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.style.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './checkbox.variables.js';\n\nconst checkBoxStyles = css`\n :host {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--hybrid-checkbox-gap);\n font-family: var(--hybrid-checkbox-font-family);\n color:var(--hybrid-checkbox-color)\n }\n\n :host(:not([checked]):not([indeterminate]):not([disabled])) input {\n background-color: var(--hybrid-checkbox-empty-background-color);\n border: var(--hybrid-checkbox-empty-border);\n }\n\n :host(:not([disabled])[checked]) input,\n :host(:not([disabled])[indeterminate]) input {\n background-color: var(--hybrid-checkbox-filled-background-color);\n }\n :host([disabled]) {\n color: var(--hybrid-checkbox-disabled-text-color);\n }\n :host([disabled]) input {\n background-color: var(--hybrid-checkbox-disabled-background-color);\n cursor: not-allowed;\n }\n input {\n appearance: none;\n width: var(--hybrid-checkbox-medium-width);\n height: var(--hybrid-checkbox-medium-height);\n cursor: pointer;\n position: relative;\n border-radius: var(--hybrid-checkbox-border-radius);\n }\n input:after {\n color: var(--hybrid-checkbox-symbol-color);\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -51%);\n }\n input:focus {\n border: var(--hybrid-checkbox-focus-border);\n outline: var(--hybrid-checkbox-focus-outline);\n }\n :host([size='large']) input {\n width: var(--hybrid-checkbox-large-width);\n height: var(--hybrid-checkbox-large-height);\n }\n :host([size='small']) input {\n width: var(--hybrid-checkbox-small-width);\n height: var(--hybrid-checkbox-small-height);\n }\n\n :host([indeterminate][size='medium']) input:after {\n font-size: var(--hybrid-checkbox-medium-indeterminate-size);\n }\n :host([indeterminate][size='large']) input:after {\n font-size: var(--hybrid-checkbox-large-indeterminate-size);\n }\n\n :host([indeterminate][size='small']) input:after {\n font-size: var(--hybrid-checkbox-small-indeterminate-size);\n }\n\n :host([checked]) input:after {\n border: solid;\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -51%) rotate(45deg);\n content: '';\n }\n :host([checked][size='small']) input:after {\n width: var(--hybrid-checkbox-small-checked-width);\n height: var(--hybrid-checkbox-small-checked-height);\n }\n :host([checked][size='large']) input:after {\n width: var(--hybrid-checkbox-large-checked-width);\n height: var(--hybrid-checkbox-large-checked-height);\n }\n :host([checked][size='medium']) input:after {\n width: var(--hybrid-checkbox-medium-checked-width);\n height: var(--hybrid-checkbox-medium-checked-height);\n }\n\n :host([indeterminate]:not([checked])) input:after {\n content: '-';\n }\n :host(:not([checked]):not([indeterminate])) input:after {\n content: '';\n }\n`;\nexport const styles = [checkBoxStyles, styleVariables];\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,YAAY;IAC5B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.types.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["export const enum CheckboxSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.variables.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBA8C1B,CAAC"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styleVariables = css `
|
|
3
|
+
:host {
|
|
4
|
+
--hybrid-checkbox-filled-background-color: #161616;
|
|
5
|
+
--hybrid-checkbox-color:#000000;
|
|
6
|
+
--hybrid-checkbox-empty-background-color: #ffffff;
|
|
7
|
+
--hybrid-checkbox-disabled-background-color: #c6c6c6;
|
|
8
|
+
--hybrid-checkbox-disabled-text-color: #c6c6c6;
|
|
9
|
+
--hybrid-checkbox-empty-border: 1px solid #161616;
|
|
10
|
+
--hybrid-checkbox-symbol-color: #ffffff;
|
|
11
|
+
--hybrid-checkbox-focus-border: 2px solid #ffffff;
|
|
12
|
+
--hybrid-checkbox-focus-outline: 2px solid #0f62fe;
|
|
13
|
+
--hybrid-checkbox-font-family: IBM Plex Sans;
|
|
14
|
+
--hybrid-checkbox-border-radius: 1px;
|
|
15
|
+
--hybrid-checkbox-gap: 5px;
|
|
16
|
+
|
|
17
|
+
--hybrid-checkbox-medium-width: 20px;
|
|
18
|
+
--hybrid-checkbox-medium-height: 20px;
|
|
19
|
+
--hybrid-checkbox-small-width: 15px;
|
|
20
|
+
--hybrid-checkbox-small-height: 15px;
|
|
21
|
+
--hybrid-checkbox-large-width: 25px;
|
|
22
|
+
--hybrid-checkbox-large-height: 25px;
|
|
23
|
+
|
|
24
|
+
--hybrid-checkbox-small-indeterminate-size: 10px;
|
|
25
|
+
--hybrid-checkbox-large-indeterminate-size: 18px;
|
|
26
|
+
--hybrid-checkbox-medium-indeterminate-size: 13px;
|
|
27
|
+
|
|
28
|
+
--hybrid-checkbox-small-checked-width: 2px;
|
|
29
|
+
--hybrid-checkbox-small-checked-height: 7px;
|
|
30
|
+
--hybrid-checkbox-medium-checked-width: 3px;
|
|
31
|
+
--hybrid-checkbox-medium-checked-height: 9px;
|
|
32
|
+
--hybrid-checkbox-large-checked-width: 4px;
|
|
33
|
+
--hybrid-checkbox-large-checked-height: 10px;
|
|
34
|
+
}
|
|
35
|
+
@media (prefers-color-scheme: dark) {
|
|
36
|
+
:host {
|
|
37
|
+
--hybrid-checkbox-empty-border: 1px solid #ffffff;
|
|
38
|
+
--hybrid-checkbox-empty-background-color: #161616;
|
|
39
|
+
--hybrid-checkbox-filled-background-color: #ffffff;
|
|
40
|
+
--hybrid-checkbox-symbol-color: #161616;
|
|
41
|
+
--hybrid-checkbox-focus-outline: 2px solid #ffffff;
|
|
42
|
+
--hybrid-checkbox-focus-border: 2px solid #161616;
|
|
43
|
+
--hybrid-checkbox-disabled-background-color: #6f6f6f;
|
|
44
|
+
--hybrid-checkbox-disabled-text-color: #6f6f6f;
|
|
45
|
+
--hybrid-checkbox-color:#ffffff;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
`;
|
|
49
|
+
//# sourceMappingURL=checkbox.variables.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.variables.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ChC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n --hybrid-checkbox-filled-background-color: #161616;\n --hybrid-checkbox-color:#000000;\n --hybrid-checkbox-empty-background-color: #ffffff;\n --hybrid-checkbox-disabled-background-color: #c6c6c6;\n --hybrid-checkbox-disabled-text-color: #c6c6c6;\n --hybrid-checkbox-empty-border: 1px solid #161616;\n --hybrid-checkbox-symbol-color: #ffffff;\n --hybrid-checkbox-focus-border: 2px solid #ffffff;\n --hybrid-checkbox-focus-outline: 2px solid #0f62fe;\n --hybrid-checkbox-font-family: IBM Plex Sans;\n --hybrid-checkbox-border-radius: 1px;\n --hybrid-checkbox-gap: 5px;\n\n --hybrid-checkbox-medium-width: 20px;\n --hybrid-checkbox-medium-height: 20px;\n --hybrid-checkbox-small-width: 15px;\n --hybrid-checkbox-small-height: 15px;\n --hybrid-checkbox-large-width: 25px;\n --hybrid-checkbox-large-height: 25px;\n\n --hybrid-checkbox-small-indeterminate-size: 10px;\n --hybrid-checkbox-large-indeterminate-size: 18px;\n --hybrid-checkbox-medium-indeterminate-size: 13px;\n\n --hybrid-checkbox-small-checked-width: 2px;\n --hybrid-checkbox-small-checked-height: 7px;\n --hybrid-checkbox-medium-checked-width: 3px;\n --hybrid-checkbox-medium-checked-height: 9px;\n --hybrid-checkbox-large-checked-width: 4px;\n --hybrid-checkbox-large-checked-height: 10px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-checkbox-empty-border: 1px solid #ffffff;\n --hybrid-checkbox-empty-background-color: #161616;\n --hybrid-checkbox-filled-background-color: #ffffff;\n --hybrid-checkbox-symbol-color: #161616;\n --hybrid-checkbox-focus-outline: 2px solid #ffffff;\n --hybrid-checkbox-focus-border: 2px solid #161616;\n --hybrid-checkbox-disabled-background-color: #6f6f6f;\n --hybrid-checkbox-disabled-text-color: #6f6f6f;\n --hybrid-checkbox-color:#ffffff;\n }\n }\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/demo/checkbox-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,qBACa,YAAa,SAAQ,UAAU;IACjC,MAAM;CAsChB"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from 'lit';
|
|
8
|
+
import { customElement } from 'lit/decorators.js';
|
|
9
|
+
let CheckBoxDemo = class CheckBoxDemo extends LitElement {
|
|
10
|
+
render() {
|
|
11
|
+
return html `
|
|
12
|
+
<h3>Default checkbox</h3>
|
|
13
|
+
|
|
14
|
+
<hy-checkbox indeterminate>Default: indeterminate</hy-checkbox>
|
|
15
|
+
<hy-checkbox checked>Default: checked</hy-checkbox>
|
|
16
|
+
<hy-checkbox>Default (unchecked)</hy-checkbox>
|
|
17
|
+
<hy-checkbox disabled>Checkbox disabled</hy-checkbox>
|
|
18
|
+
<hy-checkbox disabled indeterminate>Checkbox disabled and indeterminate</hy-checkbox>
|
|
19
|
+
<hy-checkbox disabled checked>Checkbox disabled and checked</hy-checkbox>
|
|
20
|
+
<hr />
|
|
21
|
+
<h3>Sizes with check</h3>
|
|
22
|
+
|
|
23
|
+
<hy-checkbox checked>Medium checkbox (default)</hy-checkbox>
|
|
24
|
+
<hy-checkbox size="small" checked>Small checkbox</hy-checkbox>
|
|
25
|
+
<hy-checkbox size="large" checked>large checkbox</hy-checkbox>
|
|
26
|
+
<hy-checkbox checked disabled>Medium checkbox (default)</hy-checkbox>
|
|
27
|
+
<hy-checkbox size="small" checked disabled>Small checkbox</hy-checkbox>
|
|
28
|
+
<hy-checkbox size="large" checked disabled>large checkbox</hy-checkbox>
|
|
29
|
+
<hr />
|
|
30
|
+
<h3>Sizes with indeterminate</h3>
|
|
31
|
+
<hy-checkbox indeterminate>Medium checkbox (default)</hy-checkbox>
|
|
32
|
+
<hy-checkbox size="small" indeterminate>Small checkbox</hy-checkbox>
|
|
33
|
+
<hy-checkbox size="large" indeterminate>large checkbox</hy-checkbox>
|
|
34
|
+
<hy-checkbox indeterminate disabled>Medium checkbox (default)</hy-checkbox>
|
|
35
|
+
<hy-checkbox size="small" indeterminate disabled>Small checkbox</hy-checkbox>
|
|
36
|
+
<hy-checkbox size="large" indeterminate disabled>large checkbox</hy-checkbox>
|
|
37
|
+
<hr />
|
|
38
|
+
<h3>Sizes with unchecked</h3>
|
|
39
|
+
|
|
40
|
+
<hy-checkbox>Medium checkbox (default)</hy-checkbox>
|
|
41
|
+
<hy-checkbox size="small">Small checkbox</hy-checkbox>
|
|
42
|
+
<hy-checkbox size="large">large checkbox</hy-checkbox>
|
|
43
|
+
<hy-checkbox disabled>Medium checkbox (default)</hy-checkbox>
|
|
44
|
+
<hy-checkbox size="small" disabled>Small checkbox</hy-checkbox>
|
|
45
|
+
<hy-checkbox size="large" disabled>large checkbox</hy-checkbox>
|
|
46
|
+
`;
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
CheckBoxDemo = __decorate([
|
|
50
|
+
customElement('hy-checkbox-demo')
|
|
51
|
+
], CheckBoxDemo);
|
|
52
|
+
export { CheckBoxDemo };
|
|
53
|
+
//# sourceMappingURL=checkbox-demo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-demo.js","sourceRoot":"","sources":["../../../../src/components/checkbox/demo/checkbox-demo.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;IACjC,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCV,CAAC;IACJ,CAAC;CACF,CAAA;AAvCY,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CAuCxB;SAvCY,YAAY","sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\n@customElement('hy-checkbox-demo')\nexport class CheckBoxDemo extends LitElement {\n override render() {\n return html`\n <h3>Default checkbox</h3>\n\n <hy-checkbox indeterminate>Default: indeterminate</hy-checkbox>\n <hy-checkbox checked>Default: checked</hy-checkbox>\n <hy-checkbox>Default (unchecked)</hy-checkbox>\n <hy-checkbox disabled>Checkbox disabled</hy-checkbox>\n <hy-checkbox disabled indeterminate>Checkbox disabled and indeterminate</hy-checkbox>\n <hy-checkbox disabled checked>Checkbox disabled and checked</hy-checkbox>\n <hr />\n <h3>Sizes with check</h3>\n\n <hy-checkbox checked>Medium checkbox (default)</hy-checkbox>\n <hy-checkbox size=\"small\" checked>Small checkbox</hy-checkbox>\n <hy-checkbox size=\"large\" checked>large checkbox</hy-checkbox>\n <hy-checkbox checked disabled>Medium checkbox (default)</hy-checkbox>\n <hy-checkbox size=\"small\" checked disabled>Small checkbox</hy-checkbox>\n <hy-checkbox size=\"large\" checked disabled>large checkbox</hy-checkbox>\n <hr />\n <h3>Sizes with indeterminate</h3>\n <hy-checkbox indeterminate>Medium checkbox (default)</hy-checkbox>\n <hy-checkbox size=\"small\" indeterminate>Small checkbox</hy-checkbox>\n <hy-checkbox size=\"large\" indeterminate>large checkbox</hy-checkbox>\n <hy-checkbox indeterminate disabled>Medium checkbox (default)</hy-checkbox>\n <hy-checkbox size=\"small\" indeterminate disabled>Small checkbox</hy-checkbox>\n <hy-checkbox size=\"large\" indeterminate disabled>large checkbox</hy-checkbox>\n <hr />\n <h3>Sizes with unchecked</h3>\n\n <hy-checkbox>Medium checkbox (default)</hy-checkbox>\n <hy-checkbox size=\"small\">Small checkbox</hy-checkbox>\n <hy-checkbox size=\"large\">large checkbox</hy-checkbox>\n <hy-checkbox disabled>Medium checkbox (default)</hy-checkbox>\n <hy-checkbox size=\"small\" disabled>Small checkbox</hy-checkbox>\n <hy-checkbox size=\"large\" disabled>large checkbox</hy-checkbox>\n `;\n }\n}\n"]}
|
package/index.d.ts
ADDED
package/index.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA"}
|
package/index.js
ADDED
package/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA","sourcesContent":["export * from './checkbox.component.js'"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nuralyui/checkbox",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"dependencies": {
|
|
8
|
+
"dayjs": "^1.11.7"
|
|
9
|
+
},
|
|
10
|
+
"scripts": {
|
|
11
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
12
|
+
},
|
|
13
|
+
"author": "Labidi Aymen",
|
|
14
|
+
"license": "ISC"
|
|
15
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox_test.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/test/checkbox_test.ts"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC"}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { html, fixture, expect } from '@open-wc/testing';
|
|
11
|
+
import '../checkbox.component';
|
|
12
|
+
suite('hy-checkbox', () => {
|
|
13
|
+
test('init checkbox', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
14
|
+
const el = yield fixture(html `<hy-checkbox></hy-checkbox>`);
|
|
15
|
+
const input = el.shadowRoot.querySelector('input[type="checkbox"]');
|
|
16
|
+
const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
|
|
17
|
+
expect(el.disabled).to.be.false;
|
|
18
|
+
expect(el.indeterminate).to.be.false;
|
|
19
|
+
expect(el.disabled).to.be.false;
|
|
20
|
+
expect(input).to.exist;
|
|
21
|
+
expect(inputContent).to.equal('""');
|
|
22
|
+
}));
|
|
23
|
+
test('should reflect the checked attribute', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
24
|
+
const el = yield fixture(html `<hy-checkbox checked></hy-checkbox>`);
|
|
25
|
+
const input = el.shadowRoot.querySelector('input');
|
|
26
|
+
const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
|
|
27
|
+
expect(el.checked).to.be.true;
|
|
28
|
+
expect(input.checked).to.be.true;
|
|
29
|
+
expect(inputContent).to.not.be.empty;
|
|
30
|
+
expect(inputContent).to.contain('✔');
|
|
31
|
+
expect(inputContent).to.not.contain('-');
|
|
32
|
+
}));
|
|
33
|
+
test('should reflect the disabled attribute', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
34
|
+
const el = yield fixture(html `<hy-checkbox disabled></hy-checkbox>`);
|
|
35
|
+
const input = el.shadowRoot.querySelector('input');
|
|
36
|
+
expect(el.disabled).to.be.true;
|
|
37
|
+
expect(input.disabled).to.be.true;
|
|
38
|
+
}));
|
|
39
|
+
test('should reflect indeterminate attribubute', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
40
|
+
const el = yield fixture(html `<hy-checkbox indeterminate></hy-checkbox>`);
|
|
41
|
+
const input = el.shadowRoot.querySelector('input');
|
|
42
|
+
const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
|
|
43
|
+
expect(el.indeterminate).to.be.true;
|
|
44
|
+
expect(inputContent).to.not.be.empty;
|
|
45
|
+
expect(inputContent).to.contain('-');
|
|
46
|
+
expect(inputContent).to.not.contain('✔');
|
|
47
|
+
}));
|
|
48
|
+
test('should toggle checked state on change', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
49
|
+
const el = yield fixture(html `<hy-checkbox></hy-checkbox>`);
|
|
50
|
+
let input = el.shadowRoot.querySelector('input');
|
|
51
|
+
let inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
|
|
52
|
+
expect(el.checked).to.be.false;
|
|
53
|
+
expect(inputContent).to.equal('""');
|
|
54
|
+
input.click();
|
|
55
|
+
yield el.updateComplete;
|
|
56
|
+
input = el.shadowRoot.querySelector('input');
|
|
57
|
+
inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
|
|
58
|
+
expect(el.checked).to.be.true;
|
|
59
|
+
expect(inputContent).to.contain('✔');
|
|
60
|
+
input.click();
|
|
61
|
+
yield el.updateComplete;
|
|
62
|
+
input = el.shadowRoot.querySelector('input');
|
|
63
|
+
inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
|
|
64
|
+
expect(el.checked).to.be.false;
|
|
65
|
+
expect(inputContent).to.equal('""');
|
|
66
|
+
}));
|
|
67
|
+
test('should dispatch "checkbox-changed" event on change', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
68
|
+
const el = yield fixture(html `<hy-checkbox></hy-checkbox>`);
|
|
69
|
+
const input = el.shadowRoot.querySelector('input');
|
|
70
|
+
let checkboxChangedDispatched = false;
|
|
71
|
+
el.addEventListener('checkbox-changed', () => {
|
|
72
|
+
checkboxChangedDispatched = true;
|
|
73
|
+
});
|
|
74
|
+
input.click();
|
|
75
|
+
expect(checkboxChangedDispatched).to.be.true;
|
|
76
|
+
}));
|
|
77
|
+
test('should not dispatch "checkbox-changed" event on change when checkbox is disabled', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
78
|
+
const el = yield fixture(html `<hy-checkbox disabled></hy-checkbox>`);
|
|
79
|
+
const input = el.shadowRoot.querySelector('input');
|
|
80
|
+
let checkboxChangedDispatched = false;
|
|
81
|
+
el.addEventListener('checkbox-changed', () => {
|
|
82
|
+
checkboxChangedDispatched = true;
|
|
83
|
+
});
|
|
84
|
+
input.click();
|
|
85
|
+
expect(checkboxChangedDispatched).to.be.false;
|
|
86
|
+
}));
|
|
87
|
+
});
|
|
88
|
+
//# sourceMappingURL=checkbox_test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox_test.js","sourceRoot":"","sources":["../../../../src/components/checkbox/test/checkbox_test.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, fixture, expect} from '@open-wc/testing';\nimport '../checkbox.component';\nimport {HyCheckBox} from '../checkbox.component';\n\nsuite('hy-checkbox', () => {\n test('init checkbox', async () => {\n const el: HyCheckBox = await fixture(html`<hy-checkbox></hy-checkbox>`)!;\n const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')!;\n const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');\n expect(el.disabled).to.be.false;\n expect(el.indeterminate).to.be.false;\n expect(el.disabled).to.be.false;\n expect(input).to.exist;\n expect(inputContent).to.equal('\"\"');\n });\n\n test('should reflect the checked attribute', async () => {\n const el: HyCheckBox = await fixture(html`<hy-checkbox checked></hy-checkbox>`);\n const input: HTMLInputElement = el.shadowRoot!.querySelector('input')!;\n const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');\n expect(el.checked).to.be.true;\n expect(input.checked).to.be.true;\n expect(inputContent).to.not.be.empty;\n expect(inputContent).to.contain('✔');\n expect(inputContent).to.not.contain('-');\n });\n\n test('should reflect the disabled attribute', async () => {\n const el: HyCheckBox = await fixture(html`<hy-checkbox disabled></hy-checkbox>`)!;\n const input: HTMLInputElement = el.shadowRoot!.querySelector('input')!;\n expect(el.disabled).to.be.true;\n expect(input.disabled).to.be.true;\n });\n\n test('should reflect indeterminate attribubute', async () => {\n const el: HyCheckBox = await fixture(html`<hy-checkbox indeterminate></hy-checkbox>`);\n const input: HTMLInputElement = el.shadowRoot!.querySelector('input')!;\n const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');\n\n expect(el.indeterminate).to.be.true;\n expect(inputContent).to.not.be.empty;\n expect(inputContent).to.contain('-');\n expect(inputContent).to.not.contain('✔');\n });\n\n test('should toggle checked state on change', async () => {\n const el: HyCheckBox = await fixture(html`<hy-checkbox></hy-checkbox>`);\n let input: HTMLInputElement = el.shadowRoot!.querySelector('input')!;\n let inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');\n\n expect(el.checked).to.be.false;\n expect(inputContent).to.equal('\"\"');\n\n input.click();\n await el.updateComplete;\n input = el.shadowRoot!.querySelector('input')!;\n inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');\n\n expect(el.checked).to.be.true;\n expect(inputContent).to.contain('✔');\n\n input.click();\n await el.updateComplete;\n input = el.shadowRoot!.querySelector('input')!;\n inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');\n expect(el.checked).to.be.false;\n expect(inputContent).to.equal('\"\"');\n });\n\n test('should dispatch \"checkbox-changed\" event on change', async () => {\n const el: HyCheckBox = await fixture(html`<hy-checkbox></hy-checkbox>`)!;\n const input: HTMLInputElement = el.shadowRoot!.querySelector('input')!;\n let checkboxChangedDispatched = false;\n\n el.addEventListener('checkbox-changed', () => {\n checkboxChangedDispatched = true;\n });\n\n input.click();\n\n expect(checkboxChangedDispatched).to.be.true;\n });\n\n test('should not dispatch \"checkbox-changed\" event on change when checkbox is disabled', async () => {\n const el: HyCheckBox = await fixture(html`<hy-checkbox disabled></hy-checkbox>`)!;\n const input: HTMLInputElement = el.shadowRoot!.querySelector('input')!;\n let checkboxChangedDispatched = false;\n\n el.addEventListener('checkbox-changed', () => {\n checkboxChangedDispatched = true;\n });\n\n input.click();\n\n expect(checkboxChangedDispatched).to.be.false;\n });\n});\n"]}
|