@nuralyui/checkbox 0.0.4 → 0.0.5
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 +17 -3
- package/checkbox.component.d.ts.map +1 -1
- package/checkbox.component.js +70 -15
- package/checkbox.component.js.map +1 -1
- package/checkbox.style.js +1 -1
- package/checkbox.style.js.map +1 -1
- package/checkbox.variables.d.ts.map +1 -1
- package/checkbox.variables.js +18 -13
- package/checkbox.variables.js.map +1 -1
- package/demo/checkbox-demo.d.ts +8 -0
- package/demo/checkbox-demo.d.ts.map +1 -1
- package/demo/checkbox-demo.js +95 -25
- package/demo/checkbox-demo.js.map +1 -1
- package/package.json +1 -1
- package/react.d.ts +3 -3
- package/react.d.ts.map +1 -1
- package/react.js +5 -5
- package/react.js.map +1 -1
- package/test/checkbox_test.js +12 -12
- package/test/checkbox_test.js.map +1 -1
package/checkbox.component.d.ts
CHANGED
|
@@ -1,12 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
1
6
|
import { LitElement } from 'lit';
|
|
2
7
|
import { CheckboxSize } from './checkbox.types.js';
|
|
3
|
-
|
|
8
|
+
declare const NrCheckboxElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & typeof LitElement;
|
|
9
|
+
export declare class NrCheckboxElement extends NrCheckboxElement_base {
|
|
4
10
|
static styles: import("lit").CSSResult[];
|
|
5
11
|
checked: boolean;
|
|
6
12
|
disabled: boolean;
|
|
7
13
|
indeterminate: boolean;
|
|
8
|
-
size: CheckboxSize;
|
|
14
|
+
get size(): CheckboxSize;
|
|
15
|
+
set size(value: CheckboxSize);
|
|
16
|
+
private _size;
|
|
17
|
+
name?: string;
|
|
18
|
+
value?: string;
|
|
19
|
+
connectedCallback(): void;
|
|
20
|
+
updated(changedProperties: Map<string, any>): void;
|
|
21
|
+
private updateThemeFromParent;
|
|
9
22
|
render(): import("lit").TemplateResult<1>;
|
|
10
|
-
onChange(): void;
|
|
23
|
+
onChange(event: Event): void;
|
|
11
24
|
}
|
|
25
|
+
export {};
|
|
12
26
|
//# sourceMappingURL=checkbox.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
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.component.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
1
6
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
7
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
8
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -7,26 +12,70 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
12
|
import { LitElement, html } from 'lit';
|
|
8
13
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
14
|
import { styles } from './checkbox.style.js';
|
|
10
|
-
|
|
15
|
+
import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
|
|
16
|
+
let NrCheckboxElement = class NrCheckboxElement extends NuralyUIBaseMixin(LitElement) {
|
|
11
17
|
constructor() {
|
|
12
18
|
super(...arguments);
|
|
13
19
|
this.checked = false;
|
|
14
20
|
this.disabled = false;
|
|
15
21
|
this.indeterminate = false;
|
|
16
|
-
this.
|
|
22
|
+
this._size = "medium" /* CheckboxSize.Medium */;
|
|
23
|
+
}
|
|
24
|
+
get size() {
|
|
25
|
+
return this._size;
|
|
26
|
+
}
|
|
27
|
+
set size(value) {
|
|
28
|
+
const validSizes = ["small" /* CheckboxSize.Small */, "medium" /* CheckboxSize.Medium */, "large" /* CheckboxSize.Large */];
|
|
29
|
+
if (validSizes.includes(value)) {
|
|
30
|
+
this._size = value;
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
console.warn(`Invalid size value: ${value}. Using default size: ${"medium" /* CheckboxSize.Medium */}`);
|
|
34
|
+
this._size = "medium" /* CheckboxSize.Medium */;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
connectedCallback() {
|
|
38
|
+
super.connectedCallback();
|
|
39
|
+
this.updateThemeFromParent();
|
|
40
|
+
}
|
|
41
|
+
updated(changedProperties) {
|
|
42
|
+
super.updated(changedProperties);
|
|
43
|
+
this.updateThemeFromParent();
|
|
44
|
+
}
|
|
45
|
+
updateThemeFromParent() {
|
|
46
|
+
var _a;
|
|
47
|
+
// Check for parent container theme first
|
|
48
|
+
const parentTheme = (_a = this.closest('[data-theme]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-theme');
|
|
49
|
+
const effectiveTheme = parentTheme || this.currentTheme;
|
|
50
|
+
this.setAttribute('data-theme', effectiveTheme);
|
|
17
51
|
}
|
|
18
52
|
render() {
|
|
53
|
+
var _a, _b, _c;
|
|
54
|
+
// Check for parent container theme first
|
|
55
|
+
const parentTheme = (_a = this.closest('[data-theme]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-theme');
|
|
56
|
+
const effectiveTheme = parentTheme || this.currentTheme;
|
|
19
57
|
return html `
|
|
20
|
-
<input
|
|
58
|
+
<input
|
|
59
|
+
type="checkbox"
|
|
60
|
+
.checked=${this.checked}
|
|
61
|
+
.disabled=${this.disabled}
|
|
62
|
+
.indeterminate=${this.indeterminate}
|
|
63
|
+
name=${(_b = this.name) !== null && _b !== void 0 ? _b : ''}
|
|
64
|
+
value=${(_c = this.value) !== null && _c !== void 0 ? _c : ''}
|
|
65
|
+
data-theme="${effectiveTheme}"
|
|
66
|
+
aria-checked=${this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false')}
|
|
67
|
+
@change=${this.onChange}
|
|
68
|
+
/>
|
|
21
69
|
<slot></slot>
|
|
22
70
|
`;
|
|
23
71
|
}
|
|
24
|
-
onChange() {
|
|
72
|
+
onChange(event) {
|
|
73
|
+
const target = event.target;
|
|
25
74
|
if (this.indeterminate) {
|
|
26
75
|
this.indeterminate = false;
|
|
27
76
|
}
|
|
28
|
-
this.checked =
|
|
29
|
-
this.dispatchEvent(new CustomEvent('
|
|
77
|
+
this.checked = target.checked;
|
|
78
|
+
this.dispatchEvent(new CustomEvent('nr-change', {
|
|
30
79
|
bubbles: true,
|
|
31
80
|
composed: true,
|
|
32
81
|
detail: {
|
|
@@ -35,21 +84,27 @@ let HyCheckBox = class HyCheckBox extends LitElement {
|
|
|
35
84
|
}));
|
|
36
85
|
}
|
|
37
86
|
};
|
|
38
|
-
|
|
87
|
+
NrCheckboxElement.styles = styles;
|
|
39
88
|
__decorate([
|
|
40
89
|
property({ type: Boolean, reflect: true })
|
|
41
|
-
],
|
|
90
|
+
], NrCheckboxElement.prototype, "checked", void 0);
|
|
42
91
|
__decorate([
|
|
43
92
|
property({ type: Boolean, reflect: true })
|
|
44
|
-
],
|
|
93
|
+
], NrCheckboxElement.prototype, "disabled", void 0);
|
|
45
94
|
__decorate([
|
|
46
95
|
property({ type: Boolean, reflect: true })
|
|
47
|
-
],
|
|
96
|
+
], NrCheckboxElement.prototype, "indeterminate", void 0);
|
|
48
97
|
__decorate([
|
|
49
98
|
property({ reflect: true })
|
|
50
|
-
],
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
],
|
|
54
|
-
|
|
99
|
+
], NrCheckboxElement.prototype, "size", null);
|
|
100
|
+
__decorate([
|
|
101
|
+
property({ type: String })
|
|
102
|
+
], NrCheckboxElement.prototype, "name", void 0);
|
|
103
|
+
__decorate([
|
|
104
|
+
property({ type: String })
|
|
105
|
+
], NrCheckboxElement.prototype, "value", void 0);
|
|
106
|
+
NrCheckboxElement = __decorate([
|
|
107
|
+
customElement('nr-checkbox')
|
|
108
|
+
], NrCheckboxElement);
|
|
109
|
+
export { NrCheckboxElement };
|
|
55
110
|
//# sourceMappingURL=checkbox.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './checkbox.style.js';\nimport { CheckboxSize } from './checkbox.types.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\n\n@customElement('nr-checkbox')\nexport class NrCheckboxElement extends NuralyUIBaseMixin(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 get size(): CheckboxSize {\n return this._size;\n }\n set size(value: CheckboxSize) {\n const validSizes = [CheckboxSize.Small, CheckboxSize.Medium, CheckboxSize.Large];\n if (validSizes.includes(value)) {\n this._size = value;\n } else {\n console.warn(`Invalid size value: ${value}. Using default size: ${CheckboxSize.Medium}`);\n this._size = CheckboxSize.Medium;\n }\n }\n private _size: CheckboxSize = CheckboxSize.Medium;\n\n @property({type: String})\n name?: string;\n\n @property({type: String})\n value?: string;\n\n override connectedCallback() {\n super.connectedCallback();\n this.updateThemeFromParent();\n }\n\n override updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n this.updateThemeFromParent();\n }\n\n private updateThemeFromParent() {\n // Check for parent container theme first\n const parentTheme = this.closest('[data-theme]')?.getAttribute('data-theme');\n const effectiveTheme = parentTheme || this.currentTheme;\n this.setAttribute('data-theme', effectiveTheme);\n }\n\n override render() {\n // Check for parent container theme first\n const parentTheme = this.closest('[data-theme]')?.getAttribute('data-theme');\n const effectiveTheme = parentTheme || this.currentTheme;\n \n return html`\n <input \n type=\"checkbox\" \n .checked=${this.checked} \n .disabled=${this.disabled} \n .indeterminate=${this.indeterminate}\n name=${this.name ?? ''}\n value=${this.value ?? ''}\n data-theme=\"${effectiveTheme}\"\n aria-checked=${this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false')}\n @change=${this.onChange} \n />\n <slot></slot>\n `;\n }\n\n onChange(event: Event) {\n const target = event.target as HTMLInputElement;\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n this.checked = target.checked;\n this.dispatchEvent(\n new CustomEvent('nr-change', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.checked,\n },\n })\n );\n }\n}\n"]}
|
package/checkbox.style.js
CHANGED
|
@@ -7,7 +7,7 @@ const checkBoxStyles = css `
|
|
|
7
7
|
flex-wrap: wrap;
|
|
8
8
|
gap: var(--hybrid-checkbox-gap);
|
|
9
9
|
font-family: var(--hybrid-checkbox-font-family);
|
|
10
|
-
color:var(--hybrid-checkbox-color)
|
|
10
|
+
color: var(--hybrid-checkbox-color);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
:host(:not([checked]):not([indeterminate]):not([disabled])) input {
|
package/checkbox.style.js.map
CHANGED
|
@@ -1 +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)
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.variables.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"checkbox.variables.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAmD1B,CAAC"}
|
package/checkbox.variables.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styleVariables = css `
|
|
3
3
|
:host {
|
|
4
|
+
/* Light theme defaults */
|
|
4
5
|
--hybrid-checkbox-filled-background-color: #161616;
|
|
5
|
-
--hybrid-checkbox-color
|
|
6
|
+
--hybrid-checkbox-color: #000000;
|
|
6
7
|
--hybrid-checkbox-empty-background-color: #ffffff;
|
|
7
8
|
--hybrid-checkbox-disabled-background-color: #c6c6c6;
|
|
8
9
|
--hybrid-checkbox-disabled-text-color: #c6c6c6;
|
|
@@ -14,6 +15,7 @@ export const styleVariables = css `
|
|
|
14
15
|
--hybrid-checkbox-border-radius: 1px;
|
|
15
16
|
--hybrid-checkbox-gap: 5px;
|
|
16
17
|
|
|
18
|
+
/* Size variables */
|
|
17
19
|
--hybrid-checkbox-medium-width: 20px;
|
|
18
20
|
--hybrid-checkbox-medium-height: 20px;
|
|
19
21
|
--hybrid-checkbox-small-width: 15px;
|
|
@@ -32,18 +34,21 @@ export const styleVariables = css `
|
|
|
32
34
|
--hybrid-checkbox-large-checked-width: 4px;
|
|
33
35
|
--hybrid-checkbox-large-checked-height: 10px;
|
|
34
36
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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;
|
|
47
52
|
}
|
|
48
53
|
`;
|
|
49
54
|
//# sourceMappingURL=checkbox.variables.js.map
|
|
@@ -1 +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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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/demo/checkbox-demo.d.ts
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
1
6
|
import { LitElement } from 'lit';
|
|
7
|
+
import '../checkbox.component.js';
|
|
2
8
|
export declare class CheckBoxDemo extends LitElement {
|
|
3
9
|
render(): import("lit").TemplateResult<1>;
|
|
10
|
+
handleChange(event: CustomEvent): void;
|
|
11
|
+
handleSubmit(event: Event): void;
|
|
4
12
|
}
|
|
5
13
|
//# sourceMappingURL=checkbox-demo.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/demo/checkbox-demo.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
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
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
1
6
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
7
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
8
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -6,48 +11,113 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
11
|
};
|
|
7
12
|
import { LitElement, html } from 'lit';
|
|
8
13
|
import { customElement } from 'lit/decorators.js';
|
|
14
|
+
import '../checkbox.component.js';
|
|
9
15
|
let CheckBoxDemo = class CheckBoxDemo extends LitElement {
|
|
10
16
|
render() {
|
|
11
17
|
return html `
|
|
12
18
|
<h3>Default checkbox</h3>
|
|
13
19
|
|
|
14
|
-
<
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
<
|
|
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>
|
|
20
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
|
+
|
|
21
56
|
<h3>Sizes with check</h3>
|
|
22
57
|
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
<
|
|
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>
|
|
29
64
|
<hr />
|
|
65
|
+
|
|
30
66
|
<h3>Sizes with indeterminate</h3>
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
<
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
<
|
|
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>
|
|
37
73
|
<hr />
|
|
74
|
+
|
|
38
75
|
<h3>Sizes with unchecked</h3>
|
|
39
76
|
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
<
|
|
43
|
-
<
|
|
44
|
-
<
|
|
45
|
-
<
|
|
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>
|
|
46
95
|
`;
|
|
47
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
|
+
}
|
|
48
118
|
};
|
|
49
119
|
CheckBoxDemo = __decorate([
|
|
50
|
-
customElement('
|
|
120
|
+
customElement('nr-checkbox-demo')
|
|
51
121
|
], CheckBoxDemo);
|
|
52
122
|
export { CheckBoxDemo };
|
|
53
123
|
//# sourceMappingURL=checkbox-demo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-demo.js","sourceRoot":"","sources":["../../../../src/components/checkbox/demo/checkbox-demo.ts"],"names":[],"mappings":"
|
|
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/package.json
CHANGED
package/react.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const
|
|
3
|
-
change: string;
|
|
1
|
+
import { NrCheckboxElement } from './checkbox.component.js';
|
|
2
|
+
export declare const NrCheckbox: import("@lit-labs/react").ReactWebComponent<NrCheckboxElement, {
|
|
3
|
+
'nr-change': string;
|
|
4
4
|
}>;
|
|
5
5
|
//# sourceMappingURL=react.d.ts.map
|
package/react.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,
|
|
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/react.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { createComponent } from '@lit-labs/react';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
export const
|
|
5
|
-
tagName: '
|
|
6
|
-
elementClass:
|
|
3
|
+
import { NrCheckboxElement } from './checkbox.component.js';
|
|
4
|
+
export const NrCheckbox = createComponent({
|
|
5
|
+
tagName: 'nr-checkbox',
|
|
6
|
+
elementClass: NrCheckboxElement,
|
|
7
7
|
react: React,
|
|
8
8
|
events: {
|
|
9
|
-
change: 'change',
|
|
9
|
+
'nr-change': 'nr-change',
|
|
10
10
|
},
|
|
11
11
|
});
|
|
12
12
|
//# sourceMappingURL=react.js.map
|
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/checkbox/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/checkbox/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,WAAW,EAAE,WAAW;KACzB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrCheckboxElement } from './checkbox.component.js';\n\nexport const NrCheckbox = createComponent({\n tagName: 'nr-checkbox',\n elementClass: NrCheckboxElement,\n react: React,\n events: {\n 'nr-change': 'nr-change',\n },\n});\n"]}
|
package/test/checkbox_test.js
CHANGED
|
@@ -9,9 +9,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
9
9
|
};
|
|
10
10
|
import { html, fixture, expect } from '@open-wc/testing';
|
|
11
11
|
import '../checkbox.component';
|
|
12
|
-
suite('
|
|
12
|
+
suite('nr-checkbox', () => {
|
|
13
13
|
test('init checkbox', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
14
|
-
const el = yield fixture(html `<
|
|
14
|
+
const el = yield fixture(html `<nr-checkbox></nr-checkbox>`);
|
|
15
15
|
const input = el.shadowRoot.querySelector('input[type="checkbox"]');
|
|
16
16
|
const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
|
|
17
17
|
expect(el.disabled).to.be.false;
|
|
@@ -21,7 +21,7 @@ suite('hy-checkbox', () => {
|
|
|
21
21
|
expect(inputContent).to.equal('""');
|
|
22
22
|
}));
|
|
23
23
|
test('should reflect the checked attribute', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
24
|
-
const el = yield fixture(html `<
|
|
24
|
+
const el = yield fixture(html `<nr-checkbox checked></nr-checkbox>`);
|
|
25
25
|
const input = el.shadowRoot.querySelector('input');
|
|
26
26
|
const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
|
|
27
27
|
expect(el.checked).to.be.true;
|
|
@@ -31,13 +31,13 @@ suite('hy-checkbox', () => {
|
|
|
31
31
|
expect(inputContent).to.not.contain('-');
|
|
32
32
|
}));
|
|
33
33
|
test('should reflect the disabled attribute', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
34
|
-
const el = yield fixture(html `<
|
|
34
|
+
const el = yield fixture(html `<nr-checkbox disabled></nr-checkbox>`);
|
|
35
35
|
const input = el.shadowRoot.querySelector('input');
|
|
36
36
|
expect(el.disabled).to.be.true;
|
|
37
37
|
expect(input.disabled).to.be.true;
|
|
38
38
|
}));
|
|
39
39
|
test('should reflect indeterminate attribubute', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
40
|
-
const el = yield fixture(html `<
|
|
40
|
+
const el = yield fixture(html `<nr-checkbox indeterminate></nr-checkbox>`);
|
|
41
41
|
const input = el.shadowRoot.querySelector('input');
|
|
42
42
|
const inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
|
|
43
43
|
expect(el.indeterminate).to.be.true;
|
|
@@ -46,7 +46,7 @@ suite('hy-checkbox', () => {
|
|
|
46
46
|
expect(inputContent).to.not.contain('✔');
|
|
47
47
|
}));
|
|
48
48
|
test('should toggle checked state on change', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
49
|
-
const el = yield fixture(html `<
|
|
49
|
+
const el = yield fixture(html `<nr-checkbox></nr-checkbox>`);
|
|
50
50
|
let input = el.shadowRoot.querySelector('input');
|
|
51
51
|
let inputContent = window.getComputedStyle(input, '::after').getPropertyValue('content');
|
|
52
52
|
expect(el.checked).to.be.false;
|
|
@@ -64,21 +64,21 @@ suite('hy-checkbox', () => {
|
|
|
64
64
|
expect(el.checked).to.be.false;
|
|
65
65
|
expect(inputContent).to.equal('""');
|
|
66
66
|
}));
|
|
67
|
-
test('should dispatch "
|
|
68
|
-
const el = yield fixture(html `<
|
|
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
69
|
const input = el.shadowRoot.querySelector('input');
|
|
70
70
|
let checkboxChangedDispatched = false;
|
|
71
|
-
el.addEventListener('
|
|
71
|
+
el.addEventListener('nr-change', () => {
|
|
72
72
|
checkboxChangedDispatched = true;
|
|
73
73
|
});
|
|
74
74
|
input.click();
|
|
75
75
|
expect(checkboxChangedDispatched).to.be.true;
|
|
76
76
|
}));
|
|
77
|
-
test('should not dispatch "
|
|
78
|
-
const el = yield fixture(html `<
|
|
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
79
|
const input = el.shadowRoot.querySelector('input');
|
|
80
80
|
let checkboxChangedDispatched = false;
|
|
81
|
-
el.addEventListener('
|
|
81
|
+
el.addEventListener('nr-change', () => {
|
|
82
82
|
checkboxChangedDispatched = true;
|
|
83
83
|
});
|
|
84
84
|
input.click();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox_test.js","sourceRoot":"","sources":["../../../../src/components/checkbox/test/checkbox_test.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,
|
|
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 { 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"]}
|