@nuralyui/checkbox 0.0.6 → 0.0.8

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.
Files changed (25) hide show
  1. package/bundle.js +396 -0
  2. package/checkbox.component.d.ts +40 -4
  3. package/checkbox.component.js +100 -32
  4. package/checkbox.component.js.map +1 -1
  5. package/checkbox.style.d.ts +1 -1
  6. package/checkbox.style.js +278 -50
  7. package/checkbox.style.js.map +1 -1
  8. package/package.json +16 -2
  9. package/checkbox.component.d.ts.map +0 -1
  10. package/checkbox.style.d.ts.map +0 -1
  11. package/checkbox.style.variables.d.ts +0 -2
  12. package/checkbox.style.variables.d.ts.map +0 -1
  13. package/checkbox.style.variables.js +0 -54
  14. package/checkbox.style.variables.js.map +0 -1
  15. package/checkbox.types.d.ts.map +0 -1
  16. package/demo/checkbox-demo.d.ts +0 -13
  17. package/demo/checkbox-demo.d.ts.map +0 -1
  18. package/demo/checkbox-demo.js +0 -123
  19. package/demo/checkbox-demo.js.map +0 -1
  20. package/index.d.ts.map +0 -1
  21. package/react.d.ts.map +0 -1
  22. package/test/checkbox_test.d.ts +0 -2
  23. package/test/checkbox_test.d.ts.map +0 -1
  24. package/test/checkbox_test.js +0 -88
  25. package/test/checkbox_test.js.map +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/checkbox",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -11,5 +11,19 @@
11
11
  "test": "echo \"Error: no test specified\" && exit 1"
12
12
  },
13
13
  "author": "Labidi Aymen",
14
- "license": "ISC"
14
+ "license": "ISC",
15
+ "exports": {
16
+ ".": {
17
+ "import": "./index.js"
18
+ },
19
+ "./bundle": {
20
+ "import": "./bundle.js"
21
+ }
22
+ },
23
+ "files": [
24
+ "bundle.js",
25
+ "*.js",
26
+ "*.d.ts",
27
+ "*.js.map"
28
+ ]
15
29
  }
package/checkbox.component.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;;AAGnD,qBACa,iBAAkB,SAAQ,sBAA6B;IAClE,OAAgB,MAAM,4BAAU;IAEhC,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,aAAa,UAAS;IAEtB,IACI,IAAI,IAAI,YAAY,CAEvB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,YAAY,EAQ3B;IACD,OAAO,CAAC,KAAK,CAAqC;IAGlD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEN,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAKpD,OAAO,CAAC,qBAAqB;IAOpB,MAAM;IAqBf,QAAQ,CAAC,KAAK,EAAE,KAAK;CAgBtB"}
package/checkbox.style.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox.style.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.ts"],"names":[],"mappings":"AA8FA,eAAO,MAAM,MAAM,2BAAmC,CAAC"}
package/checkbox.style.variables.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const styleVariables: import("lit").CSSResult;
2
- //# sourceMappingURL=checkbox.style.variables.d.ts.map
package/checkbox.style.variables.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox.style.variables.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAmD1B,CAAC"}
package/checkbox.style.variables.js DELETED
@@ -1,54 +0,0 @@
1
- import { css } from 'lit';
2
- export const styleVariables = css `
3
- :host {
4
- /* Light theme defaults */
5
- --hybrid-checkbox-filled-background-color: #161616;
6
- --hybrid-checkbox-color: #000000;
7
- --hybrid-checkbox-empty-background-color: #ffffff;
8
- --hybrid-checkbox-disabled-background-color: #c6c6c6;
9
- --hybrid-checkbox-disabled-text-color: #c6c6c6;
10
- --hybrid-checkbox-empty-border: 1px solid #161616;
11
- --hybrid-checkbox-symbol-color: #ffffff;
12
- --hybrid-checkbox-focus-border: 2px solid #ffffff;
13
- --hybrid-checkbox-focus-outline: 2px solid #0f62fe;
14
- --hybrid-checkbox-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, SFProLocalRange;
15
- --hybrid-checkbox-border-radius: 1px;
16
- --hybrid-checkbox-gap: 5px;
17
-
18
- /* Size variables */
19
- --hybrid-checkbox-medium-width: 20px;
20
- --hybrid-checkbox-medium-height: 20px;
21
- --hybrid-checkbox-small-width: 15px;
22
- --hybrid-checkbox-small-height: 15px;
23
- --hybrid-checkbox-large-width: 25px;
24
- --hybrid-checkbox-large-height: 25px;
25
-
26
- --hybrid-checkbox-small-indeterminate-size: 10px;
27
- --hybrid-checkbox-large-indeterminate-size: 18px;
28
- --hybrid-checkbox-medium-indeterminate-size: 13px;
29
-
30
- --hybrid-checkbox-small-checked-width: 2px;
31
- --hybrid-checkbox-small-checked-height: 7px;
32
- --hybrid-checkbox-medium-checked-width: 3px;
33
- --hybrid-checkbox-medium-checked-height: 9px;
34
- --hybrid-checkbox-large-checked-width: 4px;
35
- --hybrid-checkbox-large-checked-height: 10px;
36
- }
37
-
38
- /* Dark theme overrides using data-theme attribute */
39
- input[data-theme="dark"] {
40
- --hybrid-checkbox-empty-border: 1px solid #ffffff;
41
- --hybrid-checkbox-empty-background-color: #161616;
42
- --hybrid-checkbox-filled-background-color: #ffffff;
43
- --hybrid-checkbox-symbol-color: #161616;
44
- --hybrid-checkbox-focus-outline: 2px solid #ffffff;
45
- --hybrid-checkbox-focus-border: 2px solid #161616;
46
- --hybrid-checkbox-disabled-background-color: #6f6f6f;
47
- --hybrid-checkbox-disabled-text-color: #6f6f6f;
48
- }
49
-
50
- :host([data-theme="dark"]) {
51
- --hybrid-checkbox-color: #ffffff;
52
- }
53
- `;
54
- //# sourceMappingURL=checkbox.style.variables.js.map
package/checkbox.style.variables.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox.style.variables.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n /* Light theme defaults */\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: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-checkbox-border-radius: 1px;\n --hybrid-checkbox-gap: 5px;\n\n /* Size variables */\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\n /* Dark theme overrides using data-theme attribute */\n input[data-theme=\"dark\"] {\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 }\n\n :host([data-theme=\"dark\"]) {\n --hybrid-checkbox-color: #ffffff;\n }\n`;\n"]}
package/checkbox.types.d.ts.map DELETED
@@ -1 +0,0 @@
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"}
package/demo/checkbox-demo.d.ts DELETED
@@ -1,13 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Nuraly, Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- import { LitElement } from 'lit';
7
- import '../checkbox.component.js';
8
- export declare class CheckBoxDemo extends LitElement {
9
- render(): import("lit").TemplateResult<1>;
10
- handleChange(event: CustomEvent): void;
11
- handleSubmit(event: Event): void;
12
- }
13
- //# sourceMappingURL=checkbox-demo.d.ts.map
package/demo/checkbox-demo.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/demo/checkbox-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,0BAA0B,CAAC;AAElC,qBACa,YAAa,SAAQ,UAAU;IACjC,MAAM;IAkFf,YAAY,CAAC,KAAK,EAAE,WAAW;IAc/B,YAAY,CAAC,KAAK,EAAE,KAAK;CAO1B"}
package/demo/checkbox-demo.js DELETED
@@ -1,123 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Nuraly, Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
7
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
8
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
9
- 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;
10
- return c > 3 && r && Object.defineProperty(target, key, r), r;
11
- };
12
- import { LitElement, html } from 'lit';
13
- import { customElement } from 'lit/decorators.js';
14
- import '../checkbox.component.js';
15
- let CheckBoxDemo = class CheckBoxDemo extends LitElement {
16
- render() {
17
- return html `
18
- <h3>Default checkbox</h3>
19
-
20
- <nr-checkbox indeterminate>Default: indeterminate</nr-checkbox>
21
- <nr-checkbox checked>Default: checked</nr-checkbox>
22
- <nr-checkbox>Default (unchecked)</nr-checkbox>
23
- <nr-checkbox disabled>Checkbox disabled</nr-checkbox>
24
- <nr-checkbox disabled indeterminate>Checkbox disabled and indeterminate</nr-checkbox>
25
- <nr-checkbox disabled checked>Checkbox disabled and checked</nr-checkbox>
26
- <hr />
27
-
28
- <h3>Theme Support</h3>
29
- <p>The checkbox component now supports automatic theme detection and management through the NuralyUIBaseMixin, using data-theme attributes like the button component.</p>
30
- <div data-theme="light" style="padding: 10px; border: 1px solid #ccc; margin: 10px 0; background-color: #ffffff; color: #000000;">
31
- <p>Light theme context (data-theme="light"):</p>
32
- <nr-checkbox checked>Light theme checkbox</nr-checkbox>
33
- <nr-checkbox indeterminate>Light theme indeterminate</nr-checkbox>
34
- <nr-checkbox>Light theme unchecked</nr-checkbox>
35
- <nr-checkbox disabled checked>Light theme disabled</nr-checkbox>
36
- </div>
37
- <div data-theme="dark" style="padding: 10px; border: 1px solid #666; margin: 10px 0; background-color: #2a2a2a; color: white;">
38
- <p>Dark theme context (data-theme="dark"):</p>
39
- <nr-checkbox checked>Dark theme checkbox</nr-checkbox>
40
- <nr-checkbox indeterminate>Dark theme indeterminate</nr-checkbox>
41
- <nr-checkbox>Dark theme unchecked</nr-checkbox>
42
- <nr-checkbox disabled checked>Dark theme disabled</nr-checkbox>
43
- </div>
44
- <hr />
45
-
46
- <h3>Form Integration</h3>
47
- <form @submit=${this.handleSubmit}>
48
- <nr-checkbox name="terms" value="accepted" @nr-change=${this.handleChange}>I accept the terms and conditions</nr-checkbox>
49
- <nr-checkbox name="newsletter" value="subscribed" @nr-change=${this.handleChange}>Subscribe to newsletter</nr-checkbox>
50
- <nr-checkbox name="marketing" value="opted-in" indeterminate @nr-change=${this.handleChange}>Marketing communications (some selected)</nr-checkbox>
51
- <br><br>
52
- <button type="submit">Submit Form</button>
53
- </form>
54
- <hr />
55
-
56
- <h3>Sizes with check</h3>
57
-
58
- <nr-checkbox checked>Medium checkbox (default)</nr-checkbox>
59
- <nr-checkbox size="small" checked>Small checkbox</nr-checkbox>
60
- <nr-checkbox size="large" checked>Large checkbox</nr-checkbox>
61
- <nr-checkbox checked disabled>Medium checkbox (default)</nr-checkbox>
62
- <nr-checkbox size="small" checked disabled>Small checkbox</nr-checkbox>
63
- <nr-checkbox size="large" checked disabled>Large checkbox</nr-checkbox>
64
- <hr />
65
-
66
- <h3>Sizes with indeterminate</h3>
67
- <nr-checkbox indeterminate>Medium checkbox (default)</nr-checkbox>
68
- <nr-checkbox size="small" indeterminate>Small checkbox</nr-checkbox>
69
- <nr-checkbox size="large" indeterminate>Large checkbox</nr-checkbox>
70
- <nr-checkbox indeterminate disabled>Medium checkbox (default)</nr-checkbox>
71
- <nr-checkbox size="small" indeterminate disabled>Small checkbox</nr-checkbox>
72
- <nr-checkbox size="large" indeterminate disabled>Large checkbox</nr-checkbox>
73
- <hr />
74
-
75
- <h3>Sizes with unchecked</h3>
76
-
77
- <nr-checkbox>Medium checkbox (default)</nr-checkbox>
78
- <nr-checkbox size="small">Small checkbox</nr-checkbox>
79
- <nr-checkbox size="large">Large checkbox</nr-checkbox>
80
- <nr-checkbox disabled>Medium checkbox (default)</nr-checkbox>
81
- <nr-checkbox size="small" disabled>Small checkbox</nr-checkbox>
82
- <nr-checkbox size="large" disabled>Large checkbox</nr-checkbox>
83
- <hr />
84
-
85
- <h3>Event Handling Demo</h3>
86
- <nr-checkbox @nr-change=${this.handleChange}>Click me to see event details</nr-checkbox>
87
- <p id="event-output">Event output will appear here...</p>
88
- <hr />
89
-
90
- <h3>Size Validation Demo</h3>
91
- <nr-checkbox size=${'invalid-size'}>This checkbox will use default size (check console for warning)</nr-checkbox>
92
- <nr-checkbox size="small">Valid small size</nr-checkbox>
93
- <nr-checkbox size="medium">Valid medium size</nr-checkbox>
94
- <nr-checkbox size="large">Valid large size</nr-checkbox>
95
- `;
96
- }
97
- handleChange(event) {
98
- var _a;
99
- const target = event.target;
100
- const output = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#event-output');
101
- if (output) {
102
- output.textContent = `Event: nr-change, Checked: ${event.detail.value}, Name: ${target.name || 'N/A'}, Value: ${target.value || 'N/A'}`;
103
- }
104
- console.log('Checkbox changed:', {
105
- checked: event.detail.value,
106
- name: target.name,
107
- value: target.value,
108
- size: target.size
109
- });
110
- }
111
- handleSubmit(event) {
112
- event.preventDefault();
113
- const form = event.target;
114
- const formData = new FormData(form);
115
- console.log('Form submitted:', Object.fromEntries(formData));
116
- alert('Form submitted! Check console for form data.');
117
- }
118
- };
119
- CheckBoxDemo = __decorate([
120
- customElement('nr-checkbox-demo')
121
- ], CheckBoxDemo);
122
- export { CheckBoxDemo };
123
- //# sourceMappingURL=checkbox-demo.js.map
package/demo/checkbox-demo.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox-demo.js","sourceRoot":"","sources":["../../../../src/components/checkbox/demo/checkbox-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,0BAA0B,CAAC;AAGlC,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;IACjC,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA8BO,IAAI,CAAC,YAAY;gEACyB,IAAI,CAAC,YAAY;uEACV,IAAI,CAAC,YAAY;kFACN,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAoCnE,IAAI,CAAC,YAAY;;;;;0BAKvB,cAAqB;;;;KAI1C,CAAC;IACJ,CAAC;IAED,YAAY,CAAC,KAAkB;;QAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAa,CAAC;QACnC,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QAC/D,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,WAAW,GAAG,8BAA8B,KAAK,CAAC,MAAM,CAAC,KAAK,WAAW,MAAM,CAAC,IAAI,IAAI,KAAK,YAAY,MAAM,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC;SACzI;QACD,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE;YAC/B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;YAC3B,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,IAAI,EAAE,MAAM,CAAC,IAAI;SAClB,CAAC,CAAC;IACL,CAAC;IAED,YAAY,CAAC,KAAY;QACvB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC7D,KAAK,CAAC,8CAA8C,CAAC,CAAC;IACxD,CAAC;CACF,CAAA;AAxGY,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CAwGxB;SAxGY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport '../checkbox.component.js';\n\n@customElement('nr-checkbox-demo')\nexport class CheckBoxDemo extends LitElement {\n override render() {\n return html`\n <h3>Default checkbox</h3>\n\n <nr-checkbox indeterminate>Default: indeterminate</nr-checkbox>\n <nr-checkbox checked>Default: checked</nr-checkbox>\n <nr-checkbox>Default (unchecked)</nr-checkbox>\n <nr-checkbox disabled>Checkbox disabled</nr-checkbox>\n <nr-checkbox disabled indeterminate>Checkbox disabled and indeterminate</nr-checkbox>\n <nr-checkbox disabled checked>Checkbox disabled and checked</nr-checkbox>\n <hr />\n\n <h3>Theme Support</h3>\n <p>The checkbox component now supports automatic theme detection and management through the NuralyUIBaseMixin, using data-theme attributes like the button component.</p>\n <div data-theme=\"light\" style=\"padding: 10px; border: 1px solid #ccc; margin: 10px 0; background-color: #ffffff; color: #000000;\">\n <p>Light theme context (data-theme=\"light\"):</p>\n <nr-checkbox checked>Light theme checkbox</nr-checkbox>\n <nr-checkbox indeterminate>Light theme indeterminate</nr-checkbox>\n <nr-checkbox>Light theme unchecked</nr-checkbox>\n <nr-checkbox disabled checked>Light theme disabled</nr-checkbox>\n </div>\n <div data-theme=\"dark\" style=\"padding: 10px; border: 1px solid #666; margin: 10px 0; background-color: #2a2a2a; color: white;\">\n <p>Dark theme context (data-theme=\"dark\"):</p>\n <nr-checkbox checked>Dark theme checkbox</nr-checkbox>\n <nr-checkbox indeterminate>Dark theme indeterminate</nr-checkbox>\n <nr-checkbox>Dark theme unchecked</nr-checkbox>\n <nr-checkbox disabled checked>Dark theme disabled</nr-checkbox>\n </div>\n <hr />\n \n <h3>Form Integration</h3>\n <form @submit=${this.handleSubmit}>\n <nr-checkbox name=\"terms\" value=\"accepted\" @nr-change=${this.handleChange}>I accept the terms and conditions</nr-checkbox>\n <nr-checkbox name=\"newsletter\" value=\"subscribed\" @nr-change=${this.handleChange}>Subscribe to newsletter</nr-checkbox>\n <nr-checkbox name=\"marketing\" value=\"opted-in\" indeterminate @nr-change=${this.handleChange}>Marketing communications (some selected)</nr-checkbox>\n <br><br>\n <button type=\"submit\">Submit Form</button>\n </form>\n <hr />\n\n <h3>Sizes with check</h3>\n\n <nr-checkbox checked>Medium checkbox (default)</nr-checkbox>\n <nr-checkbox size=\"small\" checked>Small checkbox</nr-checkbox>\n <nr-checkbox size=\"large\" checked>Large checkbox</nr-checkbox>\n <nr-checkbox checked disabled>Medium checkbox (default)</nr-checkbox>\n <nr-checkbox size=\"small\" checked disabled>Small checkbox</nr-checkbox>\n <nr-checkbox size=\"large\" checked disabled>Large checkbox</nr-checkbox>\n <hr />\n \n <h3>Sizes with indeterminate</h3>\n <nr-checkbox indeterminate>Medium checkbox (default)</nr-checkbox>\n <nr-checkbox size=\"small\" indeterminate>Small checkbox</nr-checkbox>\n <nr-checkbox size=\"large\" indeterminate>Large checkbox</nr-checkbox>\n <nr-checkbox indeterminate disabled>Medium checkbox (default)</nr-checkbox>\n <nr-checkbox size=\"small\" indeterminate disabled>Small checkbox</nr-checkbox>\n <nr-checkbox size=\"large\" indeterminate disabled>Large checkbox</nr-checkbox>\n <hr />\n \n <h3>Sizes with unchecked</h3>\n\n <nr-checkbox>Medium checkbox (default)</nr-checkbox>\n <nr-checkbox size=\"small\">Small checkbox</nr-checkbox>\n <nr-checkbox size=\"large\">Large checkbox</nr-checkbox>\n <nr-checkbox disabled>Medium checkbox (default)</nr-checkbox>\n <nr-checkbox size=\"small\" disabled>Small checkbox</nr-checkbox>\n <nr-checkbox size=\"large\" disabled>Large checkbox</nr-checkbox>\n <hr />\n\n <h3>Event Handling Demo</h3>\n <nr-checkbox @nr-change=${this.handleChange}>Click me to see event details</nr-checkbox>\n <p id=\"event-output\">Event output will appear here...</p>\n <hr />\n\n <h3>Size Validation Demo</h3>\n <nr-checkbox size=${'invalid-size' as any}>This checkbox will use default size (check console for warning)</nr-checkbox>\n <nr-checkbox size=\"small\">Valid small size</nr-checkbox>\n <nr-checkbox size=\"medium\">Valid medium size</nr-checkbox>\n <nr-checkbox size=\"large\">Valid large size</nr-checkbox>\n `;\n }\n\n handleChange(event: CustomEvent) {\n const target = event.target as any;\n const output = this.shadowRoot?.querySelector('#event-output');\n if (output) {\n output.textContent = `Event: nr-change, Checked: ${event.detail.value}, Name: ${target.name || 'N/A'}, Value: ${target.value || 'N/A'}`;\n }\n console.log('Checkbox changed:', {\n checked: event.detail.value,\n name: target.name,\n value: target.value,\n size: target.size\n });\n }\n\n handleSubmit(event: Event) {\n event.preventDefault();\n const form = event.target as HTMLFormElement;\n const formData = new FormData(form);\n console.log('Form submitted:', Object.fromEntries(formData));\n alert('Form submitted! Check console for form data.');\n }\n}\n"]}
package/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA"}
package/react.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,eAAO,MAAM,UAAU;;EAOrB,CAAC"}
package/test/checkbox_test.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import '../checkbox.component';
2
- //# sourceMappingURL=checkbox_test.d.ts.map
package/test/checkbox_test.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox_test.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/test/checkbox_test.ts"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC"}
package/test/checkbox_test.js DELETED
@@ -1,88 +0,0 @@
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('nr-checkbox', () => {
13
- test('init checkbox', () => __awaiter(void 0, void 0, void 0, function* () {
14
- const el = yield fixture(html `<nr-checkbox></nr-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 `<nr-checkbox checked></nr-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 `<nr-checkbox disabled></nr-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 `<nr-checkbox indeterminate></nr-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 `<nr-checkbox></nr-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 "nr-change" event on change', () => __awaiter(void 0, void 0, void 0, function* () {
68
- const el = yield fixture(html `<nr-checkbox></nr-checkbox>`);
69
- const input = el.shadowRoot.querySelector('input');
70
- let checkboxChangedDispatched = false;
71
- el.addEventListener('nr-change', () => {
72
- checkboxChangedDispatched = true;
73
- });
74
- input.click();
75
- expect(checkboxChangedDispatched).to.be.true;
76
- }));
77
- test('should not dispatch "nr-change" event on change when checkbox is disabled', () => __awaiter(void 0, void 0, void 0, function* () {
78
- const el = yield fixture(html `<nr-checkbox disabled></nr-checkbox>`);
79
- const input = el.shadowRoot.querySelector('input');
80
- let checkboxChangedDispatched = false;
81
- el.addEventListener('nr-change', () => {
82
- checkboxChangedDispatched = true;
83
- });
84
- input.click();
85
- expect(checkboxChangedDispatched).to.be.false;
86
- }));
87
- });
88
- //# sourceMappingURL=checkbox_test.js.map
package/test/checkbox_test.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox_test.js","sourceRoot":"","sources":["../../../../src/components/checkbox/test/checkbox_test.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,uBAAuB,CAAC;AAG/B,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE;IACxB,IAAI,CAAC,eAAe,EAAE,GAAS,EAAE;QAC/B,MAAM,EAAE,GAAsB,MAAM,OAAO,CAAC,IAAI,CAAA,6BAA6B,CAAE,CAAC;QAChF,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,wBAAwB,CAAE,CAAC;QACtE,MAAM,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAC3F,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAChC,MAAM,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACrC,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAChC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACvB,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,sCAAsC,EAAE,GAAS,EAAE;QACtD,MAAM,EAAE,GAAsB,MAAM,OAAO,CAAC,IAAI,CAAA,qCAAqC,CAAC,CAAC;QACvF,MAAM,KAAK,GAAqB,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QACvE,MAAM,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAC3F,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC9B,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACjC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC;QACrC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QACrC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3C,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,uCAAuC,EAAE,GAAS,EAAE;QACvD,MAAM,EAAE,GAAsB,MAAM,OAAO,CAAC,IAAI,CAAA,sCAAsC,CAAE,CAAC;QACzF,MAAM,KAAK,GAAqB,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QACvE,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC/B,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACpC,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,0CAA0C,EAAE,GAAS,EAAE;QAC1D,MAAM,EAAE,GAAsB,MAAM,OAAO,CAAC,IAAI,CAAA,2CAA2C,CAAC,CAAC;QAC7F,MAAM,KAAK,GAAqB,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QACvE,MAAM,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAE3F,MAAM,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACpC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC;QACrC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QACrC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3C,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,uCAAuC,EAAE,GAAS,EAAE;QACvD,MAAM,EAAE,GAAsB,MAAM,OAAO,CAAC,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAC/E,IAAI,KAAK,GAAqB,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QACrE,IAAI,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAEzF,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC/B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEpC,KAAK,CAAC,KAAK,EAAE,CAAC;QACd,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QAC/C,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAErF,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC9B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAErC,KAAK,CAAC,KAAK,EAAE,CAAC;QACd,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QAC/C,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QACrF,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC/B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE,GAAS,EAAE;QAC7D,MAAM,EAAE,GAAsB,MAAM,OAAO,CAAC,IAAI,CAAA,6BAA6B,CAAE,CAAC;QAChF,MAAM,KAAK,GAAqB,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QACvE,IAAI,yBAAyB,GAAG,KAAK,CAAC;QAEtC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE;YACpC,yBAAyB,GAAG,IAAI,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,KAAK,EAAE,CAAC;QAEd,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC/C,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,2EAA2E,EAAE,GAAS,EAAE;QAC3F,MAAM,EAAE,GAAsB,MAAM,OAAO,CAAC,IAAI,CAAA,sCAAsC,CAAE,CAAC;QACzF,MAAM,KAAK,GAAqB,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QACvE,IAAI,yBAAyB,GAAG,KAAK,CAAC;QAEtC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE;YACpC,yBAAyB,GAAG,IAAI,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,KAAK,EAAE,CAAC;QAEd,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAChD,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport '../checkbox.component';\nimport { NrCheckboxElement } from '../checkbox.component';\n\nsuite('nr-checkbox', () => {\n test('init checkbox', async () => {\n const el: NrCheckboxElement = await fixture(html`<nr-checkbox></nr-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: NrCheckboxElement = await fixture(html`<nr-checkbox checked></nr-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: NrCheckboxElement = await fixture(html`<nr-checkbox disabled></nr-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: NrCheckboxElement = await fixture(html`<nr-checkbox indeterminate></nr-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: NrCheckboxElement = await fixture(html`<nr-checkbox></nr-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 \"nr-change\" event on change', async () => {\n const el: NrCheckboxElement = await fixture(html`<nr-checkbox></nr-checkbox>`)!;\n const input: HTMLInputElement = el.shadowRoot!.querySelector('input')!;\n let checkboxChangedDispatched = false;\n\n el.addEventListener('nr-change', () => {\n checkboxChangedDispatched = true;\n });\n\n input.click();\n\n expect(checkboxChangedDispatched).to.be.true;\n });\n\n test('should not dispatch \"nr-change\" event on change when checkbox is disabled', async () => {\n const el: NrCheckboxElement = await fixture(html`<nr-checkbox disabled></nr-checkbox>`)!;\n const input: HTMLInputElement = el.shadowRoot!.querySelector('input')!;\n let checkboxChangedDispatched = false;\n\n el.addEventListener('nr-change', () => {\n checkboxChangedDispatched = true;\n });\n\n input.click();\n\n expect(checkboxChangedDispatched).to.be.false;\n });\n});\n"]}