@justeattakeaway/pie-switch 0.29.4 → 0.29.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.
Files changed (8) hide show
  1. package/custom-elements.json +16 -34
  2. package/dist/index.d.ts +5 -0
  3. package/dist/index.js +132 -125
  4. package/dist/react.d.ts +5 -0
  5. package/dist/react.js +4 -3
  6. package/package.json +3 -3
  7. package/src/defs.ts +11 -0
  8. package/src/index.ts +7 -7
package/custom-elements.json CHANGED
@@ -28,6 +28,14 @@
28
28
  },
29
29
  "default": "'change'",
30
30
  "description": "Event name for when the switch checked state is changed."
31
+ },
32
+ {
33
+ "kind": "variable",
34
+ "name": "defaultProps",
35
+ "type": {
36
+ "text": "DefaultProps"
37
+ },
38
+ "default": "{\n labelPlacement: 'leading',\n checked: false,\n required: false,\n value: 'on',\n disabled: false,\n}"
31
39
  }
32
40
  ],
33
41
  "exports": [
@@ -46,6 +54,14 @@
46
54
  "name": "ON_SWITCH_CHANGED_EVENT",
47
55
  "module": "src/defs.js"
48
56
  }
57
+ },
58
+ {
59
+ "kind": "js",
60
+ "name": "defaultProps",
61
+ "declaration": {
62
+ "name": "defaultProps",
63
+ "module": "src/defs.js"
64
+ }
49
65
  }
50
66
  ]
51
67
  },
@@ -82,7 +98,6 @@
82
98
  "text": "SwitchProps['labelPlacement']"
83
99
  },
84
100
  "privacy": "public",
85
- "default": "'leading'",
86
101
  "attribute": "labelPlacement"
87
102
  },
88
103
  {
@@ -97,33 +112,21 @@
97
112
  {
98
113
  "kind": "field",
99
114
  "name": "checked",
100
- "type": {
101
- "text": "boolean"
102
- },
103
115
  "privacy": "public",
104
- "default": "false",
105
116
  "attribute": "checked",
106
117
  "reflects": true
107
118
  },
108
119
  {
109
120
  "kind": "field",
110
121
  "name": "required",
111
- "type": {
112
- "text": "boolean"
113
- },
114
122
  "privacy": "public",
115
- "default": "false",
116
123
  "attribute": "required",
117
124
  "reflects": true
118
125
  },
119
126
  {
120
127
  "kind": "field",
121
128
  "name": "value",
122
- "type": {
123
- "text": "string"
124
- },
125
129
  "privacy": "public",
126
- "default": "'on'",
127
130
  "attribute": "value"
128
131
  },
129
132
  {
@@ -138,11 +141,7 @@
138
141
  {
139
142
  "kind": "field",
140
143
  "name": "disabled",
141
- "type": {
142
- "text": "boolean"
143
- },
144
144
  "privacy": "public",
145
- "default": "false",
146
145
  "attribute": "disabled",
147
146
  "reflects": true
148
147
  },
@@ -280,7 +279,6 @@
280
279
  "type": {
281
280
  "text": "SwitchProps['labelPlacement']"
282
281
  },
283
- "default": "'leading'",
284
282
  "fieldName": "labelPlacement"
285
283
  },
286
284
  {
@@ -292,26 +290,14 @@
292
290
  },
293
291
  {
294
292
  "name": "checked",
295
- "type": {
296
- "text": "boolean"
297
- },
298
- "default": "false",
299
293
  "fieldName": "checked"
300
294
  },
301
295
  {
302
296
  "name": "required",
303
- "type": {
304
- "text": "boolean"
305
- },
306
- "default": "false",
307
297
  "fieldName": "required"
308
298
  },
309
299
  {
310
300
  "name": "value",
311
- "type": {
312
- "text": "string"
313
- },
314
- "default": "'on'",
315
301
  "fieldName": "value"
316
302
  },
317
303
  {
@@ -323,10 +309,6 @@
323
309
  },
324
310
  {
325
311
  "name": "disabled",
326
- "type": {
327
- "text": "boolean"
328
- },
329
- "default": "false",
330
312
  "fieldName": "disabled"
331
313
  }
332
314
  ],
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
1
2
  import type { CSSResult } from 'lit';
2
3
  import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
3
4
  import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
@@ -12,6 +13,10 @@ export declare type AriaProps = {
12
13
  describedBy?: string;
13
14
  };
14
15
 
16
+ export declare type DefaultProps = ComponentDefaultPropsGeneric<SwitchProps, 'labelPlacement' | 'checked' | 'required' | 'value' | 'disabled'>;
17
+
18
+ export declare const defaultProps: DefaultProps;
19
+
15
20
  export declare type LabelPlacement = typeof labelPlacements[number];
16
21
 
17
22
  export declare const labelPlacements: readonly ["leading", "trailing"];
package/dist/index.js CHANGED
@@ -1,12 +1,18 @@
1
- import { LitElement as xt, html as A, nothing as x, unsafeCSS as Ft } from "lit";
2
- import { query as nt, property as E } from "lit/decorators.js";
3
- import { FormControlMixin as At, RtlMixin as It, wrapNativeEvent as St, validPropertyValues as Tt, defineCustomElement as Vt } from "@justeattakeaway/pie-webc-core";
1
+ import { LitElement as Ft, html as I, nothing as x, unsafeCSS as At } from "lit";
2
+ import { query as ct, property as E } from "lit/decorators.js";
3
+ import { FormControlMixin as It, RtlMixin as St, wrapNativeEvent as Tt, validPropertyValues as Vt, defineCustomElement as Lt } from "@justeattakeaway/pie-webc-core";
4
4
  import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
5
- const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
6
- `, Nt = ["leading", "trailing"], Wt = "change";
5
+ const Pt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
6
+ `, Nt = ["leading", "trailing"], zt = "change", F = {
7
+ labelPlacement: "leading",
8
+ checked: !1,
9
+ required: !1,
10
+ value: "on",
11
+ disabled: !1
12
+ };
7
13
  (function() {
8
14
  (function(v) {
9
- const n = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), T = {
15
+ const n = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), V = {
10
16
  ariaAtomic: "aria-atomic",
11
17
  ariaAutoComplete: "aria-autocomplete",
12
18
  ariaBusy: "aria-busy",
@@ -48,26 +54,26 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
48
54
  ariaValueNow: "aria-valuenow",
49
55
  ariaValueText: "aria-valuetext",
50
56
  role: "role"
51
- }, lt = (e, t) => {
52
- for (let i in T) {
57
+ }, dt = (e, t) => {
58
+ for (let i in V) {
53
59
  t[i] = null;
54
60
  let a = null;
55
- const r = T[i];
61
+ const r = V[i];
56
62
  Object.defineProperty(t, i, {
57
63
  get() {
58
64
  return a;
59
65
  },
60
66
  set(o) {
61
- a = o, e.isConnected ? e.setAttribute(r, o) : I.set(e, t);
67
+ a = o, e.isConnected ? e.setAttribute(r, o) : S.set(e, t);
62
68
  }
63
69
  });
64
70
  }
65
71
  };
66
- function K(e) {
72
+ function j(e) {
67
73
  const t = l.get(e), { form: i } = t;
68
- X(e, i, t), Q(e, t.labels);
74
+ Z(e, i, t), X(e, t.labels);
69
75
  }
70
- const j = (e, t = !1) => {
76
+ const G = (e, t = !1) => {
71
77
  const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
72
78
  acceptNode(o) {
73
79
  return l.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
@@ -76,92 +82,92 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
76
82
  let a = i.nextNode();
77
83
  const r = !t || e.disabled;
78
84
  for (; a; )
79
- a.formDisabledCallback && r && $(a, e.disabled), a = i.nextNode();
80
- }, G = { attributes: !0, attributeFilter: ["disabled", "name"] }, C = N() ? new MutationObserver((e) => {
85
+ a.formDisabledCallback && r && O(a, e.disabled), a = i.nextNode();
86
+ }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, C = N() ? new MutationObserver((e) => {
81
87
  for (const t of e) {
82
88
  const i = t.target;
83
- if (t.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && j(i)), t.attributeName === "name" && i.constructor.formAssociated) {
84
- const a = l.get(i), r = W.get(i);
89
+ if (t.attributeName === "disabled" && (i.constructor.formAssociated ? O(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && G(i)), t.attributeName === "name" && i.constructor.formAssociated) {
90
+ const a = l.get(i), r = z.get(i);
85
91
  a.setFormValue(r);
86
92
  }
87
93
  }
88
94
  }) : {};
89
- function P(e) {
95
+ function R(e) {
90
96
  e.forEach((t) => {
91
97
  const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), o = Array.from(a);
92
98
  r.forEach((s) => {
93
99
  var u;
94
- if (l.has(s) && s.constructor.formAssociated && K(s), I.has(s)) {
95
- const d = I.get(s);
96
- Object.keys(T).filter((f) => d[f] !== null).forEach((f) => {
97
- s.setAttribute(T[f], d[f]);
98
- }), I.delete(s);
99
- }
100
- if (S.has(s)) {
100
+ if (l.has(s) && s.constructor.formAssociated && j(s), S.has(s)) {
101
101
  const d = S.get(s);
102
- s.setAttribute("internals-valid", d.validity.valid.toString()), s.setAttribute("internals-invalid", (!d.validity.valid).toString()), s.setAttribute("aria-invalid", (!d.validity.valid).toString()), S.delete(s);
102
+ Object.keys(V).filter((f) => d[f] !== null).forEach((f) => {
103
+ s.setAttribute(V[f], d[f]);
104
+ }), S.delete(s);
105
+ }
106
+ if (T.has(s)) {
107
+ const d = T.get(s);
108
+ s.setAttribute("internals-valid", d.validity.valid.toString()), s.setAttribute("internals-invalid", (!d.validity.valid).toString()), s.setAttribute("aria-invalid", (!d.validity.valid).toString()), T.delete(s);
103
109
  }
104
110
  if (s.localName === "form") {
105
111
  const d = y.get(s), g = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
106
- acceptNode(D) {
107
- return l.has(D) && D.constructor.formAssociated && !(d && d.has(D)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
112
+ acceptNode(W) {
113
+ return l.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
108
114
  }
109
115
  });
110
116
  let f = g.nextNode();
111
117
  for (; f; )
112
- K(f), f = g.nextNode();
118
+ j(f), f = g.nextNode();
113
119
  }
114
- s.localName === "fieldset" && ((u = C.observe) == null || u.call(C, s, G), j(s, !0));
120
+ s.localName === "fieldset" && ((u = C.observe) == null || u.call(C, s, Y), G(s, !0));
115
121
  }), o.forEach((s) => {
116
122
  const u = l.get(s);
117
- u && h.get(u) && Y(u), M.has(s) && M.get(s).disconnect();
123
+ u && h.get(u) && J(u), M.has(s) && M.get(s).disconnect();
118
124
  });
119
125
  });
120
126
  }
121
- function dt(e) {
127
+ function ht(e) {
122
128
  e.forEach((t) => {
123
129
  const { removedNodes: i } = t;
124
130
  i.forEach((a) => {
125
- const r = q.get(t.target);
126
- l.has(a) && tt(a), r.disconnect();
131
+ const r = U.get(t.target);
132
+ l.has(a) && et(a), r.disconnect();
127
133
  });
128
134
  });
129
135
  }
130
- const ht = (e) => {
136
+ const ut = (e) => {
131
137
  var i, a;
132
- const t = new MutationObserver(dt);
133
- (i = window == null ? void 0 : window.ShadyDOM) != null && i.inUse && e.mode && e.host && (e = e.host), (a = t.observe) == null || a.call(t, e, { childList: !0 }), q.set(e, t);
138
+ const t = new MutationObserver(ht);
139
+ (i = window == null ? void 0 : window.ShadyDOM) != null && i.inUse && e.mode && e.host && (e = e.host), (a = t.observe) == null || a.call(t, e, { childList: !0 }), U.set(e, t);
134
140
  };
135
- N() && new MutationObserver(P);
136
- const R = {
141
+ N() && new MutationObserver(R);
142
+ const $ = {
137
143
  childList: !0,
138
144
  subtree: !0
139
- }, $ = (e, t) => {
145
+ }, O = (e, t) => {
140
146
  e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
141
- }, Y = (e) => {
147
+ }, J = (e) => {
142
148
  h.get(e).forEach((i) => {
143
149
  i.remove();
144
150
  }), h.set(e, []);
145
- }, J = (e, t) => {
151
+ }, Q = (e, t) => {
146
152
  const i = document.createElement("input");
147
153
  return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
148
- }, ut = (e, t) => {
154
+ }, pt = (e, t) => {
149
155
  var i;
150
- h.set(t, []), (i = C.observe) == null || i.call(C, e, G);
151
- }, Q = (e, t) => {
156
+ h.set(t, []), (i = C.observe) == null || i.call(C, e, Y);
157
+ }, X = (e, t) => {
152
158
  if (t.length) {
153
159
  Array.from(t).forEach((a) => a.addEventListener("click", e.click.bind(e)));
154
160
  let i = t[0].id;
155
161
  t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
156
162
  }
157
- }, V = (e) => {
163
+ }, L = (e) => {
158
164
  const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = y.get(e) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => l.get(o).validity.valid), r = [...t, ...a].includes(!1);
159
165
  e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
160
- }, pt = (e) => {
161
- V(L(e.target));
162
166
  }, ft = (e) => {
163
- V(L(e.target));
167
+ L(P(e.target));
164
168
  }, mt = (e) => {
169
+ L(P(e.target));
170
+ }, wt = (e) => {
165
171
  const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
166
172
  e.addEventListener("click", (i) => {
167
173
  if (i.target.closest(t)) {
@@ -171,73 +177,73 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
171
177
  r.size && Array.from(r).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && i.preventDefault();
172
178
  }
173
179
  });
174
- }, wt = (e) => {
180
+ }, bt = (e) => {
175
181
  const t = y.get(e.target);
176
182
  t && t.size && t.forEach((i) => {
177
183
  i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
178
184
  });
179
- }, X = (e, t, i) => {
185
+ }, Z = (e, t, i) => {
180
186
  if (t) {
181
187
  const a = y.get(t);
182
188
  if (a)
183
189
  a.add(e);
184
190
  else {
185
191
  const r = /* @__PURE__ */ new Set();
186
- r.add(e), y.set(t, r), mt(t), t.addEventListener("reset", wt), t.addEventListener("input", pt), t.addEventListener("change", ft);
192
+ r.add(e), y.set(t, r), wt(t), t.addEventListener("reset", bt), t.addEventListener("input", ft), t.addEventListener("change", mt);
187
193
  }
188
194
  k.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
189
195
  e.formAssociatedCallback.apply(e, [t]);
190
- }, 0), V(t);
196
+ }, 0), L(t);
191
197
  }
192
- }, L = (e) => {
198
+ }, P = (e) => {
193
199
  let t = e.parentNode;
194
- return t && t.tagName !== "FORM" && (t = L(t)), t;
200
+ return t && t.tagName !== "FORM" && (t = P(t)), t;
195
201
  }, b = (e, t, i = DOMException) => {
196
202
  if (!e.constructor.formAssociated)
197
203
  throw new i(t);
198
- }, Z = (e, t, i) => {
204
+ }, tt = (e, t, i) => {
199
205
  const a = y.get(e);
200
206
  return a && a.size && a.forEach((r) => {
201
207
  l.get(r)[i]() || (t = !1);
202
208
  }), t;
203
- }, tt = (e) => {
209
+ }, et = (e) => {
204
210
  if (e.constructor.formAssociated) {
205
211
  const t = l.get(e), { labels: i, form: a } = t;
206
- Q(e, i), X(e, a, t);
212
+ X(e, i), Z(e, a, t);
207
213
  }
208
214
  };
209
215
  function N() {
210
216
  return typeof MutationObserver < "u";
211
217
  }
212
- class bt {
218
+ class gt {
213
219
  constructor() {
214
220
  this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
215
221
  }
216
222
  }
217
- const gt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), vt = (e, t, i) => (e.valid = yt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && V(i), e), yt = (e) => {
223
+ const vt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), yt = (e, t, i) => (e.valid = Et(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && L(i), e), Et = (e) => {
218
224
  let t = !0;
219
225
  for (let i in e)
220
226
  i !== "valid" && e[i] !== !1 && (t = !1);
221
227
  return t;
222
- }, O = /* @__PURE__ */ new WeakMap();
223
- function et(e, t) {
228
+ }, _ = /* @__PURE__ */ new WeakMap();
229
+ function it(e, t) {
224
230
  e.toggleAttribute(t, !0), e.part && e.part.add(t);
225
231
  }
226
- class _ extends Set {
232
+ class H extends Set {
227
233
  static get isPolyfilled() {
228
234
  return !0;
229
235
  }
230
236
  constructor(t) {
231
237
  if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
232
238
  throw new TypeError("Illegal constructor");
233
- O.set(this, t);
239
+ _.set(this, t);
234
240
  }
235
241
  add(t) {
236
242
  if (!/^--/.test(t) || typeof t != "string")
237
243
  throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
238
- const i = super.add(t), a = O.get(this), r = `state${t}`;
239
- return a.isConnected ? et(a, r) : setTimeout(() => {
240
- et(a, r);
244
+ const i = super.add(t), a = _.get(this), r = `state${t}`;
245
+ return a.isConnected ? it(a, r) : setTimeout(() => {
246
+ it(a, r);
241
247
  }), i;
242
248
  }
243
249
  clear() {
@@ -246,20 +252,20 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
246
252
  super.clear();
247
253
  }
248
254
  delete(t) {
249
- const i = super.delete(t), a = O.get(this);
255
+ const i = super.delete(t), a = _.get(this);
250
256
  return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
251
257
  a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
252
258
  }), i;
253
259
  }
254
260
  }
255
- function it(e, t, i, a) {
261
+ function at(e, t, i, a) {
256
262
  if (i === "a" && !a)
257
263
  throw new TypeError("Private accessor was defined without a getter");
258
264
  if (typeof t == "function" ? e !== t || !a : !t.has(e))
259
265
  throw new TypeError("Cannot read private member from an object whose class did not declare it");
260
266
  return i === "m" ? a : i === "a" ? a.call(e) : a ? a.value : t.get(e);
261
267
  }
262
- function Et(e, t, i, a, r) {
268
+ function kt(e, t, i, a, r) {
263
269
  if (a === "m")
264
270
  throw new TypeError("Private method is not writable");
265
271
  if (a === "a" && !r)
@@ -268,10 +274,10 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
268
274
  throw new TypeError("Cannot write private member to an object whose class did not declare it");
269
275
  return a === "a" ? r.call(e, i) : r ? r.value = i : t.set(e, i), i;
270
276
  }
271
- var F;
272
- class kt {
277
+ var A;
278
+ class Mt {
273
279
  constructor(t) {
274
- F.set(this, void 0), Et(this, F, t, "f");
280
+ A.set(this, void 0), kt(this, A, t, "f");
275
281
  for (let i = 0; i < t.length; i++) {
276
282
  let a = t[i];
277
283
  this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
@@ -279,10 +285,10 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
279
285
  Object.freeze(this);
280
286
  }
281
287
  get length() {
282
- return it(this, F, "f").length;
288
+ return at(this, A, "f").length;
283
289
  }
284
- [(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
285
- return it(this, F, "f")[Symbol.iterator]();
290
+ [(A = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
291
+ return at(this, A, "f")[Symbol.iterator]();
286
292
  }
287
293
  item(t) {
288
294
  return this[t] == null ? null : this[t];
@@ -291,18 +297,18 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
291
297
  return this[t] == null ? null : this[t];
292
298
  }
293
299
  }
294
- function Mt() {
300
+ function Ct() {
295
301
  const e = HTMLFormElement.prototype.checkValidity;
296
302
  HTMLFormElement.prototype.checkValidity = i;
297
303
  const t = HTMLFormElement.prototype.reportValidity;
298
304
  HTMLFormElement.prototype.reportValidity = a;
299
305
  function i(...o) {
300
306
  let s = e.apply(this, o);
301
- return Z(this, s, "checkValidity");
307
+ return tt(this, s, "checkValidity");
302
308
  }
303
309
  function a(...o) {
304
310
  let s = t.apply(this, o);
305
- return Z(this, s, "reportValidity");
311
+ return tt(this, s, "reportValidity");
306
312
  }
307
313
  const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
308
314
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
@@ -311,19 +317,19 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
311
317
  if (u.length === 0)
312
318
  return s;
313
319
  const d = Array.from(s).concat(u).sort((g, f) => g.compareDocumentPosition ? g.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
314
- return new kt(d);
320
+ return new Mt(d);
315
321
  }
316
322
  });
317
323
  }
318
- class at {
324
+ class rt {
319
325
  static get isPolyfilled() {
320
326
  return !0;
321
327
  }
322
328
  constructor(t) {
323
329
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
324
330
  throw new TypeError("Illegal constructor");
325
- const i = t.getRootNode(), a = new bt();
326
- this.states = new _(t), n.set(this, t), c.set(this, a), l.set(t, this), lt(t, this), ut(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
331
+ const i = t.getRootNode(), a = new gt();
332
+ this.states = new H(t), n.set(this, t), c.set(this, a), l.set(t, this), dt(t, this), pt(t, this), Object.seal(this), i instanceof DocumentFragment && ut(i);
327
333
  }
328
334
  checkValidity() {
329
335
  const t = n.get(this);
@@ -344,7 +350,7 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
344
350
  const t = n.get(this);
345
351
  b(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
346
352
  let i;
347
- return t.constructor.formAssociated === !0 && (i = L(t)), i;
353
+ return t.constructor.formAssociated === !0 && (i = P(t)), i;
348
354
  }
349
355
  get labels() {
350
356
  const t = n.get(this);
@@ -363,19 +369,19 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
363
369
  }
364
370
  setFormValue(t) {
365
371
  const i = n.get(this);
366
- if (b(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
372
+ if (b(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), t != null && !(t instanceof FormData)) {
367
373
  if (i.getAttribute("name")) {
368
- const a = J(i, this);
374
+ const a = Q(i, this);
369
375
  a.value = t;
370
376
  }
371
377
  } else
372
378
  t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
373
379
  if (typeof r == "string") {
374
- const o = J(i, this);
380
+ const o = Q(i, this);
375
381
  o.name = a, o.value = r;
376
382
  }
377
383
  });
378
- W.set(i, t);
384
+ z.set(i, t);
379
385
  }
380
386
  setValidity(t, i, a) {
381
387
  const r = n.get(this);
@@ -385,16 +391,16 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
385
391
  const o = c.get(this), s = {};
386
392
  for (const g in t)
387
393
  s[g] = t[g];
388
- Object.keys(s).length === 0 && gt(o);
394
+ Object.keys(s).length === 0 && vt(o);
389
395
  const u = { ...o, ...s };
390
396
  delete u.valid;
391
- const { valid: d } = vt(o, u, this.form);
397
+ const { valid: d } = yt(o, u, this.form);
392
398
  if (!d && !i)
393
399
  throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
394
- w.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : S.set(r, this);
400
+ w.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : T.set(r, this);
395
401
  }
396
402
  get shadowRoot() {
397
- const t = n.get(this), i = z.get(t);
403
+ const t = n.get(this), i = q.get(t);
398
404
  return i || null;
399
405
  }
400
406
  get validationMessage() {
@@ -410,7 +416,7 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
410
416
  return b(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
411
417
  }
412
418
  }
413
- function Ct() {
419
+ function xt() {
414
420
  if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
415
421
  return !1;
416
422
  class e extends HTMLElement {
@@ -434,22 +440,22 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
434
440
  "reportValidity"
435
441
  ].every((a) => a in i.internals);
436
442
  }
437
- let rt = !1, ot = !1;
438
- function H(e) {
439
- ot || (ot = !0, window.CustomStateSet = _, e && (HTMLElement.prototype.attachInternals = function(...t) {
443
+ let ot = !1, st = !1;
444
+ function D(e) {
445
+ st || (st = !0, window.CustomStateSet = H, e && (HTMLElement.prototype.attachInternals = function(...t) {
440
446
  const i = e.call(this, t);
441
- return i.states = new _(this), i;
447
+ return i.states = new H(this), i;
442
448
  }));
443
449
  }
444
- function st(e = !0) {
445
- if (!rt) {
446
- if (rt = !0, typeof window < "u" && (window.ElementInternals = at), typeof CustomElementRegistry < "u") {
450
+ function nt(e = !0) {
451
+ if (!ot) {
452
+ if (ot = !0, typeof window < "u" && (window.ElementInternals = rt), typeof CustomElementRegistry < "u") {
447
453
  const t = CustomElementRegistry.prototype.define;
448
454
  CustomElementRegistry.prototype.define = function(i, a, r) {
449
455
  if (a.formAssociated) {
450
456
  const o = a.prototype.connectedCallback;
451
457
  a.prototype.connectedCallback = function() {
452
- U.has(this) || (U.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), tt(this);
458
+ K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && O(this, !0)), o != null && o.apply(this), et(this);
453
459
  };
454
460
  }
455
461
  t.call(this, i, a, r);
@@ -463,34 +469,34 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
463
469
  return {};
464
470
  if (l.has(this))
465
471
  throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
466
- return new at(this);
472
+ return new rt(this);
467
473
  }), typeof Element < "u") {
468
474
  let t = function(...a) {
469
475
  const r = i.apply(this, a);
470
- if (z.set(this, r), N()) {
471
- const o = new MutationObserver(P);
472
- window.ShadyDOM ? o.observe(this, R) : o.observe(r, R), M.set(this, o);
476
+ if (q.set(this, r), N()) {
477
+ const o = new MutationObserver(R);
478
+ window.ShadyDOM ? o.observe(this, $) : o.observe(r, $), M.set(this, o);
473
479
  }
474
480
  return r;
475
481
  };
476
482
  const i = Element.prototype.attachShadow;
477
483
  Element.prototype.attachShadow = t;
478
484
  }
479
- N() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, R), typeof HTMLFormElement < "u" && Mt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
485
+ N() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, $), typeof HTMLFormElement < "u" && Ct(), (e || typeof window < "u" && !window.CustomStateSet) && D();
480
486
  }
481
487
  }
482
- return !!customElements.polyfillWrapFlushCallback || (Ct() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : st(!1)), v.forceCustomStateSetPolyfill = H, v.forceElementInternalsPolyfill = st, Object.defineProperty(v, "__esModule", { value: !0 }), v;
488
+ return !!customElements.polyfillWrapFlushCallback || (xt() ? typeof window < "u" && !window.CustomStateSet && D(HTMLElement.prototype.attachInternals) : nt(!1)), v.forceCustomStateSetPolyfill = D, v.forceElementInternalsPolyfill = nt, Object.defineProperty(v, "__esModule", { value: !0 }), v;
483
489
  })({});
484
490
  })();
485
- var Pt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, m = (v, n, c, h) => {
486
- for (var l = h > 1 ? void 0 : h ? Rt(n, c) : n, w = v.length - 1, k; w >= 0; w--)
491
+ var Rt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, m = (v, n, c, h) => {
492
+ for (var l = h > 1 ? void 0 : h ? $t(n, c) : n, w = v.length - 1, k; w >= 0; w--)
487
493
  (k = v[w]) && (l = (h ? k(n, c, l) : k(l)) || l);
488
- return h && l && Pt(n, c, l), l;
494
+ return h && l && Rt(n, c, l), l;
489
495
  };
490
- const ct = "pie-switch";
491
- class p extends At(It(xt)) {
496
+ const lt = "pie-switch";
497
+ class p extends It(St(Ft)) {
492
498
  constructor() {
493
- super(...arguments), this.labelPlacement = "leading", this.checked = !1, this.required = !1, this.value = "on", this.disabled = !1;
499
+ super(...arguments), this.labelPlacement = F.labelPlacement, this.checked = F.checked, this.required = F.required, this.value = F.value, this.disabled = F.disabled;
494
500
  }
495
501
  firstUpdated(n) {
496
502
  var c;
@@ -514,7 +520,7 @@ class p extends At(It(xt)) {
514
520
  onChange(n) {
515
521
  const { checked: c } = n == null ? void 0 : n.currentTarget;
516
522
  this.checked = c;
517
- const h = St(n);
523
+ const h = Tt(n);
518
524
  this.dispatchEvent(h), this.handleFormAssociation();
519
525
  }
520
526
  /**
@@ -564,10 +570,10 @@ class p extends At(It(xt)) {
564
570
  */
565
571
  renderSwitchLabel() {
566
572
  const { label: n, labelPlacement: c } = this;
567
- return n ? A`
573
+ return n ? I`
568
574
  <span data-test-id="switch-label-${c}">
569
575
  ${n}
570
- </span>` : A``;
576
+ </span>` : I``;
571
577
  }
572
578
  render() {
573
579
  const {
@@ -578,7 +584,7 @@ class p extends At(It(xt)) {
578
584
  disabled: w,
579
585
  isRTL: k
580
586
  } = this, M = "switch-description";
581
- return A`
587
+ return I`
582
588
  <label
583
589
  class="c-switch-wrapper"
584
590
  ?isRTL=${k}
@@ -600,25 +606,25 @@ class p extends At(It(xt)) {
600
606
  aria-label="${(c == null ? void 0 : c.label) || x}"
601
607
  aria-describedby="${c != null && c.describedBy ? M : x}">
602
608
  <div class="c-switch-control">
603
- ${h ? A`<icon-check></icon-check>` : x}
609
+ ${h ? I`<icon-check></icon-check>` : x}
604
610
  </div>
605
611
  </div>
606
612
  ${n === "trailing" ? this.renderSwitchLabel() : x}
607
- ${c != null && c.describedBy ? A`<div id="${M}" data-test-id="${M}" class="c-switch-description">${c == null ? void 0 : c.describedBy}</div>` : x}
613
+ ${c != null && c.describedBy ? I`<div id="${M}" data-test-id="${M}" class="c-switch-description">${c == null ? void 0 : c.describedBy}</div>` : x}
608
614
  </label>
609
615
  `;
610
616
  }
611
617
  }
612
- p.styles = Ft(Lt);
618
+ p.styles = At(Pt);
613
619
  m([
614
- nt('input[type="checkbox"]')
620
+ ct('input[type="checkbox"]')
615
621
  ], p.prototype, "input", 2);
616
622
  m([
617
623
  E({ type: String })
618
624
  ], p.prototype, "label", 2);
619
625
  m([
620
626
  E({ type: String }),
621
- Tt(ct, Nt, "leading")
627
+ Vt(lt, Nt, F.labelPlacement)
622
628
  ], p.prototype, "labelPlacement", 2);
623
629
  m([
624
630
  E({ type: Object })
@@ -639,11 +645,12 @@ m([
639
645
  E({ type: Boolean, reflect: !0 })
640
646
  ], p.prototype, "disabled", 2);
641
647
  m([
642
- nt("label")
648
+ ct("label")
643
649
  ], p.prototype, "focusTarget", 2);
644
- Vt(ct, p);
650
+ Lt(lt, p);
645
651
  export {
646
- Wt as ON_SWITCH_CHANGED_EVENT,
652
+ zt as ON_SWITCH_CHANGED_EVENT,
647
653
  p as PieSwitch,
654
+ F as defaultProps,
648
655
  Nt as labelPlacements
649
656
  };
package/dist/react.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
1
2
  import type { CSSResult } from 'lit';
2
3
  import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
3
4
  import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
@@ -13,6 +14,10 @@ export declare type AriaProps = {
13
14
  describedBy?: string;
14
15
  };
15
16
 
17
+ export declare type DefaultProps = ComponentDefaultPropsGeneric<SwitchProps, 'labelPlacement' | 'checked' | 'required' | 'value' | 'disabled'>;
18
+
19
+ export declare const defaultProps: DefaultProps;
20
+
16
21
  export declare type LabelPlacement = typeof labelPlacements[number];
17
22
 
18
23
  export declare const labelPlacements: readonly ["leading", "trailing"];
package/dist/react.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as e from "react";
2
2
  import { createComponent as t } from "@lit/react";
3
3
  import { PieSwitch as i } from "./index.js";
4
- import { ON_SWITCH_CHANGED_EVENT as w, labelPlacements as P } from "./index.js";
4
+ import { ON_SWITCH_CHANGED_EVENT as P, defaultProps as w, labelPlacements as S } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/decorators.js";
7
7
  import "@justeattakeaway/pie-webc-core";
@@ -18,7 +18,8 @@ const o = t({
18
18
  }
19
19
  }), s = o;
20
20
  export {
21
- w as ON_SWITCH_CHANGED_EVENT,
21
+ P as ON_SWITCH_CHANGED_EVENT,
22
22
  s as PieSwitch,
23
- P as labelPlacements
23
+ w as defaultProps,
24
+ S as labelPlacements
24
25
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-switch",
3
3
  "description": "PIE Design System Switch built using Web Components",
4
- "version": "0.29.4",
4
+ "version": "0.29.5",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -40,8 +40,8 @@
40
40
  "cem-plugin-module-file-extensions": "0.0.5"
41
41
  },
42
42
  "dependencies": {
43
- "@justeattakeaway/pie-icons-webc": "0.23.1",
44
- "@justeattakeaway/pie-webc-core": "0.22.0",
43
+ "@justeattakeaway/pie-icons-webc": "0.24.0",
44
+ "@justeattakeaway/pie-webc-core": "0.23.0",
45
45
  "@justeattakeaway/pie-wrapper-react": "0.14.0",
46
46
  "element-internals-polyfill": "1.3.10"
47
47
  },
package/src/defs.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
2
+
1
3
  export const labelPlacements = ['leading', 'trailing'] as const;
2
4
 
3
5
  export type LabelPlacement = typeof labelPlacements[number];
@@ -48,3 +50,12 @@ export interface SwitchProps {
48
50
  * @constant
49
51
  */
50
52
  export const ON_SWITCH_CHANGED_EVENT = 'change';
53
+
54
+ export type DefaultProps = ComponentDefaultPropsGeneric<SwitchProps, 'labelPlacement' | 'checked' | 'required' | 'value' | 'disabled'>;
55
+ export const defaultProps: DefaultProps = {
56
+ labelPlacement: 'leading',
57
+ checked: false,
58
+ required: false,
59
+ value: 'on',
60
+ disabled: false,
61
+ };
package/src/index.ts CHANGED
@@ -7,7 +7,7 @@ import {
7
7
  } from '@justeattakeaway/pie-webc-core';
8
8
  import styles from './switch.scss?inline';
9
9
  import {
10
- SwitchProps, AriaProps, labelPlacements,
10
+ SwitchProps, AriaProps, labelPlacements, defaultProps,
11
11
  } from './defs';
12
12
  import 'element-internals-polyfill';
13
13
  import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
@@ -45,26 +45,26 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
45
45
  public label?: string;
46
46
 
47
47
  @property({ type: String })
48
- @validPropertyValues(componentSelector, labelPlacements, 'leading')
49
- public labelPlacement: SwitchProps['labelPlacement'] = 'leading';
48
+ @validPropertyValues(componentSelector, labelPlacements, defaultProps.labelPlacement)
49
+ public labelPlacement: SwitchProps['labelPlacement'] = defaultProps.labelPlacement;
50
50
 
51
51
  @property({ type: Object })
52
52
  public aria!: AriaProps;
53
53
 
54
54
  @property({ type: Boolean, reflect: true })
55
- public checked = false;
55
+ public checked = defaultProps.checked;
56
56
 
57
57
  @property({ type: Boolean, reflect: true })
58
- public required = false;
58
+ public required = defaultProps.required;
59
59
 
60
60
  @property({ type: String })
61
- public value = 'on';
61
+ public value = defaultProps.value;
62
62
 
63
63
  @property({ type: String })
64
64
  public name?: string;
65
65
 
66
66
  @property({ type: Boolean, reflect: true })
67
- public disabled = false;
67
+ public disabled = defaultProps.disabled;
68
68
 
69
69
  @query('label')
70
70
  public focusTarget!: HTMLElement;