@justeattakeaway/pie-switch 0.18.0 → 0.18.2

package/dist/index.js

@@ -1,65 +1,31 @@
-import { isServer as b, unsafeCSS as u, html as d, nothing as a, LitElement as v } from "lit";
-import { property as l } from "lit/decorators.js";
+import { LitElement as w, html as n, nothing as s, unsafeCSS as b } from "lit";
+import { property as d } from "lit/decorators.js";
+import { RtlMixin as v, validPropertyValues as u, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/IconCheck";
-const f = (i) => {
-  class c extends i {
-    /**
-     * A getter to determine whether the text direction is right-to-left (RTL).
-     * If the `dir` property is present on the component, it will be used to determine the text direction.
-     * If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
-     * from the document's root element. This inference is not available during SSR.
-     * In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
-     *
-     * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
-     */
-    get isRTL() {
-      return this.dir ? this.dir === "rtl" : !b && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
-    }
-  }
-  return c;
-}, g = (i, c, e) => function(t, s) {
-  const o = `#${s}`;
-  Object.defineProperty(t, s, {
-    get() {
-      return this[o];
-    },
-    set(p) {
-      c.includes(p) ? this[o] = p : (console.error(
-        `<${i}> Invalid value "${p}" provided for property "${s}".`,
-        `Must be one of: ${c.join(" | ")}.`,
-        `Falling back to default value: "${e}"`
-      ), this[o] = e);
-    },
-    configurable: !0
-  });
-};
-function m(i, c) {
-  customElements.get(i) ? console.warn(`PIE Web Component: "${i}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(i, c);
-}
-const k = `*,*:before,*:after{box-sizing:border-box;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[isDisabled]{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[isChecked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[isChecked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[isChecked]: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[isChecked]:focus,.c-switch[isChecked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[isChecked]: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)))}[isDisabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{appearance:none;margin: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}}
-`, y = ["leading", "trailing"], $ = "pie-switch-changed";
-var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, h = (i, c, e, r) => {
-  for (var t = r > 1 ? void 0 : r ? C(c, e) : c, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (t = (r ? o(c, e, t) : o(t)) || t);
-  return r && t && x(c, e, t), t;
+const g = `*,*:before,*:after{box-sizing:border-box;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[isDisabled]{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[isChecked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[isChecked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[isChecked]: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[isChecked]:focus,.c-switch[isChecked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[isChecked]: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)))}[isDisabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{appearance:none;margin: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}}
+`, m = ["leading", "trailing"], k = "pie-switch-changed";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (h, e, c, t) => {
+  for (var i = t > 1 ? void 0 : t ? x(e, c) : e, a = h.length - 1, r; a >= 0; a--)
+    (r = h[a]) && (i = (t ? r(e, c, i) : r(i)) || i);
+  return t && i && y(e, c, i), i;
 };
-const w = "pie-switch";
-class n extends f(v) {
+const p = "pie-switch";
+class o extends v(w) {
   constructor() {
     super(...arguments), this.labelPlacement = "leading", this.isChecked = !1, this.isDisabled = !1;
   }
-  onChange(c) {
-    const { checked: e } = c == null ? void 0 : c.currentTarget;
-    this.isChecked = e;
-    const r = new CustomEvent(
-      $,
+  onChange(e) {
+    const { checked: c } = e == null ? void 0 : e.currentTarget;
+    this.isChecked = c;
+    const t = new CustomEvent(
+      k,
       {
         bubbles: !0,
         composed: !0,
         detail: this.isChecked
       }
     );
-    this.dispatchEvent(r);
+    this.dispatchEvent(t);
   }
   /**
    * Renders the label for a switch if provided.
@@ -68,73 +34,73 @@ class n extends f(v) {
    * @private
    */
   renderSwitchLabel() {
-    const { label: c, labelPlacement: e } = this;
-    return c ? d`
+    const { label: e, labelPlacement: c } = this;
+    return e ? n`
                 <label
                     for="switch"
-                    data-test-id="switch-label-${e}">
-                    ${c}
-                </label>` : d``;
+                    data-test-id="switch-label-${c}">
+                    ${e}
+                </label>` : n``;
   }
   render() {
     const {
-      labelPlacement: c,
-      aria: e,
-      isChecked: r,
-      isDisabled: t,
-      isRTL: s
-    } = this, o = "switch-description";
-    return d`
+      labelPlacement: e,
+      aria: c,
+      isChecked: t,
+      isDisabled: i,
+      isRTL: a
+    } = this, r = "switch-description";
+    return n`
             <div
                 class="c-switch-wrapper"
-                ?isRTL=${s}
-                ?isDisabled=${t}>
-                ${c === "leading" ? this.renderSwitchLabel() : a}
+                ?isRTL=${a}
+                ?isDisabled=${i}>
+                ${e === "leading" ? this.renderSwitchLabel() : s}
                 <label
                     data-test-id="switch-component"
                     class="c-switch"
-                    ?isChecked=${r}>
+                    ?isChecked=${t}>
                     <input
                         id="switch"
                         data-test-id="switch-input"
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        .checked="${r}"
-                        .disabled="${t}"
+                        .checked="${t}"
+                        .disabled="${i}"
                         @change="${this.onChange}"
-                        aria-label="${(e == null ? void 0 : e.label) || a}"
-                        aria-describedby="${e != null && e.describedBy ? o : a}">
+                        aria-label="${(c == null ? void 0 : c.label) || s}"
+                        aria-describedby="${c != null && c.describedBy ? r : s}">
                     <div class="c-switch-control">
-                        ${r ? d`<icon-check></icon-check>` : a}
+                        ${t ? n`<icon-check></icon-check>` : s}
                     </div>
                 </label>
-                ${e != null && e.describedBy ? d`<div id="${o}" data-test-id="${o}" class="c-switch-description">${e == null ? void 0 : e.describedBy}</div>` : a}
-                ${c === "trailing" ? this.renderSwitchLabel() : a}
+                ${c != null && c.describedBy ? n`<div id="${r}" data-test-id="${r}" class="c-switch-description">${c == null ? void 0 : c.describedBy}</div>` : s}
+                ${e === "trailing" ? this.renderSwitchLabel() : s}
             </div>
         `;
   }
 }
-n.styles = u(k);
-h([
-  l({ type: String })
-], n.prototype, "label", 2);
-h([
-  l({ type: String }),
-  g(w, y, "leading")
-], n.prototype, "labelPlacement", 2);
-h([
-  l({ type: Object })
-], n.prototype, "aria", 2);
-h([
-  l({ type: Boolean, reflect: !0 })
-], n.prototype, "isChecked", 2);
-h([
-  l({ type: Boolean, reflect: !0 })
-], n.prototype, "isDisabled", 2);
-m(w, n);
+o.styles = b(g);
+l([
+  d({ type: String })
+], o.prototype, "label", 2);
+l([
+  d({ type: String }),
+  u(p, m, "leading")
+], o.prototype, "labelPlacement", 2);
+l([
+  d({ type: Object })
+], o.prototype, "aria", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "isChecked", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "isDisabled", 2);
+f(p, o);
 export {
-  $ as ON_SWITCH_CHANGED_EVENT,
-  n as PieSwitch,
-  y as labelPlacements
+  k as ON_SWITCH_CHANGED_EVENT,
+  o as PieSwitch,
+  m as labelPlacements
 };

package/dist/react.js

@@ -1,11 +1,12 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
 import { PieSwitch as i } from "./index.js";
-import { ON_SWITCH_CHANGED_EVENT as n, labelPlacements as w } from "./index.js";
+import { ON_SWITCH_CHANGED_EVENT as w, labelPlacements as l } from "./index.js";
 import "lit";
 import "lit/decorators.js";
+import "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/IconCheck";
-const p = t({
+const s = t({
   displayName: "PieSwitch",
   elementClass: i,
   react: e,
@@ -16,7 +17,7 @@ const p = t({
   }
 });
 export {
-  n as ON_SWITCH_CHANGED_EVENT,
-  p as PieSwitch,
-  w as labelPlacements
+  w as ON_SWITCH_CHANGED_EVENT,
+  s as PieSwitch,
+  l as labelPlacements
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,11 +28,11 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.6.0"
+    "@justeattakeaway/pie-components-config": "0.6.1"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.11.1",
-    "@justeattakeaway/pie-webc-core": "0.12.0"
+    "@justeattakeaway/pie-icons-webc": "0.13.0",
+    "@justeattakeaway/pie-webc-core": "0.13.0"
   },
   "volta": {
     "extends": "../../../package.json"