@justeattakeaway/pie-switch 0.29.10 → 0.29.11

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 (4) hide show
  1. package/dist/index.js +21 -21
  2. package/package.json +1 -1
  3. package/src/index.ts +1 -1
  4. package/src/switch.scss +1 -1
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { LitElement as Fe, html as A, nothing as C, unsafeCSS as Ae } from "lit";
2
2
  import { query as le, property as E } from "lit/decorators.js";
3
- import { FormControlMixin as Ie, RtlMixin as Se, wrapNativeEvent as Te, validPropertyValues as Ve, defineCustomElement as Le } from "@justeattakeaway/pie-webc-core";
3
+ import { FormControlMixin as Ie, RtlMixin as Se, wrapNativeEvent as Ve, validPropertyValues as Te, defineCustomElement as Le } from "@justeattakeaway/pie-webc-core";
4
4
  import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
5
- const Ne = `*,*: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}}
5
+ const Ne = `*,*: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[data-is-rtl] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[data-is-rtl] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[data-is-rtl] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
6
6
  `, Pe = ["leading", "trailing"], ze = "change", x = {
7
7
  checked: !1,
8
8
  required: !1,
@@ -12,7 +12,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
12
12
  };
13
13
  (function() {
14
14
  (function(g) {
15
- const n = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), T = {
15
+ const n = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), V = {
16
16
  ariaAtomic: "aria-atomic",
17
17
  ariaAutoComplete: "aria-autocomplete",
18
18
  ariaBusy: "aria-busy",
@@ -56,10 +56,10 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
56
56
  ariaValueText: "aria-valuetext",
57
57
  role: "role"
58
58
  }, de = (t, e) => {
59
- for (let i in T) {
59
+ for (let i in V) {
60
60
  e[i] = null;
61
61
  let a = null;
62
- const r = T[i];
62
+ const r = V[i];
63
63
  Object.defineProperty(e, i, {
64
64
  get() {
65
65
  return a;
@@ -83,11 +83,11 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
83
83
  let a = i.nextNode();
84
84
  const r = !e || t.disabled;
85
85
  for (; a; )
86
- a.formDisabledCallback && r && R(a, t.disabled), a = i.nextNode();
87
- }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = P() ? new MutationObserver((t) => {
86
+ a.formDisabledCallback && r && $(a, t.disabled), a = i.nextNode();
87
+ }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, T = P() ? new MutationObserver((t) => {
88
88
  for (const e of t) {
89
89
  const i = e.target;
90
- if (e.attributeName === "disabled" && (i.constructor.formAssociated ? R(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && G(i)), e.attributeName === "name" && i.constructor.formAssociated) {
90
+ if (e.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && G(i)), e.attributeName === "name" && i.constructor.formAssociated) {
91
91
  const a = c.get(i), r = z.get(i);
92
92
  a.setFormValue(r);
93
93
  }
@@ -100,8 +100,8 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
100
100
  var u;
101
101
  if (c.has(s) && s.constructor.formAssociated && K(s), I.has(s)) {
102
102
  const d = I.get(s);
103
- Object.keys(T).filter((f) => d[f] !== null).forEach((f) => {
104
- s.setAttribute(T[f], d[f]);
103
+ Object.keys(V).filter((f) => d[f] !== null).forEach((f) => {
104
+ s.setAttribute(V[f], d[f]);
105
105
  }), I.delete(s);
106
106
  }
107
107
  if (S.has(s)) {
@@ -118,7 +118,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
118
118
  for (; f; )
119
119
  K(f), f = v.nextNode();
120
120
  }
121
- s.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, s, Y), G(s, !0));
121
+ s.localName === "fieldset" && ((u = T.observe) === null || u === void 0 || u.call(T, s, Y), G(s, !0));
122
122
  }), o.forEach((s) => {
123
123
  const u = c.get(s);
124
124
  u && h.get(u) && J(u), M.has(s) && M.get(s).disconnect();
@@ -143,7 +143,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
143
143
  const _ = {
144
144
  childList: !0,
145
145
  subtree: !0
146
- }, R = (t, e) => {
146
+ }, $ = (t, e) => {
147
147
  t.toggleAttribute("internals-disabled", e), e ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"), t.formDisabledCallback && t.formDisabledCallback.apply(t, [e]);
148
148
  }, J = (t) => {
149
149
  h.get(t).forEach((i) => {
@@ -154,7 +154,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
154
154
  return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), h.get(e).push(i), i;
155
155
  }, pe = (t, e) => {
156
156
  var i;
157
- h.set(e, []), (i = V.observe) === null || i === void 0 || i.call(V, t, Y);
157
+ h.set(e, []), (i = T.observe) === null || i === void 0 || i.call(T, t, Y);
158
158
  }, X = (t, e) => {
159
159
  if (e.length) {
160
160
  Array.from(e).forEach((a) => a.addEventListener("click", t.click.bind(t)));
@@ -226,7 +226,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
226
226
  for (let i in t)
227
227
  i !== "valid" && t[i] !== !1 && (e = !1);
228
228
  return e;
229
- }, $ = /* @__PURE__ */ new WeakMap();
229
+ }, R = /* @__PURE__ */ new WeakMap();
230
230
  function ie(t, e) {
231
231
  t.toggleAttribute(e, !0), t.part && t.part.add(e);
232
232
  }
@@ -237,12 +237,12 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
237
237
  constructor(e) {
238
238
  if (super(), !e || !e.tagName || e.tagName.indexOf("-") === -1)
239
239
  throw new TypeError("Illegal constructor");
240
- $.set(this, e);
240
+ R.set(this, e);
241
241
  }
242
242
  add(e) {
243
243
  if (!/^--/.test(e) || typeof e != "string")
244
244
  throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${e} must start with '--'.`);
245
- const i = super.add(e), a = $.get(this), r = `state${e}`;
245
+ const i = super.add(e), a = R.get(this), r = `state${e}`;
246
246
  return a.isConnected ? ie(a, r) : setTimeout(() => {
247
247
  ie(a, r);
248
248
  }), i;
@@ -253,7 +253,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
253
253
  super.clear();
254
254
  }
255
255
  delete(e) {
256
- const i = super.delete(e), a = $.get(this);
256
+ const i = super.delete(e), a = R.get(this);
257
257
  return a.isConnected ? (a.toggleAttribute(`state${e}`, !1), a.part && a.part.remove(`state${e}`)) : setTimeout(() => {
258
258
  a.toggleAttribute(`state${e}`, !1), a.part && a.part.remove(`state${e}`);
259
259
  }), i;
@@ -456,7 +456,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
456
456
  if (a.formAssociated) {
457
457
  const o = a.prototype.connectedCallback;
458
458
  a.prototype.connectedCallback = function() {
459
- j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), o != null && o.apply(this), te(this);
459
+ j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), te(this);
460
460
  };
461
461
  }
462
462
  e.call(this, i, a, r);
@@ -521,7 +521,7 @@ class p extends Ie(Se(Fe)) {
521
521
  handleChange(n) {
522
522
  const { checked: l } = n == null ? void 0 : n.currentTarget;
523
523
  this.checked = l;
524
- const h = Te(n);
524
+ const h = Ve(n);
525
525
  this.dispatchEvent(h), this.handleFormAssociation();
526
526
  }
527
527
  /**
@@ -588,7 +588,7 @@ class p extends Ie(Se(Fe)) {
588
588
  return A`
589
589
  <label
590
590
  class="c-switch-wrapper"
591
- ?isRTL=${k}
591
+ ?data-is-rtl=${k}
592
592
  ?disabled=${w}>
593
593
  ${n === "leading" ? this.renderSwitchLabel() : C}
594
594
  <div
@@ -625,7 +625,7 @@ m([
625
625
  ], p.prototype, "label", 2);
626
626
  m([
627
627
  E({ type: String }),
628
- Ve(ce, Pe, x.labelPlacement)
628
+ Te(ce, Pe, x.labelPlacement)
629
629
  ], p.prototype, "labelPlacement", 2);
630
630
  m([
631
631
  E({ type: Object })
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.10",
4
+ "version": "0.29.11",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
package/src/index.ts CHANGED
@@ -181,7 +181,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
181
181
  return html`
182
182
  <label
183
183
  class="c-switch-wrapper"
184
- ?isRTL=${isRTL}
184
+ ?data-is-rtl=${isRTL}
185
185
  ?disabled=${disabled}>
186
186
  ${labelPlacement === 'leading' ? this.renderSwitchLabel() : nothing}
187
187
  <div
package/src/switch.scss CHANGED
@@ -136,7 +136,7 @@
136
136
  @include p.visually-hidden;
137
137
  }
138
138
 
139
- .c-switch-wrapper[isRTL] {
139
+ .c-switch-wrapper[data-is-rtl] {
140
140
  .c-switch-control {
141
141
  position: absolute;
142
142
  left: initial;