@nysds/nys-checkbox 1.11.2 → 1.11.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nys-checkbox.js +177 -1086
- package/dist/nys-checkbox.js.map +1 -1
- package/package.json +7 -7
- package/dist/index.d.ts +0 -2
- package/dist/nys-checkbox.d.ts +0 -48
- package/dist/nys-checkbox.figma.d.ts +0 -1
- package/dist/nys-checkbox.styles.d.ts +0 -2
- package/dist/nys-checkboxgroup.d.ts +0 -43
package/dist/nys-checkbox.js
CHANGED
|
@@ -1,923 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
* Repository: https://github.com/its-hcd/nysds
|
|
10
|
-
* License: MIT
|
|
11
|
-
*/
|
|
12
|
-
/**
|
|
13
|
-
* @license
|
|
14
|
-
* Copyright 2019 Google LLC
|
|
15
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
16
|
-
*/
|
|
17
|
-
const I = globalThis, B = I.ShadowRoot && (I.ShadyCSS === void 0 || I.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ie = Symbol(), G = /* @__PURE__ */ new WeakMap();
|
|
18
|
-
let be = class {
|
|
19
|
-
constructor(e, t, s) {
|
|
20
|
-
if (this._$cssResult$ = !0, s !== ie) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
21
|
-
this.cssText = e, this.t = t;
|
|
22
|
-
}
|
|
23
|
-
get styleSheet() {
|
|
24
|
-
let e = this.o;
|
|
25
|
-
const t = this.t;
|
|
26
|
-
if (B && e === void 0) {
|
|
27
|
-
const s = t !== void 0 && t.length === 1;
|
|
28
|
-
s && (e = G.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && G.set(t, e));
|
|
29
|
-
}
|
|
30
|
-
return e;
|
|
31
|
-
}
|
|
32
|
-
toString() {
|
|
33
|
-
return this.cssText;
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
const ue = (r) => new be(typeof r == "string" ? r : r + "", void 0, ie), pe = (r, e) => {
|
|
37
|
-
if (B) r.adoptedStyleSheets = e.map(((t) => t instanceof CSSStyleSheet ? t : t.styleSheet));
|
|
38
|
-
else for (const t of e) {
|
|
39
|
-
const s = document.createElement("style"), o = I.litNonce;
|
|
40
|
-
o !== void 0 && s.setAttribute("nonce", o), s.textContent = t.cssText, r.appendChild(s);
|
|
41
|
-
}
|
|
42
|
-
}, K = B ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((e) => {
|
|
43
|
-
let t = "";
|
|
44
|
-
for (const s of e.cssRules) t += s.cssText;
|
|
45
|
-
return ue(t);
|
|
46
|
-
})(r) : r;
|
|
47
|
-
/**
|
|
48
|
-
* @license
|
|
49
|
-
* Copyright 2017 Google LLC
|
|
50
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
51
|
-
*/
|
|
52
|
-
const { is: ye, defineProperty: _e, getOwnPropertyDescriptor: ke, getOwnPropertyNames: fe, getOwnPropertySymbols: ve, getPrototypeOf: xe } = Object, N = globalThis, J = N.trustedTypes, ge = J ? J.emptyScript : "", me = N.reactiveElementPolyfillSupport, q = (r, e) => r, R = { toAttribute(r, e) {
|
|
53
|
-
switch (e) {
|
|
54
|
-
case Boolean:
|
|
55
|
-
r = r ? ge : null;
|
|
56
|
-
break;
|
|
57
|
-
case Object:
|
|
58
|
-
case Array:
|
|
59
|
-
r = r == null ? r : JSON.stringify(r);
|
|
60
|
-
}
|
|
61
|
-
return r;
|
|
62
|
-
}, fromAttribute(r, e) {
|
|
63
|
-
let t = r;
|
|
64
|
-
switch (e) {
|
|
65
|
-
case Boolean:
|
|
66
|
-
t = r !== null;
|
|
67
|
-
break;
|
|
68
|
-
case Number:
|
|
69
|
-
t = r === null ? null : Number(r);
|
|
70
|
-
break;
|
|
71
|
-
case Object:
|
|
72
|
-
case Array:
|
|
73
|
-
try {
|
|
74
|
-
t = JSON.parse(r);
|
|
75
|
-
} catch {
|
|
76
|
-
t = null;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
return t;
|
|
80
|
-
} }, F = (r, e) => !ye(r, e), Y = { attribute: !0, type: String, converter: R, reflect: !1, useDefault: !1, hasChanged: F };
|
|
81
|
-
Symbol.metadata ??= Symbol("metadata"), N.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
|
|
82
|
-
class S extends HTMLElement {
|
|
83
|
-
static addInitializer(e) {
|
|
84
|
-
this._$Ei(), (this.l ??= []).push(e);
|
|
85
|
-
}
|
|
86
|
-
static get observedAttributes() {
|
|
87
|
-
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
|
|
88
|
-
}
|
|
89
|
-
static createProperty(e, t = Y) {
|
|
90
|
-
if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
|
|
91
|
-
const s = Symbol(), o = this.getPropertyDescriptor(e, s, t);
|
|
92
|
-
o !== void 0 && _e(this.prototype, e, o);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
static getPropertyDescriptor(e, t, s) {
|
|
96
|
-
const { get: o, set: i } = ke(this.prototype, e) ?? { get() {
|
|
97
|
-
return this[t];
|
|
98
|
-
}, set(c) {
|
|
99
|
-
this[t] = c;
|
|
100
|
-
} };
|
|
101
|
-
return { get: o, set(c) {
|
|
102
|
-
const h = o?.call(this);
|
|
103
|
-
i?.call(this, c), this.requestUpdate(e, h, s);
|
|
104
|
-
}, configurable: !0, enumerable: !0 };
|
|
105
|
-
}
|
|
106
|
-
static getPropertyOptions(e) {
|
|
107
|
-
return this.elementProperties.get(e) ?? Y;
|
|
108
|
-
}
|
|
109
|
-
static _$Ei() {
|
|
110
|
-
if (this.hasOwnProperty(q("elementProperties"))) return;
|
|
111
|
-
const e = xe(this);
|
|
112
|
-
e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
|
|
113
|
-
}
|
|
114
|
-
static finalize() {
|
|
115
|
-
if (this.hasOwnProperty(q("finalized"))) return;
|
|
116
|
-
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(q("properties"))) {
|
|
117
|
-
const t = this.properties, s = [...fe(t), ...ve(t)];
|
|
118
|
-
for (const o of s) this.createProperty(o, t[o]);
|
|
119
|
-
}
|
|
120
|
-
const e = this[Symbol.metadata];
|
|
121
|
-
if (e !== null) {
|
|
122
|
-
const t = litPropertyMetadata.get(e);
|
|
123
|
-
if (t !== void 0) for (const [s, o] of t) this.elementProperties.set(s, o);
|
|
124
|
-
}
|
|
125
|
-
this._$Eh = /* @__PURE__ */ new Map();
|
|
126
|
-
for (const [t, s] of this.elementProperties) {
|
|
127
|
-
const o = this._$Eu(t, s);
|
|
128
|
-
o !== void 0 && this._$Eh.set(o, t);
|
|
129
|
-
}
|
|
130
|
-
this.elementStyles = this.finalizeStyles(this.styles);
|
|
131
|
-
}
|
|
132
|
-
static finalizeStyles(e) {
|
|
133
|
-
const t = [];
|
|
134
|
-
if (Array.isArray(e)) {
|
|
135
|
-
const s = new Set(e.flat(1 / 0).reverse());
|
|
136
|
-
for (const o of s) t.unshift(K(o));
|
|
137
|
-
} else e !== void 0 && t.push(K(e));
|
|
138
|
-
return t;
|
|
139
|
-
}
|
|
140
|
-
static _$Eu(e, t) {
|
|
141
|
-
const s = t.attribute;
|
|
142
|
-
return s === !1 ? void 0 : typeof s == "string" ? s : typeof e == "string" ? e.toLowerCase() : void 0;
|
|
143
|
-
}
|
|
144
|
-
constructor() {
|
|
145
|
-
super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
|
|
146
|
-
}
|
|
147
|
-
_$Ev() {
|
|
148
|
-
this._$ES = new Promise(((e) => this.enableUpdating = e)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((e) => e(this)));
|
|
149
|
-
}
|
|
150
|
-
addController(e) {
|
|
151
|
-
(this._$EO ??= /* @__PURE__ */ new Set()).add(e), this.renderRoot !== void 0 && this.isConnected && e.hostConnected?.();
|
|
152
|
-
}
|
|
153
|
-
removeController(e) {
|
|
154
|
-
this._$EO?.delete(e);
|
|
155
|
-
}
|
|
156
|
-
_$E_() {
|
|
157
|
-
const e = /* @__PURE__ */ new Map(), t = this.constructor.elementProperties;
|
|
158
|
-
for (const s of t.keys()) this.hasOwnProperty(s) && (e.set(s, this[s]), delete this[s]);
|
|
159
|
-
e.size > 0 && (this._$Ep = e);
|
|
160
|
-
}
|
|
161
|
-
createRenderRoot() {
|
|
162
|
-
const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
|
|
163
|
-
return pe(e, this.constructor.elementStyles), e;
|
|
164
|
-
}
|
|
165
|
-
connectedCallback() {
|
|
166
|
-
this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((e) => e.hostConnected?.()));
|
|
167
|
-
}
|
|
168
|
-
enableUpdating(e) {
|
|
169
|
-
}
|
|
170
|
-
disconnectedCallback() {
|
|
171
|
-
this._$EO?.forEach(((e) => e.hostDisconnected?.()));
|
|
172
|
-
}
|
|
173
|
-
attributeChangedCallback(e, t, s) {
|
|
174
|
-
this._$AK(e, s);
|
|
175
|
-
}
|
|
176
|
-
_$ET(e, t) {
|
|
177
|
-
const s = this.constructor.elementProperties.get(e), o = this.constructor._$Eu(e, s);
|
|
178
|
-
if (o !== void 0 && s.reflect === !0) {
|
|
179
|
-
const i = (s.converter?.toAttribute !== void 0 ? s.converter : R).toAttribute(t, s.type);
|
|
180
|
-
this._$Em = e, i == null ? this.removeAttribute(o) : this.setAttribute(o, i), this._$Em = null;
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
_$AK(e, t) {
|
|
184
|
-
const s = this.constructor, o = s._$Eh.get(e);
|
|
185
|
-
if (o !== void 0 && this._$Em !== o) {
|
|
186
|
-
const i = s.getPropertyOptions(o), c = typeof i.converter == "function" ? { fromAttribute: i.converter } : i.converter?.fromAttribute !== void 0 ? i.converter : R;
|
|
187
|
-
this._$Em = o;
|
|
188
|
-
const h = c.fromAttribute(t, i.type);
|
|
189
|
-
this[o] = h ?? this._$Ej?.get(o) ?? h, this._$Em = null;
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
requestUpdate(e, t, s) {
|
|
193
|
-
if (e !== void 0) {
|
|
194
|
-
const o = this.constructor, i = this[e];
|
|
195
|
-
if (s ??= o.getPropertyOptions(e), !((s.hasChanged ?? F)(i, t) || s.useDefault && s.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(o._$Eu(e, s)))) return;
|
|
196
|
-
this.C(e, t, s);
|
|
197
|
-
}
|
|
198
|
-
this.isUpdatePending === !1 && (this._$ES = this._$EP());
|
|
199
|
-
}
|
|
200
|
-
C(e, t, { useDefault: s, reflect: o, wrapped: i }, c) {
|
|
201
|
-
s && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(e) && (this._$Ej.set(e, c ?? t ?? this[e]), i !== !0 || c !== void 0) || (this._$AL.has(e) || (this.hasUpdated || s || (t = void 0), this._$AL.set(e, t)), o === !0 && this._$Em !== e && (this._$Eq ??= /* @__PURE__ */ new Set()).add(e));
|
|
202
|
-
}
|
|
203
|
-
async _$EP() {
|
|
204
|
-
this.isUpdatePending = !0;
|
|
205
|
-
try {
|
|
206
|
-
await this._$ES;
|
|
207
|
-
} catch (t) {
|
|
208
|
-
Promise.reject(t);
|
|
209
|
-
}
|
|
210
|
-
const e = this.scheduleUpdate();
|
|
211
|
-
return e != null && await e, !this.isUpdatePending;
|
|
212
|
-
}
|
|
213
|
-
scheduleUpdate() {
|
|
214
|
-
return this.performUpdate();
|
|
215
|
-
}
|
|
216
|
-
performUpdate() {
|
|
217
|
-
if (!this.isUpdatePending) return;
|
|
218
|
-
if (!this.hasUpdated) {
|
|
219
|
-
if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
|
|
220
|
-
for (const [o, i] of this._$Ep) this[o] = i;
|
|
221
|
-
this._$Ep = void 0;
|
|
222
|
-
}
|
|
223
|
-
const s = this.constructor.elementProperties;
|
|
224
|
-
if (s.size > 0) for (const [o, i] of s) {
|
|
225
|
-
const { wrapped: c } = i, h = this[o];
|
|
226
|
-
c !== !0 || this._$AL.has(o) || h === void 0 || this.C(o, void 0, i, h);
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
let e = !1;
|
|
230
|
-
const t = this._$AL;
|
|
231
|
-
try {
|
|
232
|
-
e = this.shouldUpdate(t), e ? (this.willUpdate(t), this._$EO?.forEach(((s) => s.hostUpdate?.())), this.update(t)) : this._$EM();
|
|
233
|
-
} catch (s) {
|
|
234
|
-
throw e = !1, this._$EM(), s;
|
|
235
|
-
}
|
|
236
|
-
e && this._$AE(t);
|
|
237
|
-
}
|
|
238
|
-
willUpdate(e) {
|
|
239
|
-
}
|
|
240
|
-
_$AE(e) {
|
|
241
|
-
this._$EO?.forEach(((t) => t.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
|
|
242
|
-
}
|
|
243
|
-
_$EM() {
|
|
244
|
-
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
|
|
245
|
-
}
|
|
246
|
-
get updateComplete() {
|
|
247
|
-
return this.getUpdateComplete();
|
|
248
|
-
}
|
|
249
|
-
getUpdateComplete() {
|
|
250
|
-
return this._$ES;
|
|
251
|
-
}
|
|
252
|
-
shouldUpdate(e) {
|
|
253
|
-
return !0;
|
|
254
|
-
}
|
|
255
|
-
update(e) {
|
|
256
|
-
this._$Eq &&= this._$Eq.forEach(((t) => this._$ET(t, this[t]))), this._$EM();
|
|
257
|
-
}
|
|
258
|
-
updated(e) {
|
|
259
|
-
}
|
|
260
|
-
firstUpdated(e) {
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[q("elementProperties")] = /* @__PURE__ */ new Map(), S[q("finalized")] = /* @__PURE__ */ new Map(), me?.({ ReactiveElement: S }), (N.reactiveElementVersions ??= []).push("2.1.1");
|
|
264
|
-
/**
|
|
265
|
-
* @license
|
|
266
|
-
* Copyright 2017 Google LLC
|
|
267
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
268
|
-
*/
|
|
269
|
-
const $e = { attribute: !0, type: String, converter: R, reflect: !1, hasChanged: F }, Ae = (r = $e, e, t) => {
|
|
270
|
-
const { kind: s, metadata: o } = t;
|
|
271
|
-
let i = globalThis.litPropertyMetadata.get(o);
|
|
272
|
-
if (i === void 0 && globalThis.litPropertyMetadata.set(o, i = /* @__PURE__ */ new Map()), s === "setter" && ((r = Object.create(r)).wrapped = !0), i.set(t.name, r), s === "accessor") {
|
|
273
|
-
const { name: c } = t;
|
|
274
|
-
return { set(h) {
|
|
275
|
-
const n = e.get.call(this);
|
|
276
|
-
e.set.call(this, h), this.requestUpdate(c, n, r);
|
|
277
|
-
}, init(h) {
|
|
278
|
-
return h !== void 0 && this.C(c, void 0, r, h), h;
|
|
279
|
-
} };
|
|
280
|
-
}
|
|
281
|
-
if (s === "setter") {
|
|
282
|
-
const { name: c } = t;
|
|
283
|
-
return function(h) {
|
|
284
|
-
const n = this[c];
|
|
285
|
-
e.call(this, h), this.requestUpdate(c, n, r);
|
|
286
|
-
};
|
|
287
|
-
}
|
|
288
|
-
throw Error("Unsupported decorator location: " + s);
|
|
289
|
-
};
|
|
290
|
-
function a(r) {
|
|
291
|
-
return (e, t) => typeof t == "object" ? Ae(r, e, t) : ((s, o, i) => {
|
|
292
|
-
const c = o.hasOwnProperty(i);
|
|
293
|
-
return o.constructor.createProperty(i, s), c ? Object.getOwnPropertyDescriptor(o, i) : void 0;
|
|
294
|
-
})(r, e, t);
|
|
295
|
-
}
|
|
296
|
-
/**
|
|
297
|
-
* @license
|
|
298
|
-
* Copyright 2017 Google LLC
|
|
299
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
300
|
-
*/
|
|
301
|
-
function Ee(r) {
|
|
302
|
-
return a({ ...r, state: !0, attribute: !1 });
|
|
303
|
-
}
|
|
304
|
-
/**
|
|
305
|
-
* @license
|
|
306
|
-
* Copyright 2017 Google LLC
|
|
307
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
308
|
-
*/
|
|
309
|
-
const W = globalThis, H = W.trustedTypes, Q = H ? H.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, ce = "$lit$", m = `lit$${Math.random().toFixed(9).slice(2)}$`, ne = "?" + m, we = `<${ne}>`, E = document, D = () => E.createComment(""), M = (r) => r === null || typeof r != "object" && typeof r != "function", Z = Array.isArray, Se = (r) => Z(r) || typeof r?.[Symbol.iterator] == "function", j = `[
|
|
310
|
-
\f\r]`, C = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, X = /-->/g, ee = />/g, $ = RegExp(`>|${j}(?:([^\\s"'>=/]+)(${j}*=${j}*(?:[^
|
|
311
|
-
\f\r"'\`<>=]|("|')|))|$)`, "g"), te = /'/g, se = /"/g, he = /^(?:script|style|textarea|title)$/i, z = Symbol.for("lit-noChange"), b = Symbol.for("lit-nothing"), oe = /* @__PURE__ */ new WeakMap(), A = E.createTreeWalker(E, 129);
|
|
312
|
-
function ae(r, e) {
|
|
313
|
-
if (!Z(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
314
|
-
return Q !== void 0 ? Q.createHTML(e) : e;
|
|
315
|
-
}
|
|
316
|
-
const Ce = (r, e) => {
|
|
317
|
-
const t = r.length - 1, s = [];
|
|
318
|
-
let o, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", c = C;
|
|
319
|
-
for (let h = 0; h < t; h++) {
|
|
320
|
-
const n = r[h];
|
|
321
|
-
let d, u, l = -1, f = 0;
|
|
322
|
-
for (; f < n.length && (c.lastIndex = f, u = c.exec(n), u !== null); ) f = c.lastIndex, c === C ? u[1] === "!--" ? c = X : u[1] !== void 0 ? c = ee : u[2] !== void 0 ? (he.test(u[2]) && (o = RegExp("</" + u[2], "g")), c = $) : u[3] !== void 0 && (c = $) : c === $ ? u[0] === ">" ? (c = o ?? C, l = -1) : u[1] === void 0 ? l = -2 : (l = c.lastIndex - u[2].length, d = u[1], c = u[3] === void 0 ? $ : u[3] === '"' ? se : te) : c === se || c === te ? c = $ : c === X || c === ee ? c = C : (c = $, o = void 0);
|
|
323
|
-
const g = c === $ && r[h + 1].startsWith("/>") ? " " : "";
|
|
324
|
-
i += c === C ? n + we : l >= 0 ? (s.push(d), n.slice(0, l) + ce + n.slice(l) + m + g) : n + m + (l === -2 ? h : g);
|
|
325
|
-
}
|
|
326
|
-
return [ae(r, i + (r[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
|
|
1
|
+
import { LitElement as p, unsafeCSS as v, html as k } from "lit";
|
|
2
|
+
import { property as t, state as g } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as x } 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, w = Object.getOwnPropertyDescriptor, a = (y, e, o, r) => {
|
|
6
|
+
for (var s = r > 1 ? void 0 : r ? w(e, o) : e, h = y.length - 1, c; h >= 0; h--)
|
|
7
|
+
(c = y[h]) && (s = (r ? c(e, o, s) : c(s)) || s);
|
|
8
|
+
return r && s && m(e, o, s), s;
|
|
327
9
|
};
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
this.parts = [];
|
|
332
|
-
let i = 0, c = 0;
|
|
333
|
-
const h = e.length - 1, n = this.parts, [d, u] = Ce(e, t);
|
|
334
|
-
if (this.el = O.createElement(d, s), A.currentNode = this.el.content, t === 2 || t === 3) {
|
|
335
|
-
const l = this.el.content.firstChild;
|
|
336
|
-
l.replaceWith(...l.childNodes);
|
|
337
|
-
}
|
|
338
|
-
for (; (o = A.nextNode()) !== null && n.length < h; ) {
|
|
339
|
-
if (o.nodeType === 1) {
|
|
340
|
-
if (o.hasAttributes()) for (const l of o.getAttributeNames()) if (l.endsWith(ce)) {
|
|
341
|
-
const f = u[c++], g = o.getAttribute(l).split(m), T = /([.?@])?(.*)/.exec(f);
|
|
342
|
-
n.push({ type: 1, index: i, name: T[2], strings: g, ctor: T[1] === "." ? qe : T[1] === "?" ? Me : T[1] === "@" ? ze : L }), o.removeAttribute(l);
|
|
343
|
-
} else l.startsWith(m) && (n.push({ type: 6, index: i }), o.removeAttribute(l));
|
|
344
|
-
if (he.test(o.tagName)) {
|
|
345
|
-
const l = o.textContent.split(m), f = l.length - 1;
|
|
346
|
-
if (f > 0) {
|
|
347
|
-
o.textContent = H ? H.emptyScript : "";
|
|
348
|
-
for (let g = 0; g < f; g++) o.append(l[g], D()), A.nextNode(), n.push({ type: 2, index: ++i });
|
|
349
|
-
o.append(l[f], D());
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
} else if (o.nodeType === 8) if (o.data === ne) n.push({ type: 2, index: i });
|
|
353
|
-
else {
|
|
354
|
-
let l = -1;
|
|
355
|
-
for (; (l = o.data.indexOf(m, l + 1)) !== -1; ) n.push({ type: 7, index: i }), l += m.length - 1;
|
|
356
|
-
}
|
|
357
|
-
i++;
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
static createElement(e, t) {
|
|
361
|
-
const s = E.createElement("template");
|
|
362
|
-
return s.innerHTML = e, s;
|
|
363
|
-
}
|
|
364
|
-
}
|
|
365
|
-
function w(r, e, t = r, s) {
|
|
366
|
-
if (e === z) return e;
|
|
367
|
-
let o = s !== void 0 ? t._$Co?.[s] : t._$Cl;
|
|
368
|
-
const i = M(e) ? void 0 : e._$litDirective$;
|
|
369
|
-
return o?.constructor !== i && (o?._$AO?.(!1), i === void 0 ? o = void 0 : (o = new i(r), o._$AT(r, t, s)), s !== void 0 ? (t._$Co ??= [])[s] = o : t._$Cl = o), o !== void 0 && (e = w(r, o._$AS(r, e.values), o, s)), e;
|
|
370
|
-
}
|
|
371
|
-
class Pe {
|
|
372
|
-
constructor(e, t) {
|
|
373
|
-
this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
|
|
374
|
-
}
|
|
375
|
-
get parentNode() {
|
|
376
|
-
return this._$AM.parentNode;
|
|
377
|
-
}
|
|
378
|
-
get _$AU() {
|
|
379
|
-
return this._$AM._$AU;
|
|
380
|
-
}
|
|
381
|
-
u(e) {
|
|
382
|
-
const { el: { content: t }, parts: s } = this._$AD, o = (e?.creationScope ?? E).importNode(t, !0);
|
|
383
|
-
A.currentNode = o;
|
|
384
|
-
let i = A.nextNode(), c = 0, h = 0, n = s[0];
|
|
385
|
-
for (; n !== void 0; ) {
|
|
386
|
-
if (c === n.index) {
|
|
387
|
-
let d;
|
|
388
|
-
n.type === 2 ? d = new V(i, i.nextSibling, this, e) : n.type === 1 ? d = new n.ctor(i, n.name, n.strings, this, e) : n.type === 6 && (d = new Oe(i, this, e)), this._$AV.push(d), n = s[++h];
|
|
389
|
-
}
|
|
390
|
-
c !== n?.index && (i = A.nextNode(), c++);
|
|
391
|
-
}
|
|
392
|
-
return A.currentNode = E, o;
|
|
393
|
-
}
|
|
394
|
-
p(e) {
|
|
395
|
-
let t = 0;
|
|
396
|
-
for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(e, s, t), t += s.strings.length - 2) : s._$AI(e[t])), t++;
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
class V {
|
|
400
|
-
get _$AU() {
|
|
401
|
-
return this._$AM?._$AU ?? this._$Cv;
|
|
402
|
-
}
|
|
403
|
-
constructor(e, t, s, o) {
|
|
404
|
-
this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = s, this.options = o, this._$Cv = o?.isConnected ?? !0;
|
|
405
|
-
}
|
|
406
|
-
get parentNode() {
|
|
407
|
-
let e = this._$AA.parentNode;
|
|
408
|
-
const t = this._$AM;
|
|
409
|
-
return t !== void 0 && e?.nodeType === 11 && (e = t.parentNode), e;
|
|
410
|
-
}
|
|
411
|
-
get startNode() {
|
|
412
|
-
return this._$AA;
|
|
413
|
-
}
|
|
414
|
-
get endNode() {
|
|
415
|
-
return this._$AB;
|
|
416
|
-
}
|
|
417
|
-
_$AI(e, t = this) {
|
|
418
|
-
e = w(this, e, t), M(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== z && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Se(e) ? this.k(e) : this._(e);
|
|
419
|
-
}
|
|
420
|
-
O(e) {
|
|
421
|
-
return this._$AA.parentNode.insertBefore(e, this._$AB);
|
|
422
|
-
}
|
|
423
|
-
T(e) {
|
|
424
|
-
this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
|
|
425
|
-
}
|
|
426
|
-
_(e) {
|
|
427
|
-
this._$AH !== b && M(this._$AH) ? this._$AA.nextSibling.data = e : this.T(E.createTextNode(e)), this._$AH = e;
|
|
428
|
-
}
|
|
429
|
-
$(e) {
|
|
430
|
-
const { values: t, _$litType$: s } = e, o = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = O.createElement(ae(s.h, s.h[0]), this.options)), s);
|
|
431
|
-
if (this._$AH?._$AD === o) this._$AH.p(t);
|
|
432
|
-
else {
|
|
433
|
-
const i = new Pe(o, this), c = i.u(this.options);
|
|
434
|
-
i.p(t), this.T(c), this._$AH = i;
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
_$AC(e) {
|
|
438
|
-
let t = oe.get(e.strings);
|
|
439
|
-
return t === void 0 && oe.set(e.strings, t = new O(e)), t;
|
|
440
|
-
}
|
|
441
|
-
k(e) {
|
|
442
|
-
Z(this._$AH) || (this._$AH = [], this._$AR());
|
|
443
|
-
const t = this._$AH;
|
|
444
|
-
let s, o = 0;
|
|
445
|
-
for (const i of e) o === t.length ? t.push(s = new V(this.O(D()), this.O(D()), this, this.options)) : s = t[o], s._$AI(i), o++;
|
|
446
|
-
o < t.length && (this._$AR(s && s._$AB.nextSibling, o), t.length = o);
|
|
447
|
-
}
|
|
448
|
-
_$AR(e = this._$AA.nextSibling, t) {
|
|
449
|
-
for (this._$AP?.(!1, !0, t); e !== this._$AB; ) {
|
|
450
|
-
const s = e.nextSibling;
|
|
451
|
-
e.remove(), e = s;
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
setConnected(e) {
|
|
455
|
-
this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
|
|
456
|
-
}
|
|
457
|
-
}
|
|
458
|
-
class L {
|
|
459
|
-
get tagName() {
|
|
460
|
-
return this.element.tagName;
|
|
461
|
-
}
|
|
462
|
-
get _$AU() {
|
|
463
|
-
return this._$AM._$AU;
|
|
464
|
-
}
|
|
465
|
-
constructor(e, t, s, o, i) {
|
|
466
|
-
this.type = 1, this._$AH = b, this._$AN = void 0, this.element = e, this.name = t, this._$AM = o, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = b;
|
|
467
|
-
}
|
|
468
|
-
_$AI(e, t = this, s, o) {
|
|
469
|
-
const i = this.strings;
|
|
470
|
-
let c = !1;
|
|
471
|
-
if (i === void 0) e = w(this, e, t, 0), c = !M(e) || e !== this._$AH && e !== z, c && (this._$AH = e);
|
|
472
|
-
else {
|
|
473
|
-
const h = e;
|
|
474
|
-
let n, d;
|
|
475
|
-
for (e = i[0], n = 0; n < i.length - 1; n++) d = w(this, h[s + n], t, n), d === z && (d = this._$AH[n]), c ||= !M(d) || d !== this._$AH[n], d === b ? e = b : e !== b && (e += (d ?? "") + i[n + 1]), this._$AH[n] = d;
|
|
476
|
-
}
|
|
477
|
-
c && !o && this.j(e);
|
|
478
|
-
}
|
|
479
|
-
j(e) {
|
|
480
|
-
e === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
|
|
481
|
-
}
|
|
482
|
-
}
|
|
483
|
-
class qe extends L {
|
|
484
|
-
constructor() {
|
|
485
|
-
super(...arguments), this.type = 3;
|
|
486
|
-
}
|
|
487
|
-
j(e) {
|
|
488
|
-
this.element[this.name] = e === b ? void 0 : e;
|
|
489
|
-
}
|
|
490
|
-
}
|
|
491
|
-
class Me extends L {
|
|
492
|
-
constructor() {
|
|
493
|
-
super(...arguments), this.type = 4;
|
|
494
|
-
}
|
|
495
|
-
j(e) {
|
|
496
|
-
this.element.toggleAttribute(this.name, !!e && e !== b);
|
|
497
|
-
}
|
|
498
|
-
}
|
|
499
|
-
class ze extends L {
|
|
500
|
-
constructor(e, t, s, o, i) {
|
|
501
|
-
super(e, t, s, o, i), this.type = 5;
|
|
502
|
-
}
|
|
503
|
-
_$AI(e, t = this) {
|
|
504
|
-
if ((e = w(this, e, t, 0) ?? b) === z) return;
|
|
505
|
-
const s = this._$AH, o = e === b && s !== b || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, i = e !== b && (s === b || o);
|
|
506
|
-
o && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
|
|
507
|
-
}
|
|
508
|
-
handleEvent(e) {
|
|
509
|
-
typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
|
|
510
|
-
}
|
|
511
|
-
}
|
|
512
|
-
class Oe {
|
|
513
|
-
constructor(e, t, s) {
|
|
514
|
-
this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = s;
|
|
515
|
-
}
|
|
516
|
-
get _$AU() {
|
|
517
|
-
return this._$AM._$AU;
|
|
518
|
-
}
|
|
519
|
-
_$AI(e) {
|
|
520
|
-
w(this, e);
|
|
521
|
-
}
|
|
522
|
-
}
|
|
523
|
-
const Te = W.litHtmlPolyfillSupport;
|
|
524
|
-
Te?.(O, V), (W.litHtmlVersions ??= []).push("3.3.1");
|
|
525
|
-
/**
|
|
526
|
-
* @license
|
|
527
|
-
* Copyright 2018 Google LLC
|
|
528
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
529
|
-
*/
|
|
530
|
-
const U = (r) => r ?? b, le = de`
|
|
531
|
-
:host {
|
|
532
|
-
/* Anything that can be overridden should be defined here */
|
|
533
|
-
|
|
534
|
-
/* Global Checkbox Styles */
|
|
535
|
-
--_nys-checkbox-size: var(--nys-size-400, 32px);
|
|
536
|
-
--_nys-checkbox-border-radius: var(--nys-radius-md, 4px);
|
|
537
|
-
--_nys-checkbox-border-width: var(--nys-border-width-md, 2px);
|
|
538
|
-
--_nys-checkbox-outline-color: var(--nys-color-focus, #004dd1);
|
|
539
|
-
--_nys-checkbox-outline-width: var(--nys-border-width-md, 2px);
|
|
540
|
-
--_nys-checkbox-outline-offset: var(--nys-space-2px, 2px);
|
|
541
|
-
/* space between checkbox and it's label */
|
|
542
|
-
--_nys-checkbox-gap: var(--nys-space-150, 12px);
|
|
543
|
-
/* space between checkboxes */
|
|
544
|
-
--_nys-checkboxgroup-gap: var(--nys-space-200, 16px);
|
|
545
|
-
|
|
546
|
-
/* Typography */
|
|
547
|
-
--_nys-checkbox-font-family: var(
|
|
548
|
-
--nys-font-family-ui,
|
|
549
|
-
var(
|
|
550
|
-
--nys-font-family-sans,
|
|
551
|
-
"Proxima Nova",
|
|
552
|
-
"Helvetica Neue",
|
|
553
|
-
"Helvetica",
|
|
554
|
-
"Arial",
|
|
555
|
-
sans-serif
|
|
556
|
-
)
|
|
557
|
-
);
|
|
558
|
-
--_nys-checkbox-font-size: var(--nys-font-size-ui-md, 16px);
|
|
559
|
-
--_nys-checkbox-font-weight: var(--nys-font-weight-regular, 400);
|
|
560
|
-
--_nys-checkbox-line-height: var(--nys-font-lineheight-ui-md, 24px);
|
|
561
|
-
|
|
562
|
-
/* Global Checkbox Colors */
|
|
563
|
-
--_nys-checkbox-color: var(
|
|
564
|
-
--nys-color-ink,
|
|
565
|
-
var(--nys-color-neutral-900, #1b1b1b)
|
|
566
|
-
);
|
|
567
|
-
|
|
568
|
-
/* Default (Empty) */
|
|
569
|
-
--_nys-checkbox-background-color: var(--nys-color-ink-reverse, #ffffff);
|
|
570
|
-
--_nys-checkbox-border-color: var(--nys-color-neutral-600, #62666a);
|
|
571
|
-
/* Empty + Hovered */
|
|
572
|
-
--_nys-checkbox-background-color--hover: var(
|
|
573
|
-
--nys-color-neutral-50,
|
|
574
|
-
#ededed
|
|
575
|
-
);
|
|
576
|
-
--_nys-checkbox-border-color--hover: var(--nys-color-ink, #1b1b1b);
|
|
577
|
-
/* Empty + Pressed */
|
|
578
|
-
--_nys-checkbox-background-color--active: var(
|
|
579
|
-
--nys-color-neutral-100,
|
|
580
|
-
#d0d0ce
|
|
581
|
-
);
|
|
582
|
-
--_nys-checkbox-border-color--active: var(--nys-color-ink, #1b1b1b);
|
|
583
|
-
/* Checked */
|
|
584
|
-
--_nys-checkbox-background-color--checked: var(--nys-color-theme, #154973);
|
|
585
|
-
--_nys-checkbox-border-color--checked: var(--nys-color-theme, #154973);
|
|
586
|
-
/* Checked + Hovered */
|
|
587
|
-
--_nys-checkbox-background-color--checked--hover: var(
|
|
588
|
-
--nys-color-theme-strong,
|
|
589
|
-
#0e324f
|
|
590
|
-
);
|
|
591
|
-
--_nys-checkbox-border-color--checked--hover: var(
|
|
592
|
-
--nys-color-theme-strong,
|
|
593
|
-
#0e324f
|
|
594
|
-
);
|
|
595
|
-
/* Checked + Pressed */
|
|
596
|
-
--_nys-checkbox-background-color--checked--active: var(
|
|
597
|
-
--nys-color-theme-stronger,
|
|
598
|
-
#081b2b
|
|
599
|
-
);
|
|
600
|
-
--_nys-checkbox-border-color--checked--active: var(
|
|
601
|
-
--nys-color-theme-stronger,
|
|
602
|
-
#081b2b
|
|
603
|
-
);
|
|
604
|
-
/* Disabled */
|
|
605
|
-
--_nys-checkbox-background-color--disabled: var(
|
|
606
|
-
--nys-color-ink-reverse,
|
|
607
|
-
#f0f0f0
|
|
608
|
-
);
|
|
609
|
-
--_nys-checkbox-border-color--disabled: var(
|
|
610
|
-
--nys-color-neutral-400,
|
|
611
|
-
#757575
|
|
612
|
-
);
|
|
613
|
-
--_nys-checkbox-color--disabled: var(--nys-color-text-disabled, #bec0c1);
|
|
614
|
-
/* Disabled Checked */
|
|
615
|
-
--_nys-checkbox-background-color--checked--disabled: var(
|
|
616
|
-
--nys-color-neutral-100,
|
|
617
|
-
#d0d0ce
|
|
618
|
-
);
|
|
619
|
-
--_nys-checkbox-border-color--checked--disabled: var(
|
|
620
|
-
--nys-color-neutral-100,
|
|
621
|
-
#d0d0ce
|
|
622
|
-
);
|
|
623
|
-
}
|
|
624
|
-
|
|
625
|
-
/* Small Variant */
|
|
626
|
-
:host([size="sm"]) {
|
|
627
|
-
--_nys-checkbox-size: var(--nys-size-300, 24px);
|
|
628
|
-
--_nys-checkbox-border-radius: var(--nys-radius-sm, 2px);
|
|
629
|
-
--_nys-checkboxgroup-gap: var(--nys-space-100, 8px);
|
|
630
|
-
--_nys-checkbox-gap: var(--nys-space-100, 8px);
|
|
631
|
-
}
|
|
632
|
-
/* Medium Variant */
|
|
633
|
-
:host([size="md"]) {
|
|
634
|
-
--_nys-checkbox-size: var(--nys-size-400, 32px);
|
|
635
|
-
--_nys-checkbox-border-radius: var(--nys-radius-md, 4px);
|
|
636
|
-
}
|
|
637
|
-
|
|
638
|
-
/* Tile Variant */
|
|
639
|
-
:host([tile]) {
|
|
640
|
-
--_nys-checkbox-border-width--tile: var(--nys-border-width-sm, 1px);
|
|
641
|
-
--_nys-checkbox-border-radius--tile: var(--nys-radius-md, 4px);
|
|
642
|
-
--_nys-checkbox-border-color--tile: var(--nys-color-neutral-100, #d0d0ce);
|
|
643
|
-
--_nys-checkbox-background-color--tile: var(
|
|
644
|
-
--nys-color-ink-reverse,
|
|
645
|
-
#ffffff
|
|
646
|
-
);
|
|
647
|
-
--_nys-checkbox-padding--x--tile: var(--nys-space-250, 20px);
|
|
648
|
-
--_nys-checkbox-padding--y--tile: var(--nys-space-200, 16px);
|
|
649
|
-
/* Hover */
|
|
650
|
-
--_nys-checkbox-border-color--tile--hover: var(
|
|
651
|
-
--nys-color-neutral-700,
|
|
652
|
-
#4a4d4f
|
|
653
|
-
);
|
|
654
|
-
--_nys-checkbox-background-color--tile--hover: var(
|
|
655
|
-
--nys-color-ink-reverse,
|
|
656
|
-
#ffffff
|
|
657
|
-
);
|
|
658
|
-
/* Pressed */
|
|
659
|
-
--_nys-checkbox-border-color--tile--active: var(
|
|
660
|
-
--nys-color-neutral-900,
|
|
661
|
-
#1b1b1b
|
|
662
|
-
);
|
|
663
|
-
--_nys-checkbox-background-color--tile--active: var(
|
|
664
|
-
--nys-color-ink-reverse,
|
|
665
|
-
#ffffff
|
|
666
|
-
);
|
|
667
|
-
/* Checked */
|
|
668
|
-
--_nys-checkbox-border-color--tile--checked: var(
|
|
669
|
-
--nys-color-theme-mid,
|
|
670
|
-
#457aa5
|
|
671
|
-
);
|
|
672
|
-
--_nys-checkbox-background-color--tile--checked: var(
|
|
673
|
-
--nys-color-theme-faint,
|
|
674
|
-
#f7fafd
|
|
675
|
-
);
|
|
676
|
-
/* Disabled */
|
|
677
|
-
--_nys-checkbox-background-color--tile--disabled: var(
|
|
678
|
-
--nys-color-ink-reverse,
|
|
679
|
-
#f0f0f0
|
|
680
|
-
);
|
|
681
|
-
--_nys-checkbox-border-color--tile--disabled: var(
|
|
682
|
-
--nys-color-neutral-100,
|
|
683
|
-
#d0d0ce
|
|
684
|
-
);
|
|
685
|
-
}
|
|
686
|
-
|
|
687
|
-
:host([tile][size="sm"]) {
|
|
688
|
-
--_nys-checkbox-padding--x--tile: var(--nys-space-200, 16px);
|
|
689
|
-
--_nys-checkbox-padding--y--tile: var(--nys-space-150, 12px);
|
|
690
|
-
}
|
|
691
|
-
|
|
692
|
-
:host([tile][showError]) {
|
|
693
|
-
--_nys-checkbox-border-color--tile: var(--nys-color-danger, #b52c2c);
|
|
694
|
-
--_nys-checkbox-border-color--tile--hover: var(--nys-color-danger, #b52c2c);
|
|
695
|
-
--_nys-checkbox-border-color--tile--active: var(
|
|
696
|
-
--nys-color-danger,
|
|
697
|
-
#b52c2c
|
|
698
|
-
);
|
|
699
|
-
--_nys-checkbox-border-color--tile--checked: var(
|
|
700
|
-
--nys-color-danger,
|
|
701
|
-
#b52c2c
|
|
702
|
-
);
|
|
703
|
-
}
|
|
704
|
-
|
|
705
|
-
#single-error-message {
|
|
706
|
-
--_nys-errormessage-margin-top: var(--nys-space-50, 4px);
|
|
707
|
-
}
|
|
708
|
-
|
|
709
|
-
.nys-checkboxgroup {
|
|
710
|
-
display: flex;
|
|
711
|
-
flex-direction: column;
|
|
712
|
-
gap: var(--nys-space-200, 16px);
|
|
713
|
-
font-family: var(--_nys-checkbox-font-family);
|
|
714
|
-
font-size: var(--_nys-checkbox-font-size);
|
|
715
|
-
line-height: var(--_nys-checkbox-line-height);
|
|
716
|
-
}
|
|
717
|
-
|
|
718
|
-
.nys-checkboxgroup__content {
|
|
719
|
-
display: flex;
|
|
720
|
-
flex-direction: column;
|
|
721
|
-
gap: var(--_nys-checkboxgroup-gap);
|
|
722
|
-
}
|
|
723
|
-
|
|
724
|
-
.nys-checkbox {
|
|
725
|
-
display: flex;
|
|
726
|
-
font-family: var(--_nys-checkbox-font-family);
|
|
727
|
-
font-size: var(--_nys-checkbox-font-size);
|
|
728
|
-
line-height: var(--_nys-checkbox-line-height);
|
|
729
|
-
|
|
730
|
-
/* Tile */
|
|
731
|
-
border-radius: var(--_nys-checkbox-border-radius--tile);
|
|
732
|
-
border: var(--_nys-checkbox-border-width--tile) solid
|
|
733
|
-
var(--_nys-checkbox-border-color--tile);
|
|
734
|
-
background: var(--_nys-checkbox-background-color--tile);
|
|
735
|
-
padding: var(--_nys-checkbox-padding--y--tile)
|
|
736
|
-
var(--_nys-checkbox-padding--x--tile);
|
|
737
|
-
gap: var(--_nys-checkbox-gap);
|
|
738
|
-
}
|
|
739
|
-
|
|
740
|
-
/* wraps the native checkbox and it's icon */
|
|
741
|
-
.nys-checkbox__checkboxwrapper {
|
|
742
|
-
position: relative;
|
|
743
|
-
display: flex;
|
|
744
|
-
justify-content: center;
|
|
745
|
-
align-items: center;
|
|
746
|
-
max-height: var(--_nys-checkbox-size);
|
|
747
|
-
}
|
|
748
|
-
|
|
749
|
-
.nys-checkbox__icon {
|
|
750
|
-
position: absolute;
|
|
751
|
-
top: 50%;
|
|
752
|
-
left: 50%;
|
|
753
|
-
transform: translate(-50%, -50%); /* Centering the icon visually */
|
|
754
|
-
pointer-events: none;
|
|
755
|
-
color: white;
|
|
756
|
-
}
|
|
757
|
-
|
|
758
|
-
.nys-checkbox__checkbox {
|
|
759
|
-
appearance: none;
|
|
760
|
-
background-repeat: no-repeat;
|
|
761
|
-
background-position: center;
|
|
762
|
-
width: var(--_nys-checkbox-size);
|
|
763
|
-
min-width: var(--_nys-checkbox-size);
|
|
764
|
-
min-height: var(--_nys-checkbox-size);
|
|
765
|
-
height: var(--_nys-checkbox-size);
|
|
766
|
-
max-width: var(--_nys-checkbox-size);
|
|
767
|
-
max-height: var(--_nys-checkbox-size);
|
|
768
|
-
border: solid var(--_nys-checkbox-border-width)
|
|
769
|
-
var(--_nys-checkbox-border-color);
|
|
770
|
-
background-color: var(--_nys-checkbox-background-color);
|
|
771
|
-
border-radius: var(--_nys-checkbox-border-radius);
|
|
772
|
-
outline-offset: var(--_nys-checkbox-outline-offset);
|
|
773
|
-
outline: none;
|
|
774
|
-
}
|
|
775
|
-
|
|
776
|
-
/* Pointer cursor for unchecked checkbox */
|
|
777
|
-
.nys-checkbox:hover,
|
|
778
|
-
.nys-checkbox:hover * {
|
|
779
|
-
cursor: pointer;
|
|
780
|
-
}
|
|
781
|
-
|
|
782
|
-
/* Checked */
|
|
783
|
-
.nys-checkbox__checkbox:not(:disabled):checked {
|
|
784
|
-
background-color: var(--_nys-checkbox-background-color--checked);
|
|
785
|
-
border-color: var(--_nys-checkbox-border-color--checked);
|
|
786
|
-
}
|
|
787
|
-
:host([tile])
|
|
788
|
-
.nys-checkbox:has(.nys-checkbox__checkbox:not(:disabled):checked) {
|
|
789
|
-
border-color: var(--_nys-checkbox-border-color--tile--checked);
|
|
790
|
-
background-color: var(--_nys-checkbox-background-color--tile--checked);
|
|
791
|
-
}
|
|
792
|
-
|
|
793
|
-
/* Checked + Disabled */
|
|
794
|
-
.nys-checkbox__checkbox:disabled:checked {
|
|
795
|
-
background-color: var(--_nys-checkbox-background-color--checked--disabled);
|
|
796
|
-
border-color: var(--_nys-checkbox-border-color--checked--disabled);
|
|
797
|
-
}
|
|
798
|
-
:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled:checked) {
|
|
799
|
-
border-color: var(--_nys-checkbox-border-color--tile--disabled);
|
|
800
|
-
background-color: var(--_nys-checkbox-background-color--tile--disabled);
|
|
801
|
-
}
|
|
802
|
-
|
|
803
|
-
/* Disabled */
|
|
804
|
-
.nys-checkbox__checkbox:disabled {
|
|
805
|
-
background-color: var(--_nys-checkbox-background-color--disabled);
|
|
806
|
-
border-color: var(--_nys-checkbox-border-color--disabled);
|
|
807
|
-
cursor: not-allowed;
|
|
808
|
-
}
|
|
809
|
-
.nys-checkbox:has(.nys-checkbox__checkbox:disabled) * {
|
|
810
|
-
color: var(--_nys-checkbox-color--disabled);
|
|
811
|
-
cursor: not-allowed;
|
|
812
|
-
--_nys-label-cursor: not-allowed;
|
|
813
|
-
--_nys-label-color: var(--_nys-checkbox-color--disabled);
|
|
814
|
-
}
|
|
815
|
-
:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled) {
|
|
816
|
-
background-color: var(--_nys-checkbox-background-color--disabled);
|
|
817
|
-
border-color: var(--_nys-checkbox-border-color--disabled);
|
|
818
|
-
cursor: not-allowed;
|
|
819
|
-
}
|
|
820
|
-
|
|
821
|
-
/* Hover - not checked */
|
|
822
|
-
.nys-checkbox__checkbox:hover:not(:disabled):not(:checked) {
|
|
823
|
-
background-color: var(--_nys-checkbox-background-color--hover);
|
|
824
|
-
border-color: var(--_nys-checkbox-border-color--hover);
|
|
825
|
-
}
|
|
826
|
-
:host([tile])
|
|
827
|
-
.nys-checkbox:hover:has(
|
|
828
|
-
.nys-checkbox__checkbox:not(:disabled):not(:checked)
|
|
829
|
-
) {
|
|
830
|
-
border-color: var(--_nys-checkbox-border-color--tile--hover);
|
|
831
|
-
background-color: var(--_nys-checkbox-background-color--tile--hover);
|
|
832
|
-
outline: solid var(--_nys-checkbox-border-width--tile)
|
|
833
|
-
var(--_nys-checkbox-border-color--tile--hover);
|
|
834
|
-
}
|
|
835
|
-
|
|
836
|
-
/* Hover + Checked */
|
|
837
|
-
.nys-checkbox__checkbox:hover:not(:disabled):checked {
|
|
838
|
-
border-color: var(--_nys-checkbox-border-color--checked--hover);
|
|
839
|
-
background-color: var(--_nys-checkbox-background-color--checked--hover);
|
|
840
|
-
}
|
|
841
|
-
:host([tile])
|
|
842
|
-
.nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):checked) {
|
|
843
|
-
outline: solid var(--_nys-checkbox-border-width--tile)
|
|
844
|
-
var(--_nys-checkbox-border-color--tile--checked);
|
|
845
|
-
}
|
|
846
|
-
|
|
847
|
-
/* Pressed - not checked */
|
|
848
|
-
.nys-checkbox__checkbox:active:not(:disabled):not(:checked) {
|
|
849
|
-
background-color: var(--_nys-checkbox-background-color--active);
|
|
850
|
-
border-color: var(--_nys-checkbox-border-color--active);
|
|
851
|
-
}
|
|
852
|
-
:host([tile])
|
|
853
|
-
.nys-checkbox:has(
|
|
854
|
-
.nys-checkbox__checkbox:active:not(:disabled):not(:checked)
|
|
855
|
-
) {
|
|
856
|
-
border-color: var(--_nys-checkbox-border-color--tile--active);
|
|
857
|
-
background-color: var(--_nys-checkbox-background-color--tile--active);
|
|
858
|
-
outline: solid var(--_nys-checkbox-border-width--tile)
|
|
859
|
-
var(--_nys-checkbox-border-color--tile--active);
|
|
860
|
-
}
|
|
861
|
-
|
|
862
|
-
/* Pressed + Checked */
|
|
863
|
-
.nys-checkbox__checkbox:active:not(:disabled):checked {
|
|
864
|
-
border-color: var(--_nys-checkbox-border-color--checked--active);
|
|
865
|
-
background-color: var(--_nys-checkbox-background-color--checked--active);
|
|
866
|
-
}
|
|
867
|
-
|
|
868
|
-
/* Focused */
|
|
869
|
-
:host(:not([tile])) .nys-checkbox__checkbox:focus {
|
|
870
|
-
outline: solid var(--_nys-checkbox-outline-width)
|
|
871
|
-
var(--_nys-checkbox-outline-color);
|
|
872
|
-
}
|
|
873
|
-
:host([tile]) .nys-checkbox:has(*:focus) {
|
|
874
|
-
outline: solid var(--_nys-checkbox-border-width--tile)
|
|
875
|
-
var(--_nys-checkbox-outline-color) !important;
|
|
876
|
-
border-color: var(--_nys-checkbox-outline-color) !important;
|
|
877
|
-
}
|
|
878
|
-
|
|
879
|
-
:host(:not([tile])) .nys-checkbox > nys-label {
|
|
880
|
-
--_nys-label-font-weight: var(--_nys-checkbox-font-weight);
|
|
881
|
-
}
|
|
882
|
-
|
|
883
|
-
:host([tile]) .nys-checkbox > nys-label {
|
|
884
|
-
--_nys-description-font-style: normal;
|
|
885
|
-
}
|
|
886
|
-
|
|
887
|
-
/* Required */
|
|
888
|
-
.nys-checkbox__required {
|
|
889
|
-
color: var(--nys-color-danger, #b52c2c);
|
|
890
|
-
}
|
|
891
|
-
|
|
892
|
-
.nys-checkbox__requiredwrapper {
|
|
893
|
-
display: flex;
|
|
894
|
-
gap: 3px;
|
|
895
|
-
}
|
|
896
|
-
|
|
897
|
-
/* Screen readers ONLY */
|
|
898
|
-
fieldset {
|
|
899
|
-
all: unset;
|
|
900
|
-
display: contents;
|
|
901
|
-
}
|
|
902
|
-
|
|
903
|
-
.sr-only {
|
|
904
|
-
position: absolute;
|
|
905
|
-
width: 1px;
|
|
906
|
-
height: 1px;
|
|
907
|
-
padding: 0;
|
|
908
|
-
margin: -1px;
|
|
909
|
-
overflow: hidden;
|
|
910
|
-
border: 0;
|
|
911
|
-
}
|
|
912
|
-
`;
|
|
913
|
-
var Ue = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, k = (r, e, t, s) => {
|
|
914
|
-
for (var o = s > 1 ? void 0 : s ? Ie(e, t) : e, i = r.length - 1, c; i >= 0; i--)
|
|
915
|
-
(c = r[i]) && (o = (s ? c(e, t, o) : c(o)) || o);
|
|
916
|
-
return s && o && Ue(e, t, o), o;
|
|
917
|
-
};
|
|
918
|
-
let Re = 0;
|
|
919
|
-
var v;
|
|
920
|
-
const y = (v = class extends re {
|
|
10
|
+
let E = 0;
|
|
11
|
+
var d;
|
|
12
|
+
const n = (d = class extends p {
|
|
921
13
|
// allows use of elementInternals' API
|
|
922
14
|
constructor() {
|
|
923
15
|
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._slottedDescriptionText = "", this._size = "md", this._internals = this.attachInternals();
|
|
@@ -926,13 +18,13 @@ const y = (v = class extends re {
|
|
|
926
18
|
return this._size;
|
|
927
19
|
}
|
|
928
20
|
set size(e) {
|
|
929
|
-
this._size =
|
|
21
|
+
this._size = d.VALID_SIZES.includes(
|
|
930
22
|
e
|
|
931
23
|
) ? e : "md";
|
|
932
24
|
}
|
|
933
25
|
// Generate a unique ID if one is not provided
|
|
934
26
|
connectedCallback() {
|
|
935
|
-
super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${
|
|
27
|
+
super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${E++}`), this.addEventListener("nys-change", this._handleCheckboxChange), this.addEventListener("invalid", this._handleInvalid);
|
|
936
28
|
}
|
|
937
29
|
disconnectedCallback() {
|
|
938
30
|
super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleCheckboxChange), this.removeEventListener("invalid", this._handleInvalid);
|
|
@@ -945,94 +37,94 @@ const y = (v = class extends re {
|
|
|
945
37
|
}
|
|
946
38
|
/********************** Functions **********************/
|
|
947
39
|
_setGroupExist() {
|
|
948
|
-
this.querySelectorAll("nys-checkbox").forEach((
|
|
949
|
-
|
|
40
|
+
this.querySelectorAll("nys-checkbox").forEach((o) => {
|
|
41
|
+
o.groupExist = !0;
|
|
950
42
|
});
|
|
951
43
|
}
|
|
952
44
|
// Initial update on checkbox required attribute
|
|
953
45
|
async _setupCheckboxRequired() {
|
|
954
|
-
const e = this.querySelector("nys-checkbox"),
|
|
46
|
+
const e = this.querySelector("nys-checkbox"), o = this.errorMessage || "This field is required", r = e ? await e.getInputElement() : null;
|
|
955
47
|
this._internals.setValidity(
|
|
956
48
|
{ valueMissing: !0 },
|
|
957
|
-
|
|
958
|
-
|
|
49
|
+
o,
|
|
50
|
+
r || this
|
|
959
51
|
);
|
|
960
52
|
}
|
|
961
53
|
// Updates the required attribute of each checkbox in the group
|
|
962
54
|
async _manageRequire() {
|
|
963
55
|
if (this.required) {
|
|
964
|
-
const e = this.errorMessage || "Please select at least one option.",
|
|
965
|
-
Array.from(
|
|
56
|
+
const e = this.errorMessage || "Please select at least one option.", o = this.querySelector("nys-checkbox"), r = o ? await o.getInputElement().catch(() => null) : null, s = this.querySelectorAll("nys-checkbox");
|
|
57
|
+
Array.from(s).some(
|
|
966
58
|
(c) => c.checked
|
|
967
59
|
) ? (this._internals.setValidity({}), this.showError = !1) : (this._internals.setValidity(
|
|
968
60
|
{ valueMissing: !0 },
|
|
969
61
|
e,
|
|
970
|
-
|
|
62
|
+
r || this
|
|
971
63
|
), this.showError = !0);
|
|
972
64
|
}
|
|
973
65
|
}
|
|
974
66
|
// Updates the size of each checkbox in the group
|
|
975
67
|
_updateCheckboxSize() {
|
|
976
|
-
this.querySelectorAll("nys-checkbox").forEach((
|
|
977
|
-
|
|
68
|
+
this.querySelectorAll("nys-checkbox").forEach((o) => {
|
|
69
|
+
o.setAttribute("size", this.size);
|
|
978
70
|
});
|
|
979
71
|
}
|
|
980
72
|
_updateCheckboxTile() {
|
|
981
|
-
this.querySelectorAll("nys-checkbox").forEach((
|
|
982
|
-
this.tile ?
|
|
73
|
+
this.querySelectorAll("nys-checkbox").forEach((o) => {
|
|
74
|
+
this.tile ? o.toggleAttribute("tile", !0) : o.removeAttribute("tile");
|
|
983
75
|
});
|
|
984
76
|
}
|
|
985
77
|
_updateCheckboxInvert() {
|
|
986
|
-
this.querySelectorAll("nys-checkbox").forEach((
|
|
987
|
-
this.inverted ?
|
|
78
|
+
this.querySelectorAll("nys-checkbox").forEach((o) => {
|
|
79
|
+
this.inverted ? o.toggleAttribute("inverted", !0) : o.removeAttribute("inverted");
|
|
988
80
|
});
|
|
989
81
|
}
|
|
990
82
|
_updateCheckboxShowError() {
|
|
991
|
-
this.querySelectorAll("nys-checkbox").forEach((
|
|
992
|
-
this.showError ?
|
|
83
|
+
this.querySelectorAll("nys-checkbox").forEach((o) => {
|
|
84
|
+
this.showError ? o.setAttribute("showError", "") : o.removeAttribute("showError");
|
|
993
85
|
});
|
|
994
86
|
}
|
|
995
87
|
_updateCheckboxForm() {
|
|
996
|
-
this.querySelectorAll("nys-checkbox").forEach((
|
|
997
|
-
this.showError && this.form !== null ?
|
|
88
|
+
this.querySelectorAll("nys-checkbox").forEach((o) => {
|
|
89
|
+
this.showError && this.form !== null ? o.setAttribute("form", this.form) : o.removeAttribute("form");
|
|
998
90
|
});
|
|
999
91
|
}
|
|
1000
92
|
// Get the slotted text contents so native VO can attempt to announce it within the legend in the fieldset
|
|
1001
93
|
_getSlotDescriptionForAria() {
|
|
1002
|
-
const
|
|
94
|
+
const o = this.shadowRoot?.querySelector(
|
|
1003
95
|
'slot[name="description"]'
|
|
1004
96
|
)?.assignedNodes({ flatten: !0 }) || [];
|
|
1005
|
-
this._slottedDescriptionText =
|
|
97
|
+
this._slottedDescriptionText = o.map((r) => r.textContent?.trim()).filter(Boolean).join(", ");
|
|
1006
98
|
}
|
|
1007
99
|
async _handleInvalid(e) {
|
|
1008
100
|
e.preventDefault(), this.showError = !0, this._manageRequire();
|
|
1009
|
-
const
|
|
1010
|
-
if (
|
|
1011
|
-
const
|
|
1012
|
-
|
|
1013
|
-
if (
|
|
101
|
+
const o = this.querySelector("nys-checkbox"), r = o ? await o.getInputElement() : null;
|
|
102
|
+
if (r) {
|
|
103
|
+
const s = this._internals.form;
|
|
104
|
+
s ? Array.from(s.elements).find((u) => {
|
|
105
|
+
if (u.tagName.toLowerCase() === "nys-checkboxgroup") {
|
|
1014
106
|
if (Array.from(
|
|
1015
107
|
this.querySelectorAll("nys-checkbox")
|
|
1016
108
|
).filter(
|
|
1017
|
-
(
|
|
109
|
+
(f) => f.checked
|
|
1018
110
|
).length === 0)
|
|
1019
|
-
return
|
|
111
|
+
return u;
|
|
1020
112
|
} else
|
|
1021
|
-
return typeof
|
|
1022
|
-
}) === this &&
|
|
113
|
+
return typeof u.checkValidity == "function" && !u.checkValidity();
|
|
114
|
+
}) === this && r.focus() : r.focus();
|
|
1023
115
|
}
|
|
1024
116
|
}
|
|
1025
117
|
/******************** Event Handlers ********************/
|
|
1026
118
|
// Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.
|
|
1027
119
|
_handleCheckboxChange(e) {
|
|
1028
|
-
const
|
|
1029
|
-
this.name =
|
|
120
|
+
const o = e, { name: r } = o.detail, h = Array.from(this.querySelectorAll("nys-checkbox")).filter((c) => c.checked).map((c) => c.value);
|
|
121
|
+
this.name = r, this._internals.setFormValue(h.join(", ")), this._manageRequire();
|
|
1030
122
|
}
|
|
1031
123
|
render() {
|
|
1032
|
-
return
|
|
124
|
+
return k`
|
|
1033
125
|
<div class="nys-checkboxgroup">
|
|
1034
126
|
<nys-label
|
|
1035
|
-
for=${this.id}
|
|
127
|
+
for=${this.id + "--native"}
|
|
1036
128
|
label=${this.label}
|
|
1037
129
|
description=${this.description}
|
|
1038
130
|
flag=${this.required ? "required" : this.optional ? "optional" : ""}
|
|
@@ -1057,71 +149,71 @@ const y = (v = class extends re {
|
|
|
1057
149
|
</div>
|
|
1058
150
|
`;
|
|
1059
151
|
}
|
|
1060
|
-
}, v.VALID_SIZES = ["sm", "md"],
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
],
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
],
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
],
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
],
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
],
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
],
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
],
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
],
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
],
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
],
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
],
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
],
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
],
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
],
|
|
1103
|
-
let
|
|
1104
|
-
customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup",
|
|
1105
|
-
var
|
|
1106
|
-
for (var
|
|
1107
|
-
(c =
|
|
1108
|
-
return
|
|
152
|
+
}, d.styles = v(_), d.VALID_SIZES = ["sm", "md"], d.formAssociated = !0, d);
|
|
153
|
+
a([
|
|
154
|
+
t({ type: String, reflect: !0 })
|
|
155
|
+
], n.prototype, "id", 2);
|
|
156
|
+
a([
|
|
157
|
+
t({ type: String, reflect: !0 })
|
|
158
|
+
], n.prototype, "name", 2);
|
|
159
|
+
a([
|
|
160
|
+
t({ type: Boolean, reflect: !0 })
|
|
161
|
+
], n.prototype, "required", 2);
|
|
162
|
+
a([
|
|
163
|
+
t({ type: Boolean, reflect: !0 })
|
|
164
|
+
], n.prototype, "optional", 2);
|
|
165
|
+
a([
|
|
166
|
+
t({ type: Boolean, reflect: !0 })
|
|
167
|
+
], n.prototype, "showError", 2);
|
|
168
|
+
a([
|
|
169
|
+
t({ type: String })
|
|
170
|
+
], n.prototype, "errorMessage", 2);
|
|
171
|
+
a([
|
|
172
|
+
t({ type: String })
|
|
173
|
+
], n.prototype, "label", 2);
|
|
174
|
+
a([
|
|
175
|
+
t({ type: String })
|
|
176
|
+
], n.prototype, "description", 2);
|
|
177
|
+
a([
|
|
178
|
+
t({ type: Boolean, reflect: !0 })
|
|
179
|
+
], n.prototype, "tile", 2);
|
|
180
|
+
a([
|
|
181
|
+
t({ type: String })
|
|
182
|
+
], n.prototype, "_tooltip", 2);
|
|
183
|
+
a([
|
|
184
|
+
t({ type: Boolean, reflect: !0 })
|
|
185
|
+
], n.prototype, "inverted", 2);
|
|
186
|
+
a([
|
|
187
|
+
t({ type: String, reflect: !0 })
|
|
188
|
+
], n.prototype, "form", 2);
|
|
189
|
+
a([
|
|
190
|
+
g()
|
|
191
|
+
], n.prototype, "_slottedDescriptionText", 2);
|
|
192
|
+
a([
|
|
193
|
+
t({ reflect: !0 })
|
|
194
|
+
], n.prototype, "size", 1);
|
|
195
|
+
let C = n;
|
|
196
|
+
customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", C);
|
|
197
|
+
var S = Object.defineProperty, q = Object.getOwnPropertyDescriptor, l = (y, e, o, r) => {
|
|
198
|
+
for (var s = r > 1 ? void 0 : r ? q(e, o) : e, h = y.length - 1, c; h >= 0; h--)
|
|
199
|
+
(c = y[h]) && (s = (r ? c(e, o, s) : c(s)) || s);
|
|
200
|
+
return r && s && S(e, o, s), s;
|
|
1109
201
|
};
|
|
1110
|
-
let
|
|
1111
|
-
var
|
|
1112
|
-
const
|
|
202
|
+
let $ = 0;
|
|
203
|
+
var b;
|
|
204
|
+
const i = (b = class extends p {
|
|
1113
205
|
// allows use of elementInternals' API
|
|
1114
206
|
constructor() {
|
|
1115
207
|
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._size = "md", this._manageLabelClick = () => {
|
|
1116
|
-
const e = this.shadowRoot?.querySelector("nys-label"),
|
|
1117
|
-
e &&
|
|
208
|
+
const e = this.shadowRoot?.querySelector("nys-label"), o = this.shadowRoot?.querySelector("input");
|
|
209
|
+
e && o && e.addEventListener("click", () => o.click());
|
|
1118
210
|
}, this._internals = this.attachInternals();
|
|
1119
211
|
}
|
|
1120
212
|
get size() {
|
|
1121
213
|
return this._size;
|
|
1122
214
|
}
|
|
1123
215
|
set size(e) {
|
|
1124
|
-
this._size =
|
|
216
|
+
this._size = b.VALID_SIZES.includes(
|
|
1125
217
|
e
|
|
1126
218
|
) ? e : "md";
|
|
1127
219
|
}
|
|
@@ -1130,7 +222,7 @@ const p = (x = class extends re {
|
|
|
1130
222
|
}
|
|
1131
223
|
// Generate a unique ID if one is not provided
|
|
1132
224
|
connectedCallback() {
|
|
1133
|
-
super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${
|
|
225
|
+
super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${$++}`), this.addEventListener("invalid", this._handleInvalid);
|
|
1134
226
|
}
|
|
1135
227
|
disconnectedCallback() {
|
|
1136
228
|
super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
|
|
@@ -1147,23 +239,23 @@ const p = (x = class extends re {
|
|
|
1147
239
|
this.groupExist || this._internals.setFormValue(this.checked ? this.value : null);
|
|
1148
240
|
}
|
|
1149
241
|
_manageRequire() {
|
|
1150
|
-
const e = this.shadowRoot?.querySelector("input"),
|
|
1151
|
-
e && (this.required && !this.checked ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 },
|
|
242
|
+
const e = this.shadowRoot?.querySelector("input"), o = this.errorMessage || "This field is required";
|
|
243
|
+
e && (this.required && !this.checked ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, o, e)) : this._internals.setValidity({}));
|
|
1152
244
|
}
|
|
1153
245
|
_setValidityMessage(e = "") {
|
|
1154
|
-
const
|
|
1155
|
-
|
|
246
|
+
const o = this.shadowRoot?.querySelector("input");
|
|
247
|
+
o && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), this._internals.setValidity(
|
|
1156
248
|
e ? { customError: !0 } : {},
|
|
1157
249
|
e,
|
|
1158
|
-
|
|
250
|
+
o
|
|
1159
251
|
));
|
|
1160
252
|
}
|
|
1161
253
|
_validate() {
|
|
1162
254
|
const e = this.shadowRoot?.querySelector("input");
|
|
1163
255
|
if (!e) return;
|
|
1164
|
-
const
|
|
1165
|
-
let
|
|
1166
|
-
|
|
256
|
+
const o = e.validity;
|
|
257
|
+
let r = "";
|
|
258
|
+
o.valueMissing && (r = "This field is required"), this._setValidityMessage(r);
|
|
1167
259
|
}
|
|
1168
260
|
/********************** Functions **********************/
|
|
1169
261
|
// This helper function is called to perform the element's native validation.
|
|
@@ -1175,12 +267,12 @@ const p = (x = class extends re {
|
|
|
1175
267
|
}
|
|
1176
268
|
_handleInvalid(e) {
|
|
1177
269
|
e.preventDefault(), this.showError = !0, this._validate();
|
|
1178
|
-
const
|
|
1179
|
-
if (
|
|
1180
|
-
const
|
|
1181
|
-
|
|
270
|
+
const o = this.shadowRoot?.querySelector("input");
|
|
271
|
+
if (o) {
|
|
272
|
+
const r = this._internals.form;
|
|
273
|
+
r ? Array.from(r.elements).find(
|
|
1182
274
|
(c) => typeof c.checkValidity == "function" && !c.checkValidity()
|
|
1183
|
-
) === this &&
|
|
275
|
+
) === this && o.focus() : o.focus();
|
|
1184
276
|
}
|
|
1185
277
|
}
|
|
1186
278
|
/******************** Event Handlers ********************/
|
|
@@ -1200,8 +292,8 @@ const p = (x = class extends re {
|
|
|
1200
292
|
}
|
|
1201
293
|
// Handle checkbox change event
|
|
1202
294
|
_handleChange(e) {
|
|
1203
|
-
const { checked:
|
|
1204
|
-
this.checked =
|
|
295
|
+
const { checked: o } = e.target;
|
|
296
|
+
this.checked = o, this.groupExist || this._internals.setFormValue(this.checked ? this.value : null), this._validate(), this._emitChangeEvent();
|
|
1205
297
|
}
|
|
1206
298
|
// Handle focus event
|
|
1207
299
|
_handleFocus() {
|
|
@@ -1216,19 +308,19 @@ const p = (x = class extends re {
|
|
|
1216
308
|
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()));
|
|
1217
309
|
}
|
|
1218
310
|
render() {
|
|
1219
|
-
return
|
|
311
|
+
return k`
|
|
1220
312
|
<label class="nys-checkbox">
|
|
1221
313
|
<div class="nys-checkbox__checkboxwrapper">
|
|
1222
314
|
<input
|
|
1223
|
-
id
|
|
315
|
+
id=${this.id + "--native"}
|
|
1224
316
|
class="nys-checkbox__checkbox"
|
|
1225
317
|
type="checkbox"
|
|
1226
|
-
name="${
|
|
318
|
+
name="${x(this.name ? this.name : void 0)}"
|
|
1227
319
|
.checked=${this.checked}
|
|
1228
320
|
?disabled=${this.disabled}
|
|
1229
321
|
.value=${this.value}
|
|
1230
322
|
?required="${this.required}"
|
|
1231
|
-
form=${
|
|
323
|
+
form=${x(this.form || void 0)}
|
|
1232
324
|
aria-checked="${this.checked}"
|
|
1233
325
|
aria-disabled="${this.disabled ? "true" : "false"}"
|
|
1234
326
|
aria-required="${this.required}"
|
|
@@ -1239,19 +331,18 @@ const p = (x = class extends re {
|
|
|
1239
331
|
@keydown="${this._handleKeydown}"
|
|
1240
332
|
aria-label="${this.label}"
|
|
1241
333
|
/>
|
|
1242
|
-
${this.checked ?
|
|
1243
|
-
for="${this.id}"
|
|
334
|
+
${this.checked ? k`<nys-icon
|
|
1244
335
|
name="check"
|
|
1245
336
|
size="${this.size === "md" ? "4xl" : this.size === "sm" ? "2xl" : "xl"}"
|
|
1246
337
|
class="nys-checkbox__icon"
|
|
1247
338
|
></nys-icon>` : ""}
|
|
1248
339
|
</div>
|
|
1249
|
-
${this.label &&
|
|
340
|
+
${this.label && k`
|
|
1250
341
|
<nys-label
|
|
1251
|
-
for=${this.id}
|
|
342
|
+
for=${this.id + "--native"}
|
|
1252
343
|
label=${this.label}
|
|
1253
|
-
description=${
|
|
1254
|
-
flag=${
|
|
344
|
+
description=${x(this.description ?? void 0)}
|
|
345
|
+
flag=${x(this.required ? "required" : void 0)}
|
|
1255
346
|
?inverted=${this.inverted}
|
|
1256
347
|
>
|
|
1257
348
|
<slot name="description" slot="description"
|
|
@@ -1260,7 +351,7 @@ const p = (x = class extends re {
|
|
|
1260
351
|
</nys-label>
|
|
1261
352
|
`}
|
|
1262
353
|
</label>
|
|
1263
|
-
${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ?
|
|
354
|
+
${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? k`<nys-errormessage
|
|
1264
355
|
id="single-error-message"
|
|
1265
356
|
?showError=${this.showError}
|
|
1266
357
|
errorMessage=${this._internals.validationMessage || this.errorMessage}
|
|
@@ -1268,56 +359,56 @@ const p = (x = class extends re {
|
|
|
1268
359
|
></nys-errormessage>` : ""}
|
|
1269
360
|
`;
|
|
1270
361
|
}
|
|
1271
|
-
},
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
],
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
],
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
],
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
],
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
],
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
],
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
],
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
],
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
],
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
],
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
],
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
],
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
],
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
],
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
],
|
|
1317
|
-
let
|
|
1318
|
-
customElements.get("nys-checkbox") || customElements.define("nys-checkbox",
|
|
362
|
+
}, b.styles = v(_), b.VALID_SIZES = ["sm", "md"], b.formAssociated = !0, b);
|
|
363
|
+
l([
|
|
364
|
+
t({ type: Boolean, reflect: !0 })
|
|
365
|
+
], i.prototype, "checked", 2);
|
|
366
|
+
l([
|
|
367
|
+
t({ type: Boolean, reflect: !0 })
|
|
368
|
+
], i.prototype, "disabled", 2);
|
|
369
|
+
l([
|
|
370
|
+
t({ type: Boolean, reflect: !0 })
|
|
371
|
+
], i.prototype, "required", 2);
|
|
372
|
+
l([
|
|
373
|
+
t({ type: String })
|
|
374
|
+
], i.prototype, "label", 2);
|
|
375
|
+
l([
|
|
376
|
+
t({ type: String })
|
|
377
|
+
], i.prototype, "description", 2);
|
|
378
|
+
l([
|
|
379
|
+
t({ type: String, reflect: !0 })
|
|
380
|
+
], i.prototype, "id", 2);
|
|
381
|
+
l([
|
|
382
|
+
t({ type: String, reflect: !0 })
|
|
383
|
+
], i.prototype, "name", 2);
|
|
384
|
+
l([
|
|
385
|
+
t({ type: String })
|
|
386
|
+
], i.prototype, "value", 2);
|
|
387
|
+
l([
|
|
388
|
+
t({ type: String, reflect: !0 })
|
|
389
|
+
], i.prototype, "form", 2);
|
|
390
|
+
l([
|
|
391
|
+
t({ type: Boolean, reflect: !0 })
|
|
392
|
+
], i.prototype, "showError", 2);
|
|
393
|
+
l([
|
|
394
|
+
t({ type: String })
|
|
395
|
+
], i.prototype, "errorMessage", 2);
|
|
396
|
+
l([
|
|
397
|
+
t({ type: Boolean })
|
|
398
|
+
], i.prototype, "groupExist", 2);
|
|
399
|
+
l([
|
|
400
|
+
t({ type: Boolean, reflect: !0 })
|
|
401
|
+
], i.prototype, "tile", 2);
|
|
402
|
+
l([
|
|
403
|
+
t({ type: Boolean, reflect: !0 })
|
|
404
|
+
], i.prototype, "inverted", 2);
|
|
405
|
+
l([
|
|
406
|
+
t({ reflect: !0 })
|
|
407
|
+
], i.prototype, "size", 1);
|
|
408
|
+
let z = i;
|
|
409
|
+
customElements.get("nys-checkbox") || customElements.define("nys-checkbox", z);
|
|
1319
410
|
export {
|
|
1320
|
-
|
|
1321
|
-
|
|
411
|
+
z as NysCheckbox,
|
|
412
|
+
C as NysCheckboxgroup
|
|
1322
413
|
};
|
|
1323
414
|
//# sourceMappingURL=nys-checkbox.js.map
|