@nysds/nys-checkbox 1.19.1 → 1.19.2
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/dist/nys-checkbox.d.ts +125 -0
- package/dist/nys-checkbox.js +1 -1
- package/dist/nys-checkboxgroup.d.ts +100 -0
- package/package.json +6 -5
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import "./nys-checkboxgroup";
|
|
3
|
+
/**
|
|
4
|
+
* A checkbox input for binary choices or multi-select lists. Can be used standalone or in a `nys-checkboxgroup`.
|
|
5
|
+
* Form-associated with validation via ElementInternals.
|
|
6
|
+
*
|
|
7
|
+
* Use for binary decisions (agree/disagree) or selecting multiple options from a list.
|
|
8
|
+
* For single selection from 2-6 options, use `nys-radiobutton`. For immediate state changes, use `nys-toggle`.
|
|
9
|
+
*
|
|
10
|
+
* @summary Checkbox for binary choices or multi-select options.
|
|
11
|
+
* @element nys-checkbox
|
|
12
|
+
*
|
|
13
|
+
* @slot description - Custom HTML description content.
|
|
14
|
+
*
|
|
15
|
+
* @fires nys-change - Fired when checked state changes. Detail: `{id, checked, name, value}`.
|
|
16
|
+
* @fires nys-focus - Fired when checkbox gains focus.
|
|
17
|
+
* @fires nys-blur - Fired when checkbox loses focus.
|
|
18
|
+
* @fires nys-other-input - Fired when "other" text input value changes. Detail: `{id, name, value}`.
|
|
19
|
+
*
|
|
20
|
+
* @example Single checkbox
|
|
21
|
+
* ```html
|
|
22
|
+
* <nys-checkbox label="I agree to the terms" name="terms" required></nys-checkbox>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @example Checkbox group
|
|
26
|
+
* ```html
|
|
27
|
+
* <nys-checkboxgroup label="Select landmarks">
|
|
28
|
+
* <nys-checkbox name="landmarks" value="adirondacks" label="Adirondacks"></nys-checkbox>
|
|
29
|
+
* <nys-checkbox name="landmarks" value="niagara" label="Niagara Falls"></nys-checkbox>
|
|
30
|
+
* </nys-checkboxgroup>
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export declare class NysCheckbox extends LitElement {
|
|
34
|
+
static styles: import("lit").CSSResult;
|
|
35
|
+
static shadowRootOptions: {
|
|
36
|
+
delegatesFocus: boolean;
|
|
37
|
+
clonable?: boolean;
|
|
38
|
+
customElementRegistry?: CustomElementRegistry;
|
|
39
|
+
mode: ShadowRootMode;
|
|
40
|
+
serializable?: boolean;
|
|
41
|
+
slotAssignment?: SlotAssignmentMode;
|
|
42
|
+
};
|
|
43
|
+
/** Whether checkbox is checked. */
|
|
44
|
+
checked: boolean;
|
|
45
|
+
/** Prevents interaction. */
|
|
46
|
+
disabled: boolean;
|
|
47
|
+
/** Marks as required. Validates that checkbox is checked. */
|
|
48
|
+
required: boolean;
|
|
49
|
+
/** Visible label text. Required for accessibility. */
|
|
50
|
+
label: string;
|
|
51
|
+
/** Helper text below label. Use slot for custom HTML. */
|
|
52
|
+
description: string;
|
|
53
|
+
/** Unique identifier. Auto-generated if not provided. */
|
|
54
|
+
id: string;
|
|
55
|
+
/** Name for form submission. Use same name for grouped checkboxes. */
|
|
56
|
+
name: string;
|
|
57
|
+
/** Value submitted when checked. */
|
|
58
|
+
value: string;
|
|
59
|
+
/** Form `id` to associate with when checkbox is outside form element. */
|
|
60
|
+
form: string | null;
|
|
61
|
+
/** Shows error message when true. */
|
|
62
|
+
showError: boolean;
|
|
63
|
+
/** Error message text. Shown only when `showError` is true. */
|
|
64
|
+
errorMessage: string;
|
|
65
|
+
/** Internal: Set by parent checkboxgroup. Do not set manually. */
|
|
66
|
+
groupExist: boolean;
|
|
67
|
+
/** Renders as tile with larger clickable area. Apply to group for consistency. */
|
|
68
|
+
tile: boolean;
|
|
69
|
+
/** Tooltip text shown on hover/focus of info icon. */
|
|
70
|
+
tooltip: string;
|
|
71
|
+
/**
|
|
72
|
+
* Checkbox size: `sm` (24px) or `md` (32px, default).
|
|
73
|
+
* @default "md"
|
|
74
|
+
*/
|
|
75
|
+
size: "sm" | "md";
|
|
76
|
+
other: boolean;
|
|
77
|
+
showOtherError: boolean;
|
|
78
|
+
private _mobileQuery;
|
|
79
|
+
private isMobile;
|
|
80
|
+
private _hasUserInteracted;
|
|
81
|
+
getInputElement(): Promise<HTMLInputElement | null>;
|
|
82
|
+
private _internals;
|
|
83
|
+
/**
|
|
84
|
+
* Lifecycle methods
|
|
85
|
+
* --------------------------------------------------------------------------
|
|
86
|
+
*/
|
|
87
|
+
static formAssociated: boolean;
|
|
88
|
+
constructor();
|
|
89
|
+
connectedCallback(): void;
|
|
90
|
+
disconnectedCallback(): void;
|
|
91
|
+
firstUpdated(): void;
|
|
92
|
+
/**
|
|
93
|
+
* Form Integration
|
|
94
|
+
* --------------------------------------------------------------------------
|
|
95
|
+
*/
|
|
96
|
+
private _setValue;
|
|
97
|
+
private _manageRequire;
|
|
98
|
+
private _setValidityMessage;
|
|
99
|
+
private _validate;
|
|
100
|
+
formResetCallback(): void;
|
|
101
|
+
/**
|
|
102
|
+
* Functions
|
|
103
|
+
* --------------------------------------------------------------------------
|
|
104
|
+
*/
|
|
105
|
+
checkValidity(): boolean;
|
|
106
|
+
private _handleInvalid;
|
|
107
|
+
private _manageLabelClick;
|
|
108
|
+
get _hasDescription(): boolean;
|
|
109
|
+
/**
|
|
110
|
+
* Event Handlers
|
|
111
|
+
* --------------------------------------------------------------------------
|
|
112
|
+
*/
|
|
113
|
+
private _handleMobileQuery;
|
|
114
|
+
private _emitChangeEvent;
|
|
115
|
+
private _emitOtherInputEvent;
|
|
116
|
+
private _handleChange;
|
|
117
|
+
private _handleFocus;
|
|
118
|
+
private _handleBlur;
|
|
119
|
+
private _handleTextInputBlur;
|
|
120
|
+
private _handleKeydown;
|
|
121
|
+
private _handleTextInput;
|
|
122
|
+
private _validateOtherAndEmitError;
|
|
123
|
+
private _dispatchClearError;
|
|
124
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
125
|
+
}
|
package/dist/nys-checkbox.js
CHANGED
|
@@ -6,7 +6,7 @@ import { ifDefined as u } from "lit/directives/if-defined.js";
|
|
|
6
6
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
7
7
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
8
8
|
*
|
|
9
|
-
* Checkbox Component v1.19.
|
|
9
|
+
* Checkbox Component v1.19.2
|
|
10
10
|
* Part of the New York State Design System
|
|
11
11
|
* Repository: https://github.com/its-hcd/nysds
|
|
12
12
|
* License: MIT
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* A container for grouping multiple `nys-checkbox` components as a single form control.
|
|
4
|
+
* Handles validation, required constraints, and submits comma-separated values.
|
|
5
|
+
*
|
|
6
|
+
* Use to allow users to select multiple options from a list. Apply `tile` and `size` to the group
|
|
7
|
+
* and all children inherit these styles automatically.
|
|
8
|
+
*
|
|
9
|
+
* @summary Container for grouping checkboxes as a single form control.
|
|
10
|
+
* @element nys-checkboxgroup
|
|
11
|
+
*
|
|
12
|
+
* @slot - Default slot for `nys-checkbox` elements.
|
|
13
|
+
* @slot description - Custom HTML description content.
|
|
14
|
+
*
|
|
15
|
+
* @example Basic checkbox group
|
|
16
|
+
* ```html
|
|
17
|
+
* <nys-checkboxgroup label="Select landmarks" required>
|
|
18
|
+
* <nys-checkbox name="landmarks" value="adirondacks" label="Adirondacks"></nys-checkbox>
|
|
19
|
+
* <nys-checkbox name="landmarks" value="niagara" label="Niagara Falls"></nys-checkbox>
|
|
20
|
+
* </nys-checkboxgroup>
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare class NysCheckboxgroup extends LitElement {
|
|
24
|
+
static styles: import("lit").CSSResult;
|
|
25
|
+
static shadowRootOptions: {
|
|
26
|
+
delegatesFocus: boolean;
|
|
27
|
+
clonable?: boolean;
|
|
28
|
+
customElementRegistry?: CustomElementRegistry;
|
|
29
|
+
mode: ShadowRootMode;
|
|
30
|
+
serializable?: boolean;
|
|
31
|
+
slotAssignment?: SlotAssignmentMode;
|
|
32
|
+
};
|
|
33
|
+
/** Unique identifier. Auto-generated if not provided. */
|
|
34
|
+
id: string;
|
|
35
|
+
/** Name for form submission. Set on group, not individual checkboxes. */
|
|
36
|
+
name: string;
|
|
37
|
+
/** Requires at least one checkbox to be checked. */
|
|
38
|
+
required: boolean;
|
|
39
|
+
/** Shows "Optional" flag. */
|
|
40
|
+
optional: boolean;
|
|
41
|
+
/** Shows error message when true. */
|
|
42
|
+
showError: boolean;
|
|
43
|
+
/** Error message text. Shown only when `showError` is true. */
|
|
44
|
+
errorMessage: string;
|
|
45
|
+
/** Visible label text for the group. */
|
|
46
|
+
label: string;
|
|
47
|
+
/** Helper text below label. Use slot for custom HTML. */
|
|
48
|
+
description: string;
|
|
49
|
+
/** Renders all checkboxes as tiles with larger clickable area. */
|
|
50
|
+
tile: boolean;
|
|
51
|
+
/** Tooltip text shown on hover/focus of info icon. */
|
|
52
|
+
tooltip: string;
|
|
53
|
+
/** Form `id` to associate with. Applied to all children. */
|
|
54
|
+
form: string | null;
|
|
55
|
+
/**
|
|
56
|
+
* Checkbox size for all children: `sm` (24px) or `md` (32px, default).
|
|
57
|
+
* @default "md"
|
|
58
|
+
*/
|
|
59
|
+
size: "sm" | "md";
|
|
60
|
+
private _slottedDescriptionText;
|
|
61
|
+
private _hasOtherError;
|
|
62
|
+
private _otherErrorCheckbox;
|
|
63
|
+
private _internals;
|
|
64
|
+
/**
|
|
65
|
+
* Lifecycle methods
|
|
66
|
+
* --------------------------------------------------------------------------
|
|
67
|
+
*/
|
|
68
|
+
static formAssociated: boolean;
|
|
69
|
+
constructor();
|
|
70
|
+
connectedCallback(): void;
|
|
71
|
+
disconnectedCallback(): void;
|
|
72
|
+
firstUpdated(): void;
|
|
73
|
+
updated(changedProperties: Map<string | symbol, unknown>): void;
|
|
74
|
+
/**
|
|
75
|
+
* Functions
|
|
76
|
+
* --------------------------------------------------------------------------
|
|
77
|
+
*/
|
|
78
|
+
private _hasAtLeastOneChecked;
|
|
79
|
+
private _setGroupExist;
|
|
80
|
+
private _setupCheckboxRequired;
|
|
81
|
+
private _manageRequire;
|
|
82
|
+
private _setCustomOtherError;
|
|
83
|
+
private _updateCheckboxSize;
|
|
84
|
+
private _updateCheckboxTile;
|
|
85
|
+
private _updateCheckboxShowError;
|
|
86
|
+
private _updateCheckboxForm;
|
|
87
|
+
private _getSlotDescriptionForAria;
|
|
88
|
+
formResetCallback(): void;
|
|
89
|
+
private _handleInvalid;
|
|
90
|
+
/**
|
|
91
|
+
* Event Handlers
|
|
92
|
+
* --------------------------------------------------------------------------
|
|
93
|
+
*/
|
|
94
|
+
private _handleCheckboxChange;
|
|
95
|
+
private _handleChildError;
|
|
96
|
+
private _handleChildErrorClear;
|
|
97
|
+
private _handleOtherInput;
|
|
98
|
+
private _checkOtherInputs;
|
|
99
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
100
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-checkbox",
|
|
3
|
-
"version": "1.19.
|
|
3
|
+
"version": "1.19.2",
|
|
4
4
|
"description": "The Checkbox component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-checkbox.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"lit-analyze": "lit-analyzer '**/*.ts'"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@nysds/nys-icon": "^1.19.
|
|
27
|
-
"@nysds/nys-label": "^1.19.
|
|
28
|
-
"@nysds/nys-errormessage": "^1.19.
|
|
26
|
+
"@nysds/nys-icon": "^1.19.2",
|
|
27
|
+
"@nysds/nys-label": "^1.19.2",
|
|
28
|
+
"@nysds/nys-errormessage": "^1.19.2"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"lit": "^3.3.1",
|
|
@@ -42,5 +42,6 @@
|
|
|
42
42
|
"forms"
|
|
43
43
|
],
|
|
44
44
|
"author": "New York State Design System Team",
|
|
45
|
-
"license": "MIT"
|
|
45
|
+
"license": "MIT",
|
|
46
|
+
"sideEffects": true
|
|
46
47
|
}
|