@ucalgary-design-system/fieldset 1.0.3 → 1.0.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.
Files changed (3) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/index.js +46 -361
  3. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @ucalgary-design-system/fieldset
2
2
 
3
+ ## 1.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - fe87dab: Updated externalized dependencies
8
+ - Updated dependencies [fe87dab]
9
+ - @ucalgary-design-system/core@1.0.4
10
+ - @ucalgary-design-system/tokens@1.0.4
11
+
3
12
  ## 1.0.3
4
13
 
5
14
  ### Patch Changes
package/index.js CHANGED
@@ -1,385 +1,70 @@
1
- import { unsafeCSS as x, nothing as y, html as u } from "lit";
2
- import { BaseElement as C } from "@ucalgary-design-system/core";
3
- import { FormLabel as O } from "@ucalgary-design-system/helper-components";
4
- /**
5
- * @license
6
- * Copyright 2017 Google LLC
7
- * SPDX-License-Identifier: BSD-3-Clause
8
- */
9
- const M = (i) => (t, e) => {
10
- e !== void 0 ? e.addInitializer(() => {
11
- customElements.define(i, t);
12
- }) : customElements.define(i, t);
1
+ import { unsafeCSS as c, nothing as a, html as o } from "lit";
2
+ import { property as i, customElement as u } from "lit/decorators.js";
3
+ import { BaseElement as m } from "@ucalgary-design-system/core";
4
+ import { FormLabel as h } from "@ucalgary-design-system/helper-components";
5
+ const b = ":host{display:block}.form-fieldset{width:var(--ucds-form-element-width);max-width:var(--ucds-form-element-maxwidth);display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing)}.form-fieldset fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--ucds-form-component-inter-spacing)}.form-fieldset fieldset legend{font-weight:var(--ucds-font-weight-bold);margin-bottom:var(--ucds-form-component-inter-spacing);padding:0}.form-fieldset fieldset legend:disabled{color:var(--ucds-color-text-disabled)}.form-fieldset fieldset:not(:last-child){margin-bottom:var(--ucds-form-component-intra-spacing)}";
6
+ var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (e, l, p, d) => {
7
+ for (var r = d > 1 ? void 0 : d ? y(l, p) : l, n = e.length - 1, f; n >= 0; n--)
8
+ (f = e[n]) && (r = (d ? f(l, p, r) : f(r)) || r);
9
+ return d && r && g(l, p, r), r;
13
10
  };
14
- /**
15
- * @license
16
- * Copyright 2019 Google LLC
17
- * SPDX-License-Identifier: BSD-3-Clause
18
- */
19
- const $ = globalThis, _ = $.ShadowRoot && ($.ShadyCSS === void 0 || $.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, A = Symbol(), v = /* @__PURE__ */ new WeakMap();
20
- let T = class {
21
- constructor(t, e, s) {
22
- if (this._$cssResult$ = !0, s !== A) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
23
- this.cssText = t, this.t = e;
24
- }
25
- get styleSheet() {
26
- let t = this.o;
27
- const e = this.t;
28
- if (_ && t === void 0) {
29
- const s = e !== void 0 && e.length === 1;
30
- s && (t = v.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && v.set(e, t));
31
- }
32
- return t;
33
- }
34
- toString() {
35
- return this.cssText;
36
- }
37
- };
38
- const R = (i) => new T(typeof i == "string" ? i : i + "", void 0, A), j = (i, t) => {
39
- if (_) i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
40
- else for (const e of t) {
41
- const s = document.createElement("style"), r = $.litNonce;
42
- r !== void 0 && s.setAttribute("nonce", r), s.textContent = e.cssText, i.appendChild(s);
43
- }
44
- }, w = _ ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
45
- let e = "";
46
- for (const s of t.cssRules) e += s.cssText;
47
- return R(e);
48
- })(i) : i;
49
- /**
50
- * @license
51
- * Copyright 2017 Google LLC
52
- * SPDX-License-Identifier: BSD-3-Clause
53
- */
54
- const { is: q, defineProperty: z, getOwnPropertyDescriptor: D, getOwnPropertyNames: k, getOwnPropertySymbols: L, getPrototypeOf: N } = Object, d = globalThis, P = d.trustedTypes, B = P ? P.emptyScript : "", g = d.reactiveElementPolyfillSupport, m = (i, t) => i, b = { toAttribute(i, t) {
55
- switch (t) {
56
- case Boolean:
57
- i = i ? B : null;
58
- break;
59
- case Object:
60
- case Array:
61
- i = i == null ? i : JSON.stringify(i);
62
- }
63
- return i;
64
- }, fromAttribute(i, t) {
65
- let e = i;
66
- switch (t) {
67
- case Boolean:
68
- e = i !== null;
69
- break;
70
- case Number:
71
- e = i === null ? null : Number(i);
72
- break;
73
- case Object:
74
- case Array:
75
- try {
76
- e = JSON.parse(i);
77
- } catch {
78
- e = null;
79
- }
80
- }
81
- return e;
82
- } }, E = (i, t) => !q(i, t), U = { attribute: !0, type: String, converter: b, reflect: !1, useDefault: !1, hasChanged: E };
83
- Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), d.litPropertyMetadata ?? (d.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
84
- class f extends HTMLElement {
85
- static addInitializer(t) {
86
- this._$Ei(), (this.l ?? (this.l = [])).push(t);
87
- }
88
- static get observedAttributes() {
89
- return this.finalize(), this._$Eh && [...this._$Eh.keys()];
90
- }
91
- static createProperty(t, e = U) {
92
- if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
93
- const s = Symbol(), r = this.getPropertyDescriptor(t, s, e);
94
- r !== void 0 && z(this.prototype, t, r);
95
- }
96
- }
97
- static getPropertyDescriptor(t, e, s) {
98
- const { get: r, set: o } = D(this.prototype, t) ?? { get() {
99
- return this[e];
100
- }, set(n) {
101
- this[e] = n;
102
- } };
103
- return { get: r, set(n) {
104
- const a = r == null ? void 0 : r.call(this);
105
- o == null || o.call(this, n), this.requestUpdate(t, a, s);
106
- }, configurable: !0, enumerable: !0 };
107
- }
108
- static getPropertyOptions(t) {
109
- return this.elementProperties.get(t) ?? U;
110
- }
111
- static _$Ei() {
112
- if (this.hasOwnProperty(m("elementProperties"))) return;
113
- const t = N(this);
114
- t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
115
- }
116
- static finalize() {
117
- if (this.hasOwnProperty(m("finalized"))) return;
118
- if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(m("properties"))) {
119
- const e = this.properties, s = [...k(e), ...L(e)];
120
- for (const r of s) this.createProperty(r, e[r]);
121
- }
122
- const t = this[Symbol.metadata];
123
- if (t !== null) {
124
- const e = litPropertyMetadata.get(t);
125
- if (e !== void 0) for (const [s, r] of e) this.elementProperties.set(s, r);
126
- }
127
- this._$Eh = /* @__PURE__ */ new Map();
128
- for (const [e, s] of this.elementProperties) {
129
- const r = this._$Eu(e, s);
130
- r !== void 0 && this._$Eh.set(r, e);
131
- }
132
- this.elementStyles = this.finalizeStyles(this.styles);
133
- }
134
- static finalizeStyles(t) {
135
- const e = [];
136
- if (Array.isArray(t)) {
137
- const s = new Set(t.flat(1 / 0).reverse());
138
- for (const r of s) e.unshift(w(r));
139
- } else t !== void 0 && e.push(w(t));
140
- return e;
141
- }
142
- static _$Eu(t, e) {
143
- const s = e.attribute;
144
- return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
145
- }
146
- constructor() {
147
- super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
148
- }
149
- _$Ev() {
150
- var t;
151
- this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (t = this.constructor.l) == null || t.forEach((e) => e(this));
152
- }
153
- addController(t) {
154
- var e;
155
- (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t), this.renderRoot !== void 0 && this.isConnected && ((e = t.hostConnected) == null || e.call(t));
156
- }
157
- removeController(t) {
158
- var e;
159
- (e = this._$EO) == null || e.delete(t);
160
- }
161
- _$E_() {
162
- const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
163
- for (const s of e.keys()) this.hasOwnProperty(s) && (t.set(s, this[s]), delete this[s]);
164
- t.size > 0 && (this._$Ep = t);
165
- }
166
- createRenderRoot() {
167
- const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
168
- return j(t, this.constructor.elementStyles), t;
169
- }
170
- connectedCallback() {
171
- var t;
172
- this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((e) => {
173
- var s;
174
- return (s = e.hostConnected) == null ? void 0 : s.call(e);
175
- });
176
- }
177
- enableUpdating(t) {
178
- }
179
- disconnectedCallback() {
180
- var t;
181
- (t = this._$EO) == null || t.forEach((e) => {
182
- var s;
183
- return (s = e.hostDisconnected) == null ? void 0 : s.call(e);
184
- });
185
- }
186
- attributeChangedCallback(t, e, s) {
187
- this._$AK(t, s);
188
- }
189
- _$ET(t, e) {
190
- var o;
191
- const s = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, s);
192
- if (r !== void 0 && s.reflect === !0) {
193
- const n = (((o = s.converter) == null ? void 0 : o.toAttribute) !== void 0 ? s.converter : b).toAttribute(e, s.type);
194
- this._$Em = t, n == null ? this.removeAttribute(r) : this.setAttribute(r, n), this._$Em = null;
195
- }
196
- }
197
- _$AK(t, e) {
198
- var o, n;
199
- const s = this.constructor, r = s._$Eh.get(t);
200
- if (r !== void 0 && this._$Em !== r) {
201
- const a = s.getPropertyOptions(r), h = typeof a.converter == "function" ? { fromAttribute: a.converter } : ((o = a.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? a.converter : b;
202
- this._$Em = r;
203
- const S = h.fromAttribute(e, a.type);
204
- this[r] = S ?? ((n = this._$Ej) == null ? void 0 : n.get(r)) ?? S, this._$Em = null;
205
- }
206
- }
207
- requestUpdate(t, e, s) {
208
- var r;
209
- if (t !== void 0) {
210
- const o = this.constructor, n = this[t];
211
- if (s ?? (s = o.getPropertyOptions(t)), !((s.hasChanged ?? E)(n, e) || s.useDefault && s.reflect && n === ((r = this._$Ej) == null ? void 0 : r.get(t)) && !this.hasAttribute(o._$Eu(t, s)))) return;
212
- this.C(t, e, s);
213
- }
214
- this.isUpdatePending === !1 && (this._$ES = this._$EP());
215
- }
216
- C(t, e, { useDefault: s, reflect: r, wrapped: o }, n) {
217
- s && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, n ?? e ?? this[t]), o !== !0 || n !== void 0) || (this._$AL.has(t) || (this.hasUpdated || s || (e = void 0), this._$AL.set(t, e)), r === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
218
- }
219
- async _$EP() {
220
- this.isUpdatePending = !0;
221
- try {
222
- await this._$ES;
223
- } catch (e) {
224
- Promise.reject(e);
225
- }
226
- const t = this.scheduleUpdate();
227
- return t != null && await t, !this.isUpdatePending;
228
- }
229
- scheduleUpdate() {
230
- return this.performUpdate();
231
- }
232
- performUpdate() {
233
- var s;
234
- if (!this.isUpdatePending) return;
235
- if (!this.hasUpdated) {
236
- if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
237
- for (const [o, n] of this._$Ep) this[o] = n;
238
- this._$Ep = void 0;
239
- }
240
- const r = this.constructor.elementProperties;
241
- if (r.size > 0) for (const [o, n] of r) {
242
- const { wrapped: a } = n, h = this[o];
243
- a !== !0 || this._$AL.has(o) || h === void 0 || this.C(o, void 0, n, h);
244
- }
245
- }
246
- let t = !1;
247
- const e = this._$AL;
248
- try {
249
- t = this.shouldUpdate(e), t ? (this.willUpdate(e), (s = this._$EO) == null || s.forEach((r) => {
250
- var o;
251
- return (o = r.hostUpdate) == null ? void 0 : o.call(r);
252
- }), this.update(e)) : this._$EM();
253
- } catch (r) {
254
- throw t = !1, this._$EM(), r;
255
- }
256
- t && this._$AE(e);
257
- }
258
- willUpdate(t) {
259
- }
260
- _$AE(t) {
261
- var e;
262
- (e = this._$EO) == null || e.forEach((s) => {
263
- var r;
264
- return (r = s.hostUpdated) == null ? void 0 : r.call(s);
265
- }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
266
- }
267
- _$EM() {
268
- this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
269
- }
270
- get updateComplete() {
271
- return this.getUpdateComplete();
272
- }
273
- getUpdateComplete() {
274
- return this._$ES;
275
- }
276
- shouldUpdate(t) {
277
- return !0;
278
- }
279
- update(t) {
280
- this._$Eq && (this._$Eq = this._$Eq.forEach((e) => this._$ET(e, this[e]))), this._$EM();
281
- }
282
- updated(t) {
283
- }
284
- firstUpdated(t) {
285
- }
286
- }
287
- f.elementStyles = [], f.shadowRootOptions = { mode: "open" }, f[m("elementProperties")] = /* @__PURE__ */ new Map(), f[m("finalized")] = /* @__PURE__ */ new Map(), g == null || g({ ReactiveElement: f }), (d.reactiveElementVersions ?? (d.reactiveElementVersions = [])).push("2.1.1");
288
- /**
289
- * @license
290
- * Copyright 2017 Google LLC
291
- * SPDX-License-Identifier: BSD-3-Clause
292
- */
293
- const F = { attribute: !0, type: String, converter: b, reflect: !1, hasChanged: E }, I = (i = F, t, e) => {
294
- const { kind: s, metadata: r } = e;
295
- let o = globalThis.litPropertyMetadata.get(r);
296
- if (o === void 0 && globalThis.litPropertyMetadata.set(r, o = /* @__PURE__ */ new Map()), s === "setter" && ((i = Object.create(i)).wrapped = !0), o.set(e.name, i), s === "accessor") {
297
- const { name: n } = e;
298
- return { set(a) {
299
- const h = t.get.call(this);
300
- t.set.call(this, a), this.requestUpdate(n, h, i);
301
- }, init(a) {
302
- return a !== void 0 && this.C(n, void 0, i, a), a;
303
- } };
304
- }
305
- if (s === "setter") {
306
- const { name: n } = e;
307
- return function(a) {
308
- const h = this[n];
309
- t.call(this, a), this.requestUpdate(n, h, i);
310
- };
311
- }
312
- throw Error("Unsupported decorator location: " + s);
313
- };
314
- function p(i) {
315
- return (t, e) => typeof e == "object" ? I(i, t, e) : ((s, r, o) => {
316
- const n = r.hasOwnProperty(o);
317
- return r.constructor.createProperty(o, s), n ? Object.getOwnPropertyDescriptor(r, o) : void 0;
318
- })(i, t, e);
319
- }
320
- const J = ":host{display:block}.form-fieldset{width:var(--ucds-form-element-width);max-width:var(--ucds-form-element-maxwidth);display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing)}.form-fieldset fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--ucds-form-component-inter-spacing)}.form-fieldset fieldset legend{font-weight:var(--ucds-font-weight-bold);margin-bottom:var(--ucds-form-component-inter-spacing);padding:0}.form-fieldset fieldset legend:disabled{color:var(--ucds-color-text-disabled)}.form-fieldset fieldset:not(:last-child){margin-bottom:var(--ucds-form-component-intra-spacing)}";
321
- var K = Object.defineProperty, W = Object.getOwnPropertyDescriptor, c = (i, t, e, s) => {
322
- for (var r = s > 1 ? void 0 : s ? W(t, e) : t, o = i.length - 1, n; o >= 0; o--)
323
- (n = i[o]) && (r = (s ? n(t, e, r) : n(r)) || r);
324
- return s && r && K(t, e, r), r;
325
- };
326
- let l = class extends C {
11
+ let t = class extends m {
327
12
  constructor() {
328
13
  super(...arguments), this.label = "", this.disabled = !1, this.required = !1, this.error = !1;
329
14
  }
330
15
  // Iterate over children (checkboxes/radios) and update disabled/errored states.
331
16
  _updateChildren() {
332
17
  if (this.hasChildNodes())
333
- for (const i of this.children)
334
- i.disabled = this.disabled, i.errors = this.error, i.error = !1, i.required = !1;
18
+ for (const e of this.children)
19
+ e.disabled = this.disabled, e.errors = this.error, e.error = !1, e.required = !1;
335
20
  }
336
21
  // Catch & handle any updates to the fieldset disabled/errored states.
337
- update(i) {
338
- super.update(i), (i.has("disabled") || i.has("error")) && this._updateChildren();
22
+ update(e) {
23
+ super.update(e), (e.has("disabled") || e.has("error")) && this._updateChildren();
339
24
  }
340
25
  // Initialize component and warn if required properties have not been set.
341
- firstUpdated(i) {
342
- super.firstUpdated(i), this.label || console.error(`${this.localName}: Property 'label' is required and was not set.`);
26
+ firstUpdated(e) {
27
+ super.firstUpdated(e), this.label || console.error(`${this.localName}: Property 'label' is required and was not set.`);
343
28
  }
344
29
  render() {
345
- return u`
30
+ return o`
346
31
  <div class="form-fieldset">
347
32
  <fieldset ?error=${this.error} ?disabled=${this.disabled}>
348
- ${this.label ? u`<legend ?disabled=${this.disabled}>${this.label}${this.required ? u`${O.requiredAsteriskTemplate()}` : y}</legend>` : y}
33
+ ${this.label ? o`<legend ?disabled=${this.disabled}>${this.label}${this.required ? o`${h.requiredAsteriskTemplate()}` : a}</legend>` : a}
349
34
  <slot>Please provide at least two &lt;ucds-radio&gt; or &lt;ucds-checkbox&gt; child elements</slot>
350
35
  </fieldset>
351
- ${this.error && !this.disabled ? u`<form-error-message text="${this.errorText}"></form-error-message>` : y}
352
- ${this.helpText ? u`<form-help-message text="${this.helpText}" ?disabled="${this.disabled}"></form-help-message>` : y}
36
+ ${this.error && !this.disabled ? o`<form-error-message text="${this.errorText}"></form-error-message>` : a}
37
+ ${this.helpText ? o`<form-help-message text="${this.helpText}" ?disabled="${this.disabled}"></form-help-message>` : a}
353
38
  </div>
354
39
  `;
355
40
  }
356
41
  };
357
- l.styles = [
358
- C.styles,
359
- O.styles,
360
- x(J)
42
+ t.styles = [
43
+ m.styles,
44
+ h.styles,
45
+ c(b)
361
46
  ];
362
- c([
363
- p({ type: String })
364
- ], l.prototype, "label", 2);
365
- c([
366
- p({ type: Boolean, reflect: !0 })
367
- ], l.prototype, "disabled", 2);
368
- c([
369
- p({ type: Boolean, reflect: !0 })
370
- ], l.prototype, "required", 2);
371
- c([
372
- p({ type: Boolean, reflect: !0 })
373
- ], l.prototype, "error", 2);
374
- c([
375
- p({ type: String, attribute: "error-text" })
376
- ], l.prototype, "errorText", 2);
377
- c([
378
- p({ type: String, attribute: "help-text" })
379
- ], l.prototype, "helpText", 2);
380
- l = c([
381
- M("ucds-fieldset")
382
- ], l);
47
+ s([
48
+ i({ type: String })
49
+ ], t.prototype, "label", 2);
50
+ s([
51
+ i({ type: Boolean, reflect: !0 })
52
+ ], t.prototype, "disabled", 2);
53
+ s([
54
+ i({ type: Boolean, reflect: !0 })
55
+ ], t.prototype, "required", 2);
56
+ s([
57
+ i({ type: Boolean, reflect: !0 })
58
+ ], t.prototype, "error", 2);
59
+ s([
60
+ i({ type: String, attribute: "error-text" })
61
+ ], t.prototype, "errorText", 2);
62
+ s([
63
+ i({ type: String, attribute: "help-text" })
64
+ ], t.prototype, "helpText", 2);
65
+ t = s([
66
+ u("ucds-fieldset")
67
+ ], t);
383
68
  export {
384
- l as Fieldset
69
+ t as Fieldset
385
70
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ucalgary-design-system/fieldset",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
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.3",
14
+ "@ucalgary-design-system/core": "^1.0.4",
15
15
  "@ucalgary-design-system/helper-components": "^1.0.2",
16
- "@ucalgary-design-system/tokens": "^1.0.3",
16
+ "@ucalgary-design-system/tokens": "^1.0.4",
17
17
  "lit": "^3.2.1"
18
18
  },
19
19
  "description": "A web component for Fieldset",