@nysds/nys-radiobutton 1.19.0 → 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-radiobutton.d.ts +61 -0
- package/dist/nys-radiobutton.js +1 -1
- package/dist/nys-radiogroup.d.ts +117 -0
- package/package.json +5 -4
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* A radio button for single selection within a `nys-radiogroup`. Only one radio with the same `name` can be selected.
|
|
4
|
+
*
|
|
5
|
+
* Use within `nys-radiogroup` for 2-6 mutually exclusive options. For 7+ options, use `nys-select`.
|
|
6
|
+
* For multiple selections, use `nys-checkbox`.
|
|
7
|
+
*
|
|
8
|
+
* @summary Radio button for single selection from mutually exclusive options. This is a READONLY data component.
|
|
9
|
+
* @element nys-radiobutton
|
|
10
|
+
*
|
|
11
|
+
* @slot description - Custom HTML description content.
|
|
12
|
+
*
|
|
13
|
+
* @fires nys-change - Fired when selection changes. Detail: `{id, checked, name, value}`.
|
|
14
|
+
* @fires nys-focus - Fired when radio gains focus.
|
|
15
|
+
* @fires nys-blur - Fired when radio loses focus.
|
|
16
|
+
* @fires nys-other-input - Fired when "other" text input value changes. Detail: `{id, name, value}`.
|
|
17
|
+
*
|
|
18
|
+
* @example Radio group
|
|
19
|
+
* ```html
|
|
20
|
+
* <nys-radiogroup label="Select borough" required>
|
|
21
|
+
* <nys-radiobutton name="borough" value="bronx" label="The Bronx"></nys-radiobutton>
|
|
22
|
+
* <nys-radiobutton name="borough" value="brooklyn" label="Brooklyn"></nys-radiobutton>
|
|
23
|
+
* </nys-radiogroup>
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
export declare class NysRadiobutton extends LitElement {
|
|
27
|
+
static styles: import("lit").CSSResult;
|
|
28
|
+
/** Whether this radio is selected. Only one per group can be checked. */
|
|
29
|
+
checked: boolean;
|
|
30
|
+
/** Prevents interaction. */
|
|
31
|
+
disabled: boolean;
|
|
32
|
+
/** Marks group as required. Set on radiogroup, not individual radios. */
|
|
33
|
+
required: boolean;
|
|
34
|
+
/** Visible label text. Required for accessibility. */
|
|
35
|
+
label: string;
|
|
36
|
+
/** Helper text below label. Use slot for custom HTML. */
|
|
37
|
+
description: string;
|
|
38
|
+
/** Unique identifier. Auto-generated if not provided. */
|
|
39
|
+
id: string;
|
|
40
|
+
/** Group name. Radios with same name are mutually exclusive. */
|
|
41
|
+
name: string;
|
|
42
|
+
/** Value submitted when this radio is selected. */
|
|
43
|
+
value: string;
|
|
44
|
+
/** Form `id` to associate with. */
|
|
45
|
+
form: string | null;
|
|
46
|
+
/**
|
|
47
|
+
* Radio size: `sm` (24px) or `md` (32px, default).
|
|
48
|
+
* @default "md"
|
|
49
|
+
*/
|
|
50
|
+
size: "sm" | "md";
|
|
51
|
+
/** Renders as tile with larger clickable area. */
|
|
52
|
+
tile: boolean;
|
|
53
|
+
other: boolean;
|
|
54
|
+
showOtherError: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Lifecycle methods
|
|
57
|
+
* --------------------------------------------------------------------------
|
|
58
|
+
*/
|
|
59
|
+
connectedCallback(): void;
|
|
60
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
61
|
+
}
|
package/dist/nys-radiobutton.js
CHANGED
|
@@ -6,7 +6,7 @@ import { ifDefined as v } from "lit/directives/if-defined.js";
|
|
|
6
6
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
7
7
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
8
8
|
*
|
|
9
|
-
* Radiobutton Component v1.19.
|
|
9
|
+
* Radiobutton 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,117 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* A container for grouping `nys-radiobutton` elements as a single form control with enforced single selection.
|
|
4
|
+
* Handles keyboard navigation (arrow keys), validation, required constraints, and form integration.
|
|
5
|
+
*
|
|
6
|
+
* Use to let users select exactly one option from 2-6 choices. Apply `tile` and `size` to the group
|
|
7
|
+
* and all children inherit these styles automatically. For 7+ options, use `nys-select`.
|
|
8
|
+
*
|
|
9
|
+
* @summary Container for grouping radio buttons as a single form control.
|
|
10
|
+
* @element nys-radiogroup
|
|
11
|
+
*
|
|
12
|
+
* @slot - Default slot for `nys-radiobutton` elements.
|
|
13
|
+
* @slot description - Custom HTML description content.
|
|
14
|
+
*
|
|
15
|
+
* @example Basic radio group
|
|
16
|
+
* ```html
|
|
17
|
+
* <nys-radiogroup label="Select borough" required>
|
|
18
|
+
* <nys-radiobutton name="borough" value="bronx" label="The Bronx"></nys-radiobutton>
|
|
19
|
+
* <nys-radiobutton name="borough" value="brooklyn" label="Brooklyn"></nys-radiobutton>
|
|
20
|
+
* <nys-radiobutton name="borough" value="manhattan" label="Manhattan"></nys-radiobutton>
|
|
21
|
+
* </nys-radiogroup>
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export declare class NysRadiogroup extends LitElement {
|
|
25
|
+
static styles: import("lit").CSSResult;
|
|
26
|
+
static shadowRootOptions: {
|
|
27
|
+
delegatesFocus: boolean;
|
|
28
|
+
clonable?: boolean;
|
|
29
|
+
customElementRegistry?: CustomElementRegistry;
|
|
30
|
+
mode: ShadowRootMode;
|
|
31
|
+
serializable?: boolean;
|
|
32
|
+
slotAssignment?: SlotAssignmentMode;
|
|
33
|
+
};
|
|
34
|
+
/** Unique identifier. Auto-generated if not provided. */
|
|
35
|
+
id: string;
|
|
36
|
+
/** Name for form submission. Auto-populated from child radiobuttons. */
|
|
37
|
+
name: string;
|
|
38
|
+
/** Requires a selection before form submission. */
|
|
39
|
+
required: boolean;
|
|
40
|
+
/** Shows "Optional" flag. */
|
|
41
|
+
optional: boolean;
|
|
42
|
+
/** Shows error message when true. */
|
|
43
|
+
showError: boolean;
|
|
44
|
+
/** Error message text. Shown only when `showError` is true. */
|
|
45
|
+
errorMessage: string;
|
|
46
|
+
/** Visible label text for the group. */
|
|
47
|
+
label: string;
|
|
48
|
+
/** Helper text below label. Use slot for custom HTML. */
|
|
49
|
+
description: string;
|
|
50
|
+
/** Renders all radiobuttons as tiles with larger clickable area. */
|
|
51
|
+
tile: boolean;
|
|
52
|
+
/** Tooltip text shown on hover/focus of info icon. */
|
|
53
|
+
tooltip: string;
|
|
54
|
+
/** Form `id` to associate with. Applied to all children. */
|
|
55
|
+
form: string | null;
|
|
56
|
+
/**
|
|
57
|
+
* Radio size for all children: `sm` (24px) or `md` (32px, default).
|
|
58
|
+
* @default "md"
|
|
59
|
+
*/
|
|
60
|
+
size: "sm" | "md";
|
|
61
|
+
_showOtherError: boolean;
|
|
62
|
+
private selectedValue;
|
|
63
|
+
private _slottedDescriptionText;
|
|
64
|
+
private _radios;
|
|
65
|
+
private _mobileQuery;
|
|
66
|
+
private isMobile;
|
|
67
|
+
private _hasUserInteracted;
|
|
68
|
+
private _childObserver?;
|
|
69
|
+
private _internals;
|
|
70
|
+
/**
|
|
71
|
+
* Lifecycle methods
|
|
72
|
+
* --------------------------------------------------------------------------
|
|
73
|
+
*/
|
|
74
|
+
static formAssociated: boolean;
|
|
75
|
+
constructor();
|
|
76
|
+
connectedCallback(): void;
|
|
77
|
+
disconnectedCallback(): void;
|
|
78
|
+
firstUpdated(): Promise<void>;
|
|
79
|
+
updated(changedProperties: Map<string | symbol, unknown>): void;
|
|
80
|
+
/**
|
|
81
|
+
* Form Integration
|
|
82
|
+
* --------------------------------------------------------------------------
|
|
83
|
+
*/
|
|
84
|
+
private _setValue;
|
|
85
|
+
private _setRadioButtonRequire;
|
|
86
|
+
private _manageRequire;
|
|
87
|
+
checkValidity(): boolean;
|
|
88
|
+
private _initializeCheckedRadioValue;
|
|
89
|
+
private _getAllRadios;
|
|
90
|
+
private _handleKeyDown;
|
|
91
|
+
private _updateGroupTabIndex;
|
|
92
|
+
formResetCallback(): void;
|
|
93
|
+
/**
|
|
94
|
+
* Functions
|
|
95
|
+
* --------------------------------------------------------------------------
|
|
96
|
+
*/
|
|
97
|
+
private _handleMobileQuery;
|
|
98
|
+
private _handleSlotChange;
|
|
99
|
+
private _initializeChildAttributes;
|
|
100
|
+
private _updateRadioButtonsSize;
|
|
101
|
+
private _selectRadio;
|
|
102
|
+
private _getSlotDescriptionForAria;
|
|
103
|
+
/**
|
|
104
|
+
* Event Handlers
|
|
105
|
+
* --------------------------------------------------------------------------
|
|
106
|
+
*/
|
|
107
|
+
private _handleInvalid;
|
|
108
|
+
private _handleTextInput;
|
|
109
|
+
private _handleTextInputBlur;
|
|
110
|
+
private _validateOtherAndEmitError;
|
|
111
|
+
private _handleOtherKeydown;
|
|
112
|
+
private _handleGroupFocusout;
|
|
113
|
+
private _handleRadiobtnClick;
|
|
114
|
+
private _handleRadiobtnFocus;
|
|
115
|
+
private _handleRadiobtnBlur;
|
|
116
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
117
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-radiobutton",
|
|
3
|
-
"version": "1.19.
|
|
3
|
+
"version": "1.19.2",
|
|
4
4
|
"description": "The Radiobutton component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-radiobutton.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"lit-analyze": "lit-analyzer '**/*.ts'"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@nysds/nys-label": "^1.19.
|
|
27
|
-
"@nysds/nys-errormessage": "^1.19.
|
|
26
|
+
"@nysds/nys-label": "^1.19.2",
|
|
27
|
+
"@nysds/nys-errormessage": "^1.19.2"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"lit": "^3.3.1",
|
|
@@ -41,5 +41,6 @@
|
|
|
41
41
|
"forms"
|
|
42
42
|
],
|
|
43
43
|
"author": "New York State Design System Team",
|
|
44
|
-
"license": "MIT"
|
|
44
|
+
"license": "MIT",
|
|
45
|
+
"sideEffects": true
|
|
45
46
|
}
|