@nysds/nys-checkbox 1.13.0 → 1.14.0

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 (7) hide show
  1. package/dist/index.d.ts +2 -0
  2. package/dist/nys-checkbox.d.ts +116 -0
  3. package/dist/nys-checkbox.figma.d.ts +1 -0
  4. package/dist/nys-checkbox.js +354 -218
  5. package/dist/nys-checkbox.js.map +1 -1
  6. package/dist/nys-checkboxgroup.d.ts +94 -0
  7. package/package.json +5 -5
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./nys-checkbox";
2
+ export * from "./nys-checkboxgroup";
package/dist/nys-checkbox.d.ts ADDED
@@ -0,0 +1,116 @@
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
+ *
19
+ * @example Single checkbox
20
+ * ```html
21
+ * <nys-checkbox label="I agree to the terms" name="terms" required></nys-checkbox>
22
+ * ```
23
+ *
24
+ * @example Checkbox group
25
+ * ```html
26
+ * <nys-checkboxgroup label="Select landmarks">
27
+ * <nys-checkbox name="landmarks" value="adirondacks" label="Adirondacks"></nys-checkbox>
28
+ * <nys-checkbox name="landmarks" value="niagara" label="Niagara Falls"></nys-checkbox>
29
+ * </nys-checkboxgroup>
30
+ * ```
31
+ */
32
+ export declare class NysCheckbox extends LitElement {
33
+ static styles: import("lit").CSSResult;
34
+ /** Whether checkbox is checked. */
35
+ checked: boolean;
36
+ /** Prevents interaction. */
37
+ disabled: boolean;
38
+ /** Marks as required. Validates that checkbox is checked. */
39
+ required: boolean;
40
+ /** Visible label text. Required for accessibility. */
41
+ label: string;
42
+ /** Helper text below label. Use slot for custom HTML. */
43
+ description: string;
44
+ /** Unique identifier. Auto-generated if not provided. */
45
+ id: string;
46
+ /** Name for form submission. Use same name for grouped checkboxes. */
47
+ name: string;
48
+ /** Value submitted when checked. */
49
+ value: string;
50
+ /** Form `id` to associate with when checkbox is outside form element. */
51
+ form: string | null;
52
+ /** Shows error message when true. */
53
+ showError: boolean;
54
+ /** Error message text. Shown only when `showError` is true. */
55
+ errorMessage: string;
56
+ /** Internal: Set by parent checkboxgroup. Do not set manually. */
57
+ groupExist: boolean;
58
+ /** Renders as tile with larger clickable area. Apply to group for consistency. */
59
+ tile: boolean;
60
+ /** Adjusts colors for dark backgrounds. */
61
+ inverted: boolean;
62
+ /** Tooltip text shown on hover/focus of info icon. */
63
+ tooltip: string;
64
+ /**
65
+ * Checkbox size: `sm` (24px) or `md` (32px, default).
66
+ * @default "md"
67
+ */
68
+ size: "sm" | "md";
69
+ other: boolean;
70
+ showOtherError: boolean;
71
+ private isMobile;
72
+ private _hasUserInteracted;
73
+ getInputElement(): Promise<HTMLInputElement | null>;
74
+ private _internals;
75
+ /**
76
+ * Lifecycle methods
77
+ * --------------------------------------------------------------------------
78
+ */
79
+ static formAssociated: boolean;
80
+ constructor();
81
+ connectedCallback(): void;
82
+ disconnectedCallback(): void;
83
+ firstUpdated(): void;
84
+ /**
85
+ * Form Integration
86
+ * --------------------------------------------------------------------------
87
+ */
88
+ private _setValue;
89
+ private _manageRequire;
90
+ private _setValidityMessage;
91
+ private _validate;
92
+ formResetCallback(): void;
93
+ /**
94
+ * Functions
95
+ * --------------------------------------------------------------------------
96
+ */
97
+ checkValidity(): boolean;
98
+ private _handleInvalid;
99
+ private _manageLabelClick;
100
+ get _hasDescription(): boolean;
101
+ private _handleResize;
102
+ /**
103
+ * Event Handlers
104
+ * --------------------------------------------------------------------------
105
+ */
106
+ private _emitChangeEvent;
107
+ private _handleChange;
108
+ private _handleFocus;
109
+ private _handleBlur;
110
+ private _handleTextInputBlur;
111
+ private _handleKeydown;
112
+ private _handleTextInput;
113
+ private _validateOtherAndEmitError;
114
+ private _dispatchClearError;
115
+ render(): import("lit-html").TemplateResult<1>;
116
+ }
package/dist/nys-checkbox.figma.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/nys-checkbox.js CHANGED
@@ -1,24 +1,24 @@
1
- import { LitElement as x, unsafeCSS as v, html as b } from "lit";
2
- import { property as r, state as g } from "lit/decorators.js";
3
- import { ifDefined as k } from "lit/directives/if-defined.js";
4
- const _ = ':host{--_nys-checkbox-size: var(--nys-size-400, 32px);--_nys-checkbox-border-radius: var(--nys-radius-md, 4px);--_nys-checkbox-border-width: var(--nys-border-width-md, 2px);--_nys-checkbox-outline-color: var(--nys-color-focus, #004dd1);--_nys-checkbox-outline-width: var(--nys-border-width-md, 2px);--_nys-checkbox-outline-offset: var(--nys-space-2px, 2px);--_nys-checkbox-gap: var(--nys-space-150, 12px);--_nys-checkboxgroup-gap: var(--nys-space-200, 16px);--_nys-checkbox-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-checkbox-font-size: var(--nys-font-size-ui-md, 16px);--_nys-checkbox-font-weight: var(--nys-font-weight-regular, 400);--_nys-checkbox-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-checkbox-color: var( --nys-color-ink, var(--nys-color-neutral-900, #1b1b1b) );--_nys-checkbox-background-color: var(--nys-color-ink-reverse, #ffffff);--_nys-checkbox-border-color: var(--nys-color-neutral-600, #62666a);--_nys-checkbox-background-color--hover: var( --nys-color-neutral-50, #ededed );--_nys-checkbox-border-color--hover: var(--nys-color-ink, #1b1b1b);--_nys-checkbox-background-color--active: var( --nys-color-neutral-100, #d0d0ce );--_nys-checkbox-border-color--active: var(--nys-color-ink, #1b1b1b);--_nys-checkbox-background-color--checked: var(--nys-color-theme, #154973);--_nys-checkbox-border-color--checked: var(--nys-color-theme, #154973);--_nys-checkbox-background-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-checkbox-border-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-checkbox-background-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-checkbox-border-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-checkbox-background-color--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-checkbox-border-color--disabled: var( --nys-color-neutral-400, #757575 );--_nys-checkbox-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-checkbox-background-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-checkbox-border-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([size=sm]){--_nys-checkbox-size: var(--nys-size-300, 24px);--_nys-checkbox-border-radius: var(--nys-radius-sm, 2px);--_nys-checkboxgroup-gap: var(--nys-space-100, 8px);--_nys-checkbox-gap: var(--nys-space-100, 8px)}:host([size=md]){--_nys-checkbox-size: var(--nys-size-400, 32px);--_nys-checkbox-border-radius: var(--nys-radius-md, 4px)}:host([tile]){--_nys-checkbox-border-width--tile: var(--nys-border-width-sm, 1px);--_nys-checkbox-border-radius--tile: var(--nys-radius-md, 4px);--_nys-checkbox-border-color--tile: var(--nys-color-neutral-100, #d0d0ce);--_nys-checkbox-background-color--tile: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-padding--x--tile: var(--nys-space-250, 20px);--_nys-checkbox-padding--y--tile: var(--nys-space-200, 16px);--_nys-checkbox-border-color--tile--hover: var( --nys-color-neutral-700, #4a4d4f );--_nys-checkbox-background-color--tile--hover: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-border-color--tile--active: var( --nys-color-neutral-900, #1b1b1b );--_nys-checkbox-background-color--tile--active: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-border-color--tile--checked: var( --nys-color-theme-mid, #457aa5 );--_nys-checkbox-background-color--tile--checked: var( --nys-color-theme-faint, #f7fafd );--_nys-checkbox-background-color--tile--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-checkbox-border-color--tile--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([tile][size=sm]){--_nys-checkbox-padding--x--tile: var(--nys-space-200, 16px);--_nys-checkbox-padding--y--tile: var(--nys-space-150, 12px)}:host([tile][showError]){--_nys-checkbox-border-color--tile: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--hover: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--active: var( --nys-color-danger, #b52c2c );--_nys-checkbox-border-color--tile--checked: var( --nys-color-danger, #b52c2c )}#single-error-message{--_nys-errormessage-margin-top: var(--nys-space-50, 4px)}.nys-checkboxgroup{display:flex;flex-direction:column;gap:var(--nys-space-200, 16px);font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height)}.nys-checkboxgroup__content{display:flex;flex-direction:column;gap:var(--_nys-checkboxgroup-gap)}.nys-checkbox{display:flex;font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height);border-radius:var(--_nys-checkbox-border-radius--tile);border:var(--_nys-checkbox-border-width--tile) solid var(--_nys-checkbox-border-color--tile);background:var(--_nys-checkbox-background-color--tile);padding:var(--_nys-checkbox-padding--y--tile) var(--_nys-checkbox-padding--x--tile);gap:var(--_nys-checkbox-gap)}.nys-checkbox__checkboxwrapper{position:relative;display:flex;justify-content:center;align-items:center;max-height:var(--_nys-checkbox-size)}.nys-checkbox__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff}.nys-checkbox__checkbox{appearance:none;background-repeat:no-repeat;background-position:center;width:var(--_nys-checkbox-size);min-width:var(--_nys-checkbox-size);min-height:var(--_nys-checkbox-size);height:var(--_nys-checkbox-size);max-width:var(--_nys-checkbox-size);max-height:var(--_nys-checkbox-size);border:solid var(--_nys-checkbox-border-width) var(--_nys-checkbox-border-color);background-color:var(--_nys-checkbox-background-color);border-radius:var(--_nys-checkbox-border-radius);outline-offset:var(--_nys-checkbox-outline-offset);outline:none}.nys-checkbox:hover,.nys-checkbox:hover *{cursor:pointer}.nys-checkbox__checkbox:not(:disabled):checked{background-color:var(--_nys-checkbox-background-color--checked);border-color:var(--_nys-checkbox-border-color--checked)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:not(:disabled):checked){border-color:var(--_nys-checkbox-border-color--tile--checked);background-color:var(--_nys-checkbox-background-color--tile--checked)}.nys-checkbox__checkbox:disabled:checked{background-color:var(--_nys-checkbox-background-color--checked--disabled);border-color:var(--_nys-checkbox-border-color--checked--disabled)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled:checked){border-color:var(--_nys-checkbox-border-color--tile--disabled);background-color:var(--_nys-checkbox-background-color--tile--disabled)}.nys-checkbox__checkbox:disabled{background-color:var(--_nys-checkbox-background-color--disabled);border-color:var(--_nys-checkbox-border-color--disabled);cursor:not-allowed}.nys-checkbox:has(.nys-checkbox__checkbox:disabled) *{color:var(--_nys-checkbox-color--disabled);cursor:not-allowed;--_nys-label-cursor: not-allowed;--_nys-label-color: var(--_nys-checkbox-color--disabled)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled){background-color:var(--_nys-checkbox-background-color--disabled);border-color:var(--_nys-checkbox-border-color--disabled);cursor:not-allowed}.nys-checkbox__checkbox:hover:not(:disabled):not(:checked){background-color:var(--_nys-checkbox-background-color--hover);border-color:var(--_nys-checkbox-border-color--hover)}:host([tile]) .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):not(:checked)){border-color:var(--_nys-checkbox-border-color--tile--hover);background-color:var(--_nys-checkbox-background-color--tile--hover);outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--hover)}.nys-checkbox__checkbox:hover:not(:disabled):checked{border-color:var(--_nys-checkbox-border-color--checked--hover);background-color:var(--_nys-checkbox-background-color--checked--hover)}:host([tile]) .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):checked){outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--checked)}.nys-checkbox__checkbox:active:not(:disabled):not(:checked){background-color:var(--_nys-checkbox-background-color--active);border-color:var(--_nys-checkbox-border-color--active)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:active:not(:disabled):not(:checked)){border-color:var(--_nys-checkbox-border-color--tile--active);background-color:var(--_nys-checkbox-background-color--tile--active);outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--active)}.nys-checkbox__checkbox:active:not(:disabled):checked{border-color:var(--_nys-checkbox-border-color--checked--active);background-color:var(--_nys-checkbox-background-color--checked--active)}:host(:not([tile])) .nys-checkbox__checkbox:focus{outline:solid var(--_nys-checkbox-outline-width) var(--_nys-checkbox-outline-color)}:host([tile]) .nys-checkbox:has(*:focus){outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-outline-color)!important;border-color:var(--_nys-checkbox-outline-color)!important}:host(:not([tile])) .nys-checkbox>nys-label{--_nys-label-font-weight: var(--_nys-checkbox-font-weight)}:host([tile]) .nys-checkbox>nys-label{--_nys-description-font-style: normal}.nys-checkbox__required{color:var(--nys-color-danger, #b52c2c)}.nys-checkbox__requiredwrapper{display:flex;gap:3px}fieldset{all:unset;display:contents}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}';
5
- var m = Object.defineProperty, l = (d, e, o, t) => {
6
- for (var s = void 0, h = d.length - 1, a; h >= 0; h--)
7
- (a = d[h]) && (s = a(e, o, s) || s);
8
- return s && m(e, o, s), s;
1
+ import { LitElement as x, unsafeCSS as v, html as d } from "lit";
2
+ import { property as s, state as _ } from "lit/decorators.js";
3
+ import { ifDefined as y } from "lit/directives/if-defined.js";
4
+ const f = ':host{--_nys-checkbox-size: var(--nys-size-400, 32px);--_nys-checkbox-border-radius: var(--nys-radius-md, 4px);--_nys-checkbox-border-width: var(--nys-border-width-md, 2px);--_nys-checkbox-outline-color: var(--nys-color-focus, #004dd1);--_nys-checkbox-outline-width: var(--nys-border-width-md, 2px);--_nys-checkbox-outline-offset: var(--nys-space-2px, 2px);--_nys-checkbox-gap: var(--nys-space-150, 12px);--_nys-checkboxgroup-gap: var(--nys-space-200, 16px);--_nys-checkbox-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-checkbox-font-size: var(--nys-font-size-ui-md, 16px);--_nys-checkbox-font-weight: var(--nys-font-weight-regular, 400);--_nys-checkbox-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-checkbox-color: var( --nys-color-ink, var(--nys-color-neutral-900, #1b1b1b) );--_nys-checkbox-background-color: var(--nys-color-ink-reverse, #ffffff);--_nys-checkbox-border-color: var(--nys-color-neutral-600, #62666a);--_nys-checkbox-background-color--hover: var(--nys-color-neutral-50, #ededed);--_nys-checkbox-border-color--hover: var(--nys-color-ink, #1b1b1b);--_nys-checkbox-background-color--active: var( --nys-color-neutral-100, #d0d0ce );--_nys-checkbox-border-color--active: var(--nys-color-ink, #1b1b1b);--_nys-checkbox-background-color--checked: var(--nys-color-theme, #154973);--_nys-checkbox-border-color--checked: var(--nys-color-theme, #154973);--_nys-checkbox-background-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-checkbox-border-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-checkbox-background-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-checkbox-border-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-checkbox-background-color--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-checkbox-border-color--disabled: var(--nys-color-neutral-400, #757575);--_nys-checkbox-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-checkbox-background-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-checkbox-border-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([size=sm]){--_nys-checkbox-size: var(--nys-size-300, 24px);--_nys-checkbox-border-radius: var(--nys-radius-sm, 2px);--_nys-checkboxgroup-gap: var(--nys-space-100, 8px);--_nys-checkbox-gap: var(--nys-space-100, 8px)}:host([size=md]){--_nys-checkbox-size: var(--nys-size-400, 32px);--_nys-checkbox-border-radius: var(--nys-radius-md, 4px)}:host([tile]){--_nys-checkbox-border-width--tile: var(--nys-border-width-sm, 1px);--_nys-checkbox-border-radius--tile: var(--nys-radius-md, 4px);--_nys-checkbox-border-color--tile: var(--nys-color-neutral-100, #d0d0ce);--_nys-checkbox-background-color--tile: var(--nys-color-ink-reverse, #ffffff);--_nys-checkbox-padding--x--tile: var(--nys-space-250, 20px);--_nys-checkbox-padding--y--tile: var(--nys-space-200, 16px);--_nys-checkbox-border-color--tile--hover: var( --nys-color-neutral-700, #4a4d4f );--_nys-checkbox-background-color--tile--hover: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-border-color--tile--active: var( --nys-color-neutral-900, #1b1b1b );--_nys-checkbox-background-color--tile--active: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-border-color--tile--checked: var( --nys-color-theme-mid, #457aa5 );--_nys-checkbox-background-color--tile--checked: var( --nys-color-theme-faint, #f7fafd );--_nys-checkbox-background-color--tile--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-checkbox-border-color--tile--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([tile][size=sm]){--_nys-checkbox-padding--x--tile: var(--nys-space-200, 16px);--_nys-checkbox-padding--y--tile: var(--nys-space-150, 12px)}:host([tile][showError]){--_nys-checkbox-border-color--tile: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--hover: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--active: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--checked: var(--nys-color-danger, #b52c2c)}#single-error-message{--_nys-errormessage-margin-top: var(--nys-space-50, 4px)}.nys-checkboxgroup{display:flex;flex-direction:column;gap:var(--nys-space-200, 16px);font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height)}.nys-checkboxgroup__content{display:flex;flex-direction:column;gap:var(--_nys-checkboxgroup-gap)}.nys-checkbox{display:flex;flex-direction:column;border-radius:var(--_nys-checkbox-border-radius--tile);border:var(--_nys-checkbox-border-width--tile) solid var(--_nys-checkbox-border-color--tile);background:var(--_nys-checkbox-background-color--tile);padding:var(--_nys-checkbox-padding--y--tile) var(--_nys-checkbox-padding--x--tile)}.nys-checkbox .nys-checkbox__main-container{display:flex;font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height);align-items:center;gap:var(--_nys-checkbox-gap)}.nys-checkbox .nys-checkbox__main-container.has-description{align-items:flex-start}.nys-checkbox__checkbox-wrapper{position:relative;display:flex;justify-content:center;align-items:center;max-height:var(--_nys-checkbox-size)}.nys-checkbox__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:var(--nys-color-ink-reverse, #ffffff)}.nys-checkbox__checkbox{appearance:none;background-repeat:no-repeat;background-position:center;width:var(--_nys-checkbox-size);min-width:var(--_nys-checkbox-size);min-height:var(--_nys-checkbox-size);height:var(--_nys-checkbox-size);max-width:var(--_nys-checkbox-size);max-height:var(--_nys-checkbox-size);border:solid var(--_nys-checkbox-border-width) var(--_nys-checkbox-border-color);background-color:var(--_nys-checkbox-background-color);border-radius:var(--_nys-checkbox-border-radius);outline-offset:var(--_nys-checkbox-outline-offset);outline:none;margin:0}.nys-checkbox:hover,.nys-checkbox:hover *{cursor:pointer}.nys-checkbox__checkbox:not(:disabled):checked{background-color:var(--_nys-checkbox-background-color--checked);border-color:var(--_nys-checkbox-border-color--checked)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:not(:disabled):checked){border-color:var(--_nys-checkbox-border-color--tile--checked);background-color:var(--_nys-checkbox-background-color--tile--checked)}.nys-checkbox__checkbox:disabled:checked{background-color:var(--_nys-checkbox-background-color--checked--disabled);border-color:var(--_nys-checkbox-border-color--checked--disabled)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled:checked){border-color:var(--_nys-checkbox-border-color--tile--disabled);background-color:var(--_nys-checkbox-background-color--tile--disabled)}.nys-checkbox__checkbox:disabled{background-color:var(--_nys-checkbox-background-color--disabled);border-color:var(--_nys-checkbox-border-color--disabled);cursor:not-allowed}.nys-checkbox:has(.nys-checkbox__checkbox:disabled) *{color:var(--_nys-checkbox-color--disabled);cursor:not-allowed;--_nys-label-cursor: not-allowed;--_nys-label-color: var(--_nys-checkbox-color--disabled)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled){background-color:var(--_nys-checkbox-background-color--disabled);border-color:var(--_nys-checkbox-border-color--disabled);cursor:not-allowed}.nys-checkbox__checkbox:hover:not(:disabled):not(:checked){background-color:var(--_nys-checkbox-background-color--hover);border-color:var(--_nys-checkbox-border-color--hover)}:host([tile]) .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):not(:checked)){border-color:var(--_nys-checkbox-border-color--tile--hover);background-color:var(--_nys-checkbox-background-color--tile--hover);outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--hover)}.nys-checkbox__checkbox:hover:not(:disabled):checked{border-color:var(--_nys-checkbox-border-color--checked--hover);background-color:var(--_nys-checkbox-background-color--checked--hover)}:host([tile]) .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):checked){outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--checked)}.nys-checkbox__checkbox:active:not(:disabled):not(:checked){background-color:var(--_nys-checkbox-background-color--active);border-color:var(--_nys-checkbox-border-color--active)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:active:not(:disabled):not(:checked)){border-color:var(--_nys-checkbox-border-color--tile--active);background-color:var(--_nys-checkbox-background-color--tile--active);outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--active)}.nys-checkbox__checkbox:active:not(:disabled):checked{border-color:var(--_nys-checkbox-border-color--checked--active);background-color:var(--_nys-checkbox-background-color--checked--active)}:host(:not([tile])) .nys-checkbox__checkbox:focus{outline:solid var(--_nys-checkbox-outline-width) var(--_nys-checkbox-outline-color)}:host([tile]) .nys-checkbox:has(*:focus){outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-outline-color)!important;border-color:var(--_nys-checkbox-outline-color)!important}:host(:not([tile])) .nys-checkbox__main-container>nys-label{--_nys-label-font-weight: var(--_nys-checkbox-font-weight)}:host([tile]) .nys-checkbox__main-container>nys-label{--_nys-description-font-style: normal}.nys-checkbox__required{color:var(--nys-color-danger, #b52c2c)}.nys-checkbox__requiredwrapper{display:flex;gap:3px}fieldset{all:unset;display:contents}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.nys-checkbox__other-container{display:flex;padding-inline-start:calc(var(--_nys-checkbox-size) + var(--_nys-checkbox-gap))}';
5
+ var g = Object.defineProperty, h = (b, e, t, r) => {
6
+ for (var o = void 0, l = b.length - 1, a; l >= 0; l--)
7
+ (a = b[l]) && (o = a(e, t, o) || o);
8
+ return o && g(e, t, o), o;
9
9
  };
10
- let w = 0;
11
- const u = class u extends x {
10
+ let E = 0;
11
+ const k = class k extends x {
12
12
  // allows use of elementInternals' API
13
13
  constructor() {
14
- super(), this.id = "", this.name = "", this.required = !1, this.optional = !1, this.showError = !1, this.errorMessage = "", this.label = "", this.description = "", this.tile = !1, this.tooltip = "", this.inverted = !1, this.form = null, this.size = "md", this._slottedDescriptionText = "", this._internals = this.attachInternals();
14
+ super(), this.id = "", this.name = "", this.required = !1, this.optional = !1, this.showError = !1, this.errorMessage = "", this.label = "", this.description = "", this.tile = !1, this.tooltip = "", this.inverted = !1, this.form = null, this.size = "md", this._slottedDescriptionText = "", this._hasOtherError = !1, this._otherErrorCheckbox = null, this._internals = this.attachInternals();
15
15
  }
16
16
  // Generate a unique ID if one is not provided
17
17
  connectedCallback() {
18
- super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${w++}`), this.addEventListener("nys-change", this._handleCheckboxChange), this.addEventListener("invalid", this._handleInvalid);
18
+ super.connectedCallback(), this.id || (this.id = `nys-checkboxgroup-${Date.now()}-${E++}`), this.addEventListener("nys-change", this._handleCheckboxChange), this.addEventListener("invalid", this._handleInvalid), this.addEventListener("nys-error", this._handleChildError), this.addEventListener("nys-error-clear", this._handleChildErrorClear);
19
19
  }
20
20
  disconnectedCallback() {
21
- super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleCheckboxChange), this.removeEventListener("invalid", this._handleInvalid);
21
+ super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleCheckboxChange), this.removeEventListener("invalid", this._handleInvalid), this.removeEventListener("nys-error", this._handleChildError), this.removeEventListener("nys-error-clear", this._handleChildErrorClear);
22
22
  }
23
23
  firstUpdated() {
24
24
  this._setGroupExist(), this._updateCheckboxSize(), this._updateCheckboxTile(), this._updateCheckboxShowError(), this._getSlotDescriptionForAria();
@@ -30,82 +30,116 @@ const u = class u extends x {
30
30
  * Functions
31
31
  * --------------------------------------------------------------------------
32
32
  */
33
+ _hasAtLeastOneChecked() {
34
+ return Array.from(this.querySelectorAll("nys-checkbox")).some(
35
+ (e) => e.checked
36
+ );
37
+ }
33
38
  _setGroupExist() {
34
- this.querySelectorAll("nys-checkbox").forEach((o) => {
35
- o.groupExist = !0;
39
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
40
+ t.groupExist = !0;
36
41
  });
37
42
  }
38
43
  // Initial update on checkbox required attribute
39
44
  async _setupCheckboxRequired() {
40
- const e = this.querySelector("nys-checkbox"), o = this.errorMessage || "This field is required", t = e ? await e.getInputElement() : null;
45
+ const e = this.querySelector("nys-checkbox"), t = this.errorMessage || "This field is required", r = e ? await e.getInputElement() : null;
41
46
  this._internals.setValidity(
42
47
  { valueMissing: !0 },
43
- o,
44
- t || this
48
+ t,
49
+ r || this
45
50
  );
46
51
  }
47
52
  // Updates the required attribute of each checkbox in the group
48
53
  async _manageRequire() {
49
- if (this.required) {
50
- const e = this.errorMessage || "Please select at least one option.", o = this.querySelector("nys-checkbox"), t = o ? await o.getInputElement().catch(() => null) : null, s = this.querySelectorAll("nys-checkbox");
51
- Array.from(s).some(
52
- (a) => a.checked
53
- ) ? (this._internals.setValidity({}), this.showError = !1) : (this._internals.setValidity(
54
- { valueMissing: !0 },
55
- e,
56
- t || this
57
- ), this.showError = !0);
58
- }
54
+ if (!this.required) return;
55
+ const e = this.errorMessage || "You must make a selection to proceed.", t = Array.from(
56
+ this.querySelectorAll("nys-checkbox")
57
+ ), r = this._hasAtLeastOneChecked(), o = t ? await t[0].getInputElement().catch(() => null) : null;
58
+ this._internals.setValidity({}), this.showError = !1, r ? this._hasOtherError && this._otherErrorCheckbox && (this._setCustomOtherError(), this.showError = !0) : this._hasOtherError ? (this._setCustomOtherError(), this.showError = !0) : (this._internals.setValidity(
59
+ { valueMissing: !0 },
60
+ e,
61
+ o ?? this
62
+ ), this.showError = !0);
63
+ }
64
+ _setCustomOtherError() {
65
+ const t = this._otherErrorCheckbox?.shadowRoot?.querySelector("nys-textinput") || this._otherErrorCheckbox;
66
+ this._internals.setValidity(
67
+ { customError: !0 },
68
+ "Please complete this field.",
69
+ t
70
+ );
59
71
  }
60
72
  // Updates the size of each checkbox in the group
61
73
  _updateCheckboxSize() {
62
- this.querySelectorAll("nys-checkbox").forEach((o) => {
63
- o.setAttribute("size", this.size);
74
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
75
+ t.setAttribute("size", this.size);
64
76
  });
65
77
  }
66
78
  _updateCheckboxTile() {
67
- this.querySelectorAll("nys-checkbox").forEach((o) => {
68
- this.tile ? o.toggleAttribute("tile", !0) : o.removeAttribute("tile");
79
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
80
+ this.tile ? t.toggleAttribute("tile", !0) : t.removeAttribute("tile");
69
81
  });
70
82
  }
71
83
  _updateCheckboxInvert() {
72
- this.querySelectorAll("nys-checkbox").forEach((o) => {
73
- this.inverted ? o.toggleAttribute("inverted", !0) : o.removeAttribute("inverted");
84
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
85
+ this.inverted ? t.toggleAttribute("inverted", !0) : t.removeAttribute("inverted");
74
86
  });
75
87
  }
76
88
  _updateCheckboxShowError() {
77
- this.querySelectorAll("nys-checkbox").forEach((o) => {
78
- this.showError ? o.setAttribute("showError", "") : o.removeAttribute("showError");
89
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
90
+ this.showError ? t.setAttribute("showError", "") : t.removeAttribute("showError");
79
91
  });
80
92
  }
81
93
  _updateCheckboxForm() {
82
- this.querySelectorAll("nys-checkbox").forEach((o) => {
83
- this.showError && this.form !== null ? o.setAttribute("form", this.form) : o.removeAttribute("form");
94
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
95
+ this.showError && this.form !== null ? t.setAttribute("form", this.form) : t.removeAttribute("form");
84
96
  });
85
97
  }
86
98
  // Get the slotted text contents so native VO can attempt to announce it within the legend in the fieldset
87
99
  _getSlotDescriptionForAria() {
88
- const o = this.shadowRoot?.querySelector(
100
+ const t = this.shadowRoot?.querySelector(
89
101
  'slot[name="description"]'
90
102
  )?.assignedNodes({ flatten: !0 }) || [];
91
- this._slottedDescriptionText = o.map((t) => t.textContent?.trim()).filter(Boolean).join(", ");
103
+ this._slottedDescriptionText = t.map((r) => r.textContent?.trim()).filter(Boolean).join(", ");
104
+ }
105
+ // This callback is automatically called when the parent form is reset.
106
+ formResetCallback() {
107
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
108
+ t.formResetCallback();
109
+ }), this._internals.setFormValue(""), this.showError = !1, this._internals.setValidity({}), this.requestUpdate();
92
110
  }
93
111
  async _handleInvalid(e) {
94
- e.preventDefault(), this.showError = !0, this._manageRequire();
95
- const o = this.querySelector("nys-checkbox"), t = o ? await o.getInputElement() : null;
96
- if (t) {
97
- const s = this._internals.form;
98
- s ? Array.from(s.elements).find((y) => {
99
- if (y.tagName.toLowerCase() === "nys-checkboxgroup") {
100
- if (Array.from(
101
- this.querySelectorAll("nys-checkbox")
102
- ).filter(
103
- (f) => f.checked
104
- ).length === 0)
105
- return y;
106
- } else
107
- return typeof y.checkValidity == "function" && !y.checkValidity();
108
- }) === this && t.focus() : t.focus();
112
+ if (e.preventDefault(), this._internals.validity.customError) {
113
+ const r = Array.from(
114
+ this.querySelectorAll("nys-checkbox")
115
+ ).find(
116
+ (o) => o.other && o.checked
117
+ );
118
+ if (r) {
119
+ const o = r.shadowRoot?.querySelector("nys-textinput");
120
+ if (o) {
121
+ await o.updateComplete, o.focus();
122
+ return;
123
+ }
124
+ }
125
+ }
126
+ if (this._internals.validity.valueMissing) {
127
+ this.showError = !0, this._manageRequire();
128
+ const t = this.querySelector("nys-checkbox"), r = t ? await t.getInputElement() : null;
129
+ if (r) {
130
+ const o = this._internals.form;
131
+ o ? Array.from(o.elements).find((u) => {
132
+ if (u.tagName.toLowerCase() === "nys-checkboxgroup") {
133
+ if (Array.from(
134
+ this.querySelectorAll("nys-checkbox")
135
+ ).filter(
136
+ (m) => m.checked
137
+ ).length === 0)
138
+ return u;
139
+ } else
140
+ return typeof u.checkValidity == "function" && !u.checkValidity();
141
+ }) === this && r.focus() : r.focus();
142
+ }
109
143
  }
110
144
  }
111
145
  /**
@@ -114,12 +148,41 @@ const u = class u extends x {
114
148
  */
115
149
  // Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.
116
150
  _handleCheckboxChange(e) {
117
- const o = e, { name: t } = o.detail, h = Array.from(this.querySelectorAll("nys-checkbox")).filter((a) => a.checked).map((a) => a.value);
118
- this.name = t, this._internals.setFormValue(h.join(", ")), this._manageRequire();
151
+ const t = e, { name: r } = t.detail, o = Array.from(
152
+ this.querySelectorAll("nys-checkbox")
153
+ ), l = o.filter((a) => a.checked).map((a) => a.value);
154
+ this.name = r, this._internals.setFormValue(l.join(", ")), this._checkOtherInputs(o), this._hasOtherError || this._manageRequire();
155
+ }
156
+ async _handleChildError(e) {
157
+ e.stopPropagation();
158
+ const { sourceCheckbox: t } = e.detail;
159
+ t && (this._hasOtherError = !0, this._otherErrorCheckbox = t, this.showError = !0, this._setCustomOtherError());
160
+ }
161
+ _handleChildErrorClear(e) {
162
+ const r = e.detail?.sourceCheckbox;
163
+ this._otherErrorCheckbox && r !== this._otherErrorCheckbox || (this._internals.setValidity({}), this.showError = !1, this.required && !this._hasAtLeastOneChecked() && this._manageRequire());
164
+ }
165
+ async _checkOtherInputs(e) {
166
+ let t = !1;
167
+ for (const r of e)
168
+ if (r.checked && r.other) {
169
+ const o = r.value.trim();
170
+ if (!r._hasUserInteracted)
171
+ continue;
172
+ if (!o || o === "") {
173
+ this._hasOtherError = !0, this._otherErrorCheckbox = r, this._setCustomOtherError(), this.showError = !0, t = !0;
174
+ return;
175
+ }
176
+ }
177
+ !t && this._hasOtherError && (this._hasOtherError = !1, this._otherErrorCheckbox = null, this.required ? this._manageRequire() : (this._internals.setValidity({}), this.showError = !1));
119
178
  }
120
179
  render() {
121
- return b`
122
- <div class="nys-checkboxgroup">
180
+ return d`
181
+ <fieldset
182
+ aria-label="${this.label}${this._slottedDescriptionText ? ` ${this._slottedDescriptionText}` : this.description ? ` ${this.description}` : ""}"
183
+ class="nys-checkboxgroup"
184
+ role="radiogroup"
185
+ >
123
186
  <nys-label
124
187
  for=${this.id + "--native"}
125
188
  label=${this.label}
@@ -131,92 +194,98 @@ const u = class u extends x {
131
194
  <slot name="description" slot="description">${this.description}</slot>
132
195
  </nys-label>
133
196
  <div class="nys-checkboxgroup__content">
134
- <fieldset>
135
- <legend class="sr-only">
136
- ${this.label}${this._slottedDescriptionText ? ` ${this._slottedDescriptionText}` : this.description ? ` ${this.description}` : ""}
137
- </legend>
138
- <slot></slot>
139
- </fieldset>
197
+ <slot></slot>
140
198
  </div>
141
199
  <nys-errormessage
142
200
  ?showError=${this.showError}
143
201
  errorMessage=${this._internals.validationMessage || this.errorMessage}
144
202
  .showDivider=${!this.tile}
145
203
  ></nys-errormessage>
146
- </div>
204
+ </fieldset>
147
205
  `;
148
206
  }
149
207
  };
150
- u.styles = v(_), u.formAssociated = !0;
151
- let i = u;
152
- l([
153
- r({ type: String, reflect: !0 })
154
- ], i.prototype, "id");
155
- l([
156
- r({ type: String, reflect: !0 })
157
- ], i.prototype, "name");
158
- l([
159
- r({ type: Boolean, reflect: !0 })
160
- ], i.prototype, "required");
161
- l([
162
- r({ type: Boolean, reflect: !0 })
163
- ], i.prototype, "optional");
164
- l([
165
- r({ type: Boolean, reflect: !0 })
166
- ], i.prototype, "showError");
167
- l([
168
- r({ type: String })
169
- ], i.prototype, "errorMessage");
170
- l([
171
- r({ type: String })
172
- ], i.prototype, "label");
173
- l([
174
- r({ type: String })
175
- ], i.prototype, "description");
176
- l([
177
- r({ type: Boolean, reflect: !0 })
178
- ], i.prototype, "tile");
179
- l([
180
- r({ type: String })
181
- ], i.prototype, "tooltip");
182
- l([
183
- r({ type: Boolean, reflect: !0 })
184
- ], i.prototype, "inverted");
185
- l([
186
- r({ type: String, reflect: !0 })
187
- ], i.prototype, "form");
188
- l([
189
- r({ type: String, reflect: !0 })
190
- ], i.prototype, "size");
191
- l([
192
- g()
193
- ], i.prototype, "_slottedDescriptionText");
194
- customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", i);
195
- var E = Object.defineProperty, n = (d, e, o, t) => {
196
- for (var s = void 0, h = d.length - 1, a; h >= 0; h--)
197
- (a = d[h]) && (s = a(e, o, s) || s);
198
- return s && E(e, o, s), s;
208
+ k.styles = v(f), k.formAssociated = !0;
209
+ let c = k;
210
+ h([
211
+ s({ type: String, reflect: !0 })
212
+ ], c.prototype, "id");
213
+ h([
214
+ s({ type: String, reflect: !0 })
215
+ ], c.prototype, "name");
216
+ h([
217
+ s({ type: Boolean, reflect: !0 })
218
+ ], c.prototype, "required");
219
+ h([
220
+ s({ type: Boolean, reflect: !0 })
221
+ ], c.prototype, "optional");
222
+ h([
223
+ s({ type: Boolean, reflect: !0 })
224
+ ], c.prototype, "showError");
225
+ h([
226
+ s({ type: String })
227
+ ], c.prototype, "errorMessage");
228
+ h([
229
+ s({ type: String })
230
+ ], c.prototype, "label");
231
+ h([
232
+ s({ type: String })
233
+ ], c.prototype, "description");
234
+ h([
235
+ s({ type: Boolean, reflect: !0 })
236
+ ], c.prototype, "tile");
237
+ h([
238
+ s({ type: String })
239
+ ], c.prototype, "tooltip");
240
+ h([
241
+ s({ type: Boolean, reflect: !0 })
242
+ ], c.prototype, "inverted");
243
+ h([
244
+ s({ type: String, reflect: !0 })
245
+ ], c.prototype, "form");
246
+ h([
247
+ s({ type: String, reflect: !0 })
248
+ ], c.prototype, "size");
249
+ h([
250
+ _()
251
+ ], c.prototype, "_slottedDescriptionText");
252
+ h([
253
+ _()
254
+ ], c.prototype, "_hasOtherError");
255
+ h([
256
+ _()
257
+ ], c.prototype, "_otherErrorCheckbox");
258
+ customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", c);
259
+ var w = Object.defineProperty, n = (b, e, t, r) => {
260
+ for (var o = void 0, l = b.length - 1, a; l >= 0; l--)
261
+ (a = b[l]) && (o = a(e, t, o) || o);
262
+ return o && w(e, t, o), o;
199
263
  };
200
264
  let C = 0;
201
265
  const p = class p extends x {
202
266
  // allows use of elementInternals' API
203
267
  constructor() {
204
- super(), this.checked = !1, this.disabled = !1, this.required = !1, this.label = "", this.description = "", this.id = "", this.name = "", this.value = "", this.form = null, this.showError = !1, this.errorMessage = "", this.groupExist = !1, this.tile = !1, this.inverted = !1, this.tooltip = "", this.size = "md", this._manageLabelClick = () => {
205
- const e = this.shadowRoot?.querySelector(".nys-checkbox"), o = this.shadowRoot?.querySelector("input");
206
- !e || !o || e.addEventListener("click", (t) => {
207
- t.target.tagName.toLowerCase() !== "input" && (this.disabled || o.click());
268
+ super(), this.checked = !1, this.disabled = !1, this.required = !1, this.label = "", this.description = "", this.id = "", this.name = "", this.value = "", this.form = null, this.showError = !1, this.errorMessage = "", this.groupExist = !1, this.tile = !1, this.inverted = !1, this.tooltip = "", this.size = "md", this.other = !1, this.showOtherError = !1, this.isMobile = window.innerWidth < 480, this._hasUserInteracted = !1, this._manageLabelClick = () => {
269
+ const e = this.shadowRoot?.querySelector(
270
+ ".nys-checkbox__main-container"
271
+ ), t = this.shadowRoot?.querySelector("input");
272
+ !e || !t || e.addEventListener("click", (r) => {
273
+ r.target.tagName.toLowerCase() !== "input" && (this.disabled || (t.click(), t.focus()));
208
274
  });
275
+ }, this._handleResize = () => {
276
+ this.isMobile = window.innerWidth < 480;
209
277
  }, this._internals = this.attachInternals();
210
278
  }
279
+ // need this flag for "eager mode"
211
280
  async getInputElement() {
212
281
  return await this.updateComplete, this.shadowRoot?.querySelector("input") || null;
213
282
  }
214
283
  // Generate a unique ID if one is not provided
215
284
  connectedCallback() {
216
- super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${C++}`), this.addEventListener("invalid", this._handleInvalid);
285
+ super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${C++}`), this.addEventListener("invalid", this._handleInvalid), this.addEventListener("blur", this._handleBlur), window.addEventListener("resize", this._handleResize);
217
286
  }
218
287
  disconnectedCallback() {
219
- super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
288
+ super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid), this.removeEventListener("blur", this._handleBlur), window.removeEventListener("resize", this._handleResize);
220
289
  }
221
290
  firstUpdated() {
222
291
  this._setValue(), this._manageRequire(), this._manageLabelClick();
@@ -229,27 +298,29 @@ const p = class p extends x {
229
298
  this.groupExist || this._internals.setFormValue(this.checked ? this.value : null);
230
299
  }
231
300
  _manageRequire() {
232
- const e = this.shadowRoot?.querySelector("input"), o = this.errorMessage || "This field is required";
233
- e && (this.required && !this.checked ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, o, e)) : this._internals.setValidity({}));
301
+ const e = this.shadowRoot?.querySelector("input"), t = this.errorMessage || "This field is required";
302
+ e && (this.required && !this.checked ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, t, e)) : this._internals.setValidity({}));
234
303
  }
235
304
  _setValidityMessage(e = "") {
236
- const o = this.shadowRoot?.querySelector("input");
237
- o && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), this._internals.setValidity(
305
+ const t = this.shadowRoot?.querySelector("input");
306
+ t && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), this._internals.setValidity(
238
307
  e ? { customError: !0 } : {},
239
308
  e,
240
- o
309
+ t
241
310
  ));
242
311
  }
243
312
  _validate() {
244
313
  const e = this.shadowRoot?.querySelector("input");
245
314
  if (!e) return;
246
- const o = e.validity;
247
- let t = "";
248
- o.valueMissing && (t = "This field is required"), this._setValidityMessage(t);
315
+ const t = e.validity;
316
+ let r = "";
317
+ t.valueMissing && (r = "This field is required"), this._setValidityMessage(r);
249
318
  }
250
319
  // Called automatically when the parent form is reset
251
320
  formResetCallback() {
252
- this.checked = !1;
321
+ this.checked = !1, this._internals.setFormValue(null);
322
+ const e = this.shadowRoot?.querySelector("input");
323
+ e && (e.checked = !1), this.showError = !1, this.errorMessage = "", this._internals.setValidity({}), this.requestUpdate();
253
324
  }
254
325
  /**
255
326
  * Functions
@@ -264,14 +335,18 @@ const p = class p extends x {
264
335
  }
265
336
  _handleInvalid(e) {
266
337
  e.preventDefault(), this.showError = !0, this._validate();
267
- const o = this.shadowRoot?.querySelector("input");
268
- if (o) {
269
- const t = this._internals.form;
270
- t ? Array.from(t.elements).find(
338
+ const t = this.shadowRoot?.querySelector("input");
339
+ if (t) {
340
+ const r = this._internals.form;
341
+ r ? Array.from(r.elements).find(
271
342
  (a) => typeof a.checkValidity == "function" && !a.checkValidity()
272
- ) === this && o.focus() : o.focus();
343
+ ) === this && t.focus() : t.focus();
273
344
  }
274
345
  }
346
+ get _hasDescription() {
347
+ const e = this.querySelector('[slot="description"]');
348
+ return !!this.description || !!e;
349
+ }
275
350
  /**
276
351
  * Event Handlers
277
352
  * --------------------------------------------------------------------------
@@ -291,65 +366,117 @@ const p = class p extends x {
291
366
  );
292
367
  }
293
368
  // Handle checkbox change event
294
- _handleChange(e) {
295
- const { checked: o } = e.target;
296
- this.checked = o, this.groupExist || this._internals.setFormValue(this.checked ? this.value : null), this._validate(), this._emitChangeEvent();
369
+ async _handleChange(e) {
370
+ const { checked: t } = e.target, r = this.checked;
371
+ this.checked = t, this.groupExist || this._internals.setFormValue(this.checked ? this.value : null), this.other && r && !t && (this.showOtherError = !1, this._hasUserInteracted = !1, this._dispatchClearError()), this._validate(), this._emitChangeEvent();
297
372
  }
298
373
  _handleFocus() {
299
374
  this.dispatchEvent(new Event("nys-focus"));
300
375
  }
301
376
  _handleBlur() {
302
- this.dispatchEvent(new Event("nys-blur"));
377
+ this.dispatchEvent(new Event("nys-blur")), this.other && this.checked && (this._hasUserInteracted = !0, this._validateOtherAndEmitError());
378
+ }
379
+ _handleTextInputBlur() {
380
+ this._hasUserInteracted = !0, this._validateOtherAndEmitError();
303
381
  }
304
382
  async _handleKeydown(e) {
305
383
  e.code === "Space" && (e.preventDefault(), this.disabled || (this.checked = !this.checked, this._internals.setFormValue(this.checked ? this.value : null), await this.updateComplete, this._validate(), this._emitChangeEvent()));
306
384
  }
385
+ _handleTextInput(e) {
386
+ let r = e.target.value;
387
+ this.value = r, this._hasUserInteracted && this._validateOtherAndEmitError(), this._emitChangeEvent();
388
+ }
389
+ _validateOtherAndEmitError() {
390
+ if (!this.other) return;
391
+ if (!this.checked || !this._hasUserInteracted) {
392
+ this.showOtherError = !1, this._dispatchClearError();
393
+ return;
394
+ }
395
+ const e = this.value.trim() === "";
396
+ this.showOtherError = e, e && this.dispatchEvent(
397
+ new CustomEvent("nys-error", {
398
+ detail: {
399
+ id: this.id,
400
+ name: this.name,
401
+ type: "other",
402
+ message: "Please enter a value for this option.",
403
+ sourceCheckbox: this
404
+ },
405
+ bubbles: !0,
406
+ composed: !0
407
+ })
408
+ );
409
+ }
410
+ _dispatchClearError() {
411
+ this.dispatchEvent(
412
+ new CustomEvent("nys-error-clear", {
413
+ bubbles: !0,
414
+ composed: !0
415
+ })
416
+ );
417
+ }
307
418
  render() {
308
- return b`
419
+ return d`
309
420
  <div class="nys-checkbox">
310
- <div class="nys-checkbox__checkboxwrapper">
311
- <input
312
- id=${this.id + "--native"}
313
- class="nys-checkbox__checkbox"
314
- type="checkbox"
315
- name="${k(this.name ? this.name : void 0)}"
316
- .checked=${this.checked}
317
- ?disabled=${this.disabled}
318
- .value=${this.value}
319
- ?required="${this.required}"
320
- form=${k(this.form || void 0)}
321
- aria-checked="${this.checked}"
322
- aria-disabled="${this.disabled ? "true" : "false"}"
323
- aria-required="${this.required}"
324
- aria-describedby="group-info"
325
- @change="${this._handleChange}"
326
- @focus="${this._handleFocus}"
327
- @blur="${this._handleBlur}"
328
- @keydown="${this._handleKeydown}"
329
- aria-label="${this.label}"
330
- />
331
- ${this.checked ? b`<nys-icon
332
- name="check"
333
- size="${this.size === "md" ? "4xl" : this.size === "sm" ? "2xl" : "4xl"}"
334
- class="nys-checkbox__icon"
335
- ></nys-icon>` : ""}
336
- </div>
337
- ${this.label && b`
338
- <nys-label
339
- tooltip=${this.tooltip}
340
- for=${this.id + "--native"}
341
- label=${this.label}
342
- description=${k(this.description ?? void 0)}
343
- flag=${k(this.required ? "required" : void 0)}
344
- ?inverted=${this.inverted}
345
- >
346
- <slot name="description" slot="description"
347
- >${this.description}</slot
421
+ <div
422
+ class="nys-checkbox__main-container ${this._hasDescription ? "has-description" : ""}"
423
+ >
424
+ <div class="nys-checkbox__checkbox-wrapper">
425
+ <input
426
+ id=${this.id + "--native"}
427
+ class="nys-checkbox__checkbox"
428
+ type="checkbox"
429
+ name="${y(this.name ? this.name : void 0)}"
430
+ .checked=${this.checked}
431
+ ?disabled=${this.disabled}
432
+ .value=${this.value}
433
+ ?required="${this.required}"
434
+ form=${y(this.form || void 0)}
435
+ aria-checked="${this.checked}"
436
+ aria-disabled="${this.disabled ? "true" : "false"}"
437
+ aria-required="${this.required}"
438
+ aria-describedby="group-info"
439
+ @change="${this._handleChange}"
440
+ @focus="${this._handleFocus}"
441
+ @keydown="${this._handleKeydown}"
442
+ aria-label=${this.label || y(this.other ? "Other" : void 0)}
443
+ />
444
+ ${this.checked ? d`<nys-icon
445
+ name="check"
446
+ size="${this.size === "md" ? "4xl" : this.size === "sm" ? "2xl" : "4xl"}"
447
+ class="nys-checkbox__icon"
448
+ ></nys-icon>` : ""}
449
+ </div>
450
+ ${(this.label || this.other) && d`
451
+ <nys-label
452
+ tooltip=${this.tooltip}
453
+ for=${this.id + "--native"}
454
+ label="${this.label || (this.other ? "Other" : "")}"
455
+ description=${y(this.description || void 0)}
456
+ flag=${y(this.required ? "required" : void 0)}
457
+ ?inverted=${this.inverted}
348
458
  >
349
- </nys-label>
350
- `}
459
+ <slot name="description" slot="description"
460
+ >${this.description}</slot
461
+ >
462
+ </nys-label>
463
+ `}
464
+ </div>
465
+ <div class="nys-checkbox__other-container">
466
+ ${this.other && this.checked ? d`
467
+ <nys-textinput
468
+ .value=${this.value}
469
+ id=${"radiobutton-other-" + this.id}
470
+ @nys-input=${this._handleTextInput}
471
+ @nys-blur=${this._handleTextInputBlur}
472
+ ariaLabel="Other"
473
+ aria-invalid=${this.showOtherError ? "true" : "false"}
474
+ width=${this.isMobile ? "full" : "md"}
475
+ ></nys-textinput>
476
+ ` : ""}
477
+ </div>
351
478
  </div>
352
- ${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? b`<nys-errormessage
479
+ ${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? d`<nys-errormessage
353
480
  id="single-error-message"
354
481
  ?showError=${this.showError}
355
482
  errorMessage=${this._internals.validationMessage || this.errorMessage}
@@ -358,59 +485,68 @@ const p = class p extends x {
358
485
  `;
359
486
  }
360
487
  };
361
- p.styles = v(_), p.formAssociated = !0;
362
- let c = p;
488
+ p.styles = v(f), p.formAssociated = !0;
489
+ let i = p;
363
490
  n([
364
- r({ type: Boolean, reflect: !0 })
365
- ], c.prototype, "checked");
491
+ s({ type: Boolean, reflect: !0 })
492
+ ], i.prototype, "checked");
366
493
  n([
367
- r({ type: Boolean, reflect: !0 })
368
- ], c.prototype, "disabled");
494
+ s({ type: Boolean, reflect: !0 })
495
+ ], i.prototype, "disabled");
369
496
  n([
370
- r({ type: Boolean, reflect: !0 })
371
- ], c.prototype, "required");
497
+ s({ type: Boolean, reflect: !0 })
498
+ ], i.prototype, "required");
372
499
  n([
373
- r({ type: String })
374
- ], c.prototype, "label");
500
+ s({ type: String })
501
+ ], i.prototype, "label");
375
502
  n([
376
- r({ type: String })
377
- ], c.prototype, "description");
503
+ s({ type: String })
504
+ ], i.prototype, "description");
378
505
  n([
379
- r({ type: String, reflect: !0 })
380
- ], c.prototype, "id");
506
+ s({ type: String, reflect: !0 })
507
+ ], i.prototype, "id");
381
508
  n([
382
- r({ type: String, reflect: !0 })
383
- ], c.prototype, "name");
509
+ s({ type: String, reflect: !0 })
510
+ ], i.prototype, "name");
384
511
  n([
385
- r({ type: String })
386
- ], c.prototype, "value");
512
+ s({ type: String })
513
+ ], i.prototype, "value");
387
514
  n([
388
- r({ type: String, reflect: !0 })
389
- ], c.prototype, "form");
515
+ s({ type: String, reflect: !0 })
516
+ ], i.prototype, "form");
390
517
  n([
391
- r({ type: Boolean, reflect: !0 })
392
- ], c.prototype, "showError");
518
+ s({ type: Boolean, reflect: !0 })
519
+ ], i.prototype, "showError");
393
520
  n([
394
- r({ type: String })
395
- ], c.prototype, "errorMessage");
521
+ s({ type: String })
522
+ ], i.prototype, "errorMessage");
396
523
  n([
397
- r({ type: Boolean })
398
- ], c.prototype, "groupExist");
524
+ s({ type: Boolean })
525
+ ], i.prototype, "groupExist");
399
526
  n([
400
- r({ type: Boolean, reflect: !0 })
401
- ], c.prototype, "tile");
527
+ s({ type: Boolean, reflect: !0 })
528
+ ], i.prototype, "tile");
402
529
  n([
403
- r({ type: Boolean, reflect: !0 })
404
- ], c.prototype, "inverted");
530
+ s({ type: Boolean, reflect: !0 })
531
+ ], i.prototype, "inverted");
405
532
  n([
406
- r({ type: String })
407
- ], c.prototype, "tooltip");
533
+ s({ type: String })
534
+ ], i.prototype, "tooltip");
408
535
  n([
409
- r({ type: String, reflect: !0 })
410
- ], c.prototype, "size");
411
- customElements.get("nys-checkbox") || customElements.define("nys-checkbox", c);
536
+ s({ type: String, reflect: !0 })
537
+ ], i.prototype, "size");
538
+ n([
539
+ s({ type: Boolean, reflect: !0 })
540
+ ], i.prototype, "other");
541
+ n([
542
+ s({ type: Boolean })
543
+ ], i.prototype, "showOtherError");
544
+ n([
545
+ _()
546
+ ], i.prototype, "isMobile");
547
+ customElements.get("nys-checkbox") || customElements.define("nys-checkbox", i);
412
548
  export {
413
- c as NysCheckbox,
414
- i as NysCheckboxgroup
549
+ i as NysCheckbox,
550
+ c as NysCheckboxgroup
415
551
  };
416
552
  //# sourceMappingURL=nys-checkbox.js.map
package/dist/nys-checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nys-checkbox.js","sources":["../src/nys-checkboxgroup.ts","../src/nys-checkbox.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-checkbox.scss?inline\";\n\nlet checkboxgroupIdCounter = 0;\n\n/**\n * `<nys-checkboxgroup>` is a form-associated container for multiple `<nys-checkbox>` components.\n * Handles grouping, validation, required constraints, form submission, and accessibility.\n *\n * Features:\n * - Manages multiple checkboxes as a single form field\n * - Supports required/optional flags and error messages\n * - Propagates size, tile, and inverted styling to child checkboxes\n * - Keyboard and screen reader accessible via fieldset/legend\n *\n * @slot default - Slot for child `<nys-checkbox>` elements\n * @slot description - Slot for custom description content\n *\n * @fires nys-change - Fired when any child checkbox changes\n * @fires nys-focus - Fired when any child checkbox gains focus\n * @fires nys-blur - Fired when any child checkbox loses focus\n */\n\nexport class NysCheckboxgroup extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String, reflect: true }) name = \"\";\n @property({ type: Boolean, reflect: true }) required = false;\n @property({ type: Boolean, reflect: true }) optional = false;\n @property({ type: Boolean, reflect: true }) showError = false;\n @property({ type: String }) errorMessage = \"\";\n @property({ type: String }) label = \"\";\n @property({ type: String }) description = \"\";\n @property({ type: Boolean, reflect: true }) tile = false;\n @property({ type: String }) tooltip = \"\";\n @property({ type: Boolean, reflect: true }) inverted = false;\n @property({ type: String, reflect: true }) form: string | null = null;\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n @state() private _slottedDescriptionText = \"\";\n\n private _internals: ElementInternals;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-checkbox-${Date.now()}-${checkboxgroupIdCounter++}`;\n }\n this.addEventListener(\"nys-change\", this._handleCheckboxChange);\n this.addEventListener(\"invalid\", this._handleInvalid);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"nys-change\", this._handleCheckboxChange);\n this.removeEventListener(\"invalid\", this._handleInvalid);\n }\n\n firstUpdated() {\n // This ensures our checkboxes sets the value only once for formData (not within the individual checkboxes)\n this._setGroupExist();\n this._updateCheckboxSize();\n this._updateCheckboxTile();\n this._updateCheckboxShowError();\n this._getSlotDescriptionForAria();\n }\n\n updated(changedProperties: Map<string | symbol, unknown>) {\n if (changedProperties.has(\"required\")) {\n if (this.required) {\n this._setupCheckboxRequired();\n }\n }\n if (changedProperties.has(\"size\")) {\n this._updateCheckboxSize();\n }\n if (changedProperties.has(\"tile\")) {\n this._updateCheckboxTile();\n }\n if (changedProperties.has(\"inverted\")) {\n this._updateCheckboxInvert();\n }\n if (changedProperties.has(\"showError\")) {\n this._updateCheckboxShowError();\n }\n if (changedProperties.has(\"form\")) {\n this._updateCheckboxForm();\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _setGroupExist() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox: any) => {\n checkbox.groupExist = true;\n });\n }\n\n // Initial update on checkbox required attribute\n private async _setupCheckboxRequired() {\n const firstCheckbox = this.querySelector(\"nys-checkbox\");\n const message = this.errorMessage || \"This field is required\";\n\n const firstCheckboxInput = firstCheckbox\n ? await (firstCheckbox as any).getInputElement()\n : null;\n\n this._internals.setValidity(\n { valueMissing: true },\n message,\n firstCheckboxInput ? firstCheckboxInput : this,\n );\n }\n\n // Updates the required attribute of each checkbox in the group\n private async _manageRequire() {\n if (this.required) {\n const message = this.errorMessage || \"Please select at least one option.\";\n const firstCheckbox = this.querySelector(\"nys-checkbox\");\n const firstCheckboxInput = firstCheckbox\n ? await (firstCheckbox as any).getInputElement().catch(() => null)\n : null;\n\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n // Loop through each child checkbox to see if one is checked.\n const atLeastOneChecked = Array.from(checkboxes).some(\n (checkbox: any) => checkbox.checked,\n );\n\n if (atLeastOneChecked) {\n this._internals.setValidity({});\n this.showError = false;\n } else {\n this._internals.setValidity(\n { valueMissing: true },\n message,\n firstCheckboxInput ? firstCheckboxInput : this,\n );\n this.showError = true;\n }\n }\n }\n\n // Updates the size of each checkbox in the group\n private _updateCheckboxSize() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n checkbox.setAttribute(\"size\", this.size);\n });\n }\n\n private _updateCheckboxTile() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.tile) {\n checkbox.toggleAttribute(\"tile\", true);\n } else {\n checkbox.removeAttribute(\"tile\");\n }\n });\n }\n\n private _updateCheckboxInvert() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.inverted) {\n checkbox.toggleAttribute(\"inverted\", true);\n } else {\n checkbox.removeAttribute(\"inverted\");\n }\n });\n }\n\n private _updateCheckboxShowError() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.showError) {\n checkbox.setAttribute(\"showError\", \"\");\n } else {\n checkbox.removeAttribute(\"showError\");\n }\n });\n }\n\n private _updateCheckboxForm() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.showError) {\n if (this.form !== null) {\n checkbox.setAttribute(\"form\", this.form);\n } else {\n checkbox.removeAttribute(\"form\");\n }\n } else {\n checkbox.removeAttribute(\"form\");\n }\n });\n }\n\n // Get the slotted text contents so native VO can attempt to announce it within the legend in the fieldset\n private _getSlotDescriptionForAria() {\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"description\"]',\n ) as HTMLSlotElement;\n const nodes = slot?.assignedNodes({ flatten: true }) || [];\n\n this._slottedDescriptionText = nodes\n .map((node) => node.textContent?.trim())\n .filter(Boolean)\n .join(\", \");\n }\n\n private async _handleInvalid(event: Event) {\n event.preventDefault();\n\n this.showError = true;\n this._manageRequire(); // Refresh validation message\n\n const firstCheckbox = this.querySelector(\"nys-checkbox\");\n const firstCheckboxInput = firstCheckbox\n ? await (firstCheckbox as any).getInputElement()\n : null;\n\n if (firstCheckboxInput) {\n // Focus only if this is the first invalid element (top-down approach)\n const form = this._internals.form;\n if (form) {\n const elements = Array.from(form.elements) as Array<\n HTMLElement & { checkValidity?: () => boolean }\n >;\n // Find the first element in the form that is invalid\n const firstInvalidElement = elements.find((element) => {\n // If element is checkboxgroup, we see if anyone checkboxes within the group is checked to fulfill required constraint\n if (element.tagName.toLowerCase() === \"nys-checkboxgroup\") {\n const allCheckboxes = Array.from(\n this.querySelectorAll(\"nys-checkbox\"),\n ) as any[];\n const hasCheckedCheckbox = allCheckboxes.filter(\n (checkbox) => checkbox.checked,\n );\n // Required constraint not met, continue logic to have this component be focused\n if (hasCheckedCheckbox.length === 0) {\n return element;\n }\n } else {\n return (\n typeof element.checkValidity === \"function\" &&\n !element.checkValidity()\n );\n }\n });\n\n if (firstInvalidElement === this) {\n firstCheckboxInput.focus();\n }\n } else {\n // If not part of a form, simply focus.\n firstCheckboxInput.focus();\n }\n }\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n // Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.\n private _handleCheckboxChange(event: Event) {\n const customEvent = event as CustomEvent;\n const { name } = customEvent.detail;\n const checkboxes = Array.from(this.querySelectorAll(\"nys-checkbox\"));\n\n // Filter to only the checked ones and extract their values.\n const selectedValues = checkboxes\n .filter((checkbox: any) => checkbox.checked)\n .map((checkbox: any) => checkbox.value);\n\n this.name = name;\n\n this._internals.setFormValue(selectedValues.join(\", \"));\n\n this._manageRequire();\n }\n\n render() {\n return html`\n <div class=\"nys-checkboxgroup\">\n <nys-label\n for=${this.id + \"--native\"}\n label=${this.label}\n description=${this.description}\n flag=${this.required ? \"required\" : this.optional ? \"optional\" : \"\"}\n tooltip=${this.tooltip}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\">${this.description}</slot>\n </nys-label>\n <div class=\"nys-checkboxgroup__content\">\n <fieldset>\n <legend class=\"sr-only\">\n ${this.label}${this._slottedDescriptionText\n ? ` ${this._slottedDescriptionText}`\n : this.description\n ? ` ${this.description}`\n : \"\"}\n </legend>\n <slot></slot>\n </fieldset>\n </div>\n <nys-errormessage\n ?showError=${this.showError}\n errorMessage=${this._internals.validationMessage || this.errorMessage}\n .showDivider=${!this.tile}\n ></nys-errormessage>\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-checkboxgroup\")) {\n customElements.define(\"nys-checkboxgroup\", NysCheckboxgroup);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport \"./nys-checkboxgroup\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-checkbox.scss?inline\";\n\nlet checkboxIdCounter = 0;\n\n/**\n * `<nys-checkbox>` is an accessible, form-associated checkbox component.\n * Can be used standalone or within a `<nys-checkboxgroup>`.\n *\n * Features:\n * - Supports labels, descriptions, and tooltips\n * - Displays error messages with `showError` and `errorMessage`\n * - Keyboard interaction with spacebar toggle\n * - Form integration via ElementInternals (`checked` value submitted)\n *\n * @fires nys-change - Fired when checkbox value changes\n * @fires nys-focus - Fired on focus\n * @fires nys-blur - Fired on blur\n *\n * @slot description - Slot to provide a custom description element\n */\n\nexport class NysCheckbox extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: Boolean, reflect: true }) checked = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean, reflect: true }) required = false;\n @property({ type: String }) label = \"\";\n @property({ type: String }) description = \"\";\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String, reflect: true }) name = \"\";\n @property({ type: String }) value = \"\";\n @property({ type: String, reflect: true }) form: string | null = null;\n @property({ type: Boolean, reflect: true }) showError = false;\n @property({ type: String }) errorMessage = \"\";\n @property({ type: Boolean }) groupExist = false;\n @property({ type: Boolean, reflect: true }) tile = false;\n @property({ type: Boolean, reflect: true }) inverted = false;\n @property({ type: String }) tooltip = \"\";\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n public async getInputElement(): Promise<HTMLInputElement | null> {\n await this.updateComplete; // Wait for the component to finish rendering\n return this.shadowRoot?.querySelector(\"input\") || null;\n }\n\n private _internals: ElementInternals;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-checkbox-${Date.now()}-${checkboxIdCounter++}`;\n }\n this.addEventListener(\"invalid\", this._handleInvalid);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"invalid\", this._handleInvalid);\n }\n\n firstUpdated() {\n // This ensures our element always participates in the form\n this._setValue();\n this._manageRequire();\n this._manageLabelClick();\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n private _setValue() {\n if (!this.groupExist) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n }\n\n private _manageRequire() {\n const input = this.shadowRoot?.querySelector(\"input\");\n const message = this.errorMessage || \"This field is required\";\n if (!input) return;\n\n if (this.required && !this.checked) {\n this._internals.ariaRequired = \"true\";\n this._internals.setValidity({ valueMissing: true }, message, input);\n } else {\n this._internals.setValidity({});\n }\n }\n\n private _setValidityMessage(message: string = \"\") {\n const input = this.shadowRoot?.querySelector(\"input\");\n if (!input) return;\n\n // Toggle the HTML <div> tag error message\n this.showError = !!message;\n // If user sets errorMessage, this will always override the native validation message\n if (this.errorMessage?.trim() && message !== \"\") {\n message = this.errorMessage;\n }\n\n this._internals.setValidity(\n message ? { customError: true } : {},\n message,\n input,\n );\n }\n\n private _validate() {\n const input = this.shadowRoot?.querySelector(\"input\");\n if (!input) return;\n\n // Get the native validation state\n const validity = input.validity;\n let message = \"\";\n\n if (validity.valueMissing) {\n message = \"This field is required\";\n }\n\n this._setValidityMessage(message);\n }\n\n // Called automatically when the parent form is reset\n formResetCallback() {\n this.checked = false;\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n // This helper function is called to perform the element's native validation.\n checkValidity(): boolean {\n // If the radiogroup is required but no radio is selected, return false.\n if (this.required && !this.checked) {\n return false;\n }\n\n // Otherwise, optionally check the native input's validity if available.\n const input = this.shadowRoot?.querySelector(\"input\");\n return input ? input.checkValidity() : true;\n }\n\n private _handleInvalid(event: Event) {\n event.preventDefault();\n\n this.showError = true;\n this._validate(); // Make sure validation message appears\n\n const input = this.shadowRoot?.querySelector(\"input\");\n if (input) {\n // Focus only if this is the first invalid element (top-down approach)\n const form = this._internals.form;\n if (form) {\n const elements = Array.from(form.elements) as Array<\n HTMLElement & { checkValidity?: () => boolean }\n >;\n // Find the first element in the form that is invalid\n const firstInvalidElement = elements.find(\n (element) =>\n typeof element.checkValidity === \"function\" &&\n !element.checkValidity(),\n );\n if (firstInvalidElement === this) {\n input.focus();\n }\n } else {\n // If not part of a form, simply focus.\n input.focus();\n }\n }\n }\n\n private _manageLabelClick = () => {\n const wrapper = this.shadowRoot?.querySelector(\".nys-checkbox\");\n const inputEl = this.shadowRoot?.querySelector(\"input\");\n\n if (!wrapper || !inputEl) return;\n\n wrapper.addEventListener(\"click\", (e) => {\n // Avoid double toggling the checkbox. Already handled by input\n if ((e.target as HTMLElement).tagName.toLowerCase() === \"input\") return;\n\n if (!this.disabled) {\n inputEl.click();\n }\n });\n };\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _emitChangeEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-change\", {\n detail: {\n id: this.id,\n checked: this.checked,\n name: this.name,\n value: this.value,\n },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // Handle checkbox change event\n private _handleChange(e: Event) {\n const { checked } = e.target as HTMLInputElement;\n this.checked = checked;\n if (!this.groupExist) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n this._validate();\n this._emitChangeEvent();\n }\n\n private _handleFocus() {\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n private _handleBlur() {\n this.dispatchEvent(new Event(\"nys-blur\"));\n }\n\n private async _handleKeydown(e: KeyboardEvent) {\n if (e.code === \"Space\") {\n e.preventDefault();\n if (!this.disabled) {\n this.checked = !this.checked;\n this._internals.setFormValue(this.checked ? this.value : null);\n\n // Wait for DOM updates before validating. This is necessary to ensure the native input validation state is updated before this.validate().\n await this.updateComplete;\n this._validate();\n\n this._emitChangeEvent();\n }\n }\n }\n\n render() {\n return html`\n <div class=\"nys-checkbox\">\n <div class=\"nys-checkbox__checkboxwrapper\">\n <input\n id=${this.id + \"--native\"}\n class=\"nys-checkbox__checkbox\"\n type=\"checkbox\"\n name=\"${ifDefined(this.name ? this.name : undefined)}\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n .value=${this.value}\n ?required=\"${this.required}\"\n form=${ifDefined(this.form || undefined)}\n aria-checked=\"${this.checked}\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n aria-required=\"${this.required}\"\n aria-describedby=\"group-info\"\n @change=\"${this._handleChange}\"\n @focus=\"${this._handleFocus}\"\n @blur=\"${this._handleBlur}\"\n @keydown=\"${this._handleKeydown}\"\n aria-label=\"${this.label}\"\n />\n ${this.checked\n ? html`<nys-icon\n name=\"check\"\n size=\"${this.size === \"md\"\n ? \"4xl\"\n : this.size === \"sm\"\n ? \"2xl\"\n : \"4xl\"}\"\n class=\"nys-checkbox__icon\"\n ></nys-icon>`\n : \"\"}\n </div>\n ${this.label &&\n html`\n <nys-label\n tooltip=${this.tooltip}\n for=${this.id + \"--native\"}\n label=${this.label}\n description=${ifDefined(this.description ?? undefined)}\n flag=${ifDefined(this.required ? \"required\" : undefined)}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\"\n >${this.description}</slot\n >\n </nys-label>\n `}\n </div>\n ${this.parentElement?.tagName.toLowerCase() !== \"nys-checkboxgroup\"\n ? html`<nys-errormessage\n id=\"single-error-message\"\n ?showError=${this.showError}\n errorMessage=${this._internals.validationMessage ||\n this.errorMessage}\n .showDivider=${!this.tile}\n ></nys-errormessage>`\n : \"\"}\n `;\n }\n}\n\nif (!customElements.get(\"nys-checkbox\")) {\n customElements.define(\"nys-checkbox\", NysCheckbox);\n}\n"],"names":["checkboxgroupIdCounter","_NysCheckboxgroup","LitElement","changedProperties","checkbox","firstCheckbox","message","firstCheckboxInput","checkboxes","nodes","node","event","form","element","customEvent","name","selectedValues","html","unsafeCSS","styles","NysCheckboxgroup","__decorateClass","property","state","checkboxIdCounter","_NysCheckbox","wrapper","inputEl","e","input","validity","checked","ifDefined","NysCheckbox"],"mappings":"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"}
1
+ {"version":3,"file":"nys-checkbox.js","sources":["../src/nys-checkboxgroup.ts","../src/nys-checkbox.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-checkbox.scss?inline\";\nimport type { NysCheckbox } from \"./nys-checkbox\";\n\nlet checkboxgroupIdCounter = 0;\n\n/**\n * A container for grouping multiple `nys-checkbox` components as a single form control.\n * Handles validation, required constraints, and submits comma-separated values.\n *\n * Use to allow users to select multiple options from a list. Apply `tile`, `size`, and `inverted` to the group\n * and all children inherit these styles automatically.\n *\n * @summary Container for grouping checkboxes as a single form control.\n * @element nys-checkboxgroup\n *\n * @slot - Default slot for `nys-checkbox` elements.\n * @slot description - Custom HTML description content.\n *\n * @example Basic checkbox group\n * ```html\n * <nys-checkboxgroup label=\"Select landmarks\" required>\n * <nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n * <nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n * </nys-checkboxgroup>\n * ```\n */\n\nexport class NysCheckboxgroup extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Unique identifier. Auto-generated if not provided. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Name for form submission. Set on group, not individual checkboxes. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** Requires at least one checkbox to be checked. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Shows \"Optional\" flag. */\n @property({ type: Boolean, reflect: true }) optional = false;\n\n /** Shows error message when true. */\n @property({ type: Boolean, reflect: true }) showError = false;\n\n /** Error message text. Shown only when `showError` is true. */\n @property({ type: String }) errorMessage = \"\";\n\n /** Visible label text for the group. */\n @property({ type: String }) label = \"\";\n\n /** Helper text below label. Use slot for custom HTML. */\n @property({ type: String }) description = \"\";\n\n /** Renders all checkboxes as tiles with larger clickable area. */\n @property({ type: Boolean, reflect: true }) tile = false;\n\n /** Tooltip text shown on hover/focus of info icon. */\n @property({ type: String }) tooltip = \"\";\n\n /** Adjusts colors for dark backgrounds. Applied to all children. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /** Form `id` to associate with. Applied to all children. */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /**\n * Checkbox size for all children: `sm` (24px) or `md` (32px, default).\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n @state() private _slottedDescriptionText = \"\";\n @state() private _hasOtherError = false;\n @state() private _otherErrorCheckbox: NysCheckbox | null = null;\n\n private _internals: ElementInternals;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-checkboxgroup-${Date.now()}-${checkboxgroupIdCounter++}`;\n }\n this.addEventListener(\"nys-change\", this._handleCheckboxChange);\n this.addEventListener(\"invalid\", this._handleInvalid);\n this.addEventListener(\"nys-error\", this._handleChildError);\n this.addEventListener(\"nys-error-clear\", this._handleChildErrorClear);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"nys-change\", this._handleCheckboxChange);\n this.removeEventListener(\"invalid\", this._handleInvalid);\n this.removeEventListener(\"nys-error\", this._handleChildError);\n this.removeEventListener(\"nys-error-clear\", this._handleChildErrorClear);\n }\n\n firstUpdated() {\n // This ensures our checkboxes sets the value only once for formData (not within the individual checkboxes)\n this._setGroupExist();\n this._updateCheckboxSize();\n this._updateCheckboxTile();\n this._updateCheckboxShowError();\n this._getSlotDescriptionForAria();\n }\n\n updated(changedProperties: Map<string | symbol, unknown>) {\n if (changedProperties.has(\"required\")) {\n if (this.required) {\n this._setupCheckboxRequired();\n }\n }\n if (changedProperties.has(\"size\")) {\n this._updateCheckboxSize();\n }\n if (changedProperties.has(\"tile\")) {\n this._updateCheckboxTile();\n }\n if (changedProperties.has(\"inverted\")) {\n this._updateCheckboxInvert();\n }\n if (changedProperties.has(\"showError\")) {\n this._updateCheckboxShowError();\n }\n if (changedProperties.has(\"form\")) {\n this._updateCheckboxForm();\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _hasAtLeastOneChecked() {\n return Array.from(this.querySelectorAll(\"nys-checkbox\")).some(\n (checkbox: any) => checkbox.checked,\n );\n }\n\n private _setGroupExist() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox: any) => {\n checkbox.groupExist = true;\n });\n }\n\n // Initial update on checkbox required attribute\n private async _setupCheckboxRequired() {\n const firstCheckbox = this.querySelector(\"nys-checkbox\");\n const message = this.errorMessage || \"This field is required\";\n\n const firstCheckboxInput = firstCheckbox\n ? await (firstCheckbox as any).getInputElement()\n : null;\n\n this._internals.setValidity(\n { valueMissing: true },\n message,\n firstCheckboxInput ? firstCheckboxInput : this,\n );\n }\n\n // Updates the required attribute of each checkbox in the group\n private async _manageRequire() {\n if (!this.required) return;\n\n const message =\n this.errorMessage || \"You must make a selection to proceed.\";\n const checkboxes = Array.from(\n this.querySelectorAll(\"nys-checkbox\"),\n ) as any[];\n\n // Loop through each child checkbox to see if one is checked.\n const atLeastOneChecked = this._hasAtLeastOneChecked();\n\n const firstCheckboxInput = checkboxes\n ? await checkboxes[0].getInputElement().catch(() => null)\n : null;\n\n // Always clear validation first to prevent message lingering\n this._internals.setValidity({});\n this.showError = false;\n\n if (!atLeastOneChecked) {\n // Only set valueMissing if there's no active \"other\" error\n // If there IS an \"other\" error, keep that as the primary error\n if (!this._hasOtherError) {\n this._internals.setValidity(\n { valueMissing: true },\n message,\n firstCheckboxInput ?? this,\n );\n this.showError = true;\n } else {\n // Re-set the other error since we just cleared everything\n this._setCustomOtherError();\n this.showError = true;\n }\n } else {\n // At least one checkbox is checked\n // If there's an \"other\" error, reset it since we cleared everything above\n if (this._hasOtherError && this._otherErrorCheckbox) {\n this._setCustomOtherError();\n this.showError = true;\n }\n }\n }\n\n private _setCustomOtherError() {\n const textInput =\n this._otherErrorCheckbox?.shadowRoot?.querySelector(\"nys-textinput\");\n const targetElement = textInput || this._otherErrorCheckbox;\n this._internals.setValidity(\n { customError: true },\n \"Please complete this field.\",\n targetElement as HTMLElement,\n );\n }\n\n // Updates the size of each checkbox in the group\n private _updateCheckboxSize() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n checkbox.setAttribute(\"size\", this.size);\n });\n }\n\n private _updateCheckboxTile() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.tile) {\n checkbox.toggleAttribute(\"tile\", true);\n } else {\n checkbox.removeAttribute(\"tile\");\n }\n });\n }\n\n private _updateCheckboxInvert() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.inverted) {\n checkbox.toggleAttribute(\"inverted\", true);\n } else {\n checkbox.removeAttribute(\"inverted\");\n }\n });\n }\n\n private _updateCheckboxShowError() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.showError) {\n checkbox.setAttribute(\"showError\", \"\");\n } else {\n checkbox.removeAttribute(\"showError\");\n }\n });\n }\n\n private _updateCheckboxForm() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.showError) {\n if (this.form !== null) {\n checkbox.setAttribute(\"form\", this.form);\n } else {\n checkbox.removeAttribute(\"form\");\n }\n } else {\n checkbox.removeAttribute(\"form\");\n }\n });\n }\n\n // Get the slotted text contents so native VO can attempt to announce it within the legend in the fieldset\n private _getSlotDescriptionForAria() {\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"description\"]',\n ) as HTMLSlotElement;\n const nodes = slot?.assignedNodes({ flatten: true }) || [];\n\n this._slottedDescriptionText = nodes\n .map((node) => node.textContent?.trim())\n .filter(Boolean)\n .join(\", \");\n }\n\n // This callback is automatically called when the parent form is reset.\n public formResetCallback() {\n // Reset all child checkboxes\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox: any) => {\n checkbox.formResetCallback();\n });\n\n this._internals.setFormValue(\"\");\n\n // Reset validation UI\n this.showError = false;\n this._internals.setValidity({});\n\n // Re-render UI\n this.requestUpdate();\n }\n\n private async _handleInvalid(event: Event) {\n event.preventDefault();\n\n // Priority 1: Focus \"other\" text input when customError is set\n if (this._internals.validity.customError) {\n const checkboxes = Array.from(\n this.querySelectorAll(\"nys-checkbox\"),\n ) as NysCheckbox[];\n\n const otherCheckbox = checkboxes.find(\n (checkbox) => checkbox.other && checkbox.checked,\n );\n\n if (otherCheckbox) {\n const textInput =\n otherCheckbox.shadowRoot?.querySelector(\"nys-textinput\");\n\n if (textInput) {\n await (textInput as any).updateComplete;\n (textInput as HTMLElement).focus();\n return;\n }\n }\n }\n\n // Priority 2: Handle valueMissing (required validation)\n if (this._internals.validity.valueMissing) {\n this.showError = true;\n this._manageRequire(); // Refresh validation message\n\n // Fallback behavior\n const firstCheckbox = this.querySelector(\"nys-checkbox\");\n const firstCheckboxInput = firstCheckbox\n ? await (firstCheckbox as any).getInputElement()\n : null;\n\n if (firstCheckboxInput) {\n // Focus only if this is the first invalid element (top-down approach)\n const form = this._internals.form;\n if (form) {\n const elements = Array.from(form.elements) as Array<\n HTMLElement & { checkValidity?: () => boolean }\n >;\n // Find the first element in the form that is invalid\n const firstInvalidElement = elements.find((element) => {\n // If element is <nys-checkboxgroup>, we see if anyone checkboxes within the group is checked to fulfill required constraint\n if (element.tagName.toLowerCase() === \"nys-checkboxgroup\") {\n const allCheckboxes = Array.from(\n this.querySelectorAll(\"nys-checkbox\"),\n ) as any[];\n const hasCheckedCheckbox = allCheckboxes.filter(\n (checkbox) => checkbox.checked,\n );\n // Required constraint not met, continue logic to have this component be focused\n if (hasCheckedCheckbox.length === 0) {\n return element;\n }\n } else {\n return (\n typeof element.checkValidity === \"function\" &&\n !element.checkValidity()\n );\n }\n });\n\n if (firstInvalidElement === this) {\n firstCheckboxInput.focus();\n }\n } else {\n // If not part of a form, simply focus.\n firstCheckboxInput.focus();\n }\n }\n }\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n // Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.\n private _handleCheckboxChange(event: Event) {\n const customEvent = event as CustomEvent;\n const { name } = customEvent.detail;\n const checkboxes = Array.from(\n this.querySelectorAll(\"nys-checkbox\"),\n ) as NysCheckbox[];\n\n // Filter to only the checked ones and extract their values.\n const selectedValues = checkboxes\n .filter((checkbox: any) => checkbox.checked)\n .map((checkbox: any) => checkbox.value);\n\n this.name = name;\n this._internals.setFormValue(selectedValues.join(\", \"));\n\n // Check \"other\" inputs first (they take priority)\n this._checkOtherInputs(checkboxes);\n\n // Only run required validation if no \"other\" error is active\n if (!this._hasOtherError) {\n this._manageRequire();\n }\n }\n\n private async _handleChildError(event: Event) {\n event.stopPropagation();\n\n const { sourceCheckbox } = (event as CustomEvent).detail;\n if (!sourceCheckbox) return;\n\n // Track which checkbox has the error\n this._hasOtherError = true;\n this._otherErrorCheckbox = sourceCheckbox;\n this.showError = true;\n\n this._setCustomOtherError();\n }\n\n private _handleChildErrorClear(event: Event) {\n const customEvent = event as CustomEvent;\n const sourceCheckbox = customEvent.detail?.sourceCheckbox;\n\n if (\n this._otherErrorCheckbox &&\n sourceCheckbox !== this._otherErrorCheckbox\n ) {\n return;\n }\n\n // Clear the old validation state first so to prevent the old customError message from persisting\n this._internals.setValidity({});\n this.showError = false;\n\n // Then check if we need to set a new required error\n if (this.required && !this._hasAtLeastOneChecked()) {\n this._manageRequire();\n }\n }\n\n private async _checkOtherInputs(checkboxes: NysCheckbox[]) {\n let foundInvalidOther = false;\n\n for (const checkbox of checkboxes) {\n if (checkbox.checked && checkbox.other) {\n const value = checkbox.value.trim();\n\n const hasUserInteracted = (checkbox as any)._hasUserInteracted;\n\n if (!hasUserInteracted) {\n // User hasn't interacted yet, skip validation\n continue;\n }\n\n if (!value || value === \"\") {\n this._hasOtherError = true;\n this._otherErrorCheckbox = checkbox;\n this._setCustomOtherError();\n this.showError = true;\n foundInvalidOther = true;\n return;\n }\n }\n }\n\n // If we checked all and found no invalid \"other\" inputs, clear that error\n if (!foundInvalidOther && this._hasOtherError) {\n this._hasOtherError = false;\n this._otherErrorCheckbox = null;\n\n // Re-check required constraint\n if (this.required) {\n this._manageRequire();\n } else {\n this._internals.setValidity({});\n this.showError = false;\n }\n }\n }\n\n render() {\n return html`\n <fieldset\n aria-label=\"${this.label}${this._slottedDescriptionText\n ? ` ${this._slottedDescriptionText}`\n : this.description\n ? ` ${this.description}`\n : \"\"}\"\n class=\"nys-checkboxgroup\"\n role=\"radiogroup\"\n >\n <nys-label\n for=${this.id + \"--native\"}\n label=${this.label}\n description=${this.description}\n flag=${this.required ? \"required\" : this.optional ? \"optional\" : \"\"}\n tooltip=${this.tooltip}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\">${this.description}</slot>\n </nys-label>\n <div class=\"nys-checkboxgroup__content\">\n <slot></slot>\n </div>\n <nys-errormessage\n ?showError=${this.showError}\n errorMessage=${this._internals.validationMessage || this.errorMessage}\n .showDivider=${!this.tile}\n ></nys-errormessage>\n </fieldset>\n `;\n }\n}\n\nif (!customElements.get(\"nys-checkboxgroup\")) {\n customElements.define(\"nys-checkboxgroup\", NysCheckboxgroup);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport \"./nys-checkboxgroup\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-checkbox.scss?inline\";\n\nlet checkboxIdCounter = 0;\n\n/**\n * A checkbox input for binary choices or multi-select lists. Can be used standalone or in a `nys-checkboxgroup`.\n * Form-associated with validation via ElementInternals.\n *\n * Use for binary decisions (agree/disagree) or selecting multiple options from a list.\n * For single selection from 2-6 options, use `nys-radiobutton`. For immediate state changes, use `nys-toggle`.\n *\n * @summary Checkbox for binary choices or multi-select options.\n * @element nys-checkbox\n *\n * @slot description - Custom HTML description content.\n *\n * @fires nys-change - Fired when checked state changes. Detail: `{id, checked, name, value}`.\n * @fires nys-focus - Fired when checkbox gains focus.\n * @fires nys-blur - Fired when checkbox loses focus.\n *\n * @example Single checkbox\n * ```html\n * <nys-checkbox label=\"I agree to the terms\" name=\"terms\" required></nys-checkbox>\n * ```\n *\n * @example Checkbox group\n * ```html\n * <nys-checkboxgroup label=\"Select landmarks\">\n * <nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n * <nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n * </nys-checkboxgroup>\n * ```\n */\n\nexport class NysCheckbox extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Whether checkbox is checked. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** Prevents interaction. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Marks as required. Validates that checkbox is checked. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Visible label text. Required for accessibility. */\n @property({ type: String }) label = \"\";\n\n /** Helper text below label. Use slot for custom HTML. */\n @property({ type: String }) description = \"\";\n\n /** Unique identifier. Auto-generated if not provided. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Name for form submission. Use same name for grouped checkboxes. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** Value submitted when checked. */\n @property({ type: String }) value = \"\";\n\n /** Form `id` to associate with when checkbox is outside form element. */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /** Shows error message when true. */\n @property({ type: Boolean, reflect: true }) showError = false;\n\n /** Error message text. Shown only when `showError` is true. */\n @property({ type: String }) errorMessage = \"\";\n\n /** Internal: Set by parent checkboxgroup. Do not set manually. */\n @property({ type: Boolean }) groupExist = false;\n\n /** Renders as tile with larger clickable area. Apply to group for consistency. */\n @property({ type: Boolean, reflect: true }) tile = false;\n\n /** Adjusts colors for dark backgrounds. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /** Tooltip text shown on hover/focus of info icon. */\n @property({ type: String }) tooltip = \"\";\n\n /**\n * Checkbox size: `sm` (24px) or `md` (32px, default).\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n @property({ type: Boolean, reflect: true }) other = false;\n @property({ type: Boolean }) showOtherError = false;\n @state() private isMobile = window.innerWidth < 480;\n\n private _hasUserInteracted = false; // need this flag for \"eager mode\"\n\n public async getInputElement(): Promise<HTMLInputElement | null> {\n await this.updateComplete; // Wait for the component to finish rendering\n return this.shadowRoot?.querySelector(\"input\") || null;\n }\n\n private _internals: ElementInternals;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-checkbox-${Date.now()}-${checkboxIdCounter++}`;\n }\n this.addEventListener(\"invalid\", this._handleInvalid);\n this.addEventListener(\"blur\", this._handleBlur);\n window.addEventListener(\"resize\", this._handleResize);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"invalid\", this._handleInvalid);\n this.removeEventListener(\"blur\", this._handleBlur);\n window.removeEventListener(\"resize\", this._handleResize);\n }\n\n firstUpdated() {\n // This ensures our element always participates in the form\n this._setValue();\n this._manageRequire();\n this._manageLabelClick();\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n private _setValue() {\n if (!this.groupExist) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n }\n\n private _manageRequire() {\n const input = this.shadowRoot?.querySelector(\"input\");\n const message = this.errorMessage || \"This field is required\";\n if (!input) return;\n\n if (this.required && !this.checked) {\n this._internals.ariaRequired = \"true\";\n this._internals.setValidity({ valueMissing: true }, message, input);\n } else {\n this._internals.setValidity({});\n }\n }\n\n private _setValidityMessage(message: string = \"\") {\n const input = this.shadowRoot?.querySelector(\"input\");\n if (!input) return;\n\n // Toggle the HTML <div> tag error message\n this.showError = !!message;\n // If user sets errorMessage, this will always override the native validation message\n if (this.errorMessage?.trim() && message !== \"\") {\n message = this.errorMessage;\n }\n\n this._internals.setValidity(\n message ? { customError: true } : {},\n message,\n input,\n );\n }\n\n private _validate() {\n const input = this.shadowRoot?.querySelector(\"input\");\n if (!input) return;\n\n // Get the native validation state\n const validity = input.validity;\n let message = \"\";\n\n if (validity.valueMissing) {\n message = \"This field is required\";\n }\n\n this._setValidityMessage(message);\n }\n\n // Called automatically when the parent form is reset\n public formResetCallback() {\n this.checked = false;\n\n this._internals.setFormValue(null);\n\n const input = this.shadowRoot?.querySelector(\"input\");\n if (input) {\n input.checked = false;\n }\n\n // Reset validation UI\n this.showError = false;\n this.errorMessage = \"\";\n this._internals.setValidity({});\n\n // Re-render UI\n this.requestUpdate();\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n // This helper function is called to perform the element's native validation.\n checkValidity(): boolean {\n // If the radiogroup is required but no radio is selected, return false.\n if (this.required && !this.checked) {\n return false;\n }\n\n // Otherwise, optionally check the native input's validity if available.\n const input = this.shadowRoot?.querySelector(\"input\");\n return input ? input.checkValidity() : true;\n }\n\n private _handleInvalid(event: Event) {\n event.preventDefault();\n\n this.showError = true;\n this._validate(); // Make sure validation message appears\n\n const input = this.shadowRoot?.querySelector(\"input\");\n if (input) {\n // Focus only if this is the first invalid element (top-down approach)\n const form = this._internals.form;\n if (form) {\n const elements = Array.from(form.elements) as Array<\n HTMLElement & { checkValidity?: () => boolean }\n >;\n // Find the first element in the form that is invalid\n const firstInvalidElement = elements.find(\n (element) =>\n typeof element.checkValidity === \"function\" &&\n !element.checkValidity(),\n );\n if (firstInvalidElement === this) {\n input.focus();\n }\n } else {\n // If not part of a form, simply focus.\n input.focus();\n }\n }\n }\n\n private _manageLabelClick = () => {\n const main = this.shadowRoot?.querySelector(\n \".nys-checkbox__main-container\",\n );\n const inputEl = this.shadowRoot?.querySelector(\"input\");\n\n if (!main || !inputEl) return;\n\n main.addEventListener(\"click\", (e) => {\n const target = e.target as HTMLElement;\n\n // Let native input behavior work. Avoid double toggling the checkbox.\n if (target.tagName.toLowerCase() === \"input\") return;\n\n if (!this.disabled) {\n inputEl.click();\n inputEl.focus();\n }\n });\n };\n\n get _hasDescription() {\n // This accounts for both description prop or slotted content. Used for styling text alignment.\n const slot = this.querySelector('[slot=\"description\"]');\n return !!this.description || !!slot;\n }\n\n private _handleResize = () => {\n this.isMobile = window.innerWidth < 480;\n };\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _emitChangeEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-change\", {\n detail: {\n id: this.id,\n checked: this.checked,\n name: this.name,\n value: this.value,\n },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // Handle checkbox change event\n private async _handleChange(e: Event) {\n const { checked } = e.target as HTMLInputElement;\n const wasChecked = this.checked;\n\n this.checked = checked;\n\n if (!this.groupExist) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n // If unchecking \"other\", clear error state\n if (this.other && wasChecked && !checked) {\n this.showOtherError = false;\n this._hasUserInteracted = false;\n this._dispatchClearError();\n }\n\n this._validate();\n this._emitChangeEvent();\n }\n\n private _handleFocus() {\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n private _handleBlur() {\n this.dispatchEvent(new Event(\"nys-blur\"));\n\n if (this.other && this.checked) {\n this._hasUserInteracted = true;\n this._validateOtherAndEmitError();\n }\n }\n\n private _handleTextInputBlur() {\n this._hasUserInteracted = true;\n this._validateOtherAndEmitError();\n }\n\n private async _handleKeydown(e: KeyboardEvent) {\n if (e.code === \"Space\") {\n e.preventDefault();\n if (!this.disabled) {\n this.checked = !this.checked;\n this._internals.setFormValue(this.checked ? this.value : null);\n\n // Wait for DOM updates before validating. This is necessary to ensure the native input validation state is updated before this.validate().\n await this.updateComplete;\n this._validate();\n\n this._emitChangeEvent();\n }\n }\n }\n\n private _handleTextInput(event: Event) {\n const input = event.target as HTMLInputElement;\n let newValue = input.value;\n this.value = newValue;\n\n if (this._hasUserInteracted) {\n this._validateOtherAndEmitError();\n }\n\n this._emitChangeEvent();\n }\n\n private _validateOtherAndEmitError() {\n if (!this.other) return;\n\n // Prevent early validation of the \"other\" input before the user interacts with it.\n // Additionally clear validation when \"other\" checkbox is unchecked\n if (!this.checked || !this._hasUserInteracted) {\n this.showOtherError = false;\n\n this._dispatchClearError();\n return;\n }\n\n const isInvalid = this.value.trim() === \"\";\n this.showOtherError = isInvalid;\n\n if (isInvalid) {\n this.dispatchEvent(\n new CustomEvent(\"nys-error\", {\n detail: {\n id: this.id,\n name: this.name,\n type: \"other\",\n message: \"Please enter a value for this option.\",\n sourceCheckbox: this,\n },\n bubbles: true,\n composed: true,\n }),\n );\n }\n }\n\n private _dispatchClearError() {\n this.dispatchEvent(\n new CustomEvent(\"nys-error-clear\", {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n render() {\n return html`\n <div class=\"nys-checkbox\">\n <div\n class=\"nys-checkbox__main-container ${this._hasDescription\n ? \"has-description\"\n : \"\"}\"\n >\n <div class=\"nys-checkbox__checkbox-wrapper\">\n <input\n id=${this.id + \"--native\"}\n class=\"nys-checkbox__checkbox\"\n type=\"checkbox\"\n name=\"${ifDefined(this.name ? this.name : undefined)}\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n .value=${this.value}\n ?required=\"${this.required}\"\n form=${ifDefined(this.form || undefined)}\n aria-checked=\"${this.checked}\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n aria-required=\"${this.required}\"\n aria-describedby=\"group-info\"\n @change=\"${this._handleChange}\"\n @focus=\"${this._handleFocus}\"\n @keydown=\"${this._handleKeydown}\"\n aria-label=${this.label ||\n ifDefined(this.other ? \"Other\" : undefined)}\n />\n ${this.checked\n ? html`<nys-icon\n name=\"check\"\n size=\"${this.size === \"md\"\n ? \"4xl\"\n : this.size === \"sm\"\n ? \"2xl\"\n : \"4xl\"}\"\n class=\"nys-checkbox__icon\"\n ></nys-icon>`\n : \"\"}\n </div>\n ${(this.label || this.other) &&\n html`\n <nys-label\n tooltip=${this.tooltip}\n for=${this.id + \"--native\"}\n label=\"${this.label || (this.other ? \"Other\" : \"\")}\"\n description=${ifDefined(this.description || undefined)}\n flag=${ifDefined(this.required ? \"required\" : undefined)}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\"\n >${this.description}</slot\n >\n </nys-label>\n `}\n </div>\n <div class=\"nys-checkbox__other-container\">\n ${this.other && this.checked\n ? html`\n <nys-textinput\n .value=${this.value}\n id=${\"radiobutton-other-\" + this.id}\n @nys-input=${this._handleTextInput}\n @nys-blur=${this._handleTextInputBlur}\n ariaLabel=\"Other\"\n aria-invalid=${this.showOtherError ? \"true\" : \"false\"}\n width=${this.isMobile ? \"full\" : \"md\"}\n ></nys-textinput>\n `\n : \"\"}\n </div>\n </div>\n ${this.parentElement?.tagName.toLowerCase() !== \"nys-checkboxgroup\"\n ? html`<nys-errormessage\n id=\"single-error-message\"\n ?showError=${this.showError}\n errorMessage=${this._internals.validationMessage ||\n this.errorMessage}\n .showDivider=${!this.tile}\n ></nys-errormessage>`\n : \"\"}\n `;\n }\n}\n\nif (!customElements.get(\"nys-checkbox\")) {\n customElements.define(\"nys-checkbox\", NysCheckbox);\n}\n"],"names":["checkboxgroupIdCounter","_NysCheckboxgroup","LitElement","changedProperties","checkbox","firstCheckbox","message","firstCheckboxInput","checkboxes","atLeastOneChecked","targetElement","nodes","node","event","otherCheckbox","textInput","form","element","customEvent","name","selectedValues","sourceCheckbox","foundInvalidOther","value","html","unsafeCSS","styles","NysCheckboxgroup","__decorateClass","property","state","checkboxIdCounter","_NysCheckbox","main","inputEl","e","input","validity","slot","checked","wasChecked","newValue","isInvalid","ifDefined","NysCheckbox"],"mappings":"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"}
package/dist/nys-checkboxgroup.d.ts ADDED
@@ -0,0 +1,94 @@
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`, `size`, and `inverted` 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
+ /** Unique identifier. Auto-generated if not provided. */
26
+ id: string;
27
+ /** Name for form submission. Set on group, not individual checkboxes. */
28
+ name: string;
29
+ /** Requires at least one checkbox to be checked. */
30
+ required: boolean;
31
+ /** Shows "Optional" flag. */
32
+ optional: boolean;
33
+ /** Shows error message when true. */
34
+ showError: boolean;
35
+ /** Error message text. Shown only when `showError` is true. */
36
+ errorMessage: string;
37
+ /** Visible label text for the group. */
38
+ label: string;
39
+ /** Helper text below label. Use slot for custom HTML. */
40
+ description: string;
41
+ /** Renders all checkboxes as tiles with larger clickable area. */
42
+ tile: boolean;
43
+ /** Tooltip text shown on hover/focus of info icon. */
44
+ tooltip: string;
45
+ /** Adjusts colors for dark backgrounds. Applied to all children. */
46
+ inverted: boolean;
47
+ /** Form `id` to associate with. Applied to all children. */
48
+ form: string | null;
49
+ /**
50
+ * Checkbox size for all children: `sm` (24px) or `md` (32px, default).
51
+ * @default "md"
52
+ */
53
+ size: "sm" | "md";
54
+ private _slottedDescriptionText;
55
+ private _hasOtherError;
56
+ private _otherErrorCheckbox;
57
+ private _internals;
58
+ /**
59
+ * Lifecycle methods
60
+ * --------------------------------------------------------------------------
61
+ */
62
+ static formAssociated: boolean;
63
+ constructor();
64
+ connectedCallback(): void;
65
+ disconnectedCallback(): void;
66
+ firstUpdated(): void;
67
+ updated(changedProperties: Map<string | symbol, unknown>): void;
68
+ /**
69
+ * Functions
70
+ * --------------------------------------------------------------------------
71
+ */
72
+ private _hasAtLeastOneChecked;
73
+ private _setGroupExist;
74
+ private _setupCheckboxRequired;
75
+ private _manageRequire;
76
+ private _setCustomOtherError;
77
+ private _updateCheckboxSize;
78
+ private _updateCheckboxTile;
79
+ private _updateCheckboxInvert;
80
+ private _updateCheckboxShowError;
81
+ private _updateCheckboxForm;
82
+ private _getSlotDescriptionForAria;
83
+ formResetCallback(): void;
84
+ private _handleInvalid;
85
+ /**
86
+ * Event Handlers
87
+ * --------------------------------------------------------------------------
88
+ */
89
+ private _handleCheckboxChange;
90
+ private _handleChildError;
91
+ private _handleChildErrorClear;
92
+ private _checkOtherInputs;
93
+ render(): import("lit-html").TemplateResult<1>;
94
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-checkbox",
3
- "version": "1.13.0",
3
+ "version": "1.14.0",
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,14 +23,14 @@
23
23
  "lit-analyze": "lit-analyzer '**/*.ts'"
24
24
  },
25
25
  "dependencies": {
26
- "@nysds/nys-icon": "^1.13.0",
27
- "@nysds/nys-label": "^1.13.0",
28
- "@nysds/nys-errormessage": "^1.13.0"
26
+ "@nysds/nys-icon": "^1.14.0",
27
+ "@nysds/nys-label": "^1.14.0",
28
+ "@nysds/nys-errormessage": "^1.14.0"
29
29
  },
30
30
  "devDependencies": {
31
31
  "lit": "^3.3.1",
32
32
  "typescript": "^5.9.3",
33
- "vite": "^7.1.12"
33
+ "vite": "^7.3.1"
34
34
  },
35
35
  "keywords": [
36
36
  "new-york-state",