@ucalgary-design-system/radio 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/README.md +2 -0
- package/index.js +386 -70
- package/package.json +3 -3
- package/radio.css +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @ucalgary-design-system/radio
|
|
2
2
|
|
|
3
|
+
## 1.0.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 4c0950e: Added missing token injector to inject tokens into document head.
|
|
8
|
+
- Updated dependencies [4c0950e]
|
|
9
|
+
- @ucalgary-design-system/icon@1.0.5
|
|
10
|
+
- @ucalgary-design-system/core@1.0.5
|
|
11
|
+
|
|
3
12
|
## 1.0.4
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
package/README.md
CHANGED
package/index.js
CHANGED
|
@@ -1,58 +1,373 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { FormLabel as u } from "@ucalgary-design-system/helper-components";
|
|
1
|
+
import { BaseElement as x, injectGlobalTokens as U } from "@ucalgary-design-system/core";
|
|
2
|
+
import { unsafeCSS as A, nothing as $, html as u } from "lit";
|
|
3
|
+
import { FormLabel as C } from "@ucalgary-design-system/helper-components";
|
|
5
4
|
import "@ucalgary-design-system/icon";
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
/**
|
|
6
|
+
* @license
|
|
7
|
+
* Copyright 2017 Google LLC
|
|
8
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
9
|
+
*/
|
|
10
|
+
const R = (i) => (e, t) => {
|
|
11
|
+
t !== void 0 ? t.addInitializer(() => {
|
|
12
|
+
customElements.define(i, e);
|
|
13
|
+
}) : customElements.define(i, e);
|
|
11
14
|
};
|
|
12
|
-
|
|
15
|
+
/**
|
|
16
|
+
* @license
|
|
17
|
+
* Copyright 2019 Google LLC
|
|
18
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
19
|
+
*/
|
|
20
|
+
const m = globalThis, v = m.ShadowRoot && (m.ShadyCSS === void 0 || m.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, O = Symbol(), k = /* @__PURE__ */ new WeakMap();
|
|
21
|
+
let M = class {
|
|
22
|
+
constructor(e, t, r) {
|
|
23
|
+
if (this._$cssResult$ = !0, r !== O) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
24
|
+
this.cssText = e, this.t = t;
|
|
25
|
+
}
|
|
26
|
+
get styleSheet() {
|
|
27
|
+
let e = this.o;
|
|
28
|
+
const t = this.t;
|
|
29
|
+
if (v && e === void 0) {
|
|
30
|
+
const r = t !== void 0 && t.length === 1;
|
|
31
|
+
r && (e = k.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && k.set(t, e));
|
|
32
|
+
}
|
|
33
|
+
return e;
|
|
34
|
+
}
|
|
35
|
+
toString() {
|
|
36
|
+
return this.cssText;
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
const T = (i) => new M(typeof i == "string" ? i : i + "", void 0, O), q = (i, e) => {
|
|
40
|
+
if (v) i.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
|
|
41
|
+
else for (const t of e) {
|
|
42
|
+
const r = document.createElement("style"), o = m.litNonce;
|
|
43
|
+
o !== void 0 && r.setAttribute("nonce", o), r.textContent = t.cssText, i.appendChild(r);
|
|
44
|
+
}
|
|
45
|
+
}, E = v ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((e) => {
|
|
46
|
+
let t = "";
|
|
47
|
+
for (const r of e.cssRules) t += r.cssText;
|
|
48
|
+
return T(t);
|
|
49
|
+
})(i) : i;
|
|
50
|
+
/**
|
|
51
|
+
* @license
|
|
52
|
+
* Copyright 2017 Google LLC
|
|
53
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
54
|
+
*/
|
|
55
|
+
const { is: N, defineProperty: j, getOwnPropertyDescriptor: D, getOwnPropertyNames: z, getOwnPropertySymbols: I, getPrototypeOf: L } = Object, p = globalThis, w = p.trustedTypes, B = w ? w.emptyScript : "", g = p.reactiveElementPolyfillSupport, b = (i, e) => i, y = { toAttribute(i, e) {
|
|
56
|
+
switch (e) {
|
|
57
|
+
case Boolean:
|
|
58
|
+
i = i ? B : null;
|
|
59
|
+
break;
|
|
60
|
+
case Object:
|
|
61
|
+
case Array:
|
|
62
|
+
i = i == null ? i : JSON.stringify(i);
|
|
63
|
+
}
|
|
64
|
+
return i;
|
|
65
|
+
}, fromAttribute(i, e) {
|
|
66
|
+
let t = i;
|
|
67
|
+
switch (e) {
|
|
68
|
+
case Boolean:
|
|
69
|
+
t = i !== null;
|
|
70
|
+
break;
|
|
71
|
+
case Number:
|
|
72
|
+
t = i === null ? null : Number(i);
|
|
73
|
+
break;
|
|
74
|
+
case Object:
|
|
75
|
+
case Array:
|
|
76
|
+
try {
|
|
77
|
+
t = JSON.parse(i);
|
|
78
|
+
} catch {
|
|
79
|
+
t = null;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
return t;
|
|
83
|
+
} }, _ = (i, e) => !N(i, e), P = { attribute: !0, type: String, converter: y, reflect: !1, useDefault: !1, hasChanged: _ };
|
|
84
|
+
Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), p.litPropertyMetadata ?? (p.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
|
|
85
|
+
class f extends HTMLElement {
|
|
86
|
+
static addInitializer(e) {
|
|
87
|
+
this._$Ei(), (this.l ?? (this.l = [])).push(e);
|
|
88
|
+
}
|
|
89
|
+
static get observedAttributes() {
|
|
90
|
+
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
|
|
91
|
+
}
|
|
92
|
+
static createProperty(e, t = P) {
|
|
93
|
+
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) {
|
|
94
|
+
const r = Symbol(), o = this.getPropertyDescriptor(e, r, t);
|
|
95
|
+
o !== void 0 && j(this.prototype, e, o);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
static getPropertyDescriptor(e, t, r) {
|
|
99
|
+
const { get: o, set: s } = D(this.prototype, e) ?? { get() {
|
|
100
|
+
return this[t];
|
|
101
|
+
}, set(a) {
|
|
102
|
+
this[t] = a;
|
|
103
|
+
} };
|
|
104
|
+
return { get: o, set(a) {
|
|
105
|
+
const n = o == null ? void 0 : o.call(this);
|
|
106
|
+
s == null || s.call(this, a), this.requestUpdate(e, n, r);
|
|
107
|
+
}, configurable: !0, enumerable: !0 };
|
|
108
|
+
}
|
|
109
|
+
static getPropertyOptions(e) {
|
|
110
|
+
return this.elementProperties.get(e) ?? P;
|
|
111
|
+
}
|
|
112
|
+
static _$Ei() {
|
|
113
|
+
if (this.hasOwnProperty(b("elementProperties"))) return;
|
|
114
|
+
const e = L(this);
|
|
115
|
+
e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
|
|
116
|
+
}
|
|
117
|
+
static finalize() {
|
|
118
|
+
if (this.hasOwnProperty(b("finalized"))) return;
|
|
119
|
+
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(b("properties"))) {
|
|
120
|
+
const t = this.properties, r = [...z(t), ...I(t)];
|
|
121
|
+
for (const o of r) this.createProperty(o, t[o]);
|
|
122
|
+
}
|
|
123
|
+
const e = this[Symbol.metadata];
|
|
124
|
+
if (e !== null) {
|
|
125
|
+
const t = litPropertyMetadata.get(e);
|
|
126
|
+
if (t !== void 0) for (const [r, o] of t) this.elementProperties.set(r, o);
|
|
127
|
+
}
|
|
128
|
+
this._$Eh = /* @__PURE__ */ new Map();
|
|
129
|
+
for (const [t, r] of this.elementProperties) {
|
|
130
|
+
const o = this._$Eu(t, r);
|
|
131
|
+
o !== void 0 && this._$Eh.set(o, t);
|
|
132
|
+
}
|
|
133
|
+
this.elementStyles = this.finalizeStyles(this.styles);
|
|
134
|
+
}
|
|
135
|
+
static finalizeStyles(e) {
|
|
136
|
+
const t = [];
|
|
137
|
+
if (Array.isArray(e)) {
|
|
138
|
+
const r = new Set(e.flat(1 / 0).reverse());
|
|
139
|
+
for (const o of r) t.unshift(E(o));
|
|
140
|
+
} else e !== void 0 && t.push(E(e));
|
|
141
|
+
return t;
|
|
142
|
+
}
|
|
143
|
+
static _$Eu(e, t) {
|
|
144
|
+
const r = t.attribute;
|
|
145
|
+
return r === !1 ? void 0 : typeof r == "string" ? r : typeof e == "string" ? e.toLowerCase() : void 0;
|
|
146
|
+
}
|
|
147
|
+
constructor() {
|
|
148
|
+
super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
|
|
149
|
+
}
|
|
150
|
+
_$Ev() {
|
|
151
|
+
var e;
|
|
152
|
+
this._$ES = new Promise((t) => this.enableUpdating = t), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (e = this.constructor.l) == null || e.forEach((t) => t(this));
|
|
153
|
+
}
|
|
154
|
+
addController(e) {
|
|
155
|
+
var t;
|
|
156
|
+
(this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(e), this.renderRoot !== void 0 && this.isConnected && ((t = e.hostConnected) == null || t.call(e));
|
|
157
|
+
}
|
|
158
|
+
removeController(e) {
|
|
159
|
+
var t;
|
|
160
|
+
(t = this._$EO) == null || t.delete(e);
|
|
161
|
+
}
|
|
162
|
+
_$E_() {
|
|
163
|
+
const e = /* @__PURE__ */ new Map(), t = this.constructor.elementProperties;
|
|
164
|
+
for (const r of t.keys()) this.hasOwnProperty(r) && (e.set(r, this[r]), delete this[r]);
|
|
165
|
+
e.size > 0 && (this._$Ep = e);
|
|
166
|
+
}
|
|
167
|
+
createRenderRoot() {
|
|
168
|
+
const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
|
|
169
|
+
return q(e, this.constructor.elementStyles), e;
|
|
170
|
+
}
|
|
171
|
+
connectedCallback() {
|
|
172
|
+
var e;
|
|
173
|
+
this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (e = this._$EO) == null || e.forEach((t) => {
|
|
174
|
+
var r;
|
|
175
|
+
return (r = t.hostConnected) == null ? void 0 : r.call(t);
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
enableUpdating(e) {
|
|
179
|
+
}
|
|
180
|
+
disconnectedCallback() {
|
|
181
|
+
var e;
|
|
182
|
+
(e = this._$EO) == null || e.forEach((t) => {
|
|
183
|
+
var r;
|
|
184
|
+
return (r = t.hostDisconnected) == null ? void 0 : r.call(t);
|
|
185
|
+
});
|
|
186
|
+
}
|
|
187
|
+
attributeChangedCallback(e, t, r) {
|
|
188
|
+
this._$AK(e, r);
|
|
189
|
+
}
|
|
190
|
+
_$ET(e, t) {
|
|
191
|
+
var s;
|
|
192
|
+
const r = this.constructor.elementProperties.get(e), o = this.constructor._$Eu(e, r);
|
|
193
|
+
if (o !== void 0 && r.reflect === !0) {
|
|
194
|
+
const a = (((s = r.converter) == null ? void 0 : s.toAttribute) !== void 0 ? r.converter : y).toAttribute(t, r.type);
|
|
195
|
+
this._$Em = e, a == null ? this.removeAttribute(o) : this.setAttribute(o, a), this._$Em = null;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
_$AK(e, t) {
|
|
199
|
+
var s, a;
|
|
200
|
+
const r = this.constructor, o = r._$Eh.get(e);
|
|
201
|
+
if (o !== void 0 && this._$Em !== o) {
|
|
202
|
+
const n = r.getPropertyOptions(o), h = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((s = n.converter) == null ? void 0 : s.fromAttribute) !== void 0 ? n.converter : y;
|
|
203
|
+
this._$Em = o;
|
|
204
|
+
const S = h.fromAttribute(t, n.type);
|
|
205
|
+
this[o] = S ?? ((a = this._$Ej) == null ? void 0 : a.get(o)) ?? S, this._$Em = null;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
requestUpdate(e, t, r) {
|
|
209
|
+
var o;
|
|
210
|
+
if (e !== void 0) {
|
|
211
|
+
const s = this.constructor, a = this[e];
|
|
212
|
+
if (r ?? (r = s.getPropertyOptions(e)), !((r.hasChanged ?? _)(a, t) || r.useDefault && r.reflect && a === ((o = this._$Ej) == null ? void 0 : o.get(e)) && !this.hasAttribute(s._$Eu(e, r)))) return;
|
|
213
|
+
this.C(e, t, r);
|
|
214
|
+
}
|
|
215
|
+
this.isUpdatePending === !1 && (this._$ES = this._$EP());
|
|
216
|
+
}
|
|
217
|
+
C(e, t, { useDefault: r, reflect: o, wrapped: s }, a) {
|
|
218
|
+
r && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, a ?? t ?? this[e]), s !== !0 || a !== void 0) || (this._$AL.has(e) || (this.hasUpdated || r || (t = void 0), this._$AL.set(e, t)), o === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
|
|
219
|
+
}
|
|
220
|
+
async _$EP() {
|
|
221
|
+
this.isUpdatePending = !0;
|
|
222
|
+
try {
|
|
223
|
+
await this._$ES;
|
|
224
|
+
} catch (t) {
|
|
225
|
+
Promise.reject(t);
|
|
226
|
+
}
|
|
227
|
+
const e = this.scheduleUpdate();
|
|
228
|
+
return e != null && await e, !this.isUpdatePending;
|
|
229
|
+
}
|
|
230
|
+
scheduleUpdate() {
|
|
231
|
+
return this.performUpdate();
|
|
232
|
+
}
|
|
233
|
+
performUpdate() {
|
|
234
|
+
var r;
|
|
235
|
+
if (!this.isUpdatePending) return;
|
|
236
|
+
if (!this.hasUpdated) {
|
|
237
|
+
if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
|
|
238
|
+
for (const [s, a] of this._$Ep) this[s] = a;
|
|
239
|
+
this._$Ep = void 0;
|
|
240
|
+
}
|
|
241
|
+
const o = this.constructor.elementProperties;
|
|
242
|
+
if (o.size > 0) for (const [s, a] of o) {
|
|
243
|
+
const { wrapped: n } = a, h = this[s];
|
|
244
|
+
n !== !0 || this._$AL.has(s) || h === void 0 || this.C(s, void 0, a, h);
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
let e = !1;
|
|
248
|
+
const t = this._$AL;
|
|
249
|
+
try {
|
|
250
|
+
e = this.shouldUpdate(t), e ? (this.willUpdate(t), (r = this._$EO) == null || r.forEach((o) => {
|
|
251
|
+
var s;
|
|
252
|
+
return (s = o.hostUpdate) == null ? void 0 : s.call(o);
|
|
253
|
+
}), this.update(t)) : this._$EM();
|
|
254
|
+
} catch (o) {
|
|
255
|
+
throw e = !1, this._$EM(), o;
|
|
256
|
+
}
|
|
257
|
+
e && this._$AE(t);
|
|
258
|
+
}
|
|
259
|
+
willUpdate(e) {
|
|
260
|
+
}
|
|
261
|
+
_$AE(e) {
|
|
262
|
+
var t;
|
|
263
|
+
(t = this._$EO) == null || t.forEach((r) => {
|
|
264
|
+
var o;
|
|
265
|
+
return (o = r.hostUpdated) == null ? void 0 : o.call(r);
|
|
266
|
+
}), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
|
|
267
|
+
}
|
|
268
|
+
_$EM() {
|
|
269
|
+
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
|
|
270
|
+
}
|
|
271
|
+
get updateComplete() {
|
|
272
|
+
return this.getUpdateComplete();
|
|
273
|
+
}
|
|
274
|
+
getUpdateComplete() {
|
|
275
|
+
return this._$ES;
|
|
276
|
+
}
|
|
277
|
+
shouldUpdate(e) {
|
|
278
|
+
return !0;
|
|
279
|
+
}
|
|
280
|
+
update(e) {
|
|
281
|
+
this._$Eq && (this._$Eq = this._$Eq.forEach((t) => this._$ET(t, this[t]))), this._$EM();
|
|
282
|
+
}
|
|
283
|
+
updated(e) {
|
|
284
|
+
}
|
|
285
|
+
firstUpdated(e) {
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
f.elementStyles = [], f.shadowRootOptions = { mode: "open" }, f[b("elementProperties")] = /* @__PURE__ */ new Map(), f[b("finalized")] = /* @__PURE__ */ new Map(), g == null || g({ ReactiveElement: f }), (p.reactiveElementVersions ?? (p.reactiveElementVersions = [])).push("2.1.1");
|
|
289
|
+
/**
|
|
290
|
+
* @license
|
|
291
|
+
* Copyright 2017 Google LLC
|
|
292
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
293
|
+
*/
|
|
294
|
+
const H = { attribute: !0, type: String, converter: y, reflect: !1, hasChanged: _ }, F = (i = H, e, t) => {
|
|
295
|
+
const { kind: r, metadata: o } = t;
|
|
296
|
+
let s = globalThis.litPropertyMetadata.get(o);
|
|
297
|
+
if (s === void 0 && globalThis.litPropertyMetadata.set(o, s = /* @__PURE__ */ new Map()), r === "setter" && ((i = Object.create(i)).wrapped = !0), s.set(t.name, i), r === "accessor") {
|
|
298
|
+
const { name: a } = t;
|
|
299
|
+
return { set(n) {
|
|
300
|
+
const h = e.get.call(this);
|
|
301
|
+
e.set.call(this, n), this.requestUpdate(a, h, i);
|
|
302
|
+
}, init(n) {
|
|
303
|
+
return n !== void 0 && this.C(a, void 0, i, n), n;
|
|
304
|
+
} };
|
|
305
|
+
}
|
|
306
|
+
if (r === "setter") {
|
|
307
|
+
const { name: a } = t;
|
|
308
|
+
return function(n) {
|
|
309
|
+
const h = this[a];
|
|
310
|
+
e.call(this, n), this.requestUpdate(a, h, i);
|
|
311
|
+
};
|
|
312
|
+
}
|
|
313
|
+
throw Error("Unsupported decorator location: " + r);
|
|
314
|
+
};
|
|
315
|
+
function l(i) {
|
|
316
|
+
return (e, t) => typeof t == "object" ? F(i, e, t) : ((r, o, s) => {
|
|
317
|
+
const a = o.hasOwnProperty(s);
|
|
318
|
+
return o.constructor.createProperty(s, r), a ? Object.getOwnPropertyDescriptor(o, s) : void 0;
|
|
319
|
+
})(i, e, t);
|
|
320
|
+
}
|
|
321
|
+
const J = ':host{display:block}.form-radio{display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing);width:var(--ucds-form-element-width);max-width:var(--ucds-form-element-maxwidth);--formRadioCheckboxHeight: 1.25rem;--checkmarkHeight: .625rem;--radioHeight: .625rem}.form-radio input[type=checkbox],.form-radio input[type=radio]{position:absolute;opacity:0}.form-radio input[type=checkbox]+label,.form-radio input[type=radio]+label{display:flex;position:relative;width:100%;max-width:555px;padding-left:28px;line-height:var(--formRadioCheckboxHeight);cursor:pointer}.form-radio input[type=checkbox]+label .radio-control,.form-radio input[type=radio]+label .radio-control{content:"";display:block;position:absolute;width:var(--formRadioCheckboxHeight);height:var(--formRadioCheckboxHeight);top:0;left:0;background-color:var(--ucds-color-palette-white);border:var(--ucds-form-element-border-width) solid var(--ucds-color-forms-input-border-rest);transition:background-color .5s ease,border-color .5s ease}.form-radio input[type=checkbox]:hover+label .radio-control,.form-radio input[type=radio]:hover+label .radio-control{border-color:var(--ucds-color-forms-input-border-hover)}.form-radio input[type=checkbox]:active:not(:disabled)+label .radio-control,.form-radio input[type=checkbox]:focus:not(:disabled)+label .radio-control,.form-radio input[type=radio]:active:not(:disabled)+label .radio-control,.form-radio input[type=radio]:focus:not(:disabled)+label .radio-control{outline:var(--ucds-color-action-focus) 2px solid;outline-offset:2px}.form-radio input[type=checkbox]:checked+label .radio-control,.form-radio input[type=radio]:checked+label .radio-control{background-color:var(--ucds-color-forms-input-background-selected);border-color:var(--ucds-color-forms-input-border-selected)}.form-radio input[type=checkbox]:checked+label .radio-control ucds-icon,.form-radio input[type=radio]:checked+label .radio-control ucds-icon{transform:scale(75%);color:var(--ucds-color-icon-primary-inverse)}.form-radio input[type=checkbox]:disabled+label,.form-radio input[type=radio]:disabled+label{color:var(--ucds-color-text-disabled);cursor:default}.form-radio input[type=checkbox]:disabled+label .radio-control,.form-radio input[type=radio]:disabled+label .radio-control{background-color:transparent;border-color:var(--ucds-color-forms-input-border-disabled)}.form-radio input[type=checkbox]:disabled:checked+label .radio-control,.form-radio input[type=radio]:disabled:checked+label .radio-control{background-color:var(--ucds-color-forms-input-background-disabled);border-color:var(--ucds-color-forms-input-border-disabled)}.form-radio input[type=checkbox][error]:not(:disabled)+label .radio-control,.form-radio input[type=checkbox][errors]:not(:disabled)+label .radio-control,.form-radio input[type=radio][error]:not(:disabled)+label .radio-control,.form-radio input[type=radio][errors]:not(:disabled)+label .radio-control{background-color:var(--ucds-color-feedback-error-background-light);border-color:var(--ucds-color-feedback-error-light)}.form-radio input[type=checkbox][error]:not(:disabled)+label .radio-control ucds-icon,.form-radio input[type=checkbox][errors]:not(:disabled)+label .radio-control ucds-icon,.form-radio input[type=radio][error]:not(:disabled)+label .radio-control ucds-icon,.form-radio input[type=radio][errors]:not(:disabled)+label .radio-control ucds-icon{color:var(--ucds-color-feedback-error-light)}.form-radio input[type=radio]+label .radio-control{border-radius:50%}';
|
|
322
|
+
var K = Object.defineProperty, V = Object.getOwnPropertyDescriptor, c = (i, e, t, r) => {
|
|
323
|
+
for (var o = r > 1 ? void 0 : r ? V(e, t) : e, s = i.length - 1, a; s >= 0; s--)
|
|
324
|
+
(a = i[s]) && (o = (r ? a(e, t, o) : a(o)) || o);
|
|
325
|
+
return r && o && K(e, t, o), o;
|
|
326
|
+
};
|
|
327
|
+
let d = class extends x {
|
|
13
328
|
constructor() {
|
|
14
329
|
super(), this.radioID = "radio", this.radioName = "", this.value = "", this.checked = !1, this.disabled = !1, this.required = !1, this.errors = !1, this.error = !1, this.internals = this.attachInternals();
|
|
15
330
|
}
|
|
16
331
|
// Iterate over sibling radios and reset form state.
|
|
17
332
|
_uncheckOtherRadios() {
|
|
18
|
-
var
|
|
333
|
+
var t;
|
|
19
334
|
if (!this.radioName) {
|
|
20
335
|
console.error(`${this.localName}: Property 'name' is required for radio button group functionality and was not set.`);
|
|
21
336
|
return;
|
|
22
337
|
}
|
|
23
|
-
const
|
|
24
|
-
for (const
|
|
25
|
-
|
|
338
|
+
const i = this.form || this.getRootNode(), e = Array.from(i.querySelectorAll(this.localName));
|
|
339
|
+
for (const r of e)
|
|
340
|
+
r !== this && r.form === this.form && r.radioName === this.radioName && (r.checked = !1, (t = r._updateInternals) == null || t.call(r));
|
|
26
341
|
}
|
|
27
342
|
// Update the internal form value.
|
|
28
343
|
_updateInternals() {
|
|
29
|
-
var
|
|
344
|
+
var e;
|
|
30
345
|
this.internals.setFormValue(this.checked ? this.value : null, this.checked ? "true" : ""), this.setAttribute("aria-checked", String(this.checked));
|
|
31
|
-
const
|
|
32
|
-
|
|
346
|
+
const i = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input");
|
|
347
|
+
i.checked = this.checked;
|
|
33
348
|
}
|
|
34
349
|
// Handle change event.
|
|
35
|
-
_handleChange({ target:
|
|
36
|
-
const
|
|
37
|
-
this.checked =
|
|
350
|
+
_handleChange({ target: i }) {
|
|
351
|
+
const e = i;
|
|
352
|
+
this.checked = e.checked, this._updateInternals(), this._uncheckOtherRadios();
|
|
38
353
|
}
|
|
39
354
|
// Initialize component and warn if required properties have not been set.
|
|
40
|
-
firstUpdated(
|
|
41
|
-
super.firstUpdated(
|
|
355
|
+
firstUpdated(i) {
|
|
356
|
+
super.firstUpdated(i), this.form = this.internals.form, this._updateInternals(), this.radioName || console.error(`${this.localName}: Property 'name' is required and was not set.`), this.value || console.error(`${this.localName}: Property 'value' is required and was not set.`);
|
|
42
357
|
}
|
|
43
358
|
// Catch non-click changes.
|
|
44
|
-
update(
|
|
45
|
-
super.update(
|
|
359
|
+
update(i) {
|
|
360
|
+
super.update(i), i.has("checked") && i.get("checked") !== void 0 && this._updateInternals();
|
|
46
361
|
}
|
|
47
362
|
// Reset form state.
|
|
48
363
|
formResetCallback() {
|
|
49
364
|
this.checked = !1, this._updateInternals();
|
|
50
365
|
}
|
|
51
|
-
formStateRestoreCallback(
|
|
52
|
-
this.checked = String(
|
|
366
|
+
formStateRestoreCallback(i) {
|
|
367
|
+
this.checked = String(i).toLowerCase() === "true", this.checked && this._uncheckOtherRadios();
|
|
53
368
|
}
|
|
54
369
|
render() {
|
|
55
|
-
return
|
|
370
|
+
return u`
|
|
56
371
|
<div class="form-radio">
|
|
57
372
|
<input
|
|
58
373
|
type="radio"
|
|
@@ -68,55 +383,56 @@ let o = class extends h {
|
|
|
68
383
|
/>
|
|
69
384
|
<label for="${this.radioID}" ?disabled=${this.disabled}>
|
|
70
385
|
<span class="radio-control">
|
|
71
|
-
${this.checked ?
|
|
386
|
+
${this.checked ? u`<ucds-icon name="dot" size="16"></ucds-icon>` : ""}
|
|
72
387
|
</span>
|
|
73
|
-
<span><slot>Radio Label</slot>${this.required ?
|
|
388
|
+
<span><slot>Radio Label</slot>${this.required ? u`${C.requiredAsteriskTemplate()}` : $}</span>
|
|
74
389
|
</label>
|
|
75
|
-
${this.error && !this.disabled ?
|
|
76
|
-
${this.helpText ?
|
|
390
|
+
${this.error && !this.disabled ? u`<form-error-message text="${this.errorText}"></form-error-message>` : $}
|
|
391
|
+
${this.helpText ? u`<form-help-message text="${this.helpText}" ?disabled="${this.disabled}"></form-help-message>` : $}
|
|
77
392
|
</div>
|
|
78
393
|
`;
|
|
79
394
|
}
|
|
80
395
|
};
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
396
|
+
d.styles = [
|
|
397
|
+
x.styles,
|
|
398
|
+
C.styles,
|
|
399
|
+
A(J)
|
|
85
400
|
];
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
],
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
],
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
],
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
],
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
],
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
],
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
],
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
],
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
],
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
],
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
],
|
|
401
|
+
d.formAssociated = !0;
|
|
402
|
+
c([
|
|
403
|
+
l({ type: String, attribute: "input-id" })
|
|
404
|
+
], d.prototype, "radioID", 2);
|
|
405
|
+
c([
|
|
406
|
+
l({ type: String, attribute: "name" })
|
|
407
|
+
], d.prototype, "radioName", 2);
|
|
408
|
+
c([
|
|
409
|
+
l({ type: String })
|
|
410
|
+
], d.prototype, "value", 2);
|
|
411
|
+
c([
|
|
412
|
+
l({ type: Boolean, reflect: !0 })
|
|
413
|
+
], d.prototype, "checked", 2);
|
|
414
|
+
c([
|
|
415
|
+
l({ type: Boolean, reflect: !0 })
|
|
416
|
+
], d.prototype, "disabled", 2);
|
|
417
|
+
c([
|
|
418
|
+
l({ type: Boolean, reflect: !0 })
|
|
419
|
+
], d.prototype, "required", 2);
|
|
420
|
+
c([
|
|
421
|
+
l({ type: Boolean, reflect: !0 })
|
|
422
|
+
], d.prototype, "errors", 2);
|
|
423
|
+
c([
|
|
424
|
+
l({ type: Boolean, reflect: !0 })
|
|
425
|
+
], d.prototype, "error", 2);
|
|
426
|
+
c([
|
|
427
|
+
l({ type: String, attribute: "error-text" })
|
|
428
|
+
], d.prototype, "errorText", 2);
|
|
429
|
+
c([
|
|
430
|
+
l({ type: String, attribute: "help-text" })
|
|
431
|
+
], d.prototype, "helpText", 2);
|
|
432
|
+
d = c([
|
|
433
|
+
R("ucds-radio")
|
|
434
|
+
], d);
|
|
435
|
+
U();
|
|
120
436
|
export {
|
|
121
|
-
|
|
437
|
+
d as Radio
|
|
122
438
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ucalgary-design-system/radio",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
}
|
|
12
12
|
},
|
|
13
13
|
"peerDependencies": {
|
|
14
|
-
"@ucalgary-design-system/core": "^1.0.
|
|
14
|
+
"@ucalgary-design-system/core": "^1.0.5",
|
|
15
15
|
"@ucalgary-design-system/helper-components": "^1.0.2",
|
|
16
|
-
"@ucalgary-design-system/icon": "^1.0.
|
|
16
|
+
"@ucalgary-design-system/icon": "^1.0.5",
|
|
17
17
|
"@ucalgary-design-system/tokens": "^1.0.4",
|
|
18
18
|
"lit": "^3.2.1"
|
|
19
19
|
},
|
package/radio.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--ucds-color-palette-brand-red: #d6001c;--ucds-color-palette-brand-gold: #ffcd00;--ucds-color-palette-brand-light-orange: #ffa300;--ucds-color-palette-brand-dark-orange: #ff671f;--ucds-color-palette-brand-rubine: #ce0058;--ucds-color-palette-brand-berry: #9c0534;--ucds-color-palette-brand-brown: #6b3529;--ucds-color-palette-brand-teal: #47a67c;--ucds-color-palette-black: #000000;--ucds-color-palette-gray-100: #2d2d2d;--ucds-color-palette-gray-200: #3d3d3d;--ucds-color-palette-gray-250: #4d4d4d;--ucds-color-palette-gray-300: #5d5d5d;--ucds-color-palette-gray-400: #8d8d8d;--ucds-color-palette-gray-500: #adadad;--ucds-color-palette-gray-600: #c0c0c0;--ucds-color-palette-gray-700: #d8d8d8;--ucds-color-palette-gray-800: #e5e5e5;--ucds-color-palette-gray-900: #f4f4f4;--ucds-color-palette-white: #ffffff;--ucds-color-palette-red-100: #3d0910;--ucds-color-palette-red-200: #5c0e18;--ucds-color-palette-red-300: #7a111f;--ucds-color-palette-red-400: #991022;--ucds-color-palette-red-500: #b70b21;--ucds-color-palette-red-600: #d6001c;--ucds-color-palette-red-700: #df3047;--ucds-color-palette-red-800: #ee0e2c;--ucds-color-palette-red-900: #ffadad;--ucds-color-palette-light-orange-200: #614e00;--ucds-color-palette-light-orange-600: #ffa300;--ucds-color-palette-light-orange-900: #fff6e7;--ucds-color-palette-dark-orange-200: #6b3529;--ucds-color-palette-dark-orange-600: #ff671f;--ucds-color-palette-dark-orange-900: #fff2e9;--ucds-color-palette-rubine-600: #ce0058;--ucds-color-palette-rubine-800: #ed0a72;--ucds-color-palette-rubine-900: #ffa3c9;--ucds-color-palette-berry-600: #9c0534;--ucds-color-palette-berry-700: #a6192e;--ucds-color-palette-berry-800: #ea7b8a;--ucds-color-palette-berry-900: #f6ebed;--ucds-color-palette-brown-600: #6b3529;--ucds-color-palette-brown-900: #ca7d68;--ucds-color-palette-teal-600: #47a67c;--ucds-color-palette-teal-900: #f4faf7;--ucds-color-accent-gray-tint-background: #f4f4f4;--ucds-color-accent-gray-tint-icon: #8d8d8d;--ucds-color-accent-red-background: #d6001c;--ucds-color-accent-red-icon: #ffadad;--ucds-color-accent-light-orange-background: #ffa300;--ucds-color-accent-light-orange-icon: #614e00;--ucds-color-accent-light-orange-tint-background: #fff6e7;--ucds-color-accent-light-orange-tint-icon: #ffa300;--ucds-color-accent-dark-orange-background: #ff671f;--ucds-color-accent-dark-orange-icon: #6b3529;--ucds-color-accent-dark-orange-tint-background: #fff2e9;--ucds-color-accent-dark-orange-tint-icon: #ff671f;--ucds-color-accent-rubine-background: #ce0058;--ucds-color-accent-rubine-icon: #ffa3c9;--ucds-color-accent-berry-background: #9c0534;--ucds-color-accent-berry-icon: #ea7b8a;--ucds-color-accent-berry-tint-background: #f6ebed;--ucds-color-accent-berry-tint-icon: #9c0534;--ucds-color-accent-brown-background: #6b3529;--ucds-color-accent-brown-icon: #ca7d68;--ucds-color-accent-teal-tint-background: #f4faf7;--ucds-color-accent-teal-tint-icon: #47a67c;--ucds-color-accent-taupe-tint-background: #fbf8f5;--ucds-color-accent-taupe-tint-icon: #d3ac8b;--ucds-color-surface-page: #ffffff;--ucds-color-surface-primary: #ffffff;--ucds-color-border-neutral: #8d8d8d;--ucds-color-text-primary: #2d2d2d;--ucds-color-text-primary-inverse: #ffffff;--ucds-color-text-secondary: #5d5d5d;--ucds-color-text-disabled: #e5e5e5;--ucds-color-icon-primary: #2d2d2d;--ucds-color-icon-primary-inverse: #ffffff;--ucds-color-forms-input-background-rest: #ffffff;--ucds-color-forms-input-background-hover: #9c0534;--ucds-color-forms-input-background-active: #9c0534;--ucds-color-forms-input-background-selected: #9c0534;--ucds-color-forms-input-background-disabled: #e5e5e5;--ucds-color-forms-input-border-rest: #8d8d8d;--ucds-color-forms-input-border-hover: #3d3d3d;--ucds-color-forms-input-border-active: #3d3d3d;--ucds-color-forms-input-border-selected: #9c0534;--ucds-color-forms-input-border-disabled: #e5e5e5;--ucds-color-forms-input-element-disabled: #f4f4f4;--ucds-color-action-rest: #d6001c;--ucds-color-action-hover: #991022;--ucds-color-action-active: #991022;--ucds-color-action-focus: #4d4d4d;--ucds-color-action-visited: #991022;--ucds-color-action-selected: #9c0534;--ucds-color-action-secondary-rest: #2d2d2d;--ucds-color-action-secondary-hover: #4d4d4d;--ucds-color-action-secondary-active: #4d4d4d;--ucds-color-action-secondary-focus: #4d4d4d;--ucds-color-action-inverse-rest: #ffffff;--ucds-color-action-inverse-hover: #e5e5e5;--ucds-color-action-inverse-active: #e5e5e5;--ucds-color-action-inverse-focus: #ffffff;--ucds-color-feedback-error-light: #df3047;--ucds-color-feedback-error-background-light: rgb(255 173 173 / 50%);--ucds-font-base-size: 16px;--ucds-font-base-line-height: 24px;--ucds-font-family-sans-serif: "Proxima Nova", Arial, Helvetica, sans-serif;--ucds-font-family-serif: "Museo Slab", "Proxima Nova", Arial, Helvetica, sans-serif;--ucds-font-weight-regular: 400;--ucds-font-weight-medium: 500;--ucds-font-weight-semibold: 600;--ucds-font-weight-bold: 700;--ucds-font-paragraph-spacing: 16px;--ucds-font-letter-spacing-eyebrow: 2px;--ucds-responsive-spacing-gap-default-desktop: 32px;--ucds-responsive-spacing-gap-default-tablet: 32px;--ucds-responsive-spacing-gap-default-mobile: 24px;--ucds-responsive-spacing-gap-section-desktop: 64px;--ucds-responsive-spacing-gap-section-tablet: 64px;--ucds-responsive-spacing-gap-section-mobile: 48px;--ucds-responsive-spacing-gap-container-desktop: 48px;--ucds-responsive-spacing-gap-container-tablet: 48px;--ucds-responsive-spacing-gap-container-mobile: 32px;--ucds-responsive-spacing-gap-h1h2-paragraph-desktop: 16px;--ucds-responsive-spacing-gap-h1h2-paragraph-tablet: 16px;--ucds-responsive-spacing-gap-h1h2-paragraph-mobile: 8px;--ucds-responsive-spacing-gap-h3h4-paragraph-desktop: 8px;--ucds-responsive-spacing-gap-h3h4-paragraph-tablet: 8px;--ucds-responsive-spacing-gap-h3h4-paragraph-mobile: 8px;--ucds-responsive-typography-font-size-display-level-0-desktop: 56px;--ucds-responsive-typography-font-size-display-level-0-tablet: 56px;--ucds-responsive-typography-font-size-display-level-0-mobile: 48px;--ucds-responsive-typography-font-size-display-level-1-desktop: 48px;--ucds-responsive-typography-font-size-display-level-1-tablet: 48px;--ucds-responsive-typography-font-size-display-level-1-mobile: 40px;--ucds-responsive-typography-font-size-display-level-2-desktop: 36px;--ucds-responsive-typography-font-size-display-level-2-tablet: 36px;--ucds-responsive-typography-font-size-display-level-2-mobile: 32px;--ucds-responsive-typography-font-size-heading-level-1-desktop: 48px;--ucds-responsive-typography-font-size-heading-level-1-tablet: 48px;--ucds-responsive-typography-font-size-heading-level-1-mobile: 40px;--ucds-responsive-typography-font-size-heading-level-2-desktop: 36px;--ucds-responsive-typography-font-size-heading-level-2-tablet: 36px;--ucds-responsive-typography-font-size-heading-level-2-mobile: 32px;--ucds-responsive-typography-font-size-heading-level-3-desktop: 28px;--ucds-responsive-typography-font-size-heading-level-3-tablet: 28px;--ucds-responsive-typography-font-size-heading-level-3-mobile: 24px;--ucds-responsive-typography-font-size-heading-level-4-desktop: 24px;--ucds-responsive-typography-font-size-heading-level-4-tablet: 24px;--ucds-responsive-typography-font-size-heading-level-4-mobile: 20px;--ucds-responsive-typography-font-size-title-desktop: 20px;--ucds-responsive-typography-font-size-title-tablet: 20px;--ucds-responsive-typography-font-size-title-mobile: 18px;--ucds-responsive-typography-font-size-body-large-desktop: 20px;--ucds-responsive-typography-font-size-body-large-tablet: 20px;--ucds-responsive-typography-font-size-body-large-mobile: 18px;--ucds-responsive-typography-font-size-body-medium-desktop: 16px;--ucds-responsive-typography-font-size-body-medium-tablet: 16px;--ucds-responsive-typography-font-size-body-medium-mobile: 16px;--ucds-responsive-typography-font-size-body-small-desktop: 14px;--ucds-responsive-typography-font-size-body-small-tablet: 14px;--ucds-responsive-typography-font-size-body-small-mobile: 14px;--ucds-responsive-typography-font-size-micro-desktop: 12px;--ucds-responsive-typography-font-size-micro-tablet: 12px;--ucds-responsive-typography-font-size-micro-mobile: 12px;--ucds-responsive-typography-line-height-display-level-0-desktop: 64px;--ucds-responsive-typography-line-height-display-level-0-tablet: 64px;--ucds-responsive-typography-line-height-display-level-0-mobile: 56px;--ucds-responsive-typography-line-height-display-level-1-desktop: 56px;--ucds-responsive-typography-line-height-display-level-1-tablet: 56px;--ucds-responsive-typography-line-height-display-level-1-mobile: 48px;--ucds-responsive-typography-line-height-display-level-2-desktop: 48px;--ucds-responsive-typography-line-height-display-level-2-tablet: 48px;--ucds-responsive-typography-line-height-display-level-2-mobile: 40px;--ucds-responsive-typography-line-height-heading-level-1-desktop: 56px;--ucds-responsive-typography-line-height-heading-level-1-tablet: 56px;--ucds-responsive-typography-line-height-heading-level-1-mobile: 48px;--ucds-responsive-typography-line-height-heading-level-2-desktop: 48px;--ucds-responsive-typography-line-height-heading-level-2-tablet: 48px;--ucds-responsive-typography-line-height-heading-level-2-mobile: 40px;--ucds-responsive-typography-line-height-heading-level-3-desktop: 32px;--ucds-responsive-typography-line-height-heading-level-3-tablet: 32px;--ucds-responsive-typography-line-height-heading-level-3-mobile: 28px;--ucds-responsive-typography-line-height-heading-level-4-desktop: 28px;--ucds-responsive-typography-line-height-heading-level-4-tablet: 28px;--ucds-responsive-typography-line-height-heading-level-4-mobile: 28px;--ucds-responsive-typography-line-height-title-desktop: 28px;--ucds-responsive-typography-line-height-title-tablet: 28px;--ucds-responsive-typography-line-height-title-mobile: 28px;--ucds-responsive-typography-line-height-body-large-desktop: 28px;--ucds-responsive-typography-line-height-body-large-tablet: 28px;--ucds-responsive-typography-line-height-body-large-mobile: 24px;--ucds-responsive-typography-line-height-body-medium-desktop: 24px;--ucds-responsive-typography-line-height-body-medium-tablet: 24px;--ucds-responsive-typography-line-height-body-medium-mobile: 24px;--ucds-responsive-typography-line-height-body-small-desktop: 20px;--ucds-responsive-typography-line-height-body-small-tablet: 20px;--ucds-responsive-typography-line-height-body-small-mobile: 20px;--ucds-responsive-typography-line-height-micro-desktop: 16px;--ucds-responsive-typography-line-height-micro-tablet: 16px;--ucds-responsive-typography-line-height-micro-mobile: 16px;--ucds-shape-border-radius: 8px;--ucds-shape-border-width: 2px;--ucds-shape-border-focus-radius: 10px;--ucds-shape-border-focus-width: 2px;--ucds-form-element-border-radius: 8px;--ucds-form-element-border-width: 2px;--ucds-form-element-height: 48px;--ucds-form-element-width: 100%;--ucds-form-element-maxwidth: 555px;--ucds-form-element-horizontal-padding: 16px;--ucds-form-component-intra-spacing: 8px;--ucds-form-component-inter-spacing: 16px}
|