@justeattakeaway/pie-checkbox 0.16.8 → 0.16.9

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 (7) hide show
  1. package/custom-elements.json +13 -4
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +44 -39
  4. package/dist/react.d.ts +1 -0
  5. package/package.json +3 -3
  6. package/src/checkbox.scss +25 -5
  7. package/src/index.ts +8 -0
package/custom-elements.json CHANGED
@@ -26,7 +26,7 @@
26
26
  "type": {
27
27
  "text": "DefaultProps"
28
28
  },
29
- "default": "{\r\n // a default value for the html <input type=\"checkbox\" /> value attribute.\r\n // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\r\n value: 'on',\r\n disabled: false,\r\n defaultChecked: false,\r\n checked: false,\r\n indeterminate: false,\r\n required: false,\r\n status: 'default',\r\n}"
29
+ "default": "{\n // a default value for the html <input type=\"checkbox\" /> value attribute.\n // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n value: 'on',\n disabled: false,\n defaultChecked: false,\n checked: false,\n indeterminate: false,\n required: false,\n status: 'default',\n}"
30
30
  }
31
31
  ],
32
32
  "exports": [
@@ -90,6 +90,15 @@
90
90
  "privacy": "private",
91
91
  "default": "false"
92
92
  },
93
+ {
94
+ "kind": "field",
95
+ "name": "_isAnimationAllowed",
96
+ "type": {
97
+ "text": "boolean"
98
+ },
99
+ "privacy": "private",
100
+ "default": "false"
101
+ },
93
102
  {
94
103
  "kind": "field",
95
104
  "name": "value",
@@ -179,7 +188,7 @@
179
188
  "text": "ValidityState"
180
189
  },
181
190
  "privacy": "public",
182
- "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
191
+ "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
183
192
  "readonly": true
184
193
  },
185
194
  {
@@ -211,7 +220,7 @@
211
220
  "description": "The latest disabled state of the input."
212
221
  }
213
222
  ],
214
- "description": "Called after the disabled state of the element changes,\r\neither because the disabled attribute of this element was added or removed;\r\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
223
+ "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
215
224
  },
216
225
  {
217
226
  "kind": "method",
@@ -237,7 +246,7 @@
237
246
  "text": "void"
238
247
  }
239
248
  },
240
- "description": "Called when the form that contains this component is reset.\r\nIf the current checked state is different to the default checked state,\r\nthe checked state is reset to the default checked state and a `change` event is emitted."
249
+ "description": "Called when the form that contains this component is reset.\nIf the current checked state is different to the default checked state,\nthe checked state is reset to the default checked state and a `change` event is emitted."
241
250
  }
242
251
  ],
243
252
  "events": [
package/dist/index.d.ts CHANGED
@@ -63,6 +63,7 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
63
63
  };
64
64
  private _disabledByParent;
65
65
  private _visuallyHiddenError;
66
+ private _isAnimationAllowed;
66
67
  value: string;
67
68
  name: CheckboxProps['name'];
68
69
  checked: boolean;
package/dist/index.js CHANGED
@@ -1,18 +1,18 @@
1
- import { LitElement as y, nothing as E, html as u, unsafeCSS as A } from "lit";
1
+ import { LitElement as y, nothing as E, html as m, unsafeCSS as B } from "lit";
2
2
  import { classMap as g } from "lit/directives/class-map.js";
3
- import { state as w, property as i, query as B } from "lit/decorators.js";
4
- import { ifDefined as m } from "lit/directives/if-defined.js";
5
- import { live as F } from "lit/directives/live.js";
6
- import { FormControlMixin as P, RtlMixin as q, wrapNativeEvent as D, validPropertyValues as S, safeCustomElement as O } from "@justeattakeaway/pie-webc-core";
3
+ import { state as u, property as i, query as F } from "lit/decorators.js";
4
+ import { ifDefined as f } from "lit/directives/if-defined.js";
5
+ import { live as P } from "lit/directives/live.js";
6
+ import { FormControlMixin as q, RtlMixin as D, wrapNativeEvent as S, validPropertyValues as O, safeCustomElement as T } from "@justeattakeaway/pie-webc-core";
7
7
  import "@justeattakeaway/pie-assistive-text";
8
8
  const k = class k extends y {
9
9
  willUpdate() {
10
10
  this.getAttribute("v") || this.setAttribute("v", k.v);
11
11
  }
12
12
  };
13
- k.v = "0.16.8";
13
+ k.v = "0.16.9";
14
14
  let p = k;
15
- const T = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--checked:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%;animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.c-checkbox-tick--checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.c-checkbox-tick--checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--rtl:before{left:unset;right:50%}.c-checkbox-tick.c-checkbox-tick--indeterminate:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);line-height:var(--checkbox-line-height);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick.c-checkbox-tick--rtl:after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: calc(var(--dt-font-body-l-size) * 1px);--checkbox-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-border-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.is-disabled:hover .c-checkbox-tick,.c-checkbox.is-disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:active{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}', z = ["default", "success", "error"], a = {
15
+ const z = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--allow-animation{animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--allow-animation.c-checkbox-tick--checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--checked:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.c-checkbox-tick--checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.c-checkbox-tick--checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--allow-animation:before{animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}.c-checkbox-tick.c-checkbox-tick--checked:not(.c-checkbox-tick--allow-animation):before{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--rtl:before{left:unset;right:50%}.c-checkbox-tick.c-checkbox-tick--indeterminate:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);line-height:var(--checkbox-line-height);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick.c-checkbox-tick--rtl:after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: calc(var(--dt-font-body-l-size) * 1px);--checkbox-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-border-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.is-disabled:hover .c-checkbox-tick,.c-checkbox.is-disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:active{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}', H = ["default", "success", "error"], a = {
16
16
  // a default value for the html <input type="checkbox" /> value attribute.
17
17
  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
18
18
  value: "on",
@@ -23,15 +23,15 @@ const T = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes
23
23
  required: !1,
24
24
  status: "default"
25
25
  };
26
- var H = Object.defineProperty, R = Object.getOwnPropertyDescriptor, e = (c, r, l, s) => {
27
- for (var t = s > 1 ? void 0 : s ? R(r, l) : r, h = c.length - 1, b; h >= 0; h--)
28
- (b = c[h]) && (t = (s ? b(r, l, t) : b(t)) || t);
29
- return s && t && H(r, l, t), t;
26
+ var R = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (c, r, l, n) => {
27
+ for (var t = n > 1 ? void 0 : n ? L(r, l) : r, h = c.length - 1, s; h >= 0; h--)
28
+ (s = c[h]) && (t = (n ? s(r, l, t) : s(t)) || t);
29
+ return n && t && R(r, l, t), t;
30
30
  };
31
- const L = "pie-checkbox", f = "assistive-text";
32
- let o = class extends P(q(p)) {
31
+ const I = "pie-checkbox", w = "assistive-text";
32
+ let o = class extends q(D(p)) {
33
33
  constructor() {
34
- super(...arguments), this._disabledByParent = !1, this._visuallyHiddenError = !1, this.value = a.value, this.checked = a.checked, this.defaultChecked = a.defaultChecked, this.disabled = a.disabled, this.required = a.required, this.indeterminate = a.indeterminate, this.status = a.status;
34
+ super(...arguments), this._disabledByParent = !1, this._visuallyHiddenError = !1, this._isAnimationAllowed = !1, this.value = a.value, this.checked = a.checked, this.defaultChecked = a.defaultChecked, this.disabled = a.disabled, this.required = a.required, this.indeterminate = a.indeterminate, this.status = a.status;
35
35
  }
36
36
  connectedCallback() {
37
37
  super.connectedCallback(), this._abortController = new AbortController();
@@ -76,8 +76,8 @@ let o = class extends P(q(p)) {
76
76
  */
77
77
  _handleChange(c) {
78
78
  const { checked: r } = c == null ? void 0 : c.currentTarget;
79
- this.checked = r;
80
- const l = D(c);
79
+ this.checked = r, this._isAnimationAllowed || (this._isAnimationAllowed = !0);
80
+ const l = S(c);
81
81
  this.dispatchEvent(l), this._handleFormAssociation();
82
82
  }
83
83
  /**
@@ -97,42 +97,44 @@ let o = class extends P(q(p)) {
97
97
  checked: c,
98
98
  value: r,
99
99
  name: l,
100
- disabled: s,
100
+ disabled: n,
101
101
  _disabledByParent: t,
102
102
  _visuallyHiddenError: h,
103
- required: b,
103
+ _isAnimationAllowed: s,
104
+ required: _,
104
105
  indeterminate: x,
105
106
  assistiveText: v,
106
107
  status: d,
107
108
  isRTL: C
108
- } = this, n = s || t, _ = {
109
+ } = this, b = n || t, A = {
109
110
  "c-checkbox": !0,
110
- [`c-checkbox--status-${d}`]: !n,
111
- "is-disabled": n,
111
+ [`c-checkbox--status-${d}`]: !b,
112
+ "is-disabled": b,
112
113
  "c-checkbox--checked": c,
113
114
  "c-checkbox--indeterminate": x && !c
114
115
  }, $ = {
115
116
  "c-checkbox-tick": !0,
116
- [`c-checkbox-tick--status-${d}`]: !n,
117
- "is-disabled": n,
117
+ [`c-checkbox-tick--status-${d}`]: !b,
118
+ "is-disabled": b,
118
119
  "c-checkbox-tick--checked": c,
119
120
  "c-checkbox-tick--indeterminate": x && !c,
121
+ "c-checkbox-tick--allow-animation": s,
120
122
  "c-checkbox-tick--rtl": C
121
123
  };
122
- return u`
124
+ return m`
123
125
  <div
124
- class="${g(_)}">
126
+ class="${g(A)}">
125
127
  <input
126
128
  type="checkbox"
127
129
  id="inputId"
128
130
  .value=${r}
129
- .checked=${F(c)}
130
- name=${m(l)}
131
- ?disabled=${n}
132
- ?required=${b}
131
+ .checked=${P(c)}
132
+ name=${f(l)}
133
+ ?disabled=${b}
134
+ ?required=${_}
133
135
  .indeterminate=${x}
134
136
  aria-invalid=${d === "error" ? "true" : "false"}
135
- aria-describedby=${m(v ? f : void 0)}
137
+ aria-describedby=${f(v ? w : void 0)}
136
138
  @change=${this._handleChange}
137
139
  data-test-id="pie-checkbox-input"
138
140
  />
@@ -143,9 +145,9 @@ let o = class extends P(q(p)) {
143
145
  <slot></slot>
144
146
  </span>
145
147
  </label>
146
- ${v ? u`
148
+ ${v ? m`
147
149
  <pie-assistive-text
148
- id="${f}"
150
+ id="${w}"
149
151
  variant=${d}
150
152
  ?isVisuallyHidden=${h}
151
153
  data-test-id="pie-checkbox-assistive-text">
@@ -155,13 +157,16 @@ let o = class extends P(q(p)) {
155
157
  }
156
158
  };
157
159
  o.shadowRootOptions = { ...y.shadowRootOptions, delegatesFocus: !0 };
158
- o.styles = A(T);
160
+ o.styles = B(z);
159
161
  e([
160
- w()
162
+ u()
161
163
  ], o.prototype, "_disabledByParent", 2);
162
164
  e([
163
- w()
165
+ u()
164
166
  ], o.prototype, "_visuallyHiddenError", 2);
167
+ e([
168
+ u()
169
+ ], o.prototype, "_isAnimationAllowed", 2);
165
170
  e([
166
171
  i({ type: String })
167
172
  ], o.prototype, "value", 2);
@@ -184,20 +189,20 @@ e([
184
189
  i({ type: Boolean, reflect: !0 })
185
190
  ], o.prototype, "indeterminate", 2);
186
191
  e([
187
- B('input[type="checkbox"]')
192
+ F('input[type="checkbox"]')
188
193
  ], o.prototype, "_checkbox", 2);
189
194
  e([
190
195
  i({ type: String })
191
196
  ], o.prototype, "assistiveText", 2);
192
197
  e([
193
198
  i({ type: String }),
194
- S(L, z, a.status)
199
+ O(I, H, a.status)
195
200
  ], o.prototype, "status", 2);
196
201
  o = e([
197
- O("pie-checkbox")
202
+ T("pie-checkbox")
198
203
  ], o);
199
204
  export {
200
205
  o as PieCheckbox,
201
206
  a as defaultProps,
202
- z as statusTypes
207
+ H as statusTypes
203
208
  };
package/dist/react.d.ts CHANGED
@@ -66,6 +66,7 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
66
66
  };
67
67
  private _disabledByParent;
68
68
  private _visuallyHiddenError;
69
+ private _isAnimationAllowed;
69
70
  value: string;
70
71
  name: CheckboxProps['name'];
71
72
  checked: boolean;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-checkbox",
3
3
  "description": "PIE Design System Checkbox built using Web Components",
4
- "version": "0.16.8",
4
+ "version": "0.16.9",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -40,8 +40,8 @@
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
42
  "@justeattakeaway/pie-components-config": "0.20.1",
43
- "@justeattakeaway/pie-css": "0.17.0",
44
- "@justeattakeaway/pie-monorepo-utils": "0.5.1",
43
+ "@justeattakeaway/pie-css": "0.18.0",
44
+ "@justeattakeaway/pie-monorepo-utils": "0.6.0",
45
45
  "cem-plugin-module-file-extensions": "0.0.5"
46
46
  },
47
47
  "dependencies": {
package/src/checkbox.scss CHANGED
@@ -69,7 +69,12 @@
69
69
  transition:
70
70
  background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
71
71
  border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
72
- animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
72
+ }
73
+
74
+ &.c-checkbox-tick--allow-animation {
75
+ @media (prefers-reduced-motion: no-preference) {
76
+ animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
77
+ }
73
78
  }
74
79
 
75
80
  &.is-disabled {
@@ -81,11 +86,13 @@
81
86
  --checkbox-border-color: var(--dt-color-support-error);
82
87
  }
83
88
 
84
- &.c-checkbox-tick--checked {
89
+ &.c-checkbox-tick--allow-animation.c-checkbox-tick--checked {
85
90
  @media (prefers-reduced-motion: no-preference) {
86
91
  animation: scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing);
87
92
  }
93
+ }
88
94
 
95
+ &.c-checkbox-tick--checked {
89
96
  &:not(.is-disabled) {
90
97
  --checkbox-bg-color: var(--dt-color-interactive-brand);
91
98
  --checkbox-border-color: var(--checkbox-bg-color);
@@ -106,8 +113,7 @@
106
113
  border-bottom: 2px solid transparent;
107
114
  transform: rotate(45deg);
108
115
  transform-origin: 0% 100%;
109
- animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
110
-
116
+
111
117
  @media (prefers-reduced-motion: reduce) {
112
118
  animation-duration: 1ms !important;
113
119
  animation-delay: 0 !important;
@@ -118,7 +124,7 @@
118
124
  border-bottom-right-radius: 2px;
119
125
  transform: translate3d(0, -16px, 0) rotate(45deg);
120
126
  }
121
-
127
+
122
128
  @media only percy {
123
129
  animation: none;
124
130
  width: 8px;
@@ -129,6 +135,20 @@
129
135
  }
130
136
  }
131
137
 
138
+
139
+ &.c-checkbox-tick--checked.c-checkbox-tick--allow-animation:before {
140
+ animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
141
+ }
142
+
143
+ &.c-checkbox-tick--checked:not(.c-checkbox-tick--allow-animation):before {
144
+ width: 8px;
145
+ height: 16px;
146
+ border-color: #fff;
147
+ border-bottom-right-radius: 2px;
148
+ transform: translate3d(0, -16px, 0) rotate(45deg);
149
+ }
150
+
151
+
132
152
  &.c-checkbox-tick--checked.c-checkbox-tick--rtl:before {
133
153
  left: unset;
134
154
  right: 50%;
package/src/index.ts CHANGED
@@ -40,6 +40,9 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
40
40
  @state()
41
41
  private _visuallyHiddenError = false;
42
42
 
43
+ @state()
44
+ private _isAnimationAllowed = false;
45
+
43
46
  @property({ type: String })
44
47
  public value = defaultProps.value;
45
48
 
@@ -127,6 +130,9 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
127
130
  private _handleChange (event: Event) {
128
131
  const { checked } = event?.currentTarget as HTMLInputElement;
129
132
  this.checked = checked;
133
+ if (!this._isAnimationAllowed) {
134
+ this._isAnimationAllowed = true;
135
+ }
130
136
  // This is because some events set `composed` to `false`.
131
137
  // Reference: https://javascript.info/shadow-dom-events#event-composed
132
138
  const customChangeEvent = wrapNativeEvent(event);
@@ -161,6 +167,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
161
167
  disabled,
162
168
  _disabledByParent,
163
169
  _visuallyHiddenError,
170
+ _isAnimationAllowed,
164
171
  required,
165
172
  indeterminate,
166
173
  assistiveText,
@@ -184,6 +191,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
184
191
  'is-disabled': componentDisabled,
185
192
  'c-checkbox-tick--checked': checked,
186
193
  'c-checkbox-tick--indeterminate': indeterminate && !checked,
194
+ 'c-checkbox-tick--allow-animation': _isAnimationAllowed,
187
195
  'c-checkbox-tick--rtl': isRTL,
188
196
  };
189
197