@justeattakeaway/pie-switch 2.4.0 → 2.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +14 -14
- package/package.json +5 -5
- package/src/switch.scss +2 -12
package/dist/index.js
CHANGED
|
@@ -9,7 +9,7 @@ const O = class O extends St {
|
|
|
9
9
|
this.getAttribute("v") || this.setAttribute("v", O.v);
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
O.v = "2.4.
|
|
12
|
+
O.v = "2.4.2";
|
|
13
13
|
let q = O;
|
|
14
14
|
var dt = {}, ht;
|
|
15
15
|
function Rt() {
|
|
@@ -73,11 +73,11 @@ function Rt() {
|
|
|
73
73
|
});
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
|
-
function
|
|
76
|
+
function J(e) {
|
|
77
77
|
const t = c.get(e), { form: i } = t;
|
|
78
78
|
et(e, i, t), tt(e, t.labels);
|
|
79
79
|
}
|
|
80
|
-
const
|
|
80
|
+
const Q = (e, t = !1) => {
|
|
81
81
|
const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
|
|
82
82
|
acceptNode(o) {
|
|
83
83
|
return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
@@ -87,10 +87,10 @@ function Rt() {
|
|
|
87
87
|
const r = !t || e.disabled;
|
|
88
88
|
for (; a; )
|
|
89
89
|
a.formDisabledCallback && r && $(a, e.disabled), a = i.nextNode();
|
|
90
|
-
},
|
|
90
|
+
}, X = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = T() ? new MutationObserver((e) => {
|
|
91
91
|
for (const t of e) {
|
|
92
92
|
const i = t.target;
|
|
93
|
-
if (t.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" &&
|
|
93
|
+
if (t.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Q(i)), t.attributeName === "name" && i.constructor.formAssociated) {
|
|
94
94
|
const a = c.get(i), r = B.get(i);
|
|
95
95
|
a.setFormValue(r);
|
|
96
96
|
}
|
|
@@ -101,7 +101,7 @@ function Rt() {
|
|
|
101
101
|
const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), o = Array.from(a);
|
|
102
102
|
r.forEach((s) => {
|
|
103
103
|
var u;
|
|
104
|
-
if (c.has(s) && s.constructor.formAssociated &&
|
|
104
|
+
if (c.has(s) && s.constructor.formAssociated && J(s), A.has(s)) {
|
|
105
105
|
const d = A.get(s);
|
|
106
106
|
Object.keys(F).filter((b) => d[b] !== null).forEach((b) => {
|
|
107
107
|
s.setAttribute(F[b], d[b]);
|
|
@@ -119,12 +119,12 @@ function Rt() {
|
|
|
119
119
|
});
|
|
120
120
|
let b = w.nextNode();
|
|
121
121
|
for (; b; )
|
|
122
|
-
|
|
122
|
+
J(b), b = w.nextNode();
|
|
123
123
|
}
|
|
124
|
-
s.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, s,
|
|
124
|
+
s.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, s, X), Q(s, !0));
|
|
125
125
|
}), o.forEach((s) => {
|
|
126
126
|
const u = c.get(s);
|
|
127
|
-
u && m.get(u) &&
|
|
127
|
+
u && m.get(u) && Y(u), _.has(s) && _.get(s).disconnect();
|
|
128
128
|
});
|
|
129
129
|
});
|
|
130
130
|
}
|
|
@@ -148,7 +148,7 @@ function Rt() {
|
|
|
148
148
|
subtree: !0
|
|
149
149
|
}, $ = (e, t) => {
|
|
150
150
|
e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
|
|
151
|
-
},
|
|
151
|
+
}, Y = (e) => {
|
|
152
152
|
m.get(e).forEach((i) => {
|
|
153
153
|
i.remove();
|
|
154
154
|
}), m.set(e, []);
|
|
@@ -157,7 +157,7 @@ function Rt() {
|
|
|
157
157
|
return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), m.get(t).push(i), i;
|
|
158
158
|
}, bt = (e, t) => {
|
|
159
159
|
var i;
|
|
160
|
-
m.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e,
|
|
160
|
+
m.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e, X);
|
|
161
161
|
}, tt = (e, t) => {
|
|
162
162
|
if (t.length) {
|
|
163
163
|
Array.from(t).forEach((a) => a.addEventListener("click", e.click.bind(e)));
|
|
@@ -365,7 +365,7 @@ function Rt() {
|
|
|
365
365
|
}
|
|
366
366
|
setFormValue(t) {
|
|
367
367
|
const i = n.get(this);
|
|
368
|
-
if (v(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."),
|
|
368
|
+
if (v(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
|
|
369
369
|
if (i.getAttribute("name")) {
|
|
370
370
|
const a = Z(i, this);
|
|
371
371
|
a.value = t;
|
|
@@ -484,7 +484,7 @@ function Rt() {
|
|
|
484
484
|
})()), dt;
|
|
485
485
|
}
|
|
486
486
|
Rt();
|
|
487
|
-
const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);vertical-align:top;font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--int-states-mixin-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(--int-states-mixin-bg-color)}.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--hover-modifier)))}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-form))}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-form))}}.c-switch[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}[disabled] .c-switch{--int-states-mixin-bg-color: var(--switch-bg-color--disabled);pointer-events:none}.c-switch:has(.c-switch-input:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch-input{position:absolute;
|
|
487
|
+
const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);vertical-align:top;font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--int-states-mixin-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(--int-states-mixin-bg-color)}@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--hover-modifier)))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-form))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-form))}}.c-switch[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}[disabled] .c-switch{--int-states-mixin-bg-color: var(--switch-bg-color--disabled);pointer-events:none}.c-switch:has(.c-switch-input:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch-input{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-input *{overflow:hidden}.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)}.c-switch-wrapper:dir(rtl) .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}.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)}.c-switch-label{color:var(--dt-color-content-default-solid)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-description *{overflow:hidden}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:disabled~.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper:dir(rtl) .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}", Wt = ["leading", "trailing"], Yt = "change", M = {
|
|
488
488
|
checked: !1,
|
|
489
489
|
disabled: !1,
|
|
490
490
|
labelPlacement: "leading",
|
|
@@ -681,7 +681,7 @@ p = f([
|
|
|
681
681
|
$t("pie-switch")
|
|
682
682
|
], p);
|
|
683
683
|
export {
|
|
684
|
-
|
|
684
|
+
Yt as ON_SWITCH_CHANGED_EVENT,
|
|
685
685
|
p as PieSwitch,
|
|
686
686
|
M as defaultProps,
|
|
687
687
|
Wt as labelPlacements
|
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": "2.4.
|
|
4
|
+
"version": "2.4.2",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -44,13 +44,13 @@
|
|
|
44
44
|
"license": "Apache-2.0",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@justeattakeaway/pie-components-config": "0.21.3",
|
|
47
|
-
"@justeattakeaway/pie-css": "1.
|
|
48
|
-
"@justeattakeaway/pie-monorepo-utils": "0.9.
|
|
47
|
+
"@justeattakeaway/pie-css": "1.2.0",
|
|
48
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.5",
|
|
49
49
|
"@justeattakeaway/pie-wrapper-react": "0.14.5"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
53
|
-
"@justeattakeaway/pie-webc-core": "
|
|
52
|
+
"@justeattakeaway/pie-icons-webc": "1.25.1",
|
|
53
|
+
"@justeattakeaway/pie-webc-core": "15.0.0",
|
|
54
54
|
"element-internals-polyfill": "1.3.11"
|
|
55
55
|
},
|
|
56
56
|
"customElements": "custom-elements.json",
|
package/src/switch.scss
CHANGED
|
@@ -69,17 +69,7 @@
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.c-switch-input {
|
|
72
|
-
|
|
73
|
-
width: 1px;
|
|
74
|
-
height: 1px;
|
|
75
|
-
margin: -1px;
|
|
76
|
-
padding: 0;
|
|
77
|
-
overflow: hidden;
|
|
78
|
-
clip: rect(0, 0, 0, 0);
|
|
79
|
-
border: 0;
|
|
80
|
-
left: 50%;
|
|
81
|
-
transform: translateX(-50%) translateY(-50%);
|
|
82
|
-
bottom: 0;
|
|
72
|
+
@include p.visually-hidden;
|
|
83
73
|
|
|
84
74
|
&:disabled {
|
|
85
75
|
background-color: transparent;
|
|
@@ -166,4 +156,4 @@
|
|
|
166
156
|
.c-switch-input:checked + .c-switch-control {
|
|
167
157
|
transform: translateX(calc(-1 * var(--switch-translation)));
|
|
168
158
|
}
|
|
169
|
-
}
|
|
159
|
+
}
|